Fogo em Pixel Art: Tocha, Fogueira e Animação em Loop

Fogo em pixel art funciona com pouco: uma forma de gota que sobe, uma paleta quente de 4 cores e um loop de 4 frames em que as línguas de chama sobem e se desprendem no topo. O que deixa o fogo crível no jogo não é o número de frames, é o loop sem emenda, as faíscas e a luz que ele joga no chão.

Este tutorial mostra o passo a passo no Aseprite, com tamanhos em pixels, paleta e tempo de frame, e depois as variações para tocha, fogueira e vela. Em Pixelorama, LibreSprite ou Piskel (todos grátis), os passos são os mesmos: só muda o nome do menu, e eu indico onde fica cada coisa.

Pixel art de fogo: a forma antes da animação

Antes de animar, desenhe um único frame parado e acerte a silhueta. Fogo é uma gota invertida: base larga e arredondada, topo pontudo e irregular, dividido em duas ou três línguas.

Configuração inicial no Aseprite:

1. File > New (Ctrl+N), 16 x 24 pixels, Color Mode RGBA, fundo Transparent.
2. Ferramenta Pencil (B), tamanho 1, sem pixel perfect por enquanto.
3. Ative a grade em View > Show > Pixel Grid para ver cada pixel ao dar zoom.

Desenhe a chama em três camadas de cor, de fora para dentro: contorno vermelho escuro, corpo laranja, miolo amarelo e um núcleo pequeno quase branco perto da base. O núcleo fica embaixo, não no centro geométrico, porque a parte mais quente da chama é a mais próxima do combustível.

Erro de iniciante nesse primeiro frame: chama simétrica. Fogo nunca é espelhado. Incline uma língua para um lado e deixe a outra mais curta.

Paleta de fogo em 4 cores

Quatro cores formam uma rampa de calor clara, que lê bem até em 8 pixels de altura:

Esses hex são um ponto de partida. Se o jogo já tem paleta, puxe os quatro tons mais quentes dela. Um fogo com laranja saturado no meio de uma paleta dessaturada parece colado de outro jogo. O post sobre paleta de cores em pixel art explica como montar rampas que funcionam juntas.

No Aseprite, monte essas quatro cores na paleta lateral: escolha cada uma no seletor de cor e adicione à paleta (o nome exato das opções do menu da paleta muda entre versões). Trabalhar só com essas quatro evita tons intermediários perdidos que deixam o fogo sujo.

Uma quinta cor opcional: um cinza escuro levemente avermelhado para fumaça.

Loop de 4 frames

O movimento do fogo é simples de descrever: tudo sobe, e o topo se desprende e some. A base praticamente não se mexe.

1. Com o frame 1 pronto, crie o frame 2 com Frame > New Frame (Alt+N). Ele nasce como cópia do anterior.
2. Ative o Onion Skin (F3 ou o ícone na timeline) para ver o frame anterior em transparência. O post sobre onion skin no Aseprite mostra como ajustar quantos frames aparecem.
3. No frame 2, suba cada língua 1 a 2 pixels e troque a inclinação: se no frame 1 a língua maior pendia para a esquerda, agora ela fica reta.
4. Na ponta de uma língua, separe 1 a 3 pixels do corpo: é o pedaço de chama que se desprende.
5. Frame 3: o pedaço desprendido sobe mais 2 pixels e vira vermelho escuro. Uma nova língua começa a crescer do lado oposto.
6. Frame 4: o pedaço some. A forma volta a ficar parecida com o frame 1, mas não igual. A transição do frame 4 para o 1 precisa parecer continuação, não reinício.

Tempo: selecione os 4 frames na timeline, clique com o botão direito em Frame Properties e defina 100 ms. Aperte Enter para tocar. Se parecer agitado, suba para 120 ms; se parecer lento, 80 ms.

Teste do loop sem emenda: toque a animação e olhe só para a base. Se ela "pula" a cada ciclo, o frame 4 está diferente demais do 1. Ajuste o 4, não o 1.

Não use a direção Ping-pong nas tags para fogo. Ela toca o loop de ida e volta, e a chama fica parecendo que desce, o que denuncia na hora.

Em Pixelorama, o novo frame fica no botão + da timeline e o onion skin no ícone de cebola; no Piskel, os frames são a coluna à esquerda e o onion skin fica no painel de pré-visualização.

Tocha

A tocha é o caso mais comum em masmorra. Tamanho sugerido: 8 x 16 pixels para a chama sobre um cabo de madeira de 2 a 3 pixels de largura.

