Supporting multiple screen sizes

11

Keeping the UI or HUD in place

Often your game has UI elements (aka HUD) such as health, ammo or other information that should always be on the same place on the screen.

To set this up, create a new layer and set its Parallax to 0,0. If you also want to stop the UI scaling with the game, set its Scale rate to 0 as well.

Make sure all your UI objects are placed on this layer. Position them in the top left of the layout, inside the dashed rectangle that represents the window area. Now they should stay in the same place on the screen, like the "Score" text on the previous page's pictures.

The Anchor behavior

If you place an object in the bottom-right of the window and resize the window, you'll notice it doesn't move. To get it to stay relative to the bottom-right of the visible window, you can use the Anchor behavior, to "anchor" it to a position on-screen.

Note the Anchor behavior is intended to be used for objects on a non-scrolling layer - that is, with the parallax set to 0, 0 as described above.

By setting the Left edge and Right edge to Window right or Window bottom you can align objects with either the right edge of the window, the bottom edge, or the bottom-right corner. By default objects align with the window top-left.

If you have form controls or other objects you want to get wider or taller as the window gets bigger, you can also anchor the Right edge and Bottom edge. However, if you don't want your object to resize, leave them both set to None.

Other useful features

The WindowWidth and WindowHeight system expressions return the current size of the window in pixels. You might want to hide or show objects depending on the size of the window, enable different features for very small screens, or show a different kind of UI for very large screens.

The ViewportLeft, ViewportRight, ViewportTop and ViewportBottom system expressions can return the co-ordinates of the viewport for a given layer. To center an object in the display, you'll want to position it to (ViewportLeft("Layer") + ViewportRight("Layer")) / 2 and (ViewportTop("Layer") + ViewportBottom("Layer")) / 2.

Also, with fullscreen in scaling mode, you may find the layout boundaries cause problems with scrolling. In that case you might want to try setting Unbounded scrolling to Yes for the layout, and limit the scrolling yourself (e.g. by surrounding the layout with solid objects).

Switching to fullscreen during the game

The Browser object has a Request fullscreen action. This can also enter fullscreen when Fullscreen in browser is Off (when the game appears embedded in a HTML page). You also have the option of simply centering, or using crop, scale, letterbox scale or letterbox integer scale resize modes to fill the entire screen. These correspond to the Fullscreen in browser settings. When doing this your game window size will also change, so it's important to support multiple screen sizes when using this.

Note that for security reasons the Request fullscreen action only works in a user-inputted event, such as pressing a key on the keyboard or clicking a Button object.

Be sure to test!

You should test your game on a variety of devices to see how well it works. It's common to change the kind of UI that is being displayed depending on the window size. This can be quite a lot of work to set up. Alternatively, for a simple game you might be able to get the same UI working on all screen sizes. It depends on the game.

You can also test over Wifi or your LAN by previewing on a local network. This can make it much quicker and easier to get it working right on real devices.

The largest display size is 2048 x 1536 on the third generation iPad, and the smallest is around the size 320 x 480 for iPhone 3 and earlier. So that's quite a range! Make sure you try them all out. You don't want your game unplayable on some screens because buttons have disappeared or have become too small to press!

  • 4 Comments

  • Order by
Want to leave a comment? Login or Register an account!