Pixel Art Attack Animation: Antecipação, Smear e Golpe

Uma pixel art attack animation boa tem três fases bem marcadas: antecipação (o corpo carrega o golpe), golpe (normalmente um smear frame, que mostra o caminho da arma) e recuperação (o corpo volta à guarda). Com 5 frames você cobre as três, e o que decide se o ataque parece forte ou mole é quanto tempo cada fase dura, não a quantidade de desenho.

Este post monta um golpe de espada de 5 frames no Aseprite, mostra como desenhar o smear frame e o rastro da arma, e liga o timing de cada fase com o que o código faz: janela de hitbox, hit stop e resposta ao input.

As 3 fases do ataque: antecipação, golpe, recuperação

Antecipação. O corpo vai para o lado oposto ao golpe: espada para trás e para cima, tronco torcido, peso no pé de trás. Ela avisa ao olho que algo vai acontecer e dá a energia que o golpe vai soltar.

Golpe. A espada percorre o arco num tempo curtíssimo. Na animação tradicional seriam vários intermediários; em jogo, um único smear frame resolve, e fica mais rápido e mais legível.

Recuperação. A espada termina o arco, passa um pouco do ponto (follow through) e o corpo volta à pose de guarda. É aqui que mora o "peso" do golpe e também a vulnerabilidade: enquanto o personagem se recupera, ele não pode agir.

Quem joga jogo de luta conhece isso como startup, active e recovery. O nome muda, a ideia é a mesma: a animação é a forma visível de uma regra de jogo.

Pixel art attack animation em 5 frames

Em 32x32 (ou 48x32, já que o golpe precisa de espaço lateral), no Aseprite:

1. Frame 1: guarda. A pose de idle de combate, espada à frente, joelhos dobrados. Pode ser o primeiro frame da idle.
2. Frame 2: antecipação. Espada para trás e para cima, acima do ombro. Tronco girado, o ombro de trás mais baixo. Corpo 1 pixel mais baixo, carregando o peso.
3. Frame 3: smear. O arco do golpe, do alto atrás até baixo à frente. O corpo já está na pose final do golpe: tronco virado para a frente, braço esticado.
4. Frame 4: impacto. Espada no fim do arco, à frente e embaixo, ainda passando um pouco do ponto. Corpo inclinado para a frente. É o frame "congelável" para o hit stop.
5. Frame 5: recuperação. Espada volta para a frente do corpo, tronco endireita. Daqui o personagem volta à idle.

Desenhe na ordem 1, 2, 4, 3, 5: as poses extremas primeiro, o smear depois, porque ele é o caminho entre o frame 2 e o 4. Com o onion skin no Aseprite ligado em 1 frame para cada lado (com a opção red/blue tint, o frame anterior e o seguinte ganham cores diferentes), você vê as duas posições da espada enquanto desenha o arco no meio.

Crie o canvas com espaço: em Sprite > Canvas Size, aumente para os lados antes de começar. Uma espada que sai do quadro no meio do golpe é o erro mais comum de quem anima ataque em canvas justo.

Smear frame: o que é e como desenhar

O smear frame não desenha a espada. Ele desenha o caminho por onde a espada passou nesse instante. Em pixel art, é quase sempre um arco sólido em forma de lua crescente.

Passo a passo no Aseprite:

1. Crie uma camada nova smear acima do personagem no frame 3.
2. Com a Curve (Shift+L) ou o Pencil (B), trace a borda externa do arco: do ponto onde a ponta da espada estava no frame 2 até onde ela vai estar no frame 4.
3. Trace a borda interna, mais perto do corpo, deixando o arco mais grosso na ponta (onde a espada é mais rápida) e fino perto da mão.
4. Preencha com a Contour (D), que fecha e preenche uma forma desenhada à mão livre, ou com o Paint Bucket (G).
5. Pinte com 2 ou 3 cores: branco ou o tom mais claro na borda de ataque (a frente do arco), o tom do metal no meio, e a cor do fundo ou transparência na cauda.

Regras que fazem o smear funcionar:

