Rosto em Pixel Art: Olhos e Expressão em Poucos Pixels

Pixel art de rosto expressivo é uma questão de saber quais pixels carregam a emoção. Em um sprite de 32x32, o rosto inteiro tem uns 10 pixels de largura, e a diferença entre alegria e raiva cabe em 3 ou 4 pixels mudando de lugar: a inclinação da sobrancelha, a curva da boca e, nas emoções mais fortes, o tamanho do olho. Em um retrato de 64x64, as mesmas regras valem com mais resolução para detalhe.

Este guia mostra o que cabe em cada tamanho de rosto, como desenhar olhos de 1, 2 e 4 pixels, quais pixels mudar para alegria, raiva, medo e surpresa num sprite de 32x32 e como levar isso para um retrato de diálogo de 64x64, com passos no Aseprite.

Pixel art rosto: o que cabe em cada tamanho

Antes de desenhar a expressão, saiba quanto espaço você tem. Uma tabela prática, considerando a altura da cabeça:

A primeira decisão é aceitar o limite. Num sprite de 16x16, o rosto não carrega emoção: quem carrega é a pose do corpo. A partir de 32x32, o rosto começa a contar.

Olhos em 1, 2 e 4 pixels

O olho é o ponto que o jogador procura primeiro. Três tamanhos cobrem quase todos os casos:

Olho de 1 pixel. Um pixel escuro. A expressão vem da posição: olhos mais afastados parecem mais jovens e ingênuos; mais próximos, mais intensos. Olhos mais baixos na cabeça deixam o personagem mais "fofo" (proporção infantil); mais altos, mais adulto.

Olho de 2 pixels (1x2, vertical). O padrão mais usado em sprites de 24 a 32 pixels. A coluna de 2 pixels dá "presença" e permite um truque: trocar um dos dois pixels por um tom mais claro vira um brilho mínimo, e o personagem parece olhar para algum lugar.

Olho de 4 pixels (2x2 ou 2x3). Já permite pupila e brilho. Use 1 pixel escuro para a pupila, 1 claro para o brilho e o resto com o tom da íris. O lado onde fica a pupila define para onde o personagem olha.

Uma regra que vale para todos: o olho precisa de contraste com a pele. Olho marrom médio em pele marrom média some. Use o tom mais escuro da paleta para o olho ou contorne.

Sobrancelha e boca: os pixels que mudam a emoção

Em sprites pequenos, sobrancelha e boca são uma ou duas linhas de pixels. Pense nelas como ponteiros:

Sobrancelha (1 a 3 pixels por lado).

• Reta e alta: neutro, atento.
• Ponta interna para baixo (formando um "V"): raiva.
• Ponta interna para cima (formando um "telhado"): tristeza, preocupação, medo.
• Bem alta, longe do olho: surpresa.

Mover a ponta interna 1 pixel muda a leitura. É por isso que vale testar no zoom real.

Boca (2 a 5 pixels de largura).

• Linha reta: neutro.
• Pontas 1 pixel acima do meio: sorriso.
• Pontas 1 pixel abaixo: tristeza ou desagrado.
• Bloco aberto (2x2 ou 3x2) escuro: grito, surpresa, susto.
• Linha em zigue-zague: nervoso, medo.

Muitas vezes a boca nem precisa existir no neutro. Ela aparece só quando a emoção pede, e a própria aparição já é informação.

Expressões básicas em 32x32

Pegue um personagem de 32x32 com cabeça de cerca de 12 pixels de altura, olhos de 1x2 e boca de 3 pixels. As quatro expressões, descritas pixel a pixel:

Alegria. Olhos fechados em arco: troque cada coluna 1x2 por um "^" de 3 pixels (dois pixels laterais embaixo, um no meio em cima). Boca com as pontas subindo 1 pixel. Opcional: 1 pixel rosado em cada bochecha, abaixo e para fora dos olhos.

Raiva. Olhos mantêm 1x2, mas a sobrancelha aparece: 2 pixels por lado, com a ponta interna 1 pixel abaixo, encostando quase no olho. Boca reta ou com pontas para baixo, 1 pixel mais larga que o normal. Em pose de corpo, ombros sobem 1 pixel.

Medo. Sobrancelha com a ponta interna para cima. Olhos ficam com 1 pixel de branco ao lado (o "olho arregalado" mínimo). Boca pequena e em zigue-zague, ou uma linha curta deslocada para um lado. Corpo encolhido.

Surpresa. Olhos maiores: de 1x2 para 2x2, com 1 pixel de brilho. Sobrancelhas sobem 1 a 2 pixels. Boca vira um bloco aberto de 2x2 ou um "o" de 3x3.

No Aseprite, desenhe o rosto neutro, duplique o frame (Alt+N) para cada expressão e mude só o necessário. Ligue o onion skin (F3) para ver o neutro por baixo e conferir quantos pixels mudaram: se você mexeu em mais de 10 pixels para uma expressão em 32x32, provavelmente está redesenhando o rosto em vez de mudar a expressão.

