Escalando meu pixel art platformer de 720p para 1080p

Estou desenvolvendo um jogo de plataformas 2D de pixel art para PC e smartphone, mas estou preso a um problema técnico.

Eu escolhi ter uma resolução de 32x32 lado a lado e uma resolução de sprite de 64x64 caracteres. Os níveis são divididos em seções que eu chamo de "telas", e em cada tela eu tenho blocos de 40x22,5, aproximados a 40x23, então a resolução mínima é 1280x720.

No jogo, eu tenho um mecânico de salto duplo, então preciso ter um bom alcance de visão vertical em cada "tela".

Aí vem o problema: 1280x720 não é uma resolução muito alta. Nos monitores HD, a janela não seria grande e, se eu aumentar a resolução em 2x, será em 2560x1440 e a janela será muito maior do que um monitor HD real. Se eu tentar tamanhos entre 1280x720 e 2560x1440, os gráficos começarão a gaguejar ou ficarão deformados.

Como posso resolver este problema? Existe uma solução que não exija que eu redesenhe todos os blocos e sprites no formato 16x16?

Para quem se pergunta por que esse é um problema da pixel art, veja um exemplo rápido usando uma cena de Super Mario World:

Se escalarmos um jogo de pixel art de 720 para 1080 em tempo de execução (da mesma forma que uma câmera de jogo típica), obteremos artefatos devido à proporção não inteira de pixels da tela por texel de origem. Veja a inconsistência nos números do exemplo em escala à direita e como a folha e a orelha de Mario ficam distorcidas.

É jogável, mas perdeu a nitidez encantadora da pixel art. E em movimento, esses artefatos podem rastejar através de um sprite , fazendo com que pareça cintilante.

O uso de um modo de filtragem que mescla pixels adjacentes evitará as ondulações, mas borrará e borrará a arte do pixel; portanto, também não é muito desejável.

Infelizmente, a proporção de 1,5x entre 720p e 1080p é o pior cenário possível.

Como você observa, o dimensionamento de 1x é muito pequeno e o 2x é muito grande, com uma margem tão ampla nos dois sentidos, e não existe uma taxa de dimensionamento com número inteiro entre nós para escolhermos.

Suas opções se resumem a:

• Tolerar a escala 1x , mostrando seu jogo em uma janela 1/3 menor que a tela, adicionando bordas decorativas se você precisar preencher o espaço.

  • Você pode estender o corte, mostrando mais cenas ao mesmo tempo em telas de alta resolução. Isso reduz o preenchimento / caixa de correio necessário, mas você terá que avaliar se isso afeta o desempenho do jogo.

    (por exemplo, isso oferece aos jogadores em alguns dispositivos uma vantagem injusta ou permite que eles mantenham segredos que não deveriam ver tão facilmente?)

• Aumente a escala em 2x e recorte a cena , para que o jogador veja menos cenas de cada vez (cerca de 3/4 da medida que podiam ver antes).

  Isso também pode afetar a forma como o jogo é executado, por exemplo. dificultando ao jogador ver os lugares para os quais ele precisa pular duas vezes.

  • Você pode compensar isso com a lógica da câmera, tendo o pan de visualização para acompanhar ou antecipar o player, para que o conteúdo importante ainda seja visível em uma tela no corte menor, mas não há melhor câmera universal para usar.

    Se você decidir seguir esse caminho, tente compartilhar alguns detalhes de sua jogabilidade e câmera atual, além de uma cena de exemplo. Com isso, podemos ajudar a ajustar o comportamento da câmera para compensar (ou seu jogo pode simplesmente exigir mais visibilidade)

• Crie ativos alternativos em uma resolução diferente . (Sim, isso é muito trabalhoso, mas oferece mais opções para controlar a aparência do jogo)

  Isso não significa que você precisa jogar fora seus ativos existentes que ficam ótimos em 720p. Este artigo descreve a troca contextual entre conjuntos de ativos diferentes para oferecer suporte a uma variedade maior de resoluções de destino (no Unity, mas o princípio também pode ser aplicado em jogos que não são do Unity).

  • Como você observa, redesenhar todos os seus recursos na metade do tamanho ( blocos 16x16, caracteres 32x32 ) permitirá lidar com 720p na escala 2x e 1080p na escala 3x, com o mesmo número de blocos mostrado como você tem agora. Você pode encontrar a resolução de pequenos blocos mais visualmente restritiva.

  • Você também pode desenhar um conjunto alternativo de "formato grande" que é 150% maior ( 48x48 blocos, 96x96 caracteres ), capaz de lidar com 1080p na escala 1x. (Você usaria seus recursos existentes para 720p ou 1440 etc.). A resolução maior deve ajudá-lo a manter a fidelidade da sua arte atual, para que você não precise sacrificar o estilo e os detalhes que possui agora.

    

  • Uma terceira opção é desenhar um conjunto de ativos apenas um pouco menor ( blocos 24x24, caracteres 48x48 ), capaz de lidar com 1080p na escala 2x e, novamente, pode significar menos sacrifício de detalhes do que reduzir pela metade todos os tamanhos de ativos.

    Todas essas três opções permitem manter o enquadramento e a jogabilidade exatamente iguais em 720 e 1080, mas com o custo de aproximadamente o dobro do trabalho dos ativos.

Infelizmente, não há vitória fácil aqui, apenas trocas diferentes.

Elaborando especificamente a opção do @ DMGregory de criar ativos alternativos em resoluções diferentes:

A melhor solução que conheço é provavelmente o menos útil para você neste momento: desenvolva seus recursos de arte em um formato vetorial e rasterize-os conforme necessário mais tarde. Esta não é uma bala mágica; na maioria das vezes, você precisará fazer algumas pequenas modificações artesanais após a rasterização.

A próxima melhor opção que conheço é tentar vários algoritmos de escala de imagem, especificamente algoritmos de escala de pixel art . Como antes, isso não é uma pancéia; a seleção de um algoritmo de escala específico é altamente específica do contexto. Tem tanto a ver com a sensação do seu jogo quanto com a arte em si e, mesmo com um bom algoritmo + combinação de arte, você provavelmente precisará ajustar alguns sprites manualmente.

Nos dois casos, a ideia é usar uma ferramenta para fazer a maior parte do trabalho e concentrar o esforço humano nos detalhes restantes. Como o @DMGregory disse, "não há vitória fácil aqui, apenas trocas diferentes".

Original:

Escalado: