Chuva e Neve em Pixel Art: Clima Animado no Cenário

Pixel art de chuva que fica bonita no jogo é feita em camadas: duas ou três folhas de gotas em loop, cada uma com velocidade e tamanho diferentes (perto, meio e longe), mais um respingo no chão e um escurecimento do cenário. A neve segue a mesma lógica, trocando velocidade por balanço. Nada disso exige desenhar centenas de gotas: exige entender como fazer um tile de clima que repete sem emenda.

Este post mostra o processo no Aseprite, com tamanhos, número de frames e a técnica de deslocamento que garante o loop perfeito. No fim, você também vai saber quando vale trocar o sprite por partículas da engine, com o caminho na Godot e na Unity.

Pixel art chuva: gotas, ângulo e velocidade

Uma gota de chuva em pixel art é uma linha curta, não uma lágrima. Para a camada mais próxima da câmera, 1 pixel de largura e 4 a 6 de comprimento. Para a do meio, 3 a 4. Para a de trás, 2 pixels ou até um ponto.

O ângulo é decidido pelo degrau da linha. Em pixel art, ângulos "limpos" são os que formam degraus regulares:

• Vertical: chuva parada, sem vento. Funciona em cenas tristes e calmas.
• 2 para 1 (2 pixels para baixo, 1 para o lado): chuva com vento leve. É o ângulo mais usado.
• 1 para 1 (45 graus): tempestade. Fica dramático, mas cansa se durar o jogo inteiro.

Use a mesma inclinação em todas as camadas. Ângulos diferentes por camada parecem vento vindo de dois lados.

A cor da gota é um azul ou cinza claro, pouco saturado, com valor só um pouco acima do fundo. Gota branca pura chama atenção demais e começa a competir com personagem e interface.

Camadas de profundidade em loop

O truque do loop sem emenda é este: desenhe as gotas num tile pequeno que se repete na tela, e anime movendo o conteúdo do tile sempre a mesma distância, com "volta" pelas bordas.

Montando a camada no Aseprite

1. File > New com 32x64 pixels (largura 32, altura 64). Esse formato casa com o ângulo de 2 para 1.
2. Ligue View > Tiled Mode > Tiled in Both Axes. O Aseprite passa a mostrar o tile repetido em volta e você vê na hora se a distribuição das gotas está boa.
3. Desenhe de 6 a 10 gotas espalhadas, sem formar linhas ou grupos. Gotas que cruzam a borda aparecem do outro lado, então o tile emenda.
4. Adicione um frame com Alt+N (ele copia o atual).
5. Selecione tudo (Ctrl+A) e use Edit > Shift > Down 8 vezes e Edit > Shift > Left 4 vezes. O Shift move o conteúdo 1 pixel com volta pelas bordas.
6. Repita até ter 8 frames.

A conta que fecha o loop: 8 frames de 8 pixels para baixo dão 64 (a altura do tile) e 8 frames de 4 pixels para o lado dão 32 (a largura). O frame 9 seria idêntico ao frame 1, então o ciclo de 8 emenda perfeito.

As três camadas

Em todas as linhas a conta fecha do mesmo jeito: deslocamento vezes número de frames é igual ao tamanho do tile. Coloque a duração de cada frame em Frame > Frame Properties (atalho P), entre 60 e 100 ms.

As camadas com velocidades diferentes fazem o olho parar de procurar o loop. Uma camada só, por melhor que seja, mostra a repetição em poucos segundos. Para ajustar o movimento entre frames, o onion skin do Aseprite (F3) ajuda a conferir que cada gota anda a mesma distância.

Respingo no chão e poças

Gota que só atravessa o chão parece efeito colado na tela. O respingo resolve, e é um sprite separado, pequeno:

• Respingo: 3 frames, 5x3 pixels. Frame 1: um ponto. Frame 2: dois pontinhos saltando para os lados e um no meio. Frame 3: dois pontos mais afastados e mais escuros. Duração de 50 a 70 ms por frame.
• Poça: um círculo achatado de 8x3 ou 12x4, um tom mais claro que o chão, com um anel que se expande em 3 a 4 frames quando a gota cai.

Os respingos não precisam bater com as gotas de verdade. Espalhe 15 a 30 respingos pelo chão com tempos de início diferentes e o cérebro conecta tudo sozinho.

Neve: flocos, balanço e acúmulo

A neve usa o mesmo tile em loop, com três diferenças:

1. Velocidade baixa. De 1 a 2 pixels por frame na camada da frente, 1 pixel a cada dois frames na de trás.
2. Balanço lateral. Cada floco anda de 1 a 2 pixels para um lado e depois volta. Como o tile move em bloco, você faz o balanço com duas versões do floco ou deslocando a camada com um padrão como +1, +1, 0, -1, -1, 0 no eixo horizontal (a soma é zero, então o loop continua fechando).
3. Flocos de formas diferentes. Na frente, flocos de 2x2 ou uma cruzinha de 3x3 com centro claro. No meio, 1x1 branco. Atrás, 1x1 em cinza azulado.

