Supporting multiple screen sizes

Favourite 181 favourites
Tutorial written by AshleyOriginally published on 29th, October 2011 - 18 revisions

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.

Making a UI layer.
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.

The Anchor behavior
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!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

4
EYFonline 3,150 rep

Great tutorial

Saturday, November 26, 2011 at 11:15:11 AM
5
Bigheti 12.6k rep

I was looking for ... thank you for this excellent and practical tutorial (as always).

Saturday, December 10, 2011 at 1:51:52 PM
3
Lordxorn2 3,232 rep

Great tutorial on something that has always mystified me!

Monday, December 26, 2011 at 7:56:55 AM
3
Mastasurf 2,472 rep

Is there a way to toggle full screen mode? For example, if I wanted to full screen mode on mobile devices, but not on normal browsers.

Sunday, February 26, 2012 at 12:50:26 AM
4
krish 4,379 rep

I tried this in r80.2, but it leaves white space on top, left and right of my background.

My layout and window size both are 1366x768 and so is the background image.

Any one know the reason?

Saturday, March 03, 2012 at 8:32:51 PM
2
Ashley 112.8k rep

@krish can you post your .capx to the forum?

Sunday, March 04, 2012 at 12:29:15 AM
3
krish 4,379 rep

@Ashley

Here you go..

http://www.scirra.com/forum/topic49742_post313129.html#313129

3rd post in that list ^

Thks for taking time :)

Sunday, March 04, 2012 at 5:58:15 AM
3
Blue Hare 2,462 rep

"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)."

Is't it the opposite? When you set unbounded scrolling to NO you can limit scrolling with solid objects.

Monday, April 09, 2012 at 5:01:54 PM
4
enginterzi 2,310 rep

Ok Guys my phonegap app size :

On the Android No problem without top bar.
Window Size : 2610,1736
Game Layout size 2610,1736

It s looking good no gap nothing.

Wednesday, April 11, 2012 at 2:31:10 PM
4
iggyvolz 2,188 rep

@Mastasurf You must add the Browser object to go full-screen. If you want to see if the device is mobile, use event System.Is on mobile device

Saturday, April 14, 2012 at 6:45:44 PM
3
Mastasurf 2,472 rep

@iggyvolz Thank you!

Thursday, May 03, 2012 at 4:16:38 PM
3
ssusnic 3,009 rep

And how to clip objects which are placed on an edge or outside of the layout to be shown only partially or fully invisible? All these objects are currently displayed on the outside black area in the fullscreen - scaling mode!

Sunday, May 13, 2012 at 9:04:57 AM
3
xappso 2,213 rep

For me it Looks like "Keeping the UI or HUD in place" is not working. When ever I am doing the Fullscreen Mode I am not seeing the HUD. I also tried the example in the Product. Fullscreen - scaling to window size.capx

Sunday, May 20, 2012 at 6:07:32 PM
8
SPX 2,313 rep

I'm a bit confused...if I want to support most mobile devices which size should I change....project or layout size?

Tuesday, May 22, 2012 at 7:13:47 AM
4
supergodjesus 4,256 rep

Very useful - I was having a hard time understanding scale and crop, but this cleared it up!

Thursday, May 24, 2012 at 3:06:10 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.