Virtualmente todo jogo deve trabalhar em diferentes tamanhos de tela. Podem ser diferentes tamanhos de telas em celulares - que podem possuir uma variedade de versões para um mesmo dispositivo, como iPhone 4S vs. iPhone 5 - diferentes tamanhos de telas em tablets, redimensionamento 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 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.
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.
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
O modo Letterbox scale simplesmente redimensiona o game para cobrir toda a janela. Se a proporção de tela (Aspect ratio) não corresponde, barras pretas aparecerão nos lados da janela. Aqui estão dois exemplos:
Mesmo que barras pretas apareçam nos lados, isso evitará o problema de acidentalmente mostrar conteúdo que é suposto estar fora da tela. Entretanto, a desvantagem é que alguns usuários perdem parte de suas áreas de visão por causa das barras. Apesar disso, modo Letterbox scale pode ser aplicado para quase qualquer jogo e ele irá funcionar corretamente, então é um jeito rápido e fácil de dar suporte á diferentes tamanhos de tela sem ter que alterá-lo para diferentes proporções de tela (Aspect ratio).
Letterbox integer scale
O modo Letterbox integer scale é idêntico ao modo Letterbox scale, preservando a proporção de tela, mas ele também dá zoom para proporcionar uma escala inteira. Por exemplo, ele só irá escalar em 1x, 2x ,3x , 4x etc, e nunca em algo como 2.5x. Isso é importante para jogos usando Point sampling (geralmente estilo retrô) para preservar a precisão perfeita dos pixels ao escalar o jogo. Mas isso significa que barras pretas podem aparecer nos lados, acima e abaixo da tela.
Modo Scale outer
Modo Scale outer escala a visão para preencher o tamanho da tela, como o Letterbox fullscreen faz. Entretanto, ao invés de mostrar barras pretas, ele usa a tela cheia e mostra mais do mapa. Isso tem o efeito de De vez em quando mostrando mais do mapa que o tamanho da tela. . Isso pode significar um espaço vazio ou objetos supostamente fora da tela podem aparecer nos lados da tela se você não fazer o design do seu game de acordo.
Note como o jogo está escalado em uma pequena janela, sem mostrar barras pretas:
Mas se a janela for redimensionada para um tamanho incomum, o jogo é exibido incorretamente:
O jogo foi escalado apropriadamente, mas a proporção de tela é tão diferente que você pode ver além da borda direita do seu mapa. Não somente isso, mas o jogador consegue ver os monstros que eles não conseguiriam ver normalmente, então isso poderia contar como trapaça. Com Letterbox fullscreen isso iria ser cobrido pelas bordas pretas, razão pela qual é muitas vezes preferível usar o modo Letterbox.
Entretanto, se você está alvejando dispositivos específicos com janelas não-redimensionarias, você pode usar esse modo para dar suporte á diferentes proporções de tela. Mas o problema acima ainda aplica-se; você vai precisar fazer coisas como fazer backgrounds maiores que o tamanho da tela para assegurar que o espaço vazio não apareça em certos dispositivos, e testar completamente o jogo para assegurar que nenhum erro com a aparência do jogo ocorra.
Para mais informações, veja a seção Um problema comum - proporções de tela abaixo.
Modo
Scale inner
Como Scale outer, esse modo escala a visão e usa a tela cheia. Entretanto, ele mexe com proporções de tela diferente: enquanto que Scale outer mostra mais do mapa se a proporção de tela for diferente, Scale inner mostra menos. Mesmo que ele corte partes da visão, ele nunca irá acidentalmente mostrar conteúdo fora da janela ... Mas você ainda terá o problema oposto - ele irá cortar algo que você quer que seja visto!
Aqui está um exemplo de onde o jogo é exibido corretamente quando é reduzido uniformemente:
Se nós usarmos tamanhos incomuns como nós fizemos com 'Scale outer', note como ele dá zoom e corta partes da visão ao invés de mostrar-nos coisas fora da tela:
É um resultado melhor que Scale outer, mas agora nós precisamos ficar atentos de partes do jogo sendo cortadas em alguns tamanhos de tela. A visão acima é como ver uma barra estreita através do tamanho da janela do jogo. Uma técnica que é útil é fazer jogos para a proporção de tela 16:9, mas tendo partes do lado cortadas quando é exibido em 4:3. Alguns produtores de filmes fazem isso com filmes.
Um problema comum - proporções de tela
Letterbox scale ou Letterbox integer scale são jeitos fáceis de trabalhar em um jogo com uma ampla escolha de tamanhos de tela sem ter muito trabalho. Entretanto, a desvantagem é que barras pretas aparecem. Isso pode incomodar usuários de celular que tem uma tela pequena, e não querem que a tela seja menor que o necessário. Além disso, pode não parecer profissional se a proporção de tela de um dispositivo for somente um pouco diferente da do jogo - pequenas barras pretas aparecerão nos lados, o que é desnecessário - o jogador poderá pensar "Por que a tela não foi simplesmente extendida para mostrar a área inteira?"
Nesse caso, para dar suporte nesse caso com tela cheia, você precisa usar Scale outer ou Scale inner ao invés de Letterbox scale. Isso então significa que você deve dar suporte á múltiplas proporções de tela.
Esse é o mesmo problema encarado pelos produtores de TV. Há muitas TVs por aí que exibem somente em 4:3, 16:9 e 16:10. Se a produção filmar um programa de TV somente em 4:3, em uma TV de 16:9 irão haver lacunas nos lados, ou possivelmente até mesmo equipamentos ou a produção do programa que não deveriam aparecer! Similarmente, se você desenhar um background que se encaixa perfeitamente em uma tela, então usar Scale outer em outro dispositivo com proporção de tela diferente, lacunas irão aparecer nos lados ou conteúdo fora do mapa irá aparecer. Isso poderá acontecer até mesmo se você simplesmente não cobrir o espaço ocupado pela barra de status dos dispositivos como o iPhone.
Há dois jeitos de resolver esse problema:
1) Use Scale outer, e desenhe seus backgrounds mais largos (ou mais altos, dependendo da orientação) que o tamanho da tela, cobrir as bordas normalmente visíveis, para se assegurar que lacunas não irão aparecer, independentemente da proporção de tela do dispositivo..
2) Use Scale inner, e tenha certeza que nada importante está perto das bordas, desde que as bordas são suscetíveis de ser cortadas em diferentes tamalhos de tela.
Nem sempre é fácil fazer um jogo corretamente usando qualquer técnica. Entretanto ele te permite fazer jogos que sempre use a tela cheia, que frequentemente parece melhor que mostrar barras pretas.