Para ver tudo isso aplicado num personagem completo, do esboço à cor, o post Como Criar um Personagem em Pixel Art mostra a construção do corpo em volta desse rosto.

Um rosto expressivo isolado é um bom exercício. No jogo, ele precisa combinar com o sprite pequeno do mesmo personagem, com a paleta do cenário e com o sistema de diálogo que troca o retrato na hora certa da fala. Fazer arte e jogo conversarem é a parte que raramente aparece nos tutoriais de uma peça só.

Retrato de diálogo em 64x64

O retrato é o lugar da expressão sutil. A estrutura:

1. Canvas de 64x64, cabeça e ombros, rosto ocupando cerca de 40 pixels de altura.
2. Ative a simetria para a base. Em View > Symmetry Options, aparecem os botões de simetria no context bar; ligue a simetria horizontal (eixo vertical no meio do rosto) e arraste o eixo para o centro da cabeça. Desenhe contorno, olhos e orelhas: tudo que você pintar de um lado aparece do outro.
3. Desligue a simetria e quebre: cabelo caindo para um lado, uma sobrancelha 1 pixel mais alta, a boca levemente torta. Rosto espelhado perfeitamente parece máscara.
4. Olhos: 4 a 6 pixels de largura, com contorno superior grosso (pálpebra e cílios em 2 pixels), íris de 3 a 4 pixels, pupila de 1 a 2 e brilho de 1 pixel no mesmo lado nos dois olhos.
5. Sobrancelha: 2 pixels de espessura, 6 a 8 de comprimento.
6. Boca: linha de 6 a 10 pixels, com 1 pixel de sombra embaixo do lábio inferior.

Com essa resolução, entram detalhes que o sprite não comporta:

• Rugas de expressão. Uma linha de 2 a 3 pixels entre as sobrancelhas na raiva; linhas abaixo dos olhos no sorriso largo.
• Pálpebra. Pálpebra superior descendo 1 a 2 pixels sobre a íris passa cansaço, tédio ou desconfiança.
• Direção do olhar. Mover as pupilas 1 pixel para o lado faz o personagem olhar para o interlocutor.
• Suor e rubor. Gota de suor de 3x4 na testa (nervoso), faixa rosada nas bochechas (vergonha).

Monte um conjunto de 4 a 6 retratos por personagem: neutro, feliz, bravo, triste, surpreso e um "da personalidade" (o deboche de um, a timidez de outro). Organize como frames com tags (Frame > Tags > New Tag) para o código escolher a expressão pela tag.

Exagero e leitura

Em pixel art, o exagero não é opcional: é o que sobrevive à resolução baixa. Três princípios:

Exagere o primeiro sinal. Se é raiva, a sobrancelha desce mais do que você acha necessário. No zoom de trabalho (800%) parece caricato; no tamanho real, lê como raiva.

Combine rosto e corpo. Em 32x32, a pose carrega metade da emoção. Medo com o corpo encolhido e as mãos perto do rosto lê muito melhor do que medo só nos olhos.

Teste no zoom real. No Aseprite, abra a janela de pré-visualização (atalho F7) e deixe em 100% ou 200% ao lado do canvas de trabalho. Ajuste a expressão olhando para a pré-visualização, não para o zoom grande.

Uma forma prática de testar: mostre as quatro expressões para alguém sem dizer a ordem e peça para nomear. Se duas forem confundidas, aumente a diferença entre elas.

Erros comuns: olho que some, simetria morta

Olho que some. Cor do olho com valor parecido com o da pele ou do cabelo. Em movimento, o personagem fica "sem rosto". Correção: o olho usa o tom mais escuro da paleta do personagem.

Simetria morta. Rosto espelhado sem nenhuma diferença entre os lados. Parece boneco. Correção: depois de espelhar, quebre de propósito pelo menos 2 elementos.

Detalhe demais no sprite pequeno. Nariz, cílios e lábios num rosto de 10 pixels. Vira ruído e a expressão se perde. Correção: siga a tabela de tamanho e corte o que não cabe.

Mudar o rosto inteiro entre expressões. O personagem parece outra pessoa em cada emoção. Correção: duplique o neutro e mude só sobrancelha, boca e, se preciso, olhos.

Retrato ampliado do sprite. Ampliar o rosto de 32x32 para 64x64 não cria detalhe, só pixels maiores. Correção: desenhe o retrato do zero, mantendo cores e traços marcantes (cor de cabelo, formato dos olhos).

Próximo passo

Desenhe um personagem de 32x32 com rosto neutro e as quatro expressões, depois o retrato de 64x64 do mesmo personagem com as mesmas quatro emoções. Coloque os 10 lado a lado e faça o teste de nomear com alguém. Quando o sprite e o retrato forem reconhecidos como a mesma pessoa e as emoções lidas sem ajuda, o conjunto está pronto para ir para o jogo.

Para reforçar a base que sustenta rostos e personagens (contorno, paleta, sombreamento), o guia completo de pixel art para jogos cobre o fundamento.