Personagem Top-Down em Pixel Art: 4 Direções

Para fazer um pixel art personagem top down em 4 direções, você desenha três vistas (frente, costas e um lado), espelha o lado para gerar a quarta direção, corrige à mão o que não pode inverter (arma, cabelo, detalhes assimétricos e luz) e monta a caminhada com 4 frames por direção (dá para desenhar só 3 e repetir o do meio), cada direção numa tag do Aseprite. É o fluxo usado na maioria dos RPGs e jogos de aventura 2D com câmera de cima, e cabe num fim de semana para um personagem de 16 a 32 pixels.

Este guia mostra a perspectiva certa, a proporção, cada vista, o espelhamento com Shift+H, o walk cycle econômico e a organização de tags que deixa a exportação para Godot ou Unity sem dor de cabeça.

Perspectiva top-down e 3/4: o que muda no sprite

O que a maioria dos jogos chama de top-down é, na verdade, a visão 3/4: a câmera fica acima e um pouco à frente do personagem. Por isso você vê o topo da cabeça e o rosto ao mesmo tempo, e o chão aparece como se estivesse inclinado para você.

Isso muda o desenho em três pontos:

1. A cabeça fica maior e mais à frente. Como a câmera está acima, a cabeça e os ombros ficam mais próximos dela e ganham destaque. Em sprite pequeno, a cabeça pode ocupar quase metade da altura.
2. Os pés quase não aparecem como base. O personagem não "pisa" numa linha de chão como num jogo de plataforma. Ele fica sobre o piso, e a sombra elíptica embaixo dos pés é o que planta ele no lugar.
3. O topo das coisas aparece. O topo da cabeça, dos ombros e dos objetos que ele carrega recebem luz se ela vem de cima.

Top-down puro, com a câmera exatamente em cima, mostra só a cabeça e os ombros. Ele é comum em jogo de tiro com mira de mouse e em jogo de corrida, porque o personagem gira livremente. Para personagem que anda em 4 direções e fala com NPCs, a 3/4 é a escolha padrão.

Proporção e tamanho do personagem

Defina a caixa antes do primeiro pixel. Combinações que funcionam:

• 16x16: personagem bem compacto, cerca de 2 cabeças de altura. Rápido de animar, ótimo para primeiro projeto.
• 16x24 ou 16x32: um tile de largura e um e meio ou dois de altura, num tileset de 16x16. Passa em corredor de 1 tile e tem altura para rosto e roupa.
• 32x32: mais detalhe, de 2,5 a 3 cabeças de altura, bom para jogos com tile de 32x32 ou com personagem em destaque.

No Aseprite: File > New, defina largura e altura (por exemplo, 16x24), Color Mode em Indexed se você já tem uma paleta fechada, e fundo transparente. Ligue a grade em View > Grid > Grid Settings com o tamanho do tile, para ver o personagem em relação ao chão.

Proporção chibi (cabeça grande, corpo curto) é a mais comum no top-down porque a cabeça carrega a leitura de direção. Num personagem de 24 pixels de altura, uma divisão que funciona é cabeça com 10 a 12 pixels, tronco com 6 a 7 e pernas com 5 a 6.

Se você nunca desenhou um personagem em pixel art, comece pelo guia de como criar um personagem em pixel art, que trata silhueta, paleta e limpeza de contorno. Aqui o foco é o que muda quando ele precisa olhar para 4 lados.

Pixel art personagem top down: frente, costas e lado

Desenhe na ordem frente, lado, costas. A frente define o personagem, o lado é a vista mais difícil, e as costas saem quase de graça a partir da frente.

Frente (andando para baixo). É a vista que o jogador mais vê. Desenhe simétrica: olhos, ombros e pés espelhados no eixo central. Uma dica do Aseprite: o modo de simetria no context bar da ferramenta Pencil espelha o que você desenha de um lado para o outro e acelera muito essa vista. Depois desligue e quebre a simetria nos detalhes (cabelo, arma).