O acúmulo é arte de cenário, não animação: uma faixa branca de 1 a 3 pixels por cima de telhados, cercas e galhos, com o lado de baixo em azul claro para dar volume. Se o jogo muda de clima, desenhe essas faixas numa camada separada que liga e desliga.

Aqui aparece o ponto em que muita gente trava: as gotas e os flocos estão prontos, mas juntar arte, animação, camadas de profundidade e o jogo rodando com tudo na ordem certa é outra habilidade. Saber desenhar o efeito isolado é metade; a outra metade é fazer o cenário inteiro funcionar junto.

Escurecer o cenário: overlay e paleta de clima

Chuva sobre um cenário ensolarado parece errada, mesmo com gotas perfeitas. O clima precisa mudar a luz:

• Overlay de cor. Uma camada por cima de tudo com azul escuro e modo de mesclagem Multiply, com opacidade entre 20% e 40%. No Aseprite, o modo da camada fica em Layer > Properties (dois cliques no nome). Na engine, é um retângulo em tela cheia com a mesma cor e transparência.
• Paleta de clima. Para um resultado mais controlado, crie uma versão da paleta do jogo para chuva: cada cor um pouco mais escura e mais azul. Com a sprite em modo indexado, trocar a paleta muda o cenário inteiro.
• Janelas acesas. Na chuva, luzes quentes de janela e poste ficam mais fortes. Um pixel amarelo a mais numa janela muda o clima da cena.

O post Sistema de Clima e Chuva no Godot mostra como fazer a transição de tempo por código: escurecer aos poucos, ligar a chuva e controlar intensidade.

Sprite em loop vs partícula na engine

As duas abordagens resolvem problemas diferentes.

Sprite em loop é melhor quando:

• O estilo é pixel art rígido e você quer cada gota alinhada ao grid.
• O jogo tem câmera fixa ou de tela em tela.
• Você quer custo zero de desempenho e resultado idêntico em qualquer máquina.

Partícula na engine é melhor quando:

• A câmera se move muito e a chuva precisa existir no mundo, não na tela.
• A intensidade muda (garoa vira tempestade) ou o vento muda de direção.
• Você quer respingo exatamente onde cada gota cai, ou gotas que param no teto.

O meio-termo mais comum: camadas de sprite em loop ao fundo (longe e meio) e partículas na camada da frente, perto do jogador.

Na Godot, use um nó GPUParticles2D com um ParticleProcessMaterial: Emission Shape em Box, largura da caixa igual à da tela, Direction apontando para baixo com um pouco de inclinação, Spread perto de zero e Initial Velocity alta. Use a textura da gota como Texture do nó e mantenha o filtro em Nearest. O post sobre GPUParticles2D na Godot explica cada propriedade.

Na Unity, crie um Particle System (GameObject > Effects > Particle System) com o módulo Shape em Box, Start Speed alta, Simulation Space em World e o módulo Renderer usando um material com a textura da gota. Para o respingo, ligue o módulo Collision e, no módulo Sub Emitters, use a condição Collision para disparar um segundo sistema no ponto do impacto.

Erros comuns: chuva que esconde o personagem, loop visível

Chuva que esconde o personagem. Gotas claras demais, densas demais, na camada mais à frente. O jogador perde o próprio herói de vista. Correção: diminua o contraste da camada da frente e a quantidade de gotas; o clima é fundo, não protagonista.

Loop visível. Uma gota "pula" no fim do ciclo, ou o padrão se repete igual a cada 0,5 segundo. Correção: confira a conta do deslocamento (soma igual ao tamanho do tile) e use pelo menos duas camadas com tamanhos de tile diferentes.

Gotas em fila. Ao espalhar à mão, é fácil alinhar gotas sem perceber. Com o Tiled Mode ligado, olhe o tile repetido em zoom baixo: linhas e diagonais aparecem na hora.

Neve que cai como chuva. Velocidade alta e linha reta. Neve precisa de lentidão e balanço.

Clima sem mudança de luz. Gotas sobre um cenário claro e saturado. Correção: overlay ou paleta de clima, sempre.

Próximo passo

Monte a chuva em três camadas num cenário que você já tem (ou num retângulo de 320x180 com chão e uma casa simples), com respingo e overlay. Exporte como GIF (File > Export > Export As, formato GIF) e assista 30 segundos sem piscar: se você não encontrar o loop, está pronto. Depois faça a versão com neve usando os mesmos arquivos de tile, trocando só a velocidade, o balanço e o floco.