O que torna a escala em pixel art diferente de outras imagens?


12

Recentemente, eu estava treinando um desenvolvedor que é novo na criação de jogos de pixel art, e percebi que há uma "sabedoria convencional" em torno do dimensionamento de pixel art que não é óbvia para um iniciante e pode não estar bem documentada. Então, aqui está uma tentativa de consertar isso ....


  1. Ouvi dizer que só devo escalar pixel art em 200%, 300% etc., não em tamanhos intermediários, como 120%

    • Por que é que? A escala não deve "funcionar" da mesma maneira que acontece com outras imagens?
    • E se eu realmente precisar tornar meu personagem apenas uma fração maior ou menor para obter a jogabilidade ou aparência certa? Como faço para corrigir isso?
  2. Me disseram que é "ruim" usar pixel art em diferentes escalas em um jogo - por quê?

    • Por exemplo, se eu escalar meu personagem para que cada sprite texel seja 4x4 pixels de tela, enquanto minha arte de segundo plano é escalada para que cada sprite texel seja 6x6 pixels de tela. Um pixel não é um pixel no final do dia?

Respostas:


30

Dimensionamento por números inteiros

Dimensionamento por 2x, 3x ... n x é simples - cada pixel apenas se torna um n x n quadrado de pixels, e o olhar do sprite original seja perfeitamente preservado (incluindo todas as linhas afiadas, cantos, e escadaria zig-zags) .

Porém, encontramos problemas ao escalar a arte pixel em quantidades fracionárias (por exemplo, 1,5x) porque os pixels são discretos por natureza. Não podemos realmente ter "meio pixel".

Para outros tipos de arte, geralmente podemos nos misturar com os pixels de origem adjacentes, onde o pixel deve ser "meio colorido" e, em altas resoluções, os artefatos geralmente não são perceptíveis. Mas na grande arte pixel robusta isso destrói rapidamente a aparência nítida.

Em vez disso, geralmente usaremos a filtragem "Vizinho mais próximo" (também chamada de filtragem de ponto) para que cada pixel após o dimensionamento retire sua cor de exatamente um pixel no sprite original.

Isso tem outra desvantagem: como o número de pixels após o dimensionamento não é um número inteiro múltiplo do número de pixels de origem, alguns pixels de origem serão duplicados mais do que outros (se estiverem aumentando) ou ignorados completamente (se estiverem diminuindo).

Infelizmente, o software de edição de imagens e a filtragem de textura da GPU não são muito exigentes quanto a duplicar ou pular pixels - eles apenas seguem regras básicas de arredondamento - o que pode fazer com que o resultado pareça distorcido e desigual.

Confira o exemplo abaixo. No meio, aumentamos o sprite de cogumelos em 150% usando a filtragem de vizinhos mais próximos, e o resultado parece instável e aleatório. Um olho é maior que o outro, alguns contornos são grossos, enquanto outros permanecem finos e os pontos arredondados parecem irregulares ... não parece algo que um artista de pixel desenharia de propósito.

Exemplo de artefatos do uso de uma escala não inteira

Se realmente precisarmos que o sprite seja 150% maior (digamos, para fazer a jogabilidade parecer correta ou para oferecer suporte a resoluções de tela alternativas ), podemos repintar as áreas problemáticas, como o exemplo à direita. Agora parece mais algo que um artista faria, e estilisticamente consistente com outras artes do jogo. (Embora eu não seja um grande artista de pixels, ainda pode ser melhor 😉)

Infelizmente, não existem muitos atalhos excelentes para isso. Para escalas de número inteiro, você pode usar algoritmos de aprimoramento de pixel art especialmente projetados - uma grande variedade está disponível em ferramentas como o ImageResizer - para obter um ponto de partida menos complicado do que o vizinho mais próximo, mas ainda é preciso ter atenção dos artistas e um pouco de graxa nos cotovelos. obtenha um resultado de alta qualidade.


Além: escalas fracionárias também podem surgir em tempo de execução .

