O que devo ter em mente ao criar jogos em 2D para várias resoluções?


27

Estou fazendo um jogo 2D (Android). Os dispositivos Android variam bastante na resolução da tela; o que preciso ter em mente ao fazer meu jogo?

  • Preciso manter grandes versões de todas as imagens e reduzi-las dependendo da resolução (isso não desperdiça espaço)?
  • As fontes de bitmap são bem dimensionadas ou preciso usar outra coisa?
  • Mais alguma coisa que estou esquecendo?

Respostas:


26

Eu sou o desenvolvedor de um jogo móvel extremamente portátil que roda em tudo, desde PCs, TVs e até o Kindle em preto e branco da Amazon (Smiles HD - http://smileshd.com - Mais dispositivos e plataformas do que você vê lá) .

A melhor maneira que encontrei para oferecer suporte a qualquer dispositivo é escolher uma resolução base e, em seguida, escalar para cima ou para baixo na tela atual. Se você quiser trapacear, pode se ajustar à nova resolução da tela, mas idealmente deve manter a mesma proporção. Ajustar um jogo feito para uma tela 4: 3 parece hediondo em um 16: 9, mas encaixar um 16: 9 em um 16:10, ninguém pode notar. Você notará que me refiro às telas por proporção e não pelas dimensões, o que é uma maneira especialmente útil de pensar nesta era de tamanhos de LCD totalmente aleatórios.

Para criar uma arte que se adapte a qualquer tela, mantendo a proporção, crie fundos maiores do que a maioria das telas comuns jamais verá. Isso é semelhante ao conceito de áreas seguras para títulos na Televisão.

http://en.wikipedia.org/wiki/Safe_area

Os fundos gerados funcionam muito bem para isso. Padrões lado a lado, tabuleiros de damas, formas fractais, etc. Você só precisa gerar um pouco mais para caber em uma nova tela.

Além disso, a criação de imagens estáticas é maior do que o que o usuário comum verá. Mais largo que o widescreen (16: 9) e mais quadrado que o padrão (4: 3). Novamente, volte para as áreas de segurança de títulos, ajuste suas informações importantes a uma área segura, aumente um pouco a área de segurança para tocar em uma das bordas da tela e deixe um pouco de água para dispositivos um pouco maiores.

Uma variação com a qual estou trabalhando hoje está criando objetos 3D com "título seguro". Como são 3D, compostos inteiramente de vértices, torná-los maiores que a tela ocupa praticamente não mais memória do que se quisessem. Assim como a densidade de pixels aumenta, você pode desejar texturas com mais detalhes. Se não, tudo bem, está um pouco embaçado.

Interfaces de usuário, gosto de ajustar a interface principal dentro de um quadrado perfeito no meio da tela. Os cantos e as bordas do meio também são ótimos lugares para colocar as coisas; Você deve calcular suas coordenadas como tal (em relação ao canto ou às arestas do meio).

http://www.smileshd.com/press/iPad/png/UI01.png

Se você realmente deseja ser extravagante, pode oferecer suporte às orientações Alta e Ampla. Alguns dispositivos relatam suas resoluções de tela como mais altas que largas (iPhone, por exemplo), então você pode ter que fazer algo por esses dispositivos, mesmo que esteja simplesmente girando todas as suas coordenadas.

Uma interface de usuário que se adapta a telas altas e largas pode ser uma visão bastante impressionante.

Wide: http://www.smileshd.com/press/iPad/jpg/SmilesHD01.jpg

Alto: http://www.smileshd.com/press/iPad/jpg/SmilesHD02.jpg

No lado positivo, em termos de design, você realmente só precisa considerar Alto e Largo, em vez de Retrato + Retrato inverso + Paisagem + Paisagem reversa. Ao escolher as posições das coisas na tela, considere ter uma posição alternativa mais apropriada para a outra orientação.

Preciso manter grandes versões de todas as imagens e reduzi-las dependendo da resolução (isso não desperdiça espaço)?

Bem, você pode "desperdiçar espaço" e oferecer suporte a uma variedade maior de dispositivos com uma única compilação ou "desperdiçar seu tempo" e ter que fazer MUITAS construções e redimensionar a arte para muitos dispositivos.

Na melhor das hipóteses, você deve criar seu trabalho artístico em resolução maior do que o tamanho final seria em uma televisão 1080p (1920x1080). 2048x2048 deve ser um tamanho comum no trabalho artístico de origem. Ou experimente usar ferramentas de arte vetorial, como Flash e Adobe Illustrator.

Eu recomendo fortemente a criação de um processo automatizado para redimensionar seu trabalho artístico. Hoje, a maioria dos dispositivos móveis, incluindo os tablets, não excede resoluções maiores que 720p (1280x720) ... pelo menos, não muito. No ano que vem, porém, não sabemos mais se isso será verdade (iPad 3?).

De qualquer maneira, para obter o melhor desempenho, você deve se acostumar com a ideia de arte-final e de ativos de origem. Em seguida, você pode executar um processo que otimiza os dados para qualquer dispositivo que você esteja alvejando.

As fontes de bitmap são bem dimensionadas ou preciso usar outra coisa?

Eles escalam bem se você estiver usando uma boa filtragem. Se você estiver criando seu jogo 2D com hardware 3D (OpenGL ES), recomendo fortemente que você use a Filtragem linear combinada com o MipMapping (ou seja, um conjunto de imagens reduzidas). Você pode obter resultados perceptivamente perfeitos com isso, e geralmente é mais rápido usar mipmaps do que não.

http://en.wikipedia.org/wiki/Mipmapping

Enfim, espero que ajude. Boa Sorte Com Seu Projeto.


2

Em geral, todas as texturas feitas devem ser 256x256 ou 512x512. Se você também estiver segmentando blocos (Galaxy Tab, Honecomb, iPad), o 512x512 não preencherá a tela inteira; portanto, convém incluir versões maiores desses itens de arte que precisam preencher a tela. A Apple inclui um sufixo de imagem "@ 2x" nativo para lidar com este caso.

A solução simples, que eu já usei, é simplesmente criar seu jogo para uma tela de 320x480 (iPhone). Deixe isso dobrar naturalmente para o iPhone 2 (640 x 960) e, em seguida, o único outro caso com o qual você realmente precisa lidar de maneira diferente é o fato de alguns dispositivos Android terem uma tela mais alta - basta colocar um buffer na parte superior e inferior (em retrato modo).

Em resumo - construa seu jogo para um tamanho de tela neutro e cubra as exceções, com base em


2
Eu acho que você perdeu a minha Androidetiqueta. De qualquer forma, o buffer é péssimo; é melhor se o seu jogo realmente aumentar e ficar bonito.
ashes999

1

É melhor manter as cópias de trabalho de todos os ativos que você possui. Se você estiver desenvolvendo uma imagem no photoshop, por exemplo, salve o arquivo psd original. Sempre que precisar de uma imagem res diferente, é possível abri-la e exportar a nova imagem com perda mínima de qualidade.

Em vez de criar para um tamanho de tela ou outro, sugiro fortemente que você crie uma variedade desde o início. Você não está falando apenas de diferentes densidades de pixel, mas também de diferentes proporções. 16x9 e 16x10 podem gerar uma experiência visual muito diferente. Portanto, certifique-se de testar novas alterações em diversos formatos e tamanhos de tela.

Na minha experiência, as fontes de bitmap não são bem dimensionadas. Pode depender muito do estilo da fonte usada, mas, em geral, a reamostragem do bitmap da fonte gera resultados muito ruins. As fontes de bitmap funcionam melhor quando a amostra de textura não está definida como multisampling (GL_NEAREST e sem mipmaps) e é renderizada de maneira que mapeie pixel por pixel na tela. Você pode considerar o uso de uma série de renderizações da mesma fonte em tamanhos diferentes e garantir que a fonte sempre apareça na escala == 1 em seu jogo; isso permitirá algumas opções limitadas ao escolher um tamanho de fonte para usar em um cenário específico.


1

O Android fornece alguma ajuda para isso ...

Você pode especificar "recursos alternativos" para itens como seus gráficos.
Dê uma olhada na seção "Fornecendo recursos alternativos" neste link: http://developer.android.com/guide/topics/resources/providing-resources.html Você deve encontrar exemplos nos exemplos do SDK ou no Google.

Além disso, o Google fornece um emulador para Android que você obtém com o SDK. Você pode definir vários dispositivos virtuais com configurações diferentes para testar seu código. Aqui está um link para mais informações: http://developer.android.com/guide/developing/devices/emulator.html

Good Luck amb


0

Além dos aspectos técnicos (abordados pelo Sr. Strange), tenha cuidado ao projetar um jogo com tamanho de tela variável. Apenas como exemplo, imagine jogar ruas de raiva em uma tela de paisagem e depois em uma tela de retrato.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.