Lado (andando para a direita). O personagem gira 90 graus. Só um olho aparece, o nariz pode virar 1 pixel saindo do contorno, um braço fica na frente do corpo e o outro some. A largura do corpo diminui. A cabeça continua na mesma altura das outras vistas, e isso é crucial para não "pular" quando o jogador troca de direção.

Costas (andando para cima). Parta de uma cópia da frente. Apague o rosto, preencha a cabeça com o cabelo, troque os detalhes frontais (cinto, botões) pelos de trás (mochila, capa). Mantenha a mesma silhueta e a mesma altura de ombros.

Coloque as três vistas lado a lado num mesmo frame e compare as alturas com a grade. Cabeça, ombros e pés precisam bater na mesma linha nas três.

Espelhar o lado e corrigir assimetrias

Com o lado direito pronto, a quarta direção (esquerda) sai do espelhamento:

1. Com o frame do lado direito selecionado, use Frame > New Frame (Alt+N), que cria um frame novo copiando o conteúdo do atual.
2. No frame novo, selecione o personagem (Ctrl+A seleciona tudo).
3. Use Edit > Flip Horizontal, atalho Shift+H. Pela documentação do Aseprite, o comando age no sprite inteiro ou só na seleção atual.

Pronto, você tem a esquerda. Agora vem a parte que separa sprite profissional de sprite apressado: o que não pode ficar espelhado.

• Arma e escudo. Se o personagem segura a espada na mão direita, ao espelhar ela passa para a esquerda. Em jogo pequeno, muitos aceitam isso. Se a arma é parte da identidade, redesenhe a mão.
• Cabelo repartido, franja de um lado, rabo de cavalo. Espelhado, o lado da franja troca. Corrija.
• Detalhes únicos: tapa-olho, cicatriz, ombreira de um lado só, bolsa a tiracolo.
• Luz. Se a luz vem de cima à esquerda, o lado direito do personagem recebe sombra. Ao espelhar, a sombra vai junto para o lado errado. Em sprite de 16 pixels a diferença é pequena, mas em 32 pixels ou mais aparece. A solução mais usada em jogo top-down é luz vinda de cima e um pouco de frente, quase simétrica, que sobrevive ao espelhamento.

Uma decisão de produção: se você espelhar na engine em vez de no arquivo, economiza frames e memória, mas fica preso ao espelhamento perfeito. Se o personagem tem detalhes assimétricos importantes, desenhe as duas direções no arquivo.

Walk em 4 direções com poucos frames

O mínimo comum é um walk de 4 frames por direção. O jeito mais econômico de chegar nele, usado em muitos RPGs, é desenhar 3 poses e repetir a do meio:

• Frame 1: passo com o pé esquerdo à frente.
• Frame 2: posição neutra (pés juntos, corpo 1 pixel mais alto).
• Frame 3: passo com o pé direito à frente.

Na tag, a ordem de reprodução é 1, 2, 3, 2, então você desenha 3 e o jogo mostra 4 posições. Com 4 frames próprios (contato, passagem, contato, passagem) fica mais suave e ainda é pouco trabalho.

Detalhes que dão vida:

• Sobe e desce do corpo. No frame neutro, a cabeça e o tronco sobem 1 pixel. Sem isso, o personagem desliza.
• Braços opostos às pernas. Pé esquerdo à frente, braço direito à frente.
• Na vista de frente e de costas, os pés quase não saem do lugar: o movimento aparece como um pé um pixel mais baixo que o outro e o ombro balançando.
• Na vista de lado, a passada é mais visível, com as pernas abrindo de verdade.

Use o onion skin (F3, ou o ícone na timeline) para ver o frame anterior e o próximo em vermelho e azul enquanto desenha. O guia de onion skin no Aseprite mostra como configurar quantos frames aparecem.

Duração: comece com 150 ms por frame e ajuste jogando. Personagem lento pede mais, corrida pede menos.

