Fumaça 2D Animada: Fumaça e Poeira para Jogo

Fumaça 2D animada, ou VFX 2D smoke, funciona com uma regra só: a forma é feita de bolhas que nascem, sobem, encolhem e clareiam até sumir aos pedaços. A poeira de pulo e de pouso é a mesma ideia, só que horizontal e rápida. Com um puff de 5 frames você resolve o pouso, o rastro de corrida e a base de uma fumaça em loop, e decide depois quando trocar o sprite por partícula.

Aqui você anima a poeira de pouso no Aseprite, reaproveita o mesmo puff no rastro de corrida, monta uma fumaça contínua em loop e vê como o mesmo efeito fica no Krita, pintado em vez de pixelado. Pixelorama, LibreSprite e Piskel (grátis) seguem os mesmos passos de pixel art.

Fumaça 2D: forma de nuvem e dissipação

Antes de animar, acerte uma bolha parada. Fumaça desenhada como espiral ou como linhas onduladas parece vapor de desenho infantil. Fumaça de jogo é um grupo de círculos sobrepostos.

Paleta de 3 tons:

Para poeira de chão, troque os cinzas por tons da terra do cenário (bege, marrom claro). Poeira cinza num chão de areia parece fumaça, e o jogador lê "algo pegou fogo" em vez de "o personagem pisou forte".

Como a fumaça se dissipa, em 4 etapas:

1. Nasce pequena e densa, mais escura.
2. Cresce e sobe; os tons clareiam.
3. Encolhe enquanto continua subindo, porque está se espalhando e ficando transparente.
4. Se parte: a bolha abre buracos e vira 2 ou 3 pedaços que somem.

A etapa 4 é a que quase todo mundo esquece, e é por isso que tanta fumaça de jogo "desliga" em vez de se dissipar.

Poeira de pulo e pouso em 5 frames

Arquivo: File > New (Ctrl+N), 32x16 pixels, fundo Transparent. A poeira de pouso é larga e baixa. O personagem vai ficar no centro, então a poeira sai para os dois lados a partir do meio da base.

Vou desenhar só o lado direito e espelhar depois.

1. Frame 1, impacto. Uma bolha achatada de 6x3 pixels colada no chão, à direita do centro, em cinza médio com o topo claro. O frame é curto e marca o contato.
2. Frame 2, expansão. Crie com Frame > New Frame (Alt+N) e ligue o onion skin (F3). Duas bolhas: uma de 6x5 a 3 pixels do centro e outra de 4x4 mais para fora. Ambas sobem 1 pixel.
3. Frame 3, pico. As bolhas chegam ao maior tamanho, 7x6 e 5x5, e já estão a 6 a 10 pixels do centro. O tom escuro some; ficam médio e claro.
4. Frame 4, dissipação. As bolhas encolhem para 5x4 e 3x3, sobem mais 1 pixel, e com a borracha (E) você abre 1 ou 2 buracos de 1 pixel em cada uma.
5. Frame 5, fim. Três ou quatro pixels soltos de cinza claro onde estavam as bolhas.

Agora o espelho: selecione tudo (Ctrl+A) em cada frame, copie, cole e espelhe com Shift+H (flip horizontal da seleção), posicionando do lado esquerdo. Mude 1 ou 2 pixels do lado espelhado para não ficar perfeitamente simétrico.

Duração: selecione os frames, botão direito, Properties. Frame 1 com 50 ms, frames 2 e 3 com 60 ms, frames 4 e 5 com 80 ms. Total de 330 ms. Toque com Enter.

Para a poeira de pulo (decolagem), use os mesmos frames com as bolhas indo um pouco mais para cima e menos para os lados. Para a versão de pulo duplo, no ar, a poeira vira um anel achatado embaixo dos pés.

O post sobre onion skin no Aseprite ajuda a ajustar quantos frames aparecem e a ver o movimento das bolhas.

Rastro de corrida reaproveitando o mesmo puff

O rastro de corrida não precisa de animação nova. Ele é o puff de um lado só, menor e emitido várias vezes.

1. Duplique o arquivo da poeira e apague o lado direito em todos os frames, ficando com as bolhas que saem para trás.
2. Reduza as bolhas: o rastro tem 3 frames (equivalentes aos frames 2, 4 e 5 do pouso), com bolhas de 4x3, 3x3 e 2 pixels.
3. Exporte como uma animação curta de 3 frames.

Na engine, você instancia esse pequeno puff a cada passo do personagem, ou a cada 0,15 a 0,2 segundo enquanto ele corre no chão, na posição dos pés. Como cada puff toca e some sozinho, o resultado é um rastro contínuo. Se o personagem tem uma animação de corrida com o pé tocando o chão em frames específicos, sincronize o puff com esses frames: fica muito mais natural.

Esse é o tipo de detalhe que entra no pacote de game feel do personagem, junto com squash and stretch e som de passo. O post sobre game feel e juice mostra como essas camadas se somam.

Fumaça animada 2D em loop

Fumaça contínua (chaminé, fogueira apagada, cano soltando vapor) precisa de loop sem salto. A técnica é a fila de bolhas defasadas.

Arquivo 16x32, 8 frames.

