Como você lidaria com diferentes proporções em um jogo de plataformas 2D?

Há muito tempo, 4: 3 era praticamente a única proporção de apêndices que você encontraria em um PC. Hoje, o mais comum é 16:10, mas a maioria dos novos monitores (especialmente laptops) tem 16: 9

Estou escrevendo um jogo de plataformas 2D e não consigo decidir como devo lidar com todas as diferentes proporções.

Aqui estão algumas idéias:

1. 4: 3 obtém mais conteúdo, os widescreens são cortados na parte superior e inferior
2. 16: 9 obtém mais conteúdo, os outros são cortados para a esquerda e para a direita
3. O jogo é em 16: 9 com barras horizontais pretas para outros ARs
4. O jogo é em 4: 3 com barras verticais pretas para outros ARs

Se você não tiver um motivo convincente para tornar seu jogo "amplo" (nesse caso, use a abordagem 3) ou restrito (nesse caso, use a abordagem 4), use uma combinação de 1 e 2 (ou possivelmente 3 e 4, se desejar ocultar coisas fora da tela).

Selecione uma proporção de comprometimento (16:10 é boa ou até 16:11). Se o usuário estiver no 16: 9, forneça mais conteúdo para o lado e, se estiver no 4: 3, forneça mais conteúdo na parte superior e inferior.

De qualquer forma, acho melhor implementá-lo com algo parecido com isto na sua classe de câmera:

float scaleToFitWidth = viewport.Width / nominalWorldSize.Width;
float scaleToFitHeight = viewport.Height / nominalWorldSize.Height;
float scale = Math.Min(scaleToFitWidth, scaleToFitHeight); // world to client

Nesse ponto, você pode simplesmente experimentar diferentes tamanhos nominais do mundo (ou seja, o tamanho da câmera em unidades mundiais) e simplesmente selecionar o melhor.

Bem, como um conselho básico, no PC eu diria "não assuma que seu usuário quer rodar em tela cheia". E no modo janela, escolha sua proporção ideal e use-a diretamente.

Os usuários que eu acho que geralmente aceitam barras pretas quando apresentados com conteúdo em tela cheia. Portanto, as estratégias 3 e 4 são aceitáveis, se não ideais. Eles têm a vantagem de que você sempre sabe a quantidade de conteúdo que está renderizando: ou seja, não há bugs sorrateiros que só ocorrem quando executados em tela ampla.

Se você está tentando ser adaptável e detectando a proporção de usuários por meio da resolução da tela e mostrando o máximo de conteúdo possível, é necessário considerar o conteúdo de alta e baixa prioridade de maneira diferente. Conteúdo de alta prioridade é algo que o usuário absolutamente precisa ver na tela, se estiver fora da tela, o jogo está falhando. São elementos como HUD e UI, e o avatar do jogador e qualquer coisa com a qual eles estejam interagindo. Conteúdo de baixa prioridade é algo que, se estiver na tela, é bom, mas se estiver fora da tela, não é grande coisa. Por exemplo: gráficos de fundo e coisas razoavelmente distantes do avatar.

Supondo que você tenha uma UI / HUD que está sendo sobreposta ao topo de algum mundo 2D 'físico', isso é bastante direto. Itens de baixa prioridade são fáceis, basta garantir que a janela de exibição 4: 3 esteja centralizada nas coisas interessantes e, em seguida, desenhe o máximo possível de coisas de baixa prioridade à esquerda ou à direita. Coisas de alta prioridade no mundo 2D (por exemplo, seu personagem, inimigos que ele está enfrentando diretamente) devem sempre ser mantidas na janela de exibição 4: 3. Ou seja, o código do seu jogo não amplia a câmera para tirar proveito do espaço extra da tela, porque você terá o código do jogo agindo de maneira diferente na tela widescreen. Faça com que o código do jogo assuma que o mundo está sendo renderizado em 4: 3 e deixe apenas o código de renderização ciente de que na verdade há mais do que isso visível.

O layout dos elementos da interface do usuário / HUD pode ser abordado de duas maneiras:

1. Posicionamento dinâmico: especifique todos os seus elementos em relação às bordas da tela (ou seja, nem todos em relação a 0,0). Dependendo da sua proporção, os elementos estarão mais próximos ou mais distantes do centro da tela. Prós: permite que você prenda as coisas nos cantos e faça com que elas 'funcionem'. Contras: difícil de obter o layout funcionando bem no centro e o risco de sobreposição de elementos
2. Posicionamento estático conservador: coloque todos os seus elementos em 4: 3 e simplesmente desloque-os ao executar em widescreen. Prós: lógica / coordenadas de layout simples e inequívocas. Contras: deixa espaço visual morto à esquerda e à direita dos controles da interface do usuário, onde você verá o mundo 2D em segundo plano, mas não a interface do usuário.

Qual é o mais apropriado para o seu jogo? Se você estiver criando o Canabalt (ou seja, um jogo que depende da velocidade horizontal), uma proporção ampla com barras pretas (nº 3) em aspectos mais estreitos seria ideal para destacar o movimento lateral. Por outro lado, se você tiver um jogo mais aéreo como o Super Smash Brothers, uma tela mais alta (# 2 ou # 4) seria melhor. Basearia minha decisão no que funciona melhor para o jogo.

Concordo com outros respondentes que é preciso ter cuidado com os elementos que podem estar visíveis em um monitor, mas não em outro.

Castle Crashers parece usar um pouco de # 2 e # 3 - você obtém barras pretas em uma tela 4: 3 e também uma área visível um pouco menor - mas você sempre deve ter uma "área segura" nas bordas onde você não coloca nada vital de qualquer maneira (para telas como TVs CRT que cortam as bordas)

Existe outra opção. Você pode enquadrar para uma proporção intermediária e fazer cortes e expansões (ou limites) nas duas resoluções normais.

Acredito que as filmagens de TV sejam enquadradas dessa maneira, de modo que a tela widescreen pareça boa (todo mundo não está lotado no meio da cena), enquanto o corte para 4: 3 não é tão drástico e há um panorama mínimo.

Aqui está uma postagem no blog sobre como lidar com vários tamanhos de tela em dispositivos móveis, e aqui está a segunda parte de como essa abordagem codificou em Java usando a libgdx . É um pouco como a resposta de Andrew, mas pode ajudar outra pessoa.

A postagem do blog abrange três abordagens principais:

1. Viva com barras pretas na parte superior ou lateral.
2. Use uma viewport virtual.
3. Use elementos flutuantes, como você encontraria em um layout de caixa flexível da página da web.

O número 1 é bastante auto-explicativo.

Para ilustrar não. 2, suponha que você queira oferecer suporte a três dispositivos diferentes com três proporções diferentes. Abra a imagem em um editor de imagens. Para o primeiro dispositivo, desenhe o maior retângulo na proporção do dispositivo que caberá dentro da sua imagem. Faça o mesmo para o segundo dispositivo e o terceiro dispositivo. Sua área utilizável, ou janela de visualização virtual, é a interseção dos três retângulos. Qualquer coisa fora dessa janela não pode ser garantida como visível.

O número 3 envolve a colocação de objetos na tela da mesma forma que você colocaria elementos em uma página da Web usando flexbox ou floats. Por exemplo, você colocaria o botão de pausa 5 pixels da parte superior e 5 pixels da direita. Independentemente da proporção do dispositivo, o botão de pausa estará sempre no canto superior direito.