Desenhar as quatro vistas é a parte que a maioria consegue fazer sozinha seguindo um tutorial. O que trava é juntar isso num jogo: o sprite trocando de direção sem pular, a animação sincronizada com a velocidade do movimento, o personagem combinando com o tileset e com os inimigos. É nessa integração entre arte e jogo funcionando que um processo guiado poupa tempo de verdade.

Organizar tags por direção no Aseprite

Com os frames prontos, organize a timeline em tags. Pela documentação do Aseprite, você cria uma tag selecionando um intervalo de frames e usando Frame > Tags > New Tag, clique direito > New Tag, ou F2. A primeira vez que você aperta F2 cria a tag, a segunda abre as propriedades para renomear.

Uma convenção que facilita a exportação:

• idle_down, idle_up, idle_side
• walk_down, walk_up, walk_side

Ou, se você desenhou a esquerda no arquivo, walk_left e walk_right separados. Nas propriedades da tag, Animation Direction em Forward para o walk de 4 frames, ou Ping-pong se você usa o walk de 3 frames (1, 2, 3, 2 sai naturalmente do Ping-pong).

O guia de tags de animação no Aseprite mostra como exportar o sprite sheet com as tags no JSON.

Na Godot 4, cada tag vira uma animação no SpriteFrames de um AnimatedSprite2D. Para a esquerda espelhada, use a propriedade flip_h do AnimatedSprite2D quando o personagem anda para a esquerda e toque a animação walk_side. Lembre de deixar o filtro de textura em Nearest.

Na Unity 6, fatie o sprite sheet no Sprite Editor (Sprite Mode em Multiple, Slice por grade com o tamanho do personagem), crie um clip de animação por tag e use a propriedade flipX do SpriteRenderer para a direção espelhada. Na importação, Filter Mode em Point (no filter) e Compression em None.

4 ou 8 direções: quando vale o trabalho

Oito direções (com as diagonais) deixam o movimento com analógico mais natural, mas custam caro: são 5 vistas para desenhar (frente, costas, lado, diagonal frente e diagonal costas), espelhando as outras 3, e o walk de cada uma.

Vale a pena quando:

• O jogo é controlado por analógico e o personagem anda muito na diagonal (ação, twin-stick).
• O personagem mira em várias direções e a pose precisa acompanhar.

Não vale quando:

• O jogo é RPG com movimento em grade ou em 4 eixos.
• Você está sozinho e o personagem tem muitas animações (ataque, dano, interação). Cada animação nova multiplica por 5 vistas.

Um meio-termo: 4 direções para o walk e o idle, e a engine escolhe a vista mais próxima quando o jogador anda na diagonal. Quase ninguém percebe.

Erros comuns

Cabeça em alturas diferentes nas vistas. O personagem "pula" ao trocar de direção. Correção: alinhe topo da cabeça, ombros e pés com a grade nas três vistas.

Vista de lado larga demais. Copiar a largura da frente deixa o perfil gordo. Correção: o lado é mais estreito, com só um braço e uma perna visíveis por inteiro.

Espelhar sem revisar. Arma trocando de mão e franja trocando de lado. Correção: depois do Shift+H, passe pelos detalhes assimétricos.

Personagem deslizando. Walk sem sobe e desce do corpo. Correção: suba 1 pixel no frame neutro.

Sem sombra no chão. Em top-down, o personagem parece flutuar. Correção: uma elipse escura e semitransparente de 2 a 3 pixels de altura embaixo dos pés, em camada separada.

Próximo passo

Desenhe um personagem 16x24 nas três vistas, espelhe o lado, corrija o que precisar e anime um walk de 4 frames por direção (3 desenhados, tocados em 1, 2, 3, 2) com as tags do guia. Depois leve para a engine e ande com ele num cenário de teste.

Para aprofundar a animação, leia o guia de tags de animação no Aseprite e o de onion skin.