1. Desenhe uma bolha em 8 posições subindo pela coluna: nasce pequena e escura em baixo (frame 1), cresce até o meio (frames 3 e 4), encolhe e clareia em cima (frames 5 a 7) e some aos pedaços no frame 8.
2. Segunda bolha, defasada em 4 frames. Numa camada nova (Layer > New > New Layer, Shift+N), desenhe a mesma subida, só que começando no frame 5. Ela nasce quando a primeira está no meio. Nos frames 1 a 4 da camada nova, ela está na segunda metade do caminho (continuação do ciclo anterior).
3. Desvio lateral. Cada bolha desvia 1 pixel para um lado na subida, como se houvesse vento. Use o mesmo sentido nas duas bolhas.

Como cada bolha começa onde a outra termina, o frame 8 leva ao frame 1 sem descontinuidade: sempre há uma bolha nascendo e outra sumindo. Duração de 100 a 120 ms por frame, porque fumaça contínua é lenta.

Teste: toque em loop e olhe só a base. Se a bolha da base "pula" de tamanho entre o frame 8 e o 1, ajuste o frame 8.

Desenhar uma poeira bonita isolada é rápido. Fazer a poeira, a fumaça, a corrida, o pulo e o resto dos efeitos do personagem baterem com a animação e com o tempo do jogo, todos no mesmo estilo e na mesma paleta, é o que dá trabalho real quando você junta tudo num projeto sozinho.

Quando a poeira já nasce pensada para ser reaproveitada (pouso, pulo, rastro), cada novo movimento do personagem ganha efeito sem desenho novo.

Fumaça em pixel art vs pintada no Krita

Nem todo jogo é pixel art. Em jogos com arte pintada ou traço digital, a fumaça é pintada com pincel macio e transparência, e o Krita é uma ferramenta grátis completa para isso.

No Krita:

1. Mude para o espaço de trabalho de animação em Window > Workspace > Animation. A Animation Timeline aparece embaixo e o docker de Onion Skins fica disponível.
2. Crie o documento com o tamanho do efeito em alta resolução, por exemplo 256x256 para uma fumaça que vai aparecer com 64 pixels no jogo. Fundo transparente.
3. Na timeline, clique com o botão direito no primeiro quadro e use Create Blank Frame. Para os seguintes, Create Duplicate Frame mantém o desenho anterior para você ajustar.
4. Ligue o onion skin pelo ícone na timeline; por padrão, os quadros anteriores aparecem em vermelho e os seguintes em verde.
5. Pinte as bolhas com um pincel macio de aerógrafo e a borracha com o mesmo pincel para abrir os buracos na dissipação. Use a opacidade do pincel, não cinzas sólidos: fumaça pintada é transparente.
6. Exporte com File > Render Animation como sequência de PNG. Para virar sprite sheet, monte a folha fora do Krita (pelo Aseprite, por um packer ou por script), porque o Render Animation entrega quadros soltos. Existem plugins da comunidade que exportam sprite sheet direto, mas confira se o plugin roda na sua versão do Krita antes de depender dele.

A animação segue as mesmas etapas (nasce, cresce, encolhe, se parte), mas aceita 8 a 12 frames, porque arte pintada pede movimento mais suave do que pixel art.

No Aseprite, a fumaça pixelada exporta direto em File > Export > Export Sprite Sheet (Ctrl+E), com as tags virando nomes de animação no JSON.

Quando usar partícula em vez de sprite

O sprite animado é a escolha certa para a poeira de pouso e de pulo: ela tem forma marcada, acontece no momento exato e precisa combinar pixel a pixel com o personagem.

Partícula é melhor quando:

• A fumaça é contínua e grande (incêndio, chaminé, área de névoa).
• O efeito precisa variar muito (dez tochas fumegando sem sincronia).
• A quantidade muda com o jogo (mais poeira quanto mais rápido o carro).

A combinação mais usada: partícula cuja textura é o puff desenhado. Na Godot, um GPUParticles2D com a sprite sheet do puff como textura e um CanvasItemMaterial com Particles Animation ativado, para cada partícula tocar os frames. Na Unity, um Particle System com o módulo Texture Sheet Animation apontando para a mesma folha, e o renderer usando um material de sprite. Assim você mantém o estilo desenhado com a variedade da partícula.

Erros comuns: fumaça opaca e loop com salto

Fumaça opaca e escura demais. Cinza escuro sólido tapa o cenário e parece uma pedra flutuando. Clareie com o tempo e, em arte pintada, use transparência.

Loop com salto. O último frame não leva ao primeiro. Bolhas defasadas resolvem.

Fumaça que some de repente. Falta a etapa em que a bolha se parte.

Poeira na cor errada. Cinza em chão de terra lê como fumaça. Use a cor do chão.

Puff grande demais no pouso. A poeira esconde os pés e o jogador perde a leitura de onde o personagem está. Ela deve ficar abaixo da altura dos joelhos.

Fumaça que desce. Só a poeira de pouso vai para os lados; fumaça sempre sobe.

Próximo passo

Anime o puff de pouso, reaproveite no rastro de corrida e teste os dois no seu personagem. Depois faça a fumaça em loop para um elemento de cenário. Para decidir que outros efeitos do seu jogo pedem sprite, partícula ou shader, o post sobre VFX 2D para jogos tem uma tabela por tipo de efeito.