Escolhendo a resolução dos seus ativos de arte 2D

CIRO CONTINISIO / UNITY TECHNOLOGIESContributor
Nov 19, 2018|14 Min
Escolhendo a resolução dos seus ativos de arte 2D
Esta página da Web foi automaticamente traduzida para sua conveniência. Não podemos garantir a precisão ou a confiabilidade do conteúdo traduzido. Se tiver dúvidas sobre a precisão do conteúdo traduzido, consulte a versão oficial em inglês da página da Web.

Em eventos de jogos e online, as pessoas costumam me fazer esta pergunta: “Estou criando um jogo 2D no Unity para PC e dispositivos móveis: qual deve ser a resolução dos meus ativos?” Não há uma resposta simples para essa pergunta que abranja todos os casos. Leia esta postagem do blog para ter uma ideia melhor de qual é o melhor curso de ação para seu projeto. Nos últimos anos, temos trabalhado em muitos recursos que ajudam você a criar jogos 2D no Unity: Atlas de sprites, física 2D, um recurso Tilemap para mundos retangulares, hexagonais ou isométricos, o Sprite Shapebaseado em splines, animação 2De muito mais.

O Unity não expressa o tamanho de um objeto em pixels e isso pode confundir artistas que estão criando recursos para jogos 2D. “Quão grandes eles precisam ser?” Como de costume no desenvolvimento de jogos, a resposta para essa pergunta é “depende”, mas vamos rever alguns conceitos que facilitarão a decisão.

Observação: As imagens neste post do blog usaram os belos recursos 2Dda Asset Store. Neste blog, usamos arte do artista Mikael Gustafsson.

Cazer um jogo 2D no Unity

Mundo 2D verde aberto no editor
Recursos de Pixel Art

Se você é um artista de pixel, um aviso: a maioria das dicas neste post não se aplicam totalmente à sua situação. Em gráficos de pixel art, você tem algo com resolução extremamente baixa e quer aumentá-la para 2x, 4x, 8x ou até mais que sua resolução original. Isso significa que um pixel da sua arte original agora é um quadrado de 2x2, 4x4, 8x8 pixels reais na tela. Então, em geral, na pixel art, você não precisa se preocupar muito com a resolução da tela, mas você começa com sua arte e a sensação que você quer transmitir (old-school, era NES, era 16 bits, pixel art "moderna" de alta resolução, etc.) e você a amplia algumas vezes. O Unity agora tem uma solução Pixel Perfect na forma de um pacote autônomo se você usar o RP integrado e incluído no RP universal e no renderizador 2D. Ele vem com um componente simples para colocar na câmera, que fará o trabalho pesado para você e garantirá que a arte permaneça nítida e alinhada com a grade de pixels pequenos e reais em qualquer tela. Você pode encontrar mais informações sobre o Pixel Perfect nadocumentação.

Reduzindo, não aumentando

Antes de entrarmos em qualquer consideração sobre a escolha da resolução, vale lembrar que, ao criar seus recursos, é bom escolher uma resolução mais alta, mesmo que você não precise dela para a arte do jogo. Você sempre pode reduzir a escala da arte, mas não pode aumentá-la sem perder qualidade.

Considere estes cenários: talvez você precise imprimir parte da arte do seu jogo, ou queira aumentar o tamanho de um elemento na tela, ou queira criar uma “versão HD” do seu jogo para monitores 4K mais tarde.

Por essas razões, ao trabalhar na arte, considere usar arquivos de trabalho que tenham o dobro da resolução que você realmente precisa ou mais, depois reduza-os antes de trazê-los para o Unity ou use as configurações de importação para reduzir o tamanho deles à medida que são importados para o mecanismo.

Imagem mostrando um menu suspenso do editor. 523 é destacado e 2048 é selecionado com uma marca de seleção.
As configurações de importação para qualquer ativo de imagem permitem que você force a resolução máxima para uma potência de 2.

As configurações de importação também permitem que você defina um tamanho máximo e outras configurações de compactação por plataforma, assim, por exemplo, você pode ter alguns ativos em uma determinada resolução no PC e apenas metade deles em dispositivos móveis, onde o espaço em disco contido é crucial.

Dica: O Unity oferece uma maneira de consolidar vários Sprites em um por meio do Sprite Atlases. Além de ser uma maneira de economizar espaço de textura, os atlas também oferecem uma maneira unificada de controlar o Tamanho Máximo em vez de ter que defini-lo individualmente para cada sprite no seu projeto.

