Erros Comuns de Pixel Art (e Como Corrigir Cada Um)

Os erros pixel art que mais derrubam um sprite são sempre os mesmos: pillow shading, banding, cores demais com pouco contraste, jaggies e contorno de espessura dupla, mixels e sprite ilegível no tamanho do jogo. A boa notícia é que todos têm correção mecânica. Você não precisa de mais talento, precisa saber o que procurar e qual ferramenta usar. Esta lista mostra cada erro com um exemplo de antes e depois em grade de pixels e o passo concreto para corrigir no Aseprite.

Nos diagramas, cada caractere é um pixel: . é transparente, # é contorno, e números de 1 a 4 são tons do mais claro (1) ao mais escuro (4).

Erros pixel art: como usar esta lista

Não tente corrigir tudo de uma vez. Faça uma passada por erro, nesta ordem, porque cada correção afeta a seguinte:

1. Legibilidade (forma e tamanho)
2. Escala e mixels
3. Linhas e contorno
4. Cores e contraste
5. Sombreamento (pillow shading e banding)

Faz sentido corrigir a forma antes da sombra: não adianta sombrear com perfeição um braço que está no lugar errado. E antes de começar, duplique a camada do sprite (Layer > Duplicate) para poder comparar o antes e o depois.

Pillow shading

O erro: sombrear seguindo a borda do sprite, com o centro claro e as bordas escuras em volta, por igual. Parece um travesseiro iluminado de frente. Ignora a fonte de luz e achata tudo.

Antes (pillow)        Depois (luz de cima à esquerda)
. # # # # # .         . # # # # # .
# 3 3 3 3 3 #         # 1 1 2 2 3 #
# 3 2 2 2 3 #         # 1 2 2 2 3 #
# 3 2 1 2 3 #         # 2 2 2 3 3 #
# 3 2 2 2 3 #         # 2 2 3 3 4 #
# 3 3 3 3 3 #         # 3 3 3 4 4 #
. # # # # # .         . # # # # # .

Correção no Aseprite:

1. Decida a direção da luz e marque com uma seta numa camada de rascunho.
2. Numa camada nova acima, pinte a área de sombra como uma forma: o lado oposto à luz e a parte de baixo.
3. Use a ink Shading (no context bar do Pencil) com a rampa do material selecionada na paleta: cada clique escurece ou clareia o pixel um passo na rampa, o que acelera redistribuir os tons.
4. Clareie o lado da luz. O ponto mais claro não fica no centro, fica perto da borda virada para a luz.

O guia de sombreamento em pixel art aprofunda planos de luz e rampas.

Banding

O erro: faixas de tons diferentes correndo paralelas, com a mesma largura e alinhadas ao mesmo contorno. O olho enxerga as faixas como linhas, e a grade de pixels aparece.

Antes (banding)       Depois (faixas quebradas)
4 3 2 1 1 1 1         4 3 2 2 1 1 1
4 3 2 1 1 1 1         4 4 3 2 1 1 1
4 3 2 1 1 1 1         4 3 3 2 2 1 1
4 3 2 1 1 1 1         4 4 3 3 2 1 1

No "antes", cada tom forma uma coluna perfeita de 1 pixel colada na outra. No "depois", a largura de cada faixa varia e as transições não se alinham.

Correção no Aseprite:

1. Encontre as faixas: procure tons que acompanham o contorno com a mesma largura.
2. Varie a largura: em uns trechos o tom intermediário tem 1 pixel, em outros 2 ou 3.
3. Desalinhe as bordas: a transição do tom 3 para o 2 não deve acontecer na mesma coluna em que a do 2 para o 1.
4. Se o sprite é pequeno, considere tirar um tom da rampa. Muitas vezes o banding é sintoma de tons demais numa área pequena.

Em áreas grandes de transição (céu, fundo), outra opção é o dithering, que mistura duas cores em padrão. O post sobre dithering em pixel art mostra quando ele ajuda e quando vira ruído.

Cores demais e baixo contraste

O erro: dezenas de cores com pouca diferença de valor entre elas. Na tela, várias viram a mesma, e o sprite fica sem leitura e com aparência suja.

Correção no Aseprite:

1. Conte as cores. Numa cópia do arquivo, Sprite > Color Mode > Indexed converte o sprite para paleta indexada e mostra as cores usadas. Se um personagem de 32 pixels passa de 20 cores, provavelmente tem duplicatas.
2. Una as cores quase iguais. Com Edit > Replace Color (Shift+R), troque a cor redundante pela vizinha na rampa.
3. Teste em escala de cinza. Numa camada duplicada, use Edit > Adjustments > Hue/Saturation e zere a saturação. Se pele, roupa e cabelo viram o mesmo cinza, falta contraste de valor.
4. Abra a distância entre os tons. Cada passo da rampa precisa ter diferença visível de valor no tamanho real do sprite.

Paleta pequena e bem espaçada resolve metade dos problemas de leitura. O guia de pixel art para jogos explica como escolher uma paleta-base para o jogo inteiro.

Achar o erro na lista é fácil. Difícil é enxergar ele no seu próprio sprite, porque depois de horas olhando o desenho o olho se acostuma com o defeito. É por isso que tanta gente que aprende sozinha passa meses repetindo os mesmos vícios: falta alguém que aponte o pillow shading que você não vê mais. Um processo com correção e exercícios em sequência acelera esse olhar.