Imagine que seu jogo está na resolução NES (256 x 240) e você deseja exibi-lo em uma tela 1080p.

1080 × 240 = 4,5, portanto, alguns dos pixels de origem ou "texels" em sua cena explodem até 5 pixels de tela, enquanto outros são apenas 4, criando distorções como vimos acima. Em movimento, eles tendem a fazer os sprites ondularem e brilharem distraidamente, sem uma causa óbvia:

Exemplo de um cogumelo em escala fracionária em movimento, mostrando artefatos ondulados

Você verá frequentemente as pessoas sugerindo o arredondamento da câmera ou das posições dos objetos para coordenadas de pixels inteiros, mas isso não resolve o problema. O arredondamento já acontece como parte da filtragem do vizinho mais próximo - o problema é que alguns pixels da tela arredondam para o mesmo texel de origem (duplicando-o), enquanto outros não, levando a um resultado desigual.

A solução é usar uma combinação de preenchimento / corte ou conjuntos de ativos alternativos para retornar a uma proporção consistente de número inteiro de pixels da tela para texels para cada resolução de tela que você deseja suportar - veja alguns exemplos do Unity aqui . Esse é outro caso em que não há uma correção universal fácil, e você terá que aplicar algum julgamento e arte para manter seu jogo nítido.

Mantendo a escala de pixels consistente

Essa "regra" se resume à consistência estilística.

Quando você usa pixel art em diferentes escalas, pode parecer que os recursos foram reunidos em diferentes jogos, em vez de ter uma estética unificada.

Exemplo de dimensionamento de ativos de maneira diferente em um único jogo

No exemplo à esquerda, montei alguns sprites do Super Mario World, todos na mesma escala, e parece ótimo.

No meio, eu ampliei Mario e o nível para o dobro da resolução do plano de fundo e a toupeira para triplicar a resolução. Como usei escalas de número inteiro, não temos distorções ou ondulações em nenhum lugar, mas ainda parece um pouco engraçado.

Por um lado, o plano de fundo é muito mais detalhado que o primeiro plano. Ele é capaz de representar curvas suaves e realces nítidos, o que faz com que o primeiro plano pareça particularmente "bloco" em contraste, em vez de ter uma aparência consistente de pixel art. E os contornos da toupeira são visivelmente mais espessos e irregulares do que o resto do primeiro plano.

À direita, mostro que novamente, repintando os ativos em uma escala de pixels comum, podemos trazer de volta uma sensação mais unificada e intencional com os novos tamanhos de ativos.

Mas eu preciso?

Não, na verdade não. É o seu jogo, e você pode fazer do jeito que quiser.

Especialmente ao prototipar e encontrar a diversão no seu jogo, ser capaz de experimentar coisas rapidamente é mais importante do que parecer perfeito. Você provavelmente vai ter o tamanho das coisas importantes, como seu personagem erradas muitas vezes antes de encontrar o que é melhor para o seu jogo, e ele iria chupar ter que pintar cada quadro de animação cada vez que você quer tentar algo diferente. Portanto, desde o início, não se preocupe.

Para o jogo lançado, é uma decisão judicial. Nenhuma polícia de pixel art o proibirá de distribuir seu jogo se você não seguir as regras, e muitos jogadores não serão capazes de descrever a diferença. Mas a atenção a esses detalhes de pixel é algo que muitos jogadores (e revisores) consideram um sinal importante de qualidade - então, conheça seu público e decida o que é melhor para a experiência que você deseja oferecer a eles.

Uma última consideração é que muitos jogos de pixel art têm jogabilidade de alta precisão. Pense em pular entre plataformas de um bloco nos primeiros jogos do Mega Man. Nessas situações, uma grade de pixels consistente (e uma grade de peças) pode ser uma sugestão importante para o jogador julgar e executar seus movimentos. A introdução de irregularidades na arte pode realmente tornar o jogo mais difícil de aprender, o que pode ser frustrante.

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.