Pixel Art de Inimigo: Design que o Jogador Lê na Hora

Um inimigo em pixel art funciona quando o jogador entende o que ele faz em meio segundo, antes do primeiro ataque. Para isso, três coisas trabalham juntas: a forma diz a função (atirador, investida, voador), a cor separa o inimigo do cenário e do herói, e um quadro de telegraph avisa que o golpe vem aí.

Aqui você desenha três inimigos de 32x32 px no Aseprite, cada um com uma função diferente, aplica as regras de cor e de telegraph e fecha com variações por troca de paleta.

Pixel art de inimigo: o jogador precisa ler em meio segundo

Num jogo de ação, o jogador vê um inimigo novo entrar na tela e tem pouquíssimo tempo para decidir: pular, atacar, recuar. Ele não lê a descrição do inimigo; lê o sprite. Num sprite de 32x32, você tem 1024 pixels para responder três perguntas:

1. O que ele faz? Atira, corre na minha direção, voa por cima?
2. De onde vem o perigo? Da boca, do chifre, do ferrão?
3. Quando ele vai atacar? Existe um aviso?

A forma responde a primeira, a cor ajuda na segunda e o telegraph responde a terceira. Detalhe interno (escamas, olhos bonitos, textura) não responde nenhuma. É por isso que inimigo bonito e inimigo legível nem sempre são o mesmo desenho.

Se você ainda está montando a base de pixel art (tamanho, paleta, contorno), o guia completo de pixel art para jogos cobre os fundamentos que este post assume.

Função define forma: atirador, investida e voador

A forma do inimigo deve apontar para o jeito como ele ataca. Três arquétipos que cobrem boa parte dos jogos de ação 2D:

Atirador. Fica parado ou se move pouco e dispara projéteis. Forma: base larga e estável (quadrada), a origem do tiro grande e evidente (uma boca enorme, um tubo, um olho). A parte que dispara aponta para o jogador. Exemplo neste post: um sapo atarracado com uma bocarra virada para a frente.

Investida. Corre em linha reta na direção do jogador. Forma: baixa e comprida, em cunha, com a parte que fere na frente (chifre, presa, cabeça blindada). O corpo inteiro "aponta". Exemplo: um javali com presas grandes e corpo inclinado para a frente.

Voador. Ataca de cima ou em trajetórias curvas. Forma: asas abertas que dominam a silhueta, corpo pequeno, nada tocando o chão. Exemplo: um morcego com asas que ocupam quase toda a largura do sprite.

Faça o teste: pinte os três de preto. Se dá para dizer qual atira, qual corre e qual voa só pela silhueta, a forma está fazendo o trabalho.

Cor de inimigo vs cor do cenário e do herói

A cor é a segunda camada de leitura. Defina uma regra para o jogo inteiro e não quebre:

• Cenário: valores médios, cores mais frias ou dessaturadas, contraste baixo. Ele é o fundo.
• Herói: uma cor própria e marcante, que nenhum inimigo usa. Muitas vezes, a mais saturada da tela depois dos perigos.
• Inimigos e perigos: cores quentes ou saturadas (vermelho, laranja, roxo forte), com contorno escuro fechado. O jogador aprende que aquela família de cor machuca.

No Aseprite, monte a paleta antes de desenhar e teste com o cenário de verdade: crie uma camada embaixo dos inimigos com um pedaço do cenário real do jogo (ou só um retângulo da cor média dele). O inimigo que some ali vai sumir no jogo.

Um teste útil é o de valor: Sprite > Color Mode > Grayscale numa cópia do arquivo mostra só claro e escuro. Se o inimigo e o fundo ficam com o mesmo cinza, a cor sozinha não está separando, e no meio da ação o jogador não vai ver.

Telegraph no sprite: o quadro antes do ataque

Telegraph é o aviso visual antes do golpe. Num sprite pequeno, ele precisa ser grande:

• Atirador: a boca abre e infla antes do tiro. Um quadro com a boca aberta e uma cor clara dentro (o projétil se formando).
• Investida: o javali abaixa a cabeça e recua um ou dois pixels, raspando a pata. É a antecipação clássica, e diz "vou correr".
• Voador: as asas se fecham por um quadro antes do ataque em descida. A silhueta muda tanto que o jogador percebe mesmo de canto de olho.

Dois recursos aumentam a leitura do telegraph sem desenhar mais:

1. Duração do quadro. No Aseprite, selecione o quadro de telegraph e aperte P (Frame Properties) para dar a ele uma duração maior que a dos outros. É o quadro que precisa de tempo de tela.
2. Flash de cor. Um quadro com o inimigo inteiro numa cor clara (ou só os olhos acesos) chama o olho na hora. Pode ser feito no código, piscando o sprite, sem desenhar nada.

O tempo exato do telegraph é decisão de design e depende da velocidade do jogo; teste no jogo rodando, não só na pré-visualização.

