Suporte a múltiplos tamanhos de tela

Favourite 397 favourites
Tutorial written by AshleyOriginally published on 29th, October 2011 - 19 revisions

Translation Team:

4 total revisions

Virtualmente todo jogo deve trabalhar em diferentes tamanhos de tela. Podem ser diferentes tamanhos de telas em telefones - que podem possuir uma variedade de versões para um mesmo dispositivo, como iPhone 4S vs. iPhone 5 - diferentes tamanhos de telas em tablet's, redimencionamento de janelas dos browsers, resoluções de monitores, e assim por diante. Mesmo jogos de tamanho fixo embarcados em páginas podem mudar para o modo tela cheia, isso significa que ainda necessitam suportar diferentes tamanhos de telas.

Isso significa que quase todos os jogos deve ter uma maneira de suportar vários tamanhos de tela, seja destinado para desktop ou móvel. Este tutorial irá cobrir o básico de suporte a vários tamanhos de tela.

Resumindo: não determine uma resolução

Um equívoco comum é que você precisa para atingir uma resolução específica, como 1280x720. No entanto, são utilizadas tantas resoluções diferentes ​que é ridículo escolher apenas uma. É muito melhor escolher uma proporção , por conseguinte uma escala a qual jogo deverá ajustar-se. Por exemplo, em vez de 1280x720, o objetivo será a proporção de 16:9. (Basta digitar qualquer resolução 16:9 para o tamanho da janela em Project Properties.) Ativar Letterbox scale na propriedade de projeto Fullsceeen-in-browser, e agora o seu jogo deve aparecer corretamente em qualquer resolução 16:09 . Se a tela não é 16:9, aparecem barras pretas nas laterais, o que ajuda a evitar problemas de exibição não intencionais, como acidentalmente vendo muito do nível ou tela de menu. Observe se você está criando um jogo de estilo retro pixelizado, você pode querer usar Letterbox integer scale, substitutivamente.

O resto deste tutorial irá cobrir as ferramentas disponíveis em mais detalhes. Ainda vale a pena continuar a leitura mesmo se você decidir utilizar a solução rápida acima apresentada. Você pode querer suportar diferentes proporções enquanto projeta cuidadosamente seu game .

Usando o modo Fullscreen in Browser

Em Project Properties, escolha um dos modos Fullscreen in Browser.

Com esse modo desligado, o jogo aparece encaixado numa página HTML com o tamanho da janela definido em Window size. Porém não suportará tipos diferentes de telas. Se você usar a ação Request fullscreen do objeto Browser, ainda assim precisará ter suporte a diferentes tamanhos de telas.

Modo Crop

No modo Crop a visão permanece com o mesmo tamanho, e simplesmente mostra mais ou menos do layout dependendo do tamanho definido da janela. As imagens abaixo mostram uma pequena janela no modo Crop. O jogador aparece com o mesmo tamanho, mas há menos do layout visível.

Fullscreen in crop mode.
Se a janela for aumentada horizontalmente, muito mais do layout pode ser visto. Perceba como agora que a janela está maior, o jogador pode ver monstros em locais mais distantes.

Fullscreen in crop mode.


Esse modo permite que você controle o tamanho da janela por conta própria ou simplesmente ignore. Entretanto, este modo geralmente não é bom para jogos. Considere o iPhone e o iPad, que possuem o mesmo tamanho de tela, mas resoluções diferentes dependendo da geração do aparelho. Como o modo Crop não redimensiona as imagens, pode fazer o seu jogo parecer estranhamente pequeno em aparelhos com resolução maior.

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.

Leave a comment

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