Suporte a múltiplos tamanhos de tela

4
  • 5 favourites

Deixando a UI ou HUD no lugar

Frequentemente seu jogo terá elementos UI (HUD), como pontos de vida, munição, ou outra informação que deveria sempre estar no mesmo lugar na tela.

Para configurar isso, crie uma nova layer e configure o Parallax para 0,0. Se você quiser também que a UI pare de escalonar junto com o jogo, coloque o Scale Rate para 0 também.

Assegure-se que todos seus objetos UI estão nessa layer. Posicione eles no canto superior esquerdo do mapa, dentro do retângulo tracejado que representa a área da janela. Agora eles deverão ficar no mesmo lugar da tela, como o texto "Score" nas fotos das páginas anteriores.

O behavior Anchor

Se você colocar um objeto no canto inferior direito da janela e redimensionar a janela, você vai notar que ele não se mexe. Para fazê-lo ficar relativo no canto inferior direito da janela, você pode usar a behavior Anchor, para fixá-lo em uma posição na tela.

Note que o behavior Anchor foi feito para ser usado em objetos com uma layer sem rolagem - isto é, com o Parallax configurado como 0,0, como descrito acima.

Definindo a margem esquerda e margem direita para janela direita ou janela esquerda, você pode alinhar objetos com, ou a margem direita da janela, a margem de baixo, ou

canto inferior direito. Por padrão, objetos se alinham no canto superior esquerdo da janela.

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.

Outras características úteis

As expressões de sistema WindowWidth e WindowHeight retornam o tamanho atual da janela em pixels. Você poderá querer esconder ou mostrar objetos dependendo do tamanho da janela, habilitar características difirentes para telas muito pequenas, ou mostrar um tipo diferente de UI para tela muito grandes.

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!

  • 0 Comments

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