Raio e Eletricidade em Efeito 2D para Jogo

Um efeito de raio 2D convincente é rápido, contrastado e quebrado. O relâmpago aparece em zigue-zague com ramificações, fica na tela por poucos frames de 30 a 60 ms, pisca e some, deixando um rastro curto. A cor segue uma regra simples: núcleo branco, borda colorida e saturada, e uma camada externa mais escura da mesma cor. Na engine, o modo de mesclagem aditivo faz o resto, iluminando o que está embaixo.

Este post mostra como desenhar o raio em pixel art no Aseprite: a anatomia do relâmpago, o caminho em zigue-zague, os frames de vida curta, a paleta de 3 a 4 cores, arcos de eletricidade em loop para armadilhas e chefes, o flash de tela com cuidado de acessibilidade e o modo aditivo na Godot e na Unity.

Efeito de raio 2D: anatomia do relâmpago

Um raio tem três partes, e cada uma vira uma decisão de desenho:

1. O canal principal. A linha mais grossa e brilhante, do ponto de origem ao ponto de impacto. Em pixel art, 2 a 3 pixels de largura no núcleo branco, mais 1 pixel de cor de cada lado.
2. As ramificações. Linhas mais finas (1 pixel) que saem do canal em ângulo, ficam mais curtas e mais escuras conforme se afastam. Elas dão a sensação de energia se espalhando.
3. O ponto de impacto. Onde o raio toca: um clarão circular, faíscas e, depois, uma marca no chão. É o lugar onde o jogador olha.

Para ataques e magias, o canal pode ser horizontal ou diagonal, ligando o personagem ao alvo. A anatomia é a mesma.

Ramificação e caminho em zigue-zague

Um raio não é uma linha quebrada em ângulos aleatórios. Ele tem uma direção geral, e os desvios são curtos e irregulares em torno dela.

Para desenhar o canal num canvas de 64x128 (raio vertical):

1. File > New com 64x128, fundo transparente.
2. Marque mentalmente (ou com um pixel de rascunho numa camada separada) a origem no topo e o impacto embaixo.
3. Divida o caminho em 6 a 10 segmentos. Cada segmento desce de 8 a 16 pixels e desvia de 2 a 8 pixels para um dos lados.
4. Alterne os desvios de forma irregular. Esquerda, esquerda, direita, esquerda, direita, direita. Se alternar perfeitamente (esquerda, direita, esquerda, direita), vira uma mola, não um raio.
5. Desenhe as ramificações saindo de 2 ou 3 pontos de quebra do canal, com ângulo entre 30 e 60 graus em relação ao canal, 1 pixel de largura, de 8 a 20 pixels de comprimento. Ramificações podem ter suas próprias sub-ramificações curtas.

Use a ferramenta Line (L) para cada segmento e depois limpe os degraus com o Pencil (B) para não deixar pixels dobrados. Em pixel art, a linha de 1 pixel com degraus limpos lê muito melhor que uma linha "grossa" acidental.

Frames de vida curta: aparecer, piscar, sumir

O raio não é animado como um personagem. Ele é um evento: aparece de uma vez, pisca e some. Um ciclo de 6 frames:

Monte assim no Aseprite:

1. Desenhe o frame 2 (o raio completo) primeiro, com o núcleo numa camada e a cor em outra.
2. Duplique com Alt+N para criar os outros frames e edite cada um: apague partes para a piscada e a dissipação, redesenhe 1 ou 2 ramificações para o frame 3.
3. Ajuste as durações em Frame > Frame Properties (P).
4. Toque com Enter. O ciclo inteiro deve durar entre 0,2 e 0,3 segundo.

O frame de piscada (4) é o que vende o raio. Sem ele, o efeito parece uma linha que aparece e some. Com ele, parece energia instável.

Paleta: núcleo branco e borda colorida

Raio é luz, e luz em pixel art é contraste. A paleta mínima:

• Núcleo: branco ou branco levemente tingido (#FFFFFF ou um branco azulado). Ocupa o centro do canal.
• Cor principal: a cor da energia, clara e saturada. Ciano ou azul claro para eletricidade "natural", amarelo para magia de raio clássica, roxo claro para energia sombria, verde para algo tóxico ou alienígena.
• Borda: a mesma cor, mais escura e mais saturada. Contorna a cor principal com 1 pixel.
• Opcional, brilho externo: uma quarta cor, escura e pouco saturada, em pixels esparsos em volta do canal. Na engine, com aditivo, ela vira um "halo".

A regra que diferencia raio de linha colorida: o centro precisa ser o pixel mais claro da tela inteira naquele momento. Se o cenário tem branco mais forte que o raio, o raio perde a força.

Reaproveitamento: com a sprite em modo Indexed (Sprite > Color Mode > Indexed), você troca as 3 cores da paleta e tem o mesmo raio em azul, amarelo e roxo para elementos diferentes.

Arcos contínuos de eletricidade em loop

Para armadilhas elétricas, cercas energizadas, um chefe que crepita ou uma arma carregando, você precisa de eletricidade contínua, não de um evento. O truque é um loop de 3 a 4 frames completamente diferentes entre si:

1. Desenhe um arco curto (por exemplo, 32 pixels de comprimento entre dois postes) em zigue-zague.
2. Crie mais 2 ou 3 frames com o mesmo começo e fim, mas zigue-zague diferente no meio.
3. Duração de 50 a 80 ms por frame.
4. Marque como tag (Frame > Tags > New Tag) com direção Forward. Não use Ping-pong: a eletricidade não "volta", ela muda.

Como cada frame é diferente, o olho não percebe o loop. Para variar ainda mais, a engine pode tocar instâncias do mesmo arco com tempos de início diferentes, ou espelhar alguns aleatoriamente.

Para um chefe envolto em eletricidade, desenhe 3 ou 4 arcos pequenos (8 a 16 pixels) em loop e espalhe em volta do corpo, cada um com um atraso diferente.

Desenhar o raio é a parte curta. Fazer o efeito funcionar no jogo pede sincronizar arte, câmera, som, dano e o momento exato do impacto, incluindo o flash e o tremor que vêm a seguir, e ajustar até a sensação ficar certa. Essa costura entre arte e jogo é onde muita gente que aprende sozinha trava, com efeitos bonitos numa pasta e um combate que não tem peso.

Flash de tela e impacto

O raio fica mais forte quando o mundo reage:

• Flash de tela. Um retângulo branco ou da cor do raio, em tela cheia, por 1 a 2 frames de jogo, com opacidade entre 30% e 60%. Não precisa ser branco total.
• Silhuetas. Uma variação mais dramática: durante o flash, o cenário vira silhueta escura e só o raio e o personagem aparecem. Em pixel art, isso é uma troca de paleta por 1 frame.
• Tremor de câmera curto no impacto e um hit stop de alguns frames no alvo atingido. O post sobre game feel e juice explica tremor e hit stop com números e código.
• Marca no chão. Uma mancha escura com 2 ou 3 brasas que somem em meio segundo.

Acessibilidade. Flashes rápidos e repetidos podem desencadear crises em pessoas com epilepsia fotossensível. A diretriz WCAG 2.3.1 (nível A) pede que nada pisque mais de três vezes em qualquer período de um segundo. Ela foi escrita para a web, mas é a referência mais usada também em jogos. Na prática: não dispare flashes de tela em sequência, evite o efeito de tela cheia piscando em loop e ofereça uma opção para reduzir ou desligar flashes.

Usando na engine com modo aditivo

No modo aditivo, as cores do sprite são somadas às do que está atrás. Preto vira transparente, e cores claras iluminam o fundo. É o modo natural para luz, fogo, eletricidade e magia.

Na Godot (4.x): selecione o nó que mostra o raio (Sprite2D ou AnimatedSprite2D), em CanvasItem > Material crie um CanvasItemMaterial e mude Blend Mode para Add. Mantenha o Texture Filter em Nearest para o pixel continuar nítido. Para arcos espalhados, um GPUParticles2D com a textura do arco e o mesmo material funciona bem.

Na Unity (URP): para efeitos baseados em partícula, crie um material com o shader Universal Render Pipeline/Particles/Unlit, coloque Surface Type em Transparent e Blending Mode em Additive, e use no Renderer do Particle System, com o módulo Texture Sheet Animation tocando os frames do raio. Para usar no SpriteRenderer, crie um Shader Graph de sprite e procure a opção de blending aditivo nas Graph Settings (o nome e o lugar da opção mudam entre versões do URP). Importe a textura com Filter Mode em Point (no filter).

Uma observação para os dois: com aditivo, a borda escura que você desenhou fica quase invisível sobre fundos escuros e muito forte sobre fundos claros. Teste o raio sobre o cenário real, não sobre o fundo cinza do editor.

Erros comuns: raio lento, cor sem contraste

Raio lento. Frames de 100 ms ou mais. O raio parece uma corda pendurada. Correção: 30 a 60 ms por frame e o ciclo inteiro abaixo de 0,3 segundo.

Cor sem contraste. Núcleo azul, borda azul um pouco mais escura, sobre céu azul. Correção: núcleo branco, sempre, e cenário mais escuro que o raio no momento do efeito.

Zigue-zague regular. Ângulos iguais e alternância perfeita. Parece mola ou serrote. Correção: segmentos de tamanhos diferentes, desvios irregulares.

Ramificações grossas. Ramificação com a mesma largura do canal disputa atenção. Correção: 1 pixel e cor mais escura.

Loop com frames parecidos. Arco contínuo de 4 frames quase iguais parece tremendo, não crepitando. Correção: cada frame com um caminho diferente.

Flash em todo raio. Um chefe que solta 5 raios por segundo com flash de tela em cada um. Além de cansar, viola a diretriz de acessibilidade. Correção: flash só nos raios principais, com intervalo, e opção para desligar.

Próximo passo

Desenhe o raio de 6 frames em 64x128 e um arco contínuo de 4 frames em 32x16. Leve os dois para a engine com modo aditivo, sobre o cenário escuro do seu jogo, e combine o raio com um tremor de câmera curto. Depois troque a paleta para criar a versão roxa e a amarela.

Se você quer ver como esse tipo de trabalho vira profissão, o post sobre o que faz um artista de VFX de jogos mostra a rotina, as ferramentas e o que se espera de quem cria efeitos.