Explosão em Pixel Art: Animação Quadro a Quadro

Uma explosão pixel art que funciona tem 4 fases bem separadas: flash, bola de fogo, fumaça e dissipação. Ela usa uma paleta curta que vai do branco ao cinza e um timing desigual, com frames rápidos no estouro e lentos na fumaça. Com 8 frames e 5 cores você tem uma explosão pronta para jogo que lê bem até em 32x32.

Aqui você anima a explosão frame a frame no Aseprite, com a contagem de pixels de cada fase, a duração de cada frame em milissegundos e o export como sprite sheet e como GIF. Em Pixelorama, LibreSprite ou Piskel (grátis), a animação segue os mesmos passos; só os menus de duração e export mudam de nome.

Explosão pixel art: as 4 fases

Antes de desenhar, entenda o que cada fase faz no olho do jogador:

1. Flash (1 frame). Uma forma branca ou quase branca, pequena e intensa. É o "aconteceu". Sem ele, a explosão parece começar atrasada.
2. Bola de fogo (2 a 3 frames). A forma cresce rápido, amarela no centro e laranja nas bordas. É o momento de maior tamanho e de maior brilho.
3. Fumaça (2 a 3 frames). O fogo esfria: o centro passa a laranja e vermelho, as bordas viram cinza, a forma para de crescer e começa a subir.
4. Dissipação (1 a 2 frames). A fumaça se quebra em bolhas menores, fica mais clara e some aos pedaços.

A regra que dá vida: cada fase usa a cor da fase seguinte na borda. A borda do flash já é amarela, a da bola de fogo já é vermelha, a da fumaça já é cinza. Assim a explosão parece esfriar de fora para dentro.

Paleta de explosão: do branco ao cinza

Cinco cores bastam:

Os hex são ponto de partida. Se o jogo tem paleta, puxe os tons quentes e um cinza dela. Um cinza levemente arroxeado ou amarronzado combina melhor com fogo do que um cinza neutro.

Uma sexta cor opcional: um cinza mais claro para o topo iluminado da fumaça.

Animação de explosão pixel art frame a frame no Aseprite

Configuração: File > New (Ctrl+N), 32x32 pixels, fundo Transparent. Coloque as 5 cores na paleta. Use o lápis (B) com pincel redondo e o balde (G).

Vou descrever cada frame para uma explosão centrada no canvas. O centro da explosão fica em torno do pixel (16, 18), um pouco abaixo do meio, porque a explosão sobe enquanto se desfaz e precisa de espaço em cima.

Frame 1, flash. Um círculo branco de 8 a 10 pixels de diâmetro, com 4 pontas curtas saindo em cruz. Borda de 1 pixel em amarelo.

Frame 2, bola de fogo nascendo. Crie com Frame > New Empty Frame (Alt+B), que nasce vazio; Alt+N criaria uma cópia do anterior, e aqui é melhor desenhar do zero. Círculo irregular de 18 a 20 pixels: núcleo branco de 6 pixels, anel amarelo, borda laranja. A borda é recortada em 5 ou 6 bolhas, não um círculo liso.

Frame 3, bola de fogo no auge. 24 a 26 pixels, o maior frame da animação. O núcleo branco some; o centro é amarelo, o corpo é laranja e a borda é vermelho escuro. Ligue o onion skin (F3) e confira se a forma cresceu para todos os lados, com um pouco mais para cima. O post sobre onion skin no Aseprite mostra como ajustar quantos frames aparecem e a cor dos frames anterior e seguinte.

Frame 4, começo do esfriamento. Mesmo tamanho ou 1 a 2 pixels maior. O amarelo encolhe para um miolo de 6 a 8 pixels deslocado para cima. Laranja no corpo. Nas bolhas da borda de baixo, o vermelho escuro já vira cinza.

Frame 5, fumaça. A forma para de crescer e se divide em 4 ou 5 bolhas grandes. Laranja só em 2 ou 3 bolhas do centro; o resto cinza com as bordas de baixo no vermelho escuro. Tudo sobe 1 a 2 pixels.

Frame 6, fumaça cheia. Quase tudo cinza. Um ou dois pontos de laranja escuro dentro das bolhas, como brasas. As bolhas de cima com o cinza claro, se você usou a sexta cor. Mais 2 pixels para cima.

Frame 7, dissipação. As bolhas se separam, ficam menores e ganham buracos de 1 a 3 pixels. Use a borracha (E) para abrir furos irregulares no meio das bolhas, não só nas bordas.