• O arco cobre o caminho real. Se o smear não liga a pose 2 à pose 4, o olho não completa o movimento e parece que a espada teleportou.
• Sem detalhe. Nada de cabo ou guarda desenhada no smear. É uma mancha de movimento.
• Um frame só, e curto. Smear que fica muito tempo na tela vira objeto, e o jogador começa a ver a "lua".

Efeito de rastro da arma

O rastro (trail) é diferente do smear: ele fica depois que a espada passa, desaparecendo em 2 ou 3 frames. Duas formas:

• Desenhado: na camada smear, nos frames 4 e 5, repita o arco cada vez mais fino e mais transparente (ou com a cor mais escura da paleta, em pixel art sem semitransparência). Frame 4 com metade da espessura, frame 5 só a borda.
• Pela engine: um efeito separado (sprite de slash ou trail renderer) instanciado no momento do golpe. Dá mais flexibilidade, porque o mesmo slash serve para várias armas e pode ser colorido por elemento (fogo, gelo).

Para começar, desenhado é melhor: você controla cada pixel e o resultado é coerente com o estilo.

Timing e hitbox

No Aseprite, a duração de cada frame se edita com P (Frame Properties), em milissegundos. Ponto de partida para um golpe rápido do jogador:

A antecipação curta é uma decisão de game design, não de arte. O jogador apertou o botão: se a espada demora 300 ms para começar a descer, o controle parece lento. Em ataque de inimigo, a lógica inverte: antecipação de 300 a 500 ms, com uma pose bem legível, é o que dá ao jogador a chance de desviar.

O hitbox deve estar ativo só nos frames 3 e 4. Na Unity, adicione Animation Events no clipe nesses frames chamando métodos do script de combate para ligar e desligar o collider de dano. Na Godot, com AnimationPlayer, use uma trilha de chamada de método; com AnimatedSprite2D, o sinal frame_changed e a propriedade frame dizem em que frame a animação está.

Ligar o desenho às regras do combate é exatamente onde muita gente que anima bem trava: a animação está bonita no editor e, no jogo, o golpe acerta antes da hora ou parece que não pegou.

Animar já pensando na janela de acerto, no hit stop e no tempo de resposta ao botão é o que faz o combate parecer bom, e esse é um trabalho de arte de jogo, não de ilustração. O post sobre sistema de combate corpo a corpo mostra o lado do código dessa conversa.

Hit stop e feedback

Quando o golpe acerta, congelar o jogo por 50 a 100 ms no frame de impacto dá a sensação de que a espada encontrou resistência. Isso se chama hit stop, e é a razão de o frame 4 existir como pose limpa e forte: é ele que fica na tela durante o congelamento.

Outros feedbacks que somam ao frame de impacto:

• Flash branco no inimigo atingido, por 1 ou 2 frames.
• Tremor de tela curto, de 1 ou 2 pixels.
• Partícula de impacto no ponto de contato (uma estrela de 3 ou 4 frames).
• Recuo do inimigo (knockback) para longe do golpe.

O guia de game feel e juice detalha cada um. A regra para a arte: o frame de impacto precisa funcionar sozinho, parado, porque ele vai ficar parado.

Erros comuns

Antecipação longa no ataque do jogador. Controle pesado. 1 frame de 60 a 100 ms basta.

Sem smear. O golpe parece lento ou a espada pula de um lado para o outro. Um arco no frame do meio.

Smear que não liga as poses. O arco começa ou termina num lugar onde a espada não estava. Confira com o onion skin.

Recuperação curta demais. O golpe parece sem peso e o jogador consegue atacar em sequência infinita. Recuperação é parte do balanceamento.

Canvas apertado. A espada é cortada no meio do golpe. Aumente o canvas antes de animar.

Hitbox ligado na animação inteira. O inimigo toma dano na antecipação. Só no smear e no impacto.

Personagem não se move com o golpe. Ataque só com o braço parece fraco. Tronco gira, peso vai para a frente, pé de trás empurra.

Próximo passo

Faça o golpe de 5 frames, depois uma variação pesada (antecipação com 2 frames e 150 ms cada, recuperação com 2 frames) e compare como as duas se sentem no jogo. Em seguida, encadeie um combo de 3 golpes em que a recuperação de um vira a antecipação do próximo.