• Desenhe o cabo e a cabeça de pano numa camada separada, sem animação.
• A chama ocupa 6 a 8 pixels de largura na base, com no máximo duas línguas.
• Use os 4 frames do loop acima, menores.
• Faça uma segunda versão do loop deslocada no tempo: comece no frame 3 em vez do 1. Num corredor com dez tochas, alterne as duas versões e elas param de piscar em sincronia, que é o detalhe que mais denuncia fogo de jogo amador.

Desenhar um fogo bonito isolado é a parte gostosa. Fazer ele conversar com o resto do cenário, na mesma paleta, iluminando o chão e as paredes sem destoar dos personagens, é o que separa um efeito solto de um jogo com arte coerente. É ali que muita gente fica sozinha ajustando tudo no olho.

Ter um processo para efeitos (paleta fechada, tamanho padrão, camadas separadas para exportar) evita refazer o fogo cada vez que o cenário muda.

Fogueira

A fogueira é maior e precisa de mais camadas. Tamanho sugerido: 32 x 32 pixels.

1. Camada lenha, parada: três a quatro toras cruzadas, marrom com destaques laranja nas pontas que tocam o fogo.
2. Camada chama grande: o loop de 4 a 6 frames, ocupando uns 16 pixels de largura.
3. Camada chamas laterais: duas chamas pequenas nos cantos, com o mesmo loop deslocado 2 frames. Isso quebra a uniformidade.
4. Brasas: 3 a 5 pixels laranja e vermelhos entre as toras que alternam de cor a cada 2 frames.

Se quiser fluidez maior na fogueira, passe para 6 ou 8 frames, mantendo a mesma lógica: cada língua sobe um pouco por frame, se desprende e some.

Vela

A vela é o oposto: 1 a 2 pixels de largura de chama, 3 a 4 de altura. Dois ou três frames com a ponta oscilando 1 pixel para os lados já bastam, a 150 ms. Movimento grande em vela parece vento forte.

Faíscas e fumaça

Faíscas vão numa camada própria, para você poder ligar e desligar e exportar separado se quiser:

• 1 pixel cada, amarelo ou laranja.
• Sobem 2 a 3 pixels por frame, desviando 1 pixel para os lados de vez em quando.
• Mudam para vermelho escuro antes de sumir.
• Duas a três faíscas por ciclo, em alturas diferentes, nunca juntas.

Como a faísca precisa sair e sumir dentro do loop, faça o ciclo de faíscas ter um número de frames que divide ou é múltiplo do loop da chama (4 ou 8). Assim tudo fecha junto.

Fumaça em pixel art pequena costuma poluir mais do que ajudar. Se usar, faça 2 ou 3 bolinhas cinza que sobem devagar acima da chama e somem. Em fogueira de acampamento ela funciona; em tocha de masmorra, geralmente não.

Luz no chão e no cenário

Fogo sem luz parece um adesivo. Há dois caminhos.

Luz pintada. Crie um sprite separado com uma elipse no chão em laranja com transparência, por exemplo 40 x 12 pixels para uma fogueira. Em pixel art estrita, use dithering (pixels alternados) em vez de transparência para fazer o degradê. Faça 2 frames, um com a elipse 1 pixel maior, e alterne de forma irregular. Coloque esse sprite numa camada atrás dos personagens e na frente do chão.

Luz da engine. Na Godot, adicione um PointLight2D como filho da fogueira, com uma textura de gradiente radial, cor laranja e um AnimationPlayer variando a energia entre 0.9 e 1.1. O cenário precisa estar mais escuro (um CanvasModulate resolve) para a luz aparecer. Na Unity, com o URP e o 2D Renderer, adicione uma Light 2D do tipo Spot ou Freeform na fogueira e um script ou Animation variando a intensidade. A luz global da cena precisa estar baixa para o efeito aparecer.

A luz pintada é mais previsível e mantém o estilo pixel art; a luz da engine ilumina personagens que passam perto. Muitos jogos usam as duas.

Erros comuns

Fogo que desce. Alguma língua desce entre frames. Tudo no fogo sobe; só a base fica.

Loop com tranco. O último frame não leva ao primeiro. Toque em loop e olhe a base.

Cores demais. Seis ou sete tons de laranja viram um borrão. Quatro tons e pronto.

Contorno preto. Fogo é fonte de luz; contorno preto apaga. A borda é a cor mais escura da própria rampa.

Todas as tochas sincronizadas. Use duas versões do loop deslocadas ou comece a animação em frames aleatórios na engine.

Exportar GIF para o jogo. GIF serve para divulgar. Para a engine, exporte a sprite sheet em PNG em File > Export > Export Sprite Sheet.

Próximo passo

Faça a tocha primeiro: é pequena e treina o loop. Depois a fogueira com faíscas, e por último a luz no chão dentro da engine. Quando o loop estiver pronto, o post sobre animação em loop perfeito aprofunda a técnica de fechar ciclos sem emenda para outros efeitos, como água e vento.