Termos de pixel art: doubles, jaggies, banding, pillow shading e mais

A maioria dos erros de pixel art tem nome: doubles, jaggies, banding, pillow shading, excesso de anti-aliasing e ruído. Quando você conhece os nomes, começa a enxergar eles no seu próprio trabalho, e cada um tem uma correção simples.

Os alunos sempre me perguntam o que as pessoas querem dizer quando falam que a arte deles tem banding ou pillow shading. Pergunta justa. Eu mostro as correções nas minhas aulas, mas nem sempre falo os nomes. Então aqui estão eles, um por um, em palavras simples. Para cada um: o que é, por que fica errado e como corrigir.

Erros nas linhas

Doubles

Um double é um pixel a mais numa linha: dois pixels lado a lado, encostando pelo lado reto, onde um único degrau na diagonal resolveria. Ele deixa a linha mais grossa naquele ponto, e o olho percebe na hora. A correção: tire um deles, para a linha avançar só pelos cantos. Uma linha deve ter um pixel de largura em todo lugar.

Jaggies

Jaggies são degraus numa linha que não seguem um padrão. Uma linha ou curva suave muda os seus segmentos aos poucos: 3, 3, 2, 1, depois 2, 3, 4. Se ela pula de 2 para 6 e depois para 1, parece quebrada. Um único pixel fora do lugar faz o mesmo. A correção: mantenha as linhas retas numa proporção limpa (1:1, 1:2, 1:3) e deixe as curvas mudarem um ou dois pixels por vez.

Folha de linhas do Roman: uma curva com um duplo, com um serrilhado e com a ordem matemática quebrada, cada uma ao lado da curva corrigida — Da minha folha de linhas: os pixels vermelhos são os erros, os verdes a correção.

Erros no sombreamento

Pillow shading

Pillow shading é quando a sombra segue o contorno em toda a volta e a luz fica no meio. O objeto fica chapado e inchado, como um travesseiro. Acontece quando você sombreia a partir das bordas em vez de a partir da luz. A correção: decida primeiro de onde vem a luz. O lado virado para a luz fica com as cores claras, o lado oposto fica com as sombras. Cada pixel tem que concordar com essa única luz.

A esfera do Roman com a luz vindo do canto superior esquerdo — Esquerda: a minha esfera sombreada do jeito errado de propósito. Direita: do jeito que eu sombreio no curso.

Banding

Banding é quando os tons do sombreamento ficam em faixas certinhas da mesma largura que seguem o contorno, ou quando os degraus de dois tons se alinham bem um ao lado do outro. As faixas viram a primeira coisa que você vê, e a forma se perde. A correção: faça as áreas dos seus tons com larguras diferentes, siga a forma e a luz em vez do contorno, e quebre os degraus alinhados.

Uma esfera sombreada em faixas retas da mesma largura — Esquerda: os mesmos tons em faixas iguais. Direita: a sombra segue a forma redonda.

A esfera do Roman com uma sombra curva e um terminador fino — Esquerda: os mesmos tons em faixas iguais. Direita: a sombra segue a forma redonda.

Sombreamento chapado

Uma cor por parte e nenhuma sombra ou luz. Não é errado numa primeira passada, é exatamente assim que eu coloco as cores de base. Mas se ficar assim, o objeto não tem volume. A correção: coloque uma sombra no lado escuro e uma luz no lado iluminado. Normalmente isso basta.

Um círculo vermelho chapado com contorno preto — Esquerda: a primeira passada chapada. Direita: uma sombra, uma luz, e o contorno acompanha as duas.

A mesma esfera com sombra, terminador, brilho e contorno recolorido — Esquerda: a primeira passada chapada. Direita: uma sombra, uma luz, e o contorno acompanha as duas.

Erros nos detalhes

Excesso de anti-aliasing

Anti-aliasing é colocar cores intermediárias nos degraus de uma linha ou curva, para ela parecer mais suave. Alguns pixels aqui e ali ajudam muito. Demais, e a borda fica borrada e mole, e o sprite perde o visual nítido de pixel. A correção: use anti-aliasing só nos degraus mais longos das curvas, e confira o sprite no tamanho real. Se você não vê diferença em 1x, não precisa desses pixels.

Slide do Roman: uma maçã com a borda serrilhada ao lado da mesma maçã com alguns pixels intermediários, com um círculo de zoom — Dos slides do meu curso: alguns pixels intermediários na curva, mostrados no zoom.

