Efeito de Impacto 2D: Hit Spark que Dá Peso ao Golpe

Um hit effect 2D que funciona é curto, aponta na direção do golpe e nunca aparece sozinho. O hit spark (a faísca no ponto do acerto) tem 4 a 5 frames e dura menos de um quarto de segundo; o peso vem de juntar ele, no mesmo frame, com uma pausa curta (hit stop), um flash branco no inimigo e um tremor de tela. Sem essa combinação, mesmo uma faísca bem desenhada parece fraca.

Aqui você desenha o hit spark no Aseprite, frame a frame, e monta a sequência do acerto na engine, com a ordem dos efeitos e código curto para Godot e Unity. Em Pixelorama, LibreSprite ou Piskel (grátis), o desenho segue os mesmos passos.

Hit effect 2D: por que o golpe parece fraco sem ele

Num jogo de ação, o jogador vê o golpe acontecer em poucos frames. Se nada marca o acerto, o cérebro não tem como separar "a espada passou perto" de "a espada acertou". O resultado é aquela sensação de bater em papelão.

O efeito de impacto resolve três perguntas ao mesmo tempo:

• Onde o golpe acertou (o spark no ponto de contato).
• Quando acertou (o flash e a pausa no frame exato).
• Quanto doeu (o tamanho do spark, a duração da pausa, a força do tremor).

Cada camada sozinha ajuda pouco. As quatro juntas, sincronizadas no mesmo frame, transformam o mesmo golpe. O post sobre game feel e juice explica o conceito geral; aqui o foco é a arte do spark e a costura com os outros efeitos.

Hit spark pixel art em 4 a 5 frames

Arquivo: File > New (Ctrl+N), 32x32 pixels, fundo Transparent. Paleta de 4 cores: branco, amarelo claro, laranja e uma cor de borda (laranja escuro ou vermelho). Golpes de outros elementos trocam essa rampa, mas a estrutura é a mesma.

O spark nasce no centro do canvas, que vai ser o ponto de contato na engine.

Frame 1, estouro. Um círculo branco cheio de 6 a 8 pixels de diâmetro. Só isso. É o frame que o jogador nem vê conscientemente, mas sente.

Frame 2, estrela. Crie o frame com Frame > New Empty Frame (Alt+B). Desenhe 4 a 6 raios saindo do centro, com 8 a 12 pixels de comprimento, mais grossos na base (3 pixels) e afinando até 1. Os raios são brancos no centro e amarelos nas pontas. O raio na direção do golpe é o mais longo. Use a ferramenta de linha (L) para raios retos.

Frame 3, abertura. Os raios se afastam do centro: o miolo fica vazio, e cada raio vira um traço solto de 4 a 6 pixels, mais longe. Cor amarela e laranja, sem branco.

Frame 4, dissipação. Traços menores, 2 a 3 pixels, na cor de borda, ainda mais longe do centro. Alguns raios já sumiram.

Frame 5, opcional. Três ou quatro pixels soltos na cor de borda, quase sumindo. Para golpes leves, pule este frame.

Ligue o onion skin (F3) entre os frames para conferir que os raios saem do mesmo centro e se afastam em linha reta.

Duração: selecione os frames na timeline, botão direito, Properties. Frame 1 com 30 ms, os demais com 40 ms. Total de 150 a 190 ms. Toque com Enter: deve parecer quase instantâneo. Se você consegue ver cada frame separado, está lento.

Forma e direção: o spark aponta para onde o golpe foi

Um spark simétrico funciona, mas um spark direcional funciona melhor. A regra: a forma do spark se alonga no sentido em que a arma estava indo.

• Corte horizontal (espada da esquerda para a direita): raios mais longos para a direita, e um risco de corte de 1 a 2 pixels de largura atravessando o spark na horizontal no frame 2.
• Golpe de cima para baixo: raios mais longos para baixo.
• Estocada: um cone estreito apontando para frente, em vez de estrela.
• Soco ou golpe contundente: forma mais redonda, com anel em vez de raios, para sugerir pancada e não corte.

Para não desenhar uma versão para cada direção, desenhe o spark apontando para a direita e gire na engine para o ângulo do golpe. Em pixel art, rotações livres podem deformar os pixels; se isso incomodar, desenhe 2 versões (horizontal e diagonal) e combine com flip horizontal e vertical para cobrir 8 direções.

Organize com tags: Frame > Tags > New Tag, uma para hit_corte, outra para hit_impacto. Exporte com File > Export > Export Sprite Sheet (Ctrl+E), uma linha por tag.

Hit stop, flash e shake junto com o spark

Aqui está a ordem que funciona, contada a partir do frame em que a hitbox do ataque toca a hurtbox do inimigo:

1. Frame do acerto: instancia o spark no ponto de contato, liga o flash branco no inimigo e começa o hit stop (atacante e alvo congelados).
2. Durante o hit stop (40 a 100 ms): o spark continua animando. Isso é importante: o spark não pode congelar junto, senão o jogador vê um frame parado e não um efeito. O tremor de tela também roda.
3. Fim do hit stop: o inimigo sai do flash, recua (knockback) e as partículas secundárias (poeira, gotas, lascas) aparecem.

