Slash Effect 2D: Efeito de Corte para Golpe de Espada

Um slash effect 2D bom é um arco em forma de lua crescente que aparece, atinge o pico e some em 3 a 5 frames, exatamente no frame em que a lâmina do personagem chega ao alvo. Se ele surge um frame antes ou some um frame depois, o golpe parece flutuante; se surge junto com o impacto e o jogo segura esse instante por alguns milissegundos, o golpe parece pesado.

Aqui você vai desenhar o efeito de corte como um sprite separado no Aseprite (com equivalente em LibreSprite e Pixelorama), definir a forma pelo ângulo do golpe, montar os 3 a 5 frames, sincronizar com a animação de ataque e preparar variações para combo. O personagem e o efeito são dois assets diferentes, e essa separação é o que deixa o slash reutilizável.

Slash effect 2D: arco, smear e timing

Existem três peças que costumam se confundir:

• Smear frame: frame da animação do personagem em que a arma aparece esticada, borrada ou como mancha. Ele mora dentro do sprite do personagem. O post sobre animação de ataque em pixel art cobre esse desenho.
• Slash effect: sprite à parte, com o arco do corte. A engine instancia esse sprite na frente do personagem quando o ataque acontece.
• Timing: quanto tempo cada frame do efeito fica na tela e em que frame da animação do personagem ele começa.

O slash existe separado por motivo prático. Você desenha um arco e reaproveita em três ataques, gira 30 graus para o golpe para cima, espelha para o personagem virado à esquerda e troca a cor quando a espada tem elemento de fogo. Desenhar isso dentro de cada frame do personagem multiplica o trabalho e trava as variações.

Forma do corte e direção do golpe

O arco do slash segue o caminho da ponta da lâmina. Antes de desenhar, decida a direção:

• Horizontal (golpe lateral): arco largo e baixo, quase uma meia-lua deitada.
• Diagonal descendente (de cima para baixo à frente): o golpe mais comum de espada; arco que começa alto atrás do ombro e termina baixo à frente.
• Ascendente (uppercut de espada): a mesma forma da descendente, espelhada na vertical.
• Estocada: não é arco. É uma linha reta afinando para a ponta, com um brilho no fim.

Regra da forma: o arco é mais grosso no meio e na parte da frente (onde a lâmina corre mais rápido) e afina nas duas pontas. Uma lua crescente desenhada com espessura constante parece um anel, não um corte.