Desenhar três inimigos legíveis é um exercício. Fazer o jogo inteiro ter uma linguagem visual coerente, em que herói, inimigos, perigos e cenário seguem as mesmas regras de forma e cor, e tudo isso animado e funcionando dentro da engine, é onde quem aprende sozinho costuma travar. É essa produção completa que um curso de Arte 2D para jogos organiza com você.

Sprite inimigo 32x32 no Aseprite passo a passo

Faça o javali de investida como exemplo; os outros dois seguem o mesmo processo.

1. Novo arquivo. File > New, 32x32 px, fundo transparente, modo de cor Indexed. Indexado facilita a troca de paleta no fim. Ligue a grade com Ctrl+' se quiser ver os limites dos pixels.
2. Paleta. Para um inimigo, 5 a 7 cores bastam: contorno escuro, 3 tons do corpo, 1 cor de destaque para presas e olhos.
3. Silhueta. Com o Pencil (B), desenhe a forma em cunha com a cor média do corpo, preenchendo com o Paint Bucket (G). Corpo de uns 26 px de largura e 16 de altura, encostado na base do sprite. Cabeça baixa na frente, presas saindo 3 a 4 pixels do contorno.
4. Contorno. Desenhe à mão, ou use Edit > FX > Outline (Shift+O) para gerar o contorno em volta da silhueta e depois limpe os cantos.
5. Volume. Luz vinda de cima: tom claro no lombo, tom escuro na barriga e nas pernas de trás. Olho com a cor de destaque, 1 ou 2 pixels.
6. Animação de corrida. Alt+N cria um novo frame copiando o anterior. Quatro frames com as pernas alternando e o corpo subindo 1 pixel nos frames de passada. Ligue o onion skin com F3 para ver o frame anterior em transparência.
7. Telegraph. Um frame antes da corrida: cabeça 1 pixel mais baixa, corpo 2 pixels para trás, olho trocado para a cor mais clara. Dê a ele uma duração maior com P.
8. Tags. Selecione os frames de cada animação na timeline e crie as tags idle, telegraph, corrida. A engine vai usar esses nomes.

Para o inimigo olhar para o outro lado, não desenhe de novo: a engine espelha o sprite. Se precisar espelhar no arquivo, Shift+H vira a seleção na horizontal. O processo completo de personagem, incluindo walk cycle, está no post sobre criar personagem em pixel art.

Nas outras ferramentas, o fluxo é o mesmo. No LibreSprite (o fork gratuito de uma versão antiga do Aseprite), os menus são quase idênticos. No Pixelorama, também gratuito, a timeline, o onion skin e as tags de animação existem com nomes parecidos. No Krita, dá para fazer pixel art com o pincel de pixel e a timeline de animação, mas sem modo indexado nem troca de paleta tão direta.

Variações por palette swap

Com o sprite em modo indexado, uma variação mais forte custa minutos:

1. Duplique o arquivo (File > Save As com outro nome).
2. Na paleta, troque as cores do corpo: o javali marrom vira vermelho-escuro, a cor de destaque vira amarela. Como o sprite é indexado, todos os pixels de cada cor mudam juntos, em todos os frames.
3. Se o arquivo estiver em RGB, use Edit > Replace Color (Shift+R) cor por cor.

A regra de leitura continua valendo: a variação mais forte deve ser mais quente ou mais escura que a fraca, nunca mais parecida com o cenário. E defina a convenção uma vez para o jogo inteiro (por exemplo, vermelho é sempre a versão de elite). O post sobre palette swap em pixel art aprofunda a técnica, inclusive a troca de paleta feita na própria engine.

Erros comuns: inimigo que some no fundo

Mesma família de cor do cenário. Inimigo verde em floresta verde. Teste sempre sobre o cenário real.

Contorno aberto ou claro. Sem contorno escuro fechado, a borda do sprite se mistura com o fundo. Feche o contorno, ou use um contorno colorido escuro que contraste com o cenário.

Função escondida. O atirador sem boca ou tubo visível. O jogador só descobre que ele atira levando o tiro.

Telegraph de um pixel. Uma mudança mínima de pose não se percebe em movimento. O telegraph precisa mudar a silhueta, a cor ou as duas.

Detalhe interno demais. Escamas e texturas em 32x32 viram ruído e escondem a forma. Três tons e um destaque.

Inimigo maior que a grade do herói sem motivo. Se todo inimigo comum é do tamanho do herói ou maior, o tamanho deixa de comunicar força. Reserve tamanho grande para inimigos fortes e chefes.

Próximo passo

Desenhe os três inimigos em 32x32, cada um com idle, telegraph e ataque, e teste sobre o cenário do seu jogo em escala de cinza. Depois faça uma variação por troca de paleta de cada um e confira se as seis versões ainda se distinguem. Com isso pronto, siga para o post de palette swap em pixel art para organizar as variações do jogo inteiro.