Duração do hit stop por força do golpe, como ponto de partida para ajustar no jogo: golpe leve com 40 a 60 ms, golpe pesado com 80 a 120 ms, golpe final de combo com até 150 ms. Mais que isso começa a parecer travamento.

Na Godot, um jeito simples de congelar o combate é pausar a árvore de cena por alguns milissegundos. Nós com process_mode em Always continuam rodando durante a pausa, então o spark (um AnimatedSprite2D) e a câmera que treme recebem esse modo e seguem animando enquanto o resto fica parado. Zerar Engine.time_scale não serve aqui, porque aí o delta de todos os nós vira zero e o spark congela junto. O flash branco é um shader no sprite do inimigo, que o post sobre shader de hit flash na Godot mostra completo, e o tremor está no post sobre camera shake na Godot.

# hit_stop.gd (autoload com process_mode = Always)
extends Node

var parado: bool = false

func parar(duracao: float) -> void:
    if parado:
        return
    parado = true
    get_tree().paused = true
    await get_tree().create_timer(duracao, true).timeout
    get_tree().paused = false
    parado = false

O segundo argumento de create_timer (process_always) faz o timer contar mesmo com a árvore pausada. Se o jogo já usa paused para o menu de pausa, guarde o estado anterior antes de mexer nele.

Na Unity, o equivalente é zerar Time.timeScale e esperar com WaitForSecondsRealtime, que usa tempo real. O Animator do spark precisa estar com Update Mode: Unscaled Time para continuar animando durante a pausa. Arquivo HitStop.cs:

using System.Collections;
using UnityEngine;

public class HitStop : MonoBehaviour
{
    [SerializeField] private float lightHitDuration = 0.05f;
    [SerializeField] private float heavyHitDuration = 0.1f;

    private bool isStopped;

    public void Trigger(bool heavy)
    {
        if (isStopped)
        {
            return;
        }

        float duration = heavy ? heavyHitDuration : lightHitDuration;
        StartCoroutine(StopRoutine(duration));
    }

    private IEnumerator StopRoutine(float duration)
    {
        isStopped = true;
        Time.timeScale = 0f;
        yield return new WaitForSecondsRealtime(duration);
        Time.timeScale = 1f;
        isStopped = false;
    }
}

A trava isStopped impede que dois acertos no mesmo frame empilhem pausas. Num jogo com câmera lenta ou pausa de menu, guarde o timeScale anterior em vez de voltar para 1.

Desenhar o spark leva uma tarde. Fazer ele, a pausa, o flash, o tremor, o som e o recuo do inimigo baterem no mesmo frame, em todos os golpes do jogo, sem um efeito atropelar o outro, é o tipo de ajuste que quem monta o combate sozinho costuma deixar pela metade.

O que ajuda é tratar o impacto como um pacote único, com a arte desenhada já pensando na engine: ponto de origem no centro, duração curta e versões por intensidade.

Variações por tipo de dano

Com a estrutura de 4 a 5 frames pronta, as variações saem rápido:

• Golpe leve: spark menor (24x24), 4 frames, sem o frame 5. Hit stop curto.
• Golpe pesado: spark maior (40x40 ou 48x48), 5 frames, com um anel extra no frame 2. Hit stop longo e tremor mais forte.
• Crítico: mesmo spark do pesado com um frame de flash branco em tela cheia ou um contorno extra amarelo.
• Elemental: troque a rampa de cor com Edit > Replace Color (Shift+R). Fogo em laranja e vermelho, gelo em branco e ciano, veneno em verde. Mantenha o primeiro frame branco em todos: ele é o "acertou", a cor vem depois.
• Bloqueio ou defesa: spark azulado e mais achatado, com faíscas voando para trás, para o jogador ler na hora que o golpe não entrou.

A regra é a mesma do resto da arte do jogo: a forma comunica o tipo de golpe, a cor comunica o elemento.

Erros comuns: spark lento e grande demais

Spark lento. Frames de 80 a 100 ms fazem o efeito parecer explosão. Impacto é rápido: 30 a 50 ms por frame.

Spark grande demais. Um spark maior que o inimigo tapa o que acontece. Ele deve ocupar entre um terço e metade da altura do alvo.

Spark congelado no hit stop. O efeito para junto com o jogo e vira um frame estático. Anime com tempo real.

Spark no centro do inimigo, não no ponto de contato. Instancie no ponto onde as caixas de colisão se cruzaram, ou entre o centro da hitbox e o do alvo.

Hit stop em todos os acertos de inimigos fracos. Quando o jogador acerta cinco inimigos por segundo, pausas somadas viram lentidão. Reduza ou desligue o hit stop em golpes múltiplos.

Tudo sem som. O som é metade do impacto. Teste o efeito visual com o som do golpe ligado.

Próximo passo

Desenhe o spark de corte e o de impacto, monte o pacote completo (spark, flash, hit stop, shake) para um único golpe e só então crie as variações. Teste batendo num inimigo parado e compare com tudo desligado: a diferença é o argumento para cuidar de cada camada.