Converter Desenho em Pixel Art (e Por Que Não Automatizar)

Para converter imagem em pixel art, você reduz o desenho para a resolução do sprite, limita a paleta e depois redesenha à mão o que o filtro estragou. A parte automática (reduzir e indexar as cores) leva segundos e entrega uma base. A parte manual (limpar linhas, remover cores de borda, recolocar olhos e mãos) é o que transforma essa base em sprite de jogo. Se você para no filtro, o resultado parece uma foto borrada de perto, não pixel art.

Aqui você faz o teste prático reduzindo um desenho para 64 x 64 no Aseprite, vê exatamente o que o filtro faz com os pixels e segue o processo de retoque até o sprite final.

Converter imagem em pixel art: o que o filtro faz de verdade

Todo filtro de "pixelate" ou redução faz uma de duas coisas com cada bloco de pixels da imagem original:

• Pega um pixel e descarta o resto (Nearest-neighbor). Rápido e nítido, mas aleatório: uma linha fina de contorno pode cair entre as amostras e sumir, e outra pode virar uma escada torta.
• Faz a média do bloco (Bilinear e similares). Nada some, mas tudo vira mistura. Contorno preto sobre pele vira um marrom intermediário, e cada borda ganha uma faixa de cores que não existem na sua paleta.

Os dois falham no mesmo ponto: o filtro não sabe o que é importante. Ele não sabe que o olho do personagem precisa de exatamente 1 pixel preto, que a mão precisa de uma silhueta clara e que a espada precisa de uma linha reta. Quem faz pixel art decide isso pixel por pixel. Se você ainda está pegando o jeito dessas decisões, o guia completo de pixel art para jogos cobre a base.

Teste prático: reduzir um desenho para 64x64

Pegue um desenho seu de personagem, de corpo inteiro, com fundo transparente ou branco liso. No Aseprite:

1. File > Open no desenho. Se ele vier com muitas cores e alta resolução, tudo bem.
2. Sprite > Canvas Size para deixar a imagem quadrada, com o personagem ocupando quase toda a altura.
3. Sprite > Sprite Size (atalho Ctrl+Alt+I). Marque para manter a proporção, defina a largura como 64 px e escolha o método.

O Aseprite oferece três métodos de redimensionamento: Nearest-neighbor (o padrão), Bilinear e RotSprite. Faça o teste duas vezes, uma com Nearest-neighbor e outra com Bilinear (Ctrl+Z entre elas), e compare:

• Com Nearest-neighbor, você vai ver olhos que sumiram ou viraram 2 pixels desalinhados, contorno com buracos e detalhes aleatórios.
• Com Bilinear, o personagem está todo ali, mas borrado, com bordas de 2 ou 3 tons e centenas de cores.

Para a conversão, Bilinear costuma ser a melhor base, porque não perde informação. Você vai limpar o borrão de qualquer jeito, e é mais fácil limpar borrão do que adivinhar o que sumiu.

Depois, amplie a visualização (não o sprite) para 800% ou mais e observe. É assim que o resultado vai ser julgado no jogo, com a câmera ampliando cada pixel.

Limitando a paleta e removendo cores de borda

O sprite reduzido tem centenas de cores. Um sprite de 64 x 64 bem feito costuma usar entre 8 e 24. Para reduzir:

1. Monte a paleta antes. Você pode carregar uma paleta pronta pelo menu de opções da barra de cores, ou gerar uma a partir do próprio sprite com New Palette from Sprite, no mesmo menu. A paleta gerada é uma aproximação: confira e apague as cores quase iguais.
2. Converta para Indexed. Sprite > Color Mode > Indexed. No modo indexado, cada pixel aponta para uma cor da paleta (até 256 cores). A conversão permite escolher um tipo de pontilhado (dithering); para sprite de personagem, comece sem pontilhado, porque ele espalha pixels soltos pela pele e pela roupa.
3. Reduza à mão. Com a imagem indexada, apague da paleta as cores que fazem a mesma função (três marrons parecidos no cabelo viram um) e repinte as áreas afetadas com o balde (G) com a opção Contiguous desligada para trocar a cor em toda a imagem.

O que mais sobra depois da indexação são as cores de borda: aquela faixa de um pixel com um tom intermediário entre o contorno e o fundo, ou entre o contorno e a pele. Em pixel art, borda intermediária só existe quando é anti-aliasing intencional. Na conversão, ela é ruído. Substitua por contorno ou por cor de preenchimento, uma a uma.

Escolher bem essa paleta pequena é meio caminho andado. Se ela ainda é um mistério, vale começar por uma paleta pronta testada, ajustando depois.

Limpando linhas e jaggies à mão no Aseprite

Agora o trabalho de verdade. Ferramentas e configurações:

• Pencil (B) com tamanho 1 e a opção Pixel-perfect ligada na barra de contexto. Ela remove automaticamente os pixels em "L" que deixam a linha grossa nas curvas.
• Eraser (E) tamanho 1.
• Eyedropper: Alt + clique com o lápis, para pegar cor da própria imagem.
• Simetria: View > Symmetry Options liga os botões de simetria horizontal e vertical na barra de contexto, útil para recolocar olhos e detalhes simétricos de um personagem de frente.