Jaggies e linhas de espessura dupla

O erro: linhas com degraus irregulares (jaggies) e cantos em L que engrossam o contorno.

Antes (L e ritmo quebrado)   Depois (diagonal limpa)
# # # . . . .                # # # . . . .
. . # # . . .                . . . # # . .
. . . # # # .                . . . . . # .
. . . . . # #                . . . . . . #

No "antes", os cantos se tocam pelo lado e pela diagonal ao mesmo tempo, e os segmentos têm tamanhos 3, 2, 3, 2 sem padrão de curva. No "depois", os segmentos diminuem de forma regular e se conectam só pela diagonal.

Correção no Aseprite:

1. Ligue Pixel-perfect no context bar do Pencil (B) para todo traço de 1 pixel daqui para frente.
2. Para as linhas existentes, dê zoom e apague com o Eraser (E) o pixel que forma cada L.
3. Conte os segmentos de cada curva e reorganize em sequência gradual.
4. Para retas, use a ferramenta Line (L) em inclinações limpas (1:1, 2:1, 3:1).

Um caso parecido e mais sutil: o contorno que tem 1 pixel na maior parte da silhueta e 2 pixels em alguns trechos, geralmente nas curvas do ombro, da cabeça e dos pés. Em zoom alto parece detalhe. Em tamanho real, esses trechos viram manchas escuras que puxam o olho para o lugar errado. Faça uma volta completa na silhueta com zoom e, em cada ponto onde o contorno engrossa, decida qual dos dois pixels fica. Normalmente fica o que mantém a curva gradual e sai o que forma o L.

Também vale olhar a junção entre o contorno externo e as linhas internas. Quando uma linha de dobra de roupa encosta no contorno, ela costuma criar um nó de 3 ou 4 pixels escuros. Afaste a linha interna 1 pixel do contorno ou clareie o pixel de encontro para o tom de sombra do material.

Mixels e escala misturada

O erro: pixels de tamanhos diferentes na mesma tela. Acontece quando um sprite é ampliado 2x no arquivo e colocado ao lado de outro em 1x, quando uma parte é redimensionada para "caber" ou quando sprites são girados em ângulos livres.

Correção no Aseprite:

1. Defina a escala única do jogo (por exemplo, todos os sprites desenhados em 1x, com tile de 16x16).
2. Se um sprite foi desenhado ampliado, reduza com Sprite > Sprite Size, método Nearest-neighbor, para a escala correta, e limpe à mão o que se perdeu.
3. Se uma parte foi redimensionada ou girada e ficou com pixels irregulares, redesenhe essa parte na grade.
4. Faça a ampliação só na engine ou na exportação final, sempre em múltiplos inteiros.

Como reconhecer mixel sem medir: aproxime o sprite do tile ao lado e veja se os "quadradinhos" têm o mesmo tamanho. Se um personagem parece mais nítido, ou mais borrado, que o cenário mesmo com a mesma câmera, é sinal de escala diferente. Outro sinal são as diagonais de um objeto girado em ângulo livre: elas aparecem com degraus de tamanhos aleatórios, porque a rotação recalculou os pixels. Nesse caso, a correção é desenhar a versão girada à mão ou aceitar só rotações de 90 e 180 graus, que preservam a grade.

Sprite ilegível no tamanho do jogo

O erro: um sprite que fica ótimo com zoom de 800% e vira uma mancha no tamanho real.

Correção no Aseprite:

1. Teste a silhueta. Duplique a camada e preencha o sprite com uma cor só (ink Lock Alpha no Pencil com brush grande pinta só onde já há pixel). Se a silhueta não diz o que é e para onde está virado, ajuste a pose ou exagere as formas.
2. Veja no tamanho real. Abra a janela de Preview do Aseprite num canto da tela, em 100% ou 200%, e trabalhe olhando para ela.
3. Tire detalhe. Fivelas, costuras, texturas de 1 pixel que viram ruído: apague. Detalhe só onde o olho deve ir (rosto, arma).
4. Teste sobre o cenário. Cole uma captura do jogo numa camada de fundo.

Checklist antes de exportar

Passe por esta lista em todo sprite, antes de mandar para a engine:

• A silhueta lê numa cor só?
• O sprite lê no tamanho real, sobre o cenário do jogo?
• Todos os sprites usam a mesma escala de pixel?
• O contorno não tem cantos em L nem jaggies visíveis?
• A paleta não tem cores quase iguais? Em escala de cinza, as partes se separam?
• A luz vem da mesma direção que nos outros sprites?
• Não há pillow shading nem banding?
• Não há pixels semitransparentes na borda (a não ser que seja proposital)?
• O arquivo exporta em 1x, PNG com transparência?

Na engine, mais dois cuidados. Na Godot 4, deixe o filtro de textura em Nearest (no projeto ou no nó) para o sprite não borrar. Na Unity 6, na importação do sprite, use Filter Mode em Point (no filter) e Compression em None, e confira que o Pixels Per Unit é o mesmo em todos os sprites.

Próximo passo

Pegue o último sprite que você fez e passe esta lista na ordem, uma correção por vez, salvando o antes e o depois. Em geral, só a passada de legibilidade e a de contraste já mudam o sprite mais do que qualquer detalhe novo.

Para aprofundar o erro que mais aparece, leia o guia de sombreamento em pixel art. Se o seu problema é transição de cor em áreas grandes, o de dithering é o próximo.