Anti-aliasing em pixel art

O que é

Os pixels são quadrados, então qualquer linha que não seja perfeitamente reta ou num ângulo limpo vira uma escadinha. Numa curva suave, como a borda de um escudo ou o alto de uma cabeça, esses degraus podem parecer serrilhados com zoom de 1×.

O anti-aliasing manual (muitas vezes escrito AA) suaviza um degrau colocando um ou dois pixels de uma cor intermediária no canto onde o traço salta. O olho os mistura, e a curva parece mais suave do que os pixels realmente são. A cor costuma vir da rampa existente, em algum ponto entre o traço e o que está ao lado dele.

É um efeito feito à mão: alguns pixels escolhidos, não um filtro sobre o sprite inteiro.

Quando ajuda

• Curvas longas e suaves. Um círculo ou uma rampa que desce dois ou três pixels por vez é o que mais se beneficia.
• Sprites grandes. A partir de 64 px há espaço para pixels intermediários sem perder detalhe.
• Traços internos. Os traços entre partes de um sprite ficam sobre cores conhecidas, então o tom intermediário é fácil de escolher e sempre correto.

Quando deixar de fora

• Sprites pequenos. Com 16 ou 24 px, cada pixel carrega forma. Ali, um pixel intermediário muitas vezes parece uma mancha ou um detalhe perdido.
• A borda externa, sobre fundos desconhecidos. Uma silhueta com anti-aliasing é misturada para uma cor de fundo só. Coloque o sprite sobre outra e os pixels suaves aparecem como um halo fraco.
• Paletas muito limitadas. Com quatro ou oito cores, pode não haver um tom que fique entre outros dois. Então os degraus ficam duros, e isso faz parte do visual.
• Estilos fortes e blocados. Alguns jogos querem cada degrau visível. É uma escolha, não um erro.

Erros comuns

• Demais. Aplicar anti-aliasing em cada degrau deixa o sprite inteiro com cara de borrado, como se fosse ampliado com filtragem ligada.
• Comprimento errado. A sequência intermediária deve acompanhar o degrau que ela suaviza. Um único pixel no fim de um degrau longo faz pouco; uma sequência longa ao lado de um degrau curto cria um calombo.
• Banding. Alinhar os pixels intermediários numa segunda linha paralela faz a borda parecer dobrada.
• Suavização da engine. O anti-aliasing feito à mão é desfeito pela filtragem bilinear. Ajuste o filtro de textura para nearest.

Como o Pixor faz

O Pixor desenha traços com um pixel de largura sem cantos em L e tem um ajuste de anti-aliasing com três níveis. 0 deixa todos os traços duros. 1 suaviza só a silhueta. 2 suaviza os cantos de todos os traços, não só a borda externa. Experimente 0 para sprites pequenos e fundos carregados, e 1 ou 2 para sprites maiores, em que as curvas têm espaço. O ajuste faz parte do visual no grafo de Estilo, e o manual de ajustes o lista junto com as outras opções de traço.

Relacionados

• Contornos: os traços que o anti-aliasing suaviza
• Selout: contornos coloridos que já suavizam uma borda
• Tamanhos de sprite: quanto espaço um sprite tem para pixels intermediários