Supporting multiple screen sizes

11

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 Fullscreen-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.

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.

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:

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.

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:

However if the window is resized to an unusual size, the game displays incorrectly:

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:

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:

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?"

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.

  • 4 Comments

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