Canvas

The canvas is an infinite area where you place your objects so they exist within your scene.

There are 2 areas on the canvas. The Visible Screen Space and the Off Screen Space.

Visible Screen Space:

The visible screen space is represented by the green rectangle on the canvas. Anything placed within the green rectangle will appear onscreen when you press play.

 Be aware that the visible screen space changes for each device, and aspect ratio you support. For example, if you are making an iPhone game there are 2 different visible screen areas. One for the original iPhones( 3:2 aspect ratio), and one for iPhone 5 and newer (16:9 Aspect Ratio).

You can quickly switch between your supported aspect ratios by tapping the cycle device icon on the Tool Palette. 

 

Off Screen Space

As you may have guessed, anything placed outside of the green box is in the off screen space and will not be visible when you run your project.

Remember, all objects placed off screen will still exist in your scene, and still be running. This means all behaviors will continue to execute, sounds and animations will play. etc. They will continue to function normally, the player just can not see them.

Once again, you must be aware of the different device aspect ratios. On certain aspect ratios, an object may end up on screen. If you intend to keep it off screen, then look into moving the object for certain screen sizes (using the Get Screen Behavior), or use percent based positioning.

Keep in mind that objects off screen continue to take up resources. Since these off screen objects are still being executed, they could negatively impact the performance of your app. If you are noticing performance issues, try reusing objects by moving them where needed, or destroying/disabling objects that are no longer needed in your scene.

Screen Coordinates

The coordinate system of hyperPad is based off the bottom left corner of the original visible screen space. If you move the screen position, this does not change the coordinate system. Meaning the origin position (x:0, y: 0) is still in the original position. If you turn on the grid from the Tool Palette, you can see the origin point represented by intersecting blue lines.

Note, that for UI layers (screen UI and Global UI) the origin position (x:0, y:0) is always the bottom left corner of the screen (green rectangle).