A maçã com um anel suave de meio-tom em toda a borda — Esquerda: anti-aliasing em todas as bordas, a maçã fica borrada. Direita: só onde ajuda.

A maçã do Roman com anti-aliasing só em alguns lugares — Esquerda: anti-aliasing em todas as bordas, a maçã fica borrada. Direita: só onde ajuda.

Ruído e pixels soltos

Ruído são pixels isolados de outra cor espalhados sem motivo: numa textura, dentro de uma forma ou flutuando ao lado dela. Parecem sujeira na tela. A correção: junte os pixels em grupos com uma forma clara. Faíscas e partículas tudo bem, quando você coloca elas de propósito.

As pedras do Roman com pixels soltos aleatórios espalhados por cima e em volta delas — Esquerda: minhas pedras com pixels soltos jogados no meio. Direita: cada pixel pertence a um cluster.

As pedras do Roman, limpas — Esquerda: minhas pedras com pixels soltos jogados no meio. Direita: cada pixel pertence a um cluster.

Pixels de tamanhos diferentes

Alguns artistas chamam isso de fat pixels. É quando partes de uma imagem são ampliadas, e aí alguns pixels ficam maiores que outros. Isso quebra a grade e fica estranho na hora. A solução: nunca amplie um sprite para deixá-lo maior. Redesenhe no novo tamanho e mantenha um só tamanho de pixel na cena toda.

Duas maçãs na mesma tela: a pequena no tamanho normal e uma cópia ampliada duas vezes, com pixels visivelmente maiores — Uma tela, dois tamanhos de pixel: a maçã grande é a pequena ampliada. O olho percebe na hora.

Coisas que você quer ter

Sel-out

Contorno seletivo. Em vez de um contorno preto em volta de tudo, o contorno pega as cores da área ao lado: mais claro no lado iluminado, mais escuro no lado da sombra. Nas minhas aulas eu faço isso no passo das cores: quando a forma já está clara, eu recoloro o contorno preto com um tom mais escuro da cor vizinha. O objeto fica mais suave e se encaixa melhor na cena.

A maçã com cores chapadas e contorno preto — Esquerda: contorno preto em volta de tudo. Direita: o contorno pega um tom mais escuro da cor vizinha.

A maçã com o contorno recolorido em vermelho escuro e verde escuro — Esquerda: contorno preto em volta de tudo. Direita: o contorno pega um tom mais escuro da cor vizinha.

Dithering

Dithering é um padrão xadrez (ou parecido) de duas cores, para que de longe elas pareçam uma cor intermediária. É útil para transições suaves, como um céu ou um brilho. Usado demais, fica ruidoso e agressivo. Use pouco e de propósito.

Rampa de cores e hue shifting

Uma rampa de cores é a sequência de tons que você usa para um material, da sombra mais escura até a luz mais clara. Hue shifting quer dizer que o matiz muda ao longo dessa rampa, em vez de a cor só ficar mais escura ou mais clara. As sombras costumam puxar para um matiz mais frio ou mais avermelhado, as luzes para um mais quente e amarelado. É isso que deixa a rampa viva em vez de lamacenta. Eu começo uma paleta por um tom médio e monto de três a cinco cores em volta dele.

✗ Só mais escuro e mais claro

✓ Com hue shift (meu fogo)

O mesmo vermelho só escurecido e clareado fica lamacento e rosado. No meu fogo o matiz vai do vermelho ao amarelo. Mais em como fazer uma paleta.

A maçã pronta: contorno sel-out, uma rampa de cores do vermelho escuro ao claro, alguns pixels de anti-aliasing — A maçã pronta: o contorno está recolorido, os vermelhos vão do escuro ao claro e alguns pixels de anti-aliasing suavizam a curva.

Confira o seu desenho

Minhas linhas têm um pixel de largura, sem duplos?
Minhas curvas mudam degrau por degrau, sem jaggies?
Todo o sombreamento segue uma só luz, e não o contorno?
Meus tons formam formas diferentes, e não listras?
Eu vejo diferença com o meu anti-aliasing em 1x?
Cada pixel está ali de propósito?

Nas minhas aulas interativas, o modo “Desenhe o seu” confere algumas dessas coisas para você. Quando você desenha a sua própria versão do zero, ele marca os pixels duplos nas suas linhas e os pixels soltos, e confere se a luz está do lado certo. Experimente na maçã ou nas pedras.