Supporting multiple screen sizes

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

Virtually every game has to work on a different sized screen. This can be different size phone screens - which can even vary across different versions of the same device, like the iPhone 4S vs. iPhone 5 - different size tablet screens, resized browser windows, monitor resolutions, and so on. Even fixed-size games running embedded in a page can switch in to fullscreen mode, which means they still need to support different size displays.

This means almost every game should have a way to support multiple screen sizes, whether intended for desktop or mobile. This tutorial will cover the basics of supporting multiple screen sizes.

The short version: don't target one resolution

A common misconception is that you need to target a specific resolution, like 1280x720. However, there are so many different resolutions used that it's ridiculous to pick just one. It's much better to pick an aspect ratio, then scale the game to fit that. For example, instead of 1280x720, target the 16:9 aspect ratio. (Just enter any 16:9 resolution for the window size in Project Properties.) Enable Letterbox scale in the Fullsceeen-in-browser project property, and now your game should appear correctly on any 16:9 resolution. If the display is not 16:9 then black bars appear down the sides, which helps prevent unintended display issues like accidentally seeing too much of the level or menu screen. Note if you are designing a pixellated retro-style game, you may want to use Letterbox integer scale instead.

The rest of this tutorial will cover the tools available to you in more detail. It's still worth reading even if you use the quick solution above. You can even support different aspect ratios if you are willing to design your game more carefully.

Using a fullscreen mode

In Project Properties, set one of the Fullscreen in Browser modes.

With this mode set to Off, the game appears embedded within a HTML page at the size given by Window size. However, it won't support any different size screens. If you use the Browser object's Request fullscreen action, you'll still need to support different screen sizes anyway.

Crop mode

In crop mode the view stays at the same scale, and simply shows more or less of the layout depending on the window size. The images below shows a small window in crop mode. The player appears the same size, but there is less of the layout visible.

Fullscreen in crop mode.
If the window is resized larger, much more of the layout can be seen. Notice how now the window is larger, the player can spot the monsters further away.

Fullscreen in crop mode.


This mode allows you to control scaling yourself, or simply ignore scaling. However, this mode is generally not good for games. Consider the iPhone and iPad which have the same physical size screen, but at different resolutions depending on the generation. Since Crop mode doesn't do any scaling, it can make your game look strangely small on high resolution devices.

Letterbox scale mode

Letterbox scale mode simply scales the game to fit the window. If the aspect ratio does not match, black bars appear down the sides of the window. Here are two examples:

Letterbox scale example 1
Letterbox scale example 2
Since black bars appear down the side, it avoids the problem of accidentally showing content that's supposed to be offscreen. However, the disadvantage is that some users lose some of their viewing area to the black bars. Despite this, Letterbox scale mode can be applied to almost any game and have it still work correctly, so is a quick and easy way to support different screen sizes without having to alter it for different aspect ratios.

Letterbox integer scale

Letterbox integer scale mode is identical to Letterbox scale mode, preserving the aspect ratio, but it also only zooms to an integer scale. For example it will only scale at 1x, 2x, 3x, 4x etc. and never at something like 2.5x. This is important for games using Point sampling (usually retro style) to preserve exact pixel-perfect accuracy when scaling the game. This also means black bars can appear at both the sides and top and bottom.

Letterbox integer scale example 1
Letterbox integer scale example 2

Scale outer mode

Scale outer mode scales the view to fit the window size, just like Letterbox fullscreen does. However, instead of showing black bars, it uses the full display and shows more of the layout. This has the side-effect of sometimes displaying more of the layout than the window size. This can mean empty space or supposedly off-screen objects can appear down the sides of the screen if you don't design your game accordingly.

Notice how the game is scaled down with a small window, without showing black bars:

Fullscreen in scaling mode.
However if the window is resized to an unusual size, the game displays incorrectly:

Scale mode with bad aspect ratio.
The game has scaled appropriately, but the aspect ratio is so wildly different that you can see past the right edge of the layout. Not only that but the player can already see some monsters they couldn't see before, so this might count as cheating. With Letterbox fullscreen this would have been covered up by the black bars, which is why it's often preferable to use letterbox mode.

However if you are targeting specific devices with non-resizable windows, you can use this mode to support different aspect ratios. But the problem above still applies; you will need to do things like draw backgrounds bigger than the window size to ensure empty space doesn't appear on certain displays, and thoroughly test the game to ensure nothing unintentional occurs with the game's appearance.

For more information, see the section A common gotcha - aspect ratios below.

Scale inner mode

Like Scale outer, this mode scales the view and uses the full display. However it handles aspect ratios differently: whereas Scale outer shows more of the layout if the aspect ratio is different, Scale inner shows less. Since it prefers to cut off parts of the view, it never accidentally shows content outside the window... but you still have the opposite problem - it might cut off something that you want to be seen!

Here's an example where the game displays correctly when scaled down evenly:

Scale Inner mode
If we use the same unusual size that we did with 'Scale outer', notice how it zooms in and cuts off parts of the view instead of showing us too much:

Scale Inner mode
This is a better result than Scale outer, but now we need to be aware of parts of the game being cut off on some window sizes. The above view is like only seeing a narrow bar across the game's window size. One technique this is useful for is designing games for the 16:9 aspect ratio, but having the sides cut off when viewed in 4:3. Some movie producers do this with films.

A common gotcha - aspect ratios

Letterbox scale or Letterbox integer scale are easy ways to get your game to work on a wide range of screen sizes without having to do much work. However, the disadvantage is that black bars appear. This can be annoying for mobile users who have a small screen already, and don't want their display size to be any smaller than necessary. Additionally, it can look unprofessional if a device's aspect ratio is only slightly different to the game's aspect ratio - thin black bars will appear down the sides, which appear to be unnecessary - the user might wonder "why wasn't the display simply extended to show the full area?"

Thin black bars in letterbox mode.
In order to support this case with a full display, you need to use Scale outer or Scale inner mode instead of Letterbox scale mode. This then means you need to support multiple aspect ratios as well.

This is the same problem faced by TV producers. There are many TVs out there using aspect ratios of 4:3, 16:9 and 16:10. If a producer films a TV show only in 4:3, on a 16:9 TV there will be gaps at the sides, or possibly even unintended off-set equipment and crew visible! Similarly, if you draw a background exactly fitting one display, then run it with Scale outer mode on another display with a slightly different aspect ratio, gaps will appear at the side or content outside the layout becomes visible. This can even happen if you simply don't take in to account the space taken up by the status bar on devices like the iPhone.

There are two ways to solve this problem:
1) Use Scale outer mode, and draw your backgrounds wider (or taller, depending on orientation) than the window size, past the normally viewable edges, to ensure no gaps ever appear regardless of the device aspect ratio.
2) Use Scale inner mode, and make sure nothing important is close to the edges, since the edges are susceptible to being cut off on different size displays.

It's not always easy to design a game correctly using either technique. However it allows you to design games that always use the full display, which often looks better than showing black bars.

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.5k 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.