No Aseprite, crie um sprite novo de 64x64 (ou 96x64 para golpes largos) em File > New, modo RGBA, fundo transparente. Esse tamanho folgado deixa o arco sair do corpo do personagem sem ser cortado. Ligue o grid em View > Show > Grid (Ctrl+') para marcar o centro, que vai ser o ponto de origem do efeito na engine.

Para traçar a borda externa, use a ferramenta Curve (Shift+L) com dois pontos de controle, ou a Ellipse (U) sem preenchimento, e depois apague a parte de dentro. Trace a borda interna mais perto do centro e mais deslocada para um lado, para que as duas curvas se encontrem nas pontas. Preencha o espaço entre elas com Paint Bucket (G).

3 a 5 frames: surgimento, pico, dissipação

Um slash curto, de 4 frames, resolve a maior parte dos jogos de ação:

1. Surgimento: só a metade inicial do arco, fina, com a borda de ataque já em branco. O corte está "nascendo".
2. Pico: o arco inteiro, na espessura máxima. É o frame que coincide com o impacto.
3. Dissipação 1: o arco continua inteiro, mas a parte de trás começa a se desfazer. Apague pixels da cauda e afine a borda interna.
4. Dissipação 2: sobra só a borda externa, interrompida em 2 ou 3 pedaços, ou alguns pixels soltos na direção do golpe.

Com 3 frames, funda o surgimento e o pico. Com 5, acrescente um segundo frame de pico em que o arco avança alguns pixels na direção do golpe, para efeitos lentos e pesados (machado, espadão).

Use o onion skin do Aseprite (F3) para conferir que cada frame continua o anterior. O arco não pode pular de lugar entre o pico e a dissipação: o que some é a cauda, não a posição.

Duração dos frames, em Frame > Frame Properties (tecla P): um ponto de partida é 40 ms no surgimento, 60 ms no pico, 50 ms em cada dissipação. O efeito inteiro fica abaixo de 250 ms. Em pixel art a 60 quadros por segundo, 40 ms dá pouco mais de 2 quadros de tela, que é o suficiente para o olho registrar.

Agrupe os frames com uma tag (selecione os frames e use Frame > Tags > New Tag) chamada slash_down. Cada direção vira uma tag no mesmo arquivo: slash_down, slash_side, slash_up.

Sincronizando com o frame de ataque

O personagem tem uma animação de ataque com antecipação, golpe e recuperação. O slash começa no frame do golpe, não antes. Se a animação do personagem tem 5 frames (guarda, antecipação, smear, impacto, recuperação), o surgimento do slash entra junto com o smear e o pico do slash cai no frame de impacto.

Dois detalhes de alinhamento que fazem diferença:

• Origem: o centro do sprite do slash fica no ombro ou na mão do personagem, não no pé. Marque esse ponto no grid antes de desenhar e use o mesmo ponto em todas as direções.
• Cobertura da lâmina: no frame de pico, o arco do slash precisa passar por cima da ponta da espada desenhada no personagem. Abra o sprite do personagem como referência numa camada travada (Layer > New Layer, cole o frame de impacto, reduza a opacidade da camada) e desenhe o arco por cima. Apague a camada de referência antes de exportar.

Na Godot, o caminho mais simples é um AnimatedSprite2D filho do personagem com o SpriteFrames do slash. No frame certo da animação de ataque (sinal frame_changed do AnimatedSprite2D do personagem, ou uma trilha de chamada de método no AnimationPlayer), você chama play("slash_down") no efeito e o esconde no sinal animation_finished.

Na Unity, o equivalente é um GameObject filho com SpriteRenderer e Animator próprios, com um clipe por direção. Um Animation Event no frame de impacto do clipe de ataque chama um método do script de combate que ativa o efeito e dispara o trigger do Animator do slash. Para espelhar, inverta o flipX do SpriteRenderer junto com o do personagem.

O ponto difícil não é desenhar o arco. É o efeito, o hitbox, o hit stop e a animação do personagem baterem no mesmo frame quando o jogo está rodando, porque cada um mora num sistema diferente.

Fazer a arte já pensando em como ela vai ser montada na engine (origem, tags por direção, duração por frame) é o que separa um efeito bonito no editor de um efeito que funciona no combate. O post sobre sistema de combate corpo a corpo mostra o lado do código dessa sincronia, com hitbox e janela de ataque.

Cor e brilho do slash

O slash precisa ser a coisa mais clara da tela por um instante. Paleta de 3 a 4 cores resolve:

• Borda de ataque: branco puro ou quase branco. É a frente do arco, por onde a lâmina passou agora.
• Corpo: um tom claro da cor da arma ou do elemento (azul claro para gelo, amarelo para fogo, ciano para energia).
• Cauda: um tom mais saturado e mais escuro da mesma cor, ocupando só a parte de trás do arco.
• Opcional, contorno: uma linha escura de 1 pixel por fora, só se o cenário do jogo for claro e o efeito sumir contra ele.

Em pixel art estrita, evite semitransparência no efeito e use a dissipação com pixels apagados. Em estilo mais livre, a engine pode somar o brilho: na Godot, um CanvasItemMaterial com Blend Mode em Add no efeito; na Unity com URP, um material de sprite com blending aditivo. Blending aditivo clareia o que está atrás, o que funciona bem em cenário escuro e estoura em cenário claro, então teste nos dois.

Um truque de leitura: o primeiro frame do slash pode ser todo branco, sem cor nenhuma. Esse "flash" de um frame é o que o olho registra como impacto, e a cor aparece nos frames seguintes.

Hit stop e impacto

Hit stop é congelar o jogo (ou só o atacante e o alvo) por alguns milissegundos quando o golpe acerta. Para o slash, a regra é simples: o congelamento acontece com o efeito no frame de pico. É por isso que o pico precisa ser o frame mais bonito e mais legível: ele vai ficar parado na tela.

Valores comuns ficam entre 50 e 120 ms para golpe normal, e mais para golpe carregado ou crítico. O guia de game feel e juice mostra como implementar o congelamento e combinar com tremor de tela e flash de dano.

Junto do slash, um segundo efeito pequeno no ponto de contato ajuda muito: uma faísca ou estrela de 3 frames (8x8 ou 16x16 pixels) criada na posição do inimigo atingido. O slash diz "a espada passou aqui", a faísca diz "acertou isso".

Erros comuns: slash que dura demais, arco desalinhado com a lâmina

• Slash que dura demais. Acima de uns 300 ms, o arco vira um objeto pendurado no ar. Corte frames de dissipação ou reduza a duração deles.
• Arco desalinhado com a lâmina. O pico do slash não cobre a ponta da espada do personagem. Desenhe com a camada de referência do frame de impacto.
• Espessura constante. Parece um anel. Engrosse a frente e afine as pontas.
• Origem diferente em cada direção. O efeito "salta" quando o personagem muda de golpe. Marque o mesmo ponto de origem no grid em todas as tags.
• Slash que começa na antecipação. O efeito aparece antes do golpe e entrega o tempo errado. Ele começa no frame do golpe.
• Canvas justo. O arco é cortado na borda do sprite. Trabalhe em 64x64 ou maior e deixe a engine recortar a área transparente.
• Mesma cor do cenário. Se o jogo tem céu azul claro e o slash é azul claro, ele some. Teste o efeito sobre o fundo real antes de fechar a paleta.

Variações para combo

Um combo de 3 golpes com o mesmo slash repetido parece um único golpe em loop. Variações baratas:

1. Golpe 1: slash_down, arco diagonal descendente.
2. Golpe 2: slash_up, o mesmo arco espelhado na vertical (no Aseprite, Edit > Flip Vertical com o frame selecionado, ou Shift+V), começando de baixo.
3. Golpe 3 (finalizador): slash_side maior, com 5 frames e um pico duplo, e um hit stop mais longo.

Para o finalizador, aumente o arco em 1,5x desenhando de novo, não escalando: escalar pixel art por fator fracionário cria pixels de tamanhos diferentes. Se precisar de um efeito maior sem redesenhar, use escala inteira (2x) na engine.

Outra variação útil é por arma: adaga com arco curto e fino de 3 frames; espadão com arco longo, grosso e 5 frames. A forma muda, a estrutura (surgimento, pico, dissipação) continua igual.

Próximo passo

Desenhe o slash_down de 4 frames num sprite de 64x64, coloque por cima do frame de impacto do seu personagem e ajuste até o pico cobrir a ponta da lâmina. Depois faça o slash_up espelhado e monte um combo de dois golpes na engine. Se o seu personagem ainda não tem um ataque com antecipação e recuperação claras, comece pela animação de ataque em pixel art e volte aqui para o efeito.