Ordem de limpeza:

1. Contorno externo. Redesenhe a silhueta com linha de 1 pixel contínua. Curvas viram escadas com degraus regulares (2-2-2, depois 1-1-1), não degraus aleatórios. Esses degraus quebrados são os jaggies que denunciam a conversão.
2. Rosto. Olhos, boca e nariz quase sempre precisam ser redesenhados do zero. Em 64 px de altura, um olho tem 1 ou 2 pixels de largura. Posicione à mão.
3. Mãos e pés. Viram blocos simples, de 3 a 5 pixels. Dedos não existem nesse tamanho, só a forma geral.
4. Massas de cor. Una áreas de sombra em formas limpas. Remova pixels solitários de uma cor diferente no meio de uma área.
5. Luz. Reaplique a luz com a lógica de pixel art, em rampas da paleta. O post sobre o Aseprite para jogos mostra a configuração da ferramenta para esse tipo de trabalho.

Esse retoque leva de 30 minutos a algumas horas por sprite, conforme o tamanho. É o tempo que separa "imagem pixelada" de "sprite".

Converter um desenho é um exercício. Fazer um personagem que funciona em idle, corrida, pulo e ataque, com a mesma paleta e lendo bem no jogo, é outra escala de trabalho, e é onde muita gente que aprende sozinha trava. Um processo de arte 2D para jogos com etapas e revisão encurta esse caminho.

Quando o atalho funciona: base de referência, não sprite final

A conversão automática tem usos legítimos:

• Estudo de proporção. Você desenhou o personagem grande e quer saber quantos pixels a cabeça vai ocupar em 64 px. A redução mostra na hora.
• Base de cenário. Uma pintura de fundo reduzida e indexada vira um ponto de partida para um fundo em pixel art, que você repinta por cima numa camada nova.
• Paleta de referência. Reduzir uma ilustração sua para 32 cores mostra quais tons ela realmente usa.
• Teste de leitura. Se o desenho reduzido não lê nem como mancha, o design precisa de silhueta mais clara antes de qualquer pixel.

Em todos esses casos, o resultado é referência numa camada de baixo, com opacidade reduzida, e o sprite final é desenhado por cima.

Os outros editores fazem o mesmo processo: no LibreSprite, Sprite > Sprite Size e a conversão para indexado ficam em menus parecidos com os do Aseprite, já que ele é um fork de uma versão antiga do programa. No Pixelorama, a redução fica no menu Image, na opção de escalar a imagem, com escolha de interpolação. No Krita, Image > Scale Image to New Size permite escolher o filtro de reamostragem, e o pincel u) Pixel Art cuida da limpeza.

Erros comuns: confiar no pixelate, manter anti-aliasing do filtro, escala não inteira

Confiar no pixelate. Publicar o resultado do filtro como sprite. Quem joga percebe a borda borrada e os olhos tortos.

Manter o anti-aliasing do filtro. As cores intermediárias da redução Bilinear ficam em toda borda. Na tela do jogo, isso aparece como um halo sujo ao redor do personagem, especialmente sobre fundos diferentes do original.

Escala não inteira. Reduzir para 64 px e depois exibir no jogo em 2,5x. Pixels ficam com tamanhos diferentes, alguns com 2 e outros com 3 pixels de tela. Use sempre escala inteira (2x, 3x, 4x). O post sobre ampliar pixel art sem borrar cobre isso em detalhe.

Filtro de textura ligado na engine. Mesmo com o sprite limpo, a engine pode suavizar na hora de desenhar. Na Godot, defina em Project Settings > Rendering > Textures o filtro padrão de Canvas Textures como Nearest. Na Unity, selecione o sprite e, no Inspector, mude Filter Mode para Point (no filter) e Compression para None.

Paleta grande demais. 60 cores num sprite de 64 px. Cada cor a mais é uma decisão a menos. Comece com 12 e só acrescente quando faltar.

Ferramentas e geradores online: limites

Existem vários sites e aplicativos que prometem transformar qualquer foto em pixel art. Eles fazem, por dentro, o mesmo processo deste post: reduzem, indexam e às vezes aplicam pontilhado. Alguns permitem escolher a paleta e o tamanho, o que ajuda a gerar uma referência rápida.

Os limites são os mesmos do filtro do Aseprite, com dois agravantes. Primeiro, você não controla o método de redução nem a ordem das etapas. Segundo, antes de subir qualquer imagem, leia os termos do site: alguns guardam o que você envia, e a imagem convertida continua sujeita à licença da original. Foto de terceiros convertida em pixel art não vira sua.

Use geradores para estudo e referência. O sprite que vai para o jogo é desenhado por você, pixel por pixel, em cima dessa base.

Próximo passo

Pegue um desenho seu, reduza para 64 x 64 com Bilinear, indexe para 16 cores sem pontilhado e cronometre o retoque: contorno, rosto, mãos, massas de cor e luz. Depois, desenhe o mesmo personagem do zero em 64 x 64 sem a base e compare os dois resultados e o tempo gasto.

Para entender o que fazer com o sprite depois de pronto, siga para o guia de ampliar pixel art sem borrar, e para firmar os fundamentos, volte ao guia completo de pixel art para jogos.