Frame 8, final. Três ou quatro fiapos de fumaça de 2 a 4 pixels, no topo. O próximo frame é o vazio, porque a explosão não faz loop.

Detalhe que separa explosão amadora de boa: detritos. Em 2 ou 3 frames da bola de fogo, adicione de 3 a 5 pixels escuros voando para fora em linha reta, afastando-se 3 a 4 pixels por frame. Eles dão direção e força ao estouro.

Timing: duração por frame em cada fase

Aqui a explosão ganha peso. Use Frame > Frame Properties (P) para o frame atual, ou selecione vários frames na timeline, clique com o botão direito e escolha Properties. A duração é em milissegundos.

Total: 640 ms. A aceleração no começo e a desaceleração no fim imitam o que acontece de verdade: a energia sai de uma vez, a fumaça fica pairando.

Toque com Enter. Para ver em loop durante o ajuste, deixe o loop ligado na reprodução; no jogo, a animação toca uma vez só.

Se a explosão parecer fraca, encurte o flash e a bola de fogo, não aumente o tamanho. Se parecer que some de repente, alongue os dois últimos frames.

Marque a animação com uma tag para exportar com nome: selecione os 8 frames e use Frame > Tags > New Tag, nome explosao, direção Forward. O post sobre tags de animação no Aseprite mostra como organizar várias animações no mesmo arquivo.

Uma explosão sozinha, na tela de pré-visualização, sempre parece boa. No jogo, ela precisa combinar com o tremor de tela, o som, o hit stop e as outras partículas, sem tapar o personagem nem deixar o efeito durar mais que o combate pede. Esse ajuste fino entre arte e jogo é onde quem aprende cada parte em separado costuma travar.

Fazer o efeito já pensando em como ele entra na engine (tamanho, ponto de origem, duração total) evita refazer a animação depois de testar no jogo.

Exportar como sprite sheet e como GIF

Sprite sheet para o jogo. File > Export > Export Sprite Sheet (Ctrl+E). Escolha a camada (todas as visíveis) e os frames pela tag explosao. Na aba de layout, uma linha horizontal com os 8 frames é o mais simples de importar. Marque a saída em JSON se a engine for ler a duração de cada frame; sem o JSON, a duração fica por sua conta na engine.

GIF para divulgar. File > Export > Export As (Ctrl+Alt+Shift+S), nome terminado em .gif. No campo Resize, aumente para 400% ou 600%, senão o GIF de 32x32 fica minúsculo na rede social. O GIF respeita a duração de cada frame. Não use o GIF dentro do jogo: ele tem paleta limitada e transparência de 1 bit.

Na Godot, crie um AnimatedSprite2D, em Sprite Frames escolha New SpriteFrames, adicione os frames a partir da sprite sheet informando 8 na horizontal e 1 na vertical, desligue o loop da animação e ajuste o FPS (ou a duração relativa de cada frame no painel). Conecte o sinal animation_finished para remover o nó quando a explosão acabar.

Na Unity, importe a sheet com Sprite Mode: Multiple, Filter Mode: Point (no filter) e Compression: None, fatie no Sprite Editor com Grid By Cell Count de 8 colunas, arraste os 8 sprites para a cena para gerar o clip e desligue Loop Time no clip. Como a Unity usa uma taxa fixa de frames por clip, a duração desigual vira frames repetidos no clip ou um ajuste na taxa.

Erros comuns: explosão sem flash e fumaça que some de repente

Sem flash. A explosão começa na bola de fogo e parece atrasada. Um frame branco curto resolve.

Fumaça que some de repente. A fumaça está inteira no frame 7 e o 8 é vazio. A dissipação precisa de frames próprios, com a forma se quebrando.

Duração igual em todos os frames. Explosão a 100 ms constante parece uma bolha inchando. Rápido no começo, lento no fim.

Forma redonda e lisa. Explosão é feita de bolhas. Recorte a borda.

Cores demais. Dez tons de laranja borram. Cinco cores definidas leem melhor.

Fumaça que desce. Tudo sobe depois do estouro.

Próximo passo

Anime a explosão de 32x32 e teste no jogo com um tremor de tela curto junto. Depois faça uma versão de 16x16 com 5 frames para tiros e inimigos pequenos, reaproveitando as fases. Para decidir quando uma explosão deve ser sprite e quando vale usar partícula ou shader, leia o post sobre VFX 2D para jogos.