Definindo a resolução da(s) sua(s) plataforma(s)

Ao definir o tamanho do ativo, é importante considerar a plataforma ou os dispositivos nos quais o jogo será publicado. As pessoas têm dispositivos e telas muito diversos e verão seu jogo em uma variedade de resoluções e proporções de tela.

Em geral, no momento em que este post foi escrito, se você estiver publicando para PC, verá uma grande maioria de usuários com 2 resoluções: principalmente “full-HD” (1920x1080 pixels, geralmente chamado de 1080p) e uma boa parte de 1280x720 (geralmente chamado de 720p). Uma pequena porcentagem de pessoas também tem monitores 4K (3840x2160) ou monitores Retina em Macs (um MacBook Pro moderno de 15 polegadas teria uma resolução máxima de 3360 × 2100). São muitos pixels para cobrir!

Para telefones, o alcance é enorme. Alguns dispositivos antigos podem chegar a menos de 720 pixels na vertical, mas alguns modernos podem chegar a 4K.

Dica: A Unity disponibiliza algumas dessas estatísticas no Painel de Operações do seu ID Unity. Selecione um projeto que tenha o Analytics habilitado e você poderá acessar Analytics > Market Insights e ver as estatísticas agregadas. O Steam também oferece um serviço semelhante nesta página.

Com Retina (uma marca registrada da Apple) e outras telas modernas de alta DPI, embora a resolução real do hardware seja muito alta (por exemplo, 4K), o que eles podem fazer é rodar em uma resolução simulada mais baixa (geralmente metade, digamos, full-HD em vez de 4K), mas então eles renderizam imagens e texto usando o dobro de pixels, para que pareçam muito nítidos.

Observação: DPI (pontos por polegada) ou PPI (pontos por polegada ou pixels por polegada) são nomes diferentes usados indistintamente por diferentes fabricantes, mas, no final das contas, eles significam a mesma coisa: quantos pixels são comprimidos em uma polegada linear na tela. Tradicionalmente, as telas tinham 72 DPI. Hoje em dia, telas com alto DPI geralmente têm 144 DPI, mas você pode encontrar celulares que oferecem até 400 DPI ou mais, pois eles contêm muitos pixels em telas relativamente pequenas. Alguns exemplos aqui.

Para essas telas, você tem duas opções. Uma delas é oferecer uma experiência que utilize a resolução 4K ao máximo. A desvantagem é que produzir ativos compatíveis com 4K exige muito trabalho extra. Neste caso, certifique-se de destacá-lo em seus materiais de marketing!! (“Uma linda experiência 4K”… etc.). Proprietários de consoles como PS4 Pro e Xbox One X, que são compatíveis com 4K, vão adorar o fato de que seu jogo está usando o hardware em sua potência máxima.

Ou você pode “simplesmente” arquitetar seu jogo para cobrir full-HD. Neste segundo caso, usuários com monitores com DPI mais alto não se beneficiarão da resolução aumentada de suas telas, mas apenas verão o jogo em full-HD. Isso não é o ideal, mas pode ser bom se você também estiver tentando manter o tamanho da compilação sob controle.

Então, o ponto principal é: você precisa escolher uma resolução máxima que deseja atingir (com base nas atuais participações de mercado, veja acima) e defini-la como sua meta para todo o projeto. Todos na equipe poderão então tomar decisões sabendo disso.

Medidas em uma cena Unity

Como mencionamos antes, o Unity mede distâncias e tamanhos em algo que é simplesmente chamado de unidade, não em pixels. Em geral, é uma boa prática associar 1 unidade Unity a 1 metro. Por exemplo, o modelo humanoide médio está entre 1,7 e 1,8 unidades neste cenário. Isso não é obrigatório, mas garantirá que jogos com física (3D e 2D) se comportem corretamente, porque a física no Unity é ajustada para usar 1 unidade por metro. O mesmo vale para a iluminação 3D, onde os parâmetros de luz devem permanecer fiéis à realidade.

Em 2D, essa escala é menos importante, mas ainda é uma boa prática respeitá-la se você estiver usando física em seu projeto. Se você estiver usando um Tilemap, pode ser interessante manter uma escala de 1 tile = 1 unidade, apenas por uma questão de simplicidade.

Agora que falamos sobre as unidades, vamos passar para a câmera. As câmeras 2D (Ortográficas) da Unity têm um parâmetro chamado Tamanho, que - quando duplicado - informa quantas unidades a câmera está enquadrando no eixo vertical.

Captura de tela de um menu suspenso do editor. Ortográfico é selecionado com tamanho 5
O parâmetro Tamanho no Inspetor de uma câmera ortográfica

Com um tamanho de 5, temos uma janela de visualização que mede 10 unidades Unity na vertical. O eixo horizontal será apenas uma consequência disso, já que não sabemos qual será a proporção da tela do usuário. Mas é fácil calcular: em um PC comum ou telefone Android, com uma proporção de 16:9, você pode simplesmente fazer:

10(tamanho vertical) x 16 / 9 = 17,7(tamanho horizontal)

Então sabemos que com essas configurações estamos enquadrando uma área de aproximadamente 17,7 por 10 unidades. Em Macs (que geralmente são 16:10), a proporção será 16 por 10 (portanto, menos visibilidade na horizontal). Em um telefone 16:9 segurado verticalmente (para que fique 9:16), a mesma câmera mostrará apenas uma área de 5,6 por 10 unidades.

Observação: Não abordaremos como lidar com proporções de tela neste post porque, se você pretende criar um jogo para diferentes proporções de tela, não só precisa pensar nos gráficos, mas, em geral, precisa fazer muitos ajustes na jogabilidade para garantir que o jogo não rode de forma diferente em dispositivos com proporções diferentes. Por exemplo, qualquer jogo que role horizontalmente se beneficiará de uma proporção horizontal mais fina, porque o jogador pode ver mais dos perigos que se aproximam. Às vezes, é impossível criar um jogo que funcione bem em proporções de tela muito diferentes, e as pessoas usam quadros ou barras pretas para preencher o espaço negativo que não conseguem preencher com a jogabilidade.

Insira pixels por unidade

Ao importar gráficos como Sprites, o Unity exibe um parâmetro chamado Pixels por Unidade (PPU). Agora que sabemos tudo sobre unidades, isso deve estar bem claro. Ele expressa quantos pixels do seu Sprite cabem em uma unidade na cena do Unity quando o GameObject é dimensionado 1,1,1.

Digamos, por exemplo, que eu tenha o Sprite de uma rocha com 218 por 175 pixels e eu defina os Pixels por Unidade como 100. Depois que eu arrastar esse Sprite para a cena, meu GameObject padrão terá 2,18 por 1,75 unidades, ocupando aproximadamente um quinto das 10 unidades no eixo vertical.

Uma imagem de um negrito no editor contra um fundo verde 2D
Com essas configurações, podemos encaixar mais de cinco pedras na vertical da janela de visualização

Então, vamos usar uma tela full-HD como nossa resolução de teste. A vertical é de 1080 pixels, e a rocha ocupa menos de um quinto da tela (você pode ver como as rochas desbotadas se encaixam mais de 5 vezes na imagem acima), o que significa que estamos usando 175 pixels de gráficos de origem para renderizar mais de 200 pixels. O que significa que teremos uma rocha um pouco borrada .

Para corrigir isso, temos várias soluções: podemos reduzir a rocha para cerca de metade do tamanho, aumentar o quadro da câmerapara 10,8 (o que produz um zoom out) ou podemos alterar o valor de PPU do Sprite para 108 (o que tem o mesmo efeito de tornar a rocha menor na tela). Em todos os três casos, se quisermos que a rocha fique crocante, ela terá que ser menor.

De onde vêm o tamanho da câmera e o valor do PPU? Fácil! Para o tamanho da câmera, se importarmos nossos gráficos a 100 PPU, precisaremos de uma câmera 10.8 porque 10.8x100 é igual a 1080. Isso nos permite cobrir toda a altura da tela. Por outro lado, para calcular uma PPU correta em que o tamanho da câmera permanece em 5, se esperamos cobrir uma tela full-HD com 10 unidades Unity verticalmente, então temos 1080/10 = 108. Esse é o número de pixels que deveríamos colocar em uma unidade se não alterássemos o tamanho da câmera.

Crie a regra, quebre a regra

Tenha em mente que, enquanto você trabalha no seu jogo, é perigoso misturar esses fluxos de trabalho: você pode acabar em uma posição em que alguns gráficos usados na cena errada têm uma resolução muito baixa e você nem percebeu. É bom estabelecer diretrizes: uma PPU para a maior parte dos ativos do seu projeto e um tamanho típico de câmera.

Então você pode quebrar as regras mais tarde. Talvez você tenha uma cena em que a câmera aumenta e diminui o zoom, alterando o tamanho temporariamente. Ou talvez seus elementos de fundo sejam tão grandes que você não pode manter o mesmo PPU porque acabaria com texturas enormes. Nesse caso, não há problema em reduzir o PPU desses elementos e importar sprites menores, mas ainda cobrir uma grande área da tela com eles.

Visualizando seu jogo

Ao trabalhar no Unity, você pode estar se perguntando qual é a resolução que está vendo na Visualização do Jogo e se essa é uma prévia precisa da sua arte na plataforma de destino. A maioria das opções que você precisa estão no menu suspenso na parte superior e no controle deslizante ao lado dele.

Tela do editor com um menu suspenso. Proporções de baixa resolução são verificadas, assim como o aspecto livre.
Observe como, com as Proporções de Aspecto de Baixa Resolução ativadas, a Escala fica em 2 por padrão. Isso ocorre porque os pixels precisam ser duplicados para simular DPI baixo em uma tela de DPI alto.

As proporções de tela apenas forçam uma proporção específica entre horizontal e vertical, mas elas usarão a resolução atual da sua janela de visualização do Game View, que por sua vez depende da sua tela. Então eles são bons para configurar a interface do usuário e objetos em uma tela, mas não para testar arte. Enquanto estiver em uma proporção de tela, a caixa de seleção Proporções de tela de baixa resolução estará ativa se você estiver em uma tela de alto DPI. Se você marcar, ele simulará uma resolução de tela DPI padrão. Resoluções fixas, por outro lado, forçam o Unity a renderizar uma janela daquele tamanho exato. Nesse ponto, talvez você precise expandir sua Visualização do Jogo ou maximizá-la para visualizar a prévia completa. Nesse contexto, o controle deslizante Escala pode fazer com que resoluções altas se ajustem à janela Visualização do Jogo, mas se você estiver abaixo da escala 1x, não verá realmente essa resolução, mas uma reamostragem dela. E não se esqueça de que você pode adicionar suas próprias resoluções fixas e proporções de tela no menu suspenso:

Gif de adição de proporção de aspecto de rótulo 'superwide'

Dica: Não se esqueça de que você não deve basear seu julgamento apenas no editor. De vez em quando, faça uma versão do jogo (ou apenas da arte!) e dê uma olhada no seu dispositivo ou tela de destino.

Algumas notas finais

Como você pode ver, a resolução da sua arte, o tamanho da câmera e a tela que você deseja usar estão todos conectados e não há um tamanho de pixel ou PPU que se adapte a todos os casos. Estude suas plataformas-alvo, decida uma resolução e informe toda a equipe criando diretrizes. Então produza arte de alta resolução de qualquer maneira, pode ser útil mais tarde! Por fim, redimensione-o para a resolução necessária e importe-o no Unity. E uma sugestão final. Mesmo que eu tenha usado anteriormente os termos “ligeiramente embaçado” como se fosse o fim do mundo e algo que DEVEMOS CONSERTAR, esta não é uma regra rígida. Pode ser que no seu jogo alguns objetos - às vezes - estejam com resolução insuficiente. Principalmente se houver muitos detalhes minuciosos na tela, talvez transparências sobrepostas, com um pouco de neblina, chuva ou pós-processamento por cima. Jogue o jogo na velocidade normal. Você realmente percebe o fato de que elas estão sendo reamostradas? Se você honestamente não consegue notar a diferença, então talvez o trabalho extra, o espaço em disco e o processamento necessários para renderizar um sprite de resolução mais alta não valham a pena. Lembre-se: bons jogos fazem grandes concessões!

Recursos adicionais

Temos uma lista de leitura com dicas e procedimentos 2D em nosso blog, não perca. Se você também quiser ter uma visão geral do que o Unity tem a oferecer para 2D, pode começar aqui.

Descubra a demo do Unity 2D, Dragon Crashers neste blog

#Unity2DChallenge (Concluído)

Você tem alguma arte 2D incrível em andamento? Você está curioso sobre nossas novas ferramentas 2D? Crie algo incrível com nossas novas ferramentas de animação 2D, Tilemaps, SpriteShape, pacote Pixel Perfect ou importador SVG e participe do Desafio Unity 2D! Sou um dos jurados e mal posso esperar para ver todas as suas ideias brilhantes.