Água em Pixel Art: Tile de Lago, Borda e Brilho

Pixel art água em tile funciona com uma cor base que já indica profundidade, uma faixa de margem clara onde a água encontra a terra e poucos brilhos animados em 4 frames. O que mais quebra água em jogo não é a cor: é a borda que não encaixa no autotile e a animação que pisca porque todos os tiles mudam no mesmo instante.

Aqui você monta, no Aseprite, um tile de água 16x16 que repete sem emenda, as peças de borda de lago para autotile e o brilho animado em 4 frames. No fim, a decisão entre animar no sprite ou usar shader de água na engine. Em LibreSprite, Pixelorama ou Piskel (grátis), os passos de desenho são os mesmos; o teste de repetição muda, e eu explico como fazer neles.

Pixel art água: cor base e profundidade

Água não é azul chapado. Ela é mais escura onde é funda e mais clara perto da margem, e esse degradê é o que diz ao jogador "aqui eu afundo, ali eu piso".

Paleta mínima:

Escolha os azuis dentro da paleta do jogo. Se o tileset puxa para tons quentes, desloque o azul para o verde-água; se puxa para tons frios e escuros, para o roxo. Um azul saturado puro no meio de uma paleta terrosa salta da tela.

Arquivo inicial: File > New (Ctrl+N), 16x16 pixels, fundo Transparent. Preencha o tile com o azul base usando o balde (G).

Tile central que repete sem emenda

O tile central é o que mais aparece no mapa, então ele precisa repetir sem mostrar a grade.

1. Ligue View > Tiled Mode > Tiled in Both Axes. O Aseprite passa a mostrar o tile repetido em volta do canvas, e tudo o que você desenha perto de uma borda aparece do outro lado.
2. Com o lápis (B) e o azul claro, desenhe 2 ou 3 traços curtos e horizontais de ondulação, de 2 a 4 pixels cada. Coloque um deles atravessando a borda do tile: o tiled mode mostra a continuação na repetição, e é isso que esconde a costura.
3. Espalhe 3 ou 4 pixels de azul escuro em pequenos grupos, sugerindo variação de profundidade.
4. Olhe o padrão repetido com zoom baixo. Se aparecer uma diagonal ou uma fileira de traços alinhados, mova um traço 2 pixels.

Tiled mode é a ferramenta certa para o tile único. Para um conjunto inteiro de peças, o Aseprite tem a camada de tilemap: Layer > New > New Tilemap Layer (Space+N), disponível desde o Aseprite 1.3. Nela você desenha no modo Draw Pixels e o próprio Aseprite monta o tileset, e alterna para Draw Tiles com Space+Tab para pintar o mapa com as peças prontas. É a forma de testar o lago inteiro dentro do Aseprite.

Em Pixelorama existe um modo de visualização em mosaico parecido (View > Tile Mode). Em Piskel e LibreSprite, o teste é manual: exporte o tile e monte uma grade 3x3 num arquivo novo.

Tile de lago com bordas para autotile

Borda é onde a água encontra a terra. Para a engine montar a margem sozinha, você desenha as peças de borda em separado.

O conjunto mínimo para um lago com margem simples tem 13 peças:

• 1 centro (o tile que você já fez)
• 4 lados (cima, baixo, esquerda, direita)
• 4 cantos externos (a quina convexa do lago)
• 4 cantos internos (a quina côncava, quando a terra entra na água)

Regras para a borda encaixar:

1. Distância fixa. A linha da margem fica sempre na mesma distância da borda do tile. Por exemplo, a terra ocupa os 5 pixels de cima no tile de borda superior; então ocupa os 5 pixels da esquerda no tile de borda esquerda, e os cantos usam a mesma medida.
2. Faixa de raso. Logo depois da terra, uma faixa de 2 pixels no azul claro: é a água rasa.
3. Espuma. Na linha exata do encontro, uma fileira de pixels quase brancos, interrompida a cada 3 ou 4 pixels. Espuma contínua parece contorno desenhado.
4. Sombra da margem. Opcional, mas ajuda muito: 1 pixel de azul escuro logo abaixo da margem superior, como se o barranco fizesse sombra na água. Nas margens de baixo, não há sombra.

Use View > Grid > Grid Settings com 16x16 e desenhe as 13 peças num arquivo de 80x48 ou similar. Para montar os cantos internos a partir dos lados, copie o canto de dois lados e una, em vez de redesenhar do zero: isso garante que as medidas batem. O post sobre como desenhar um tileset no Aseprite mostra a lógica de grade e snap que segura esse alinhamento.

Brilho e ondulação animados em 4 frames

A animação de água tem uma regra que evita o efeito pisca-pisca: pouca coisa muda por frame. O azul base e a margem ficam parados; só a ondulação e o brilho se movem.

1. Com o tile central pronto, crie o frame 2 com Frame > New Frame (Alt+N).
2. Ligue o onion skin (F3) para ver o frame anterior.
3. No frame 2, mova cada traço de ondulação 1 pixel para a direita. Com o tiled mode ligado, o traço que sai pela direita aparece pela esquerda, e o loop fica contínuo.
4. Brilho: adicione 1 ou 2 pixels quase brancos sobre um traço de ondulação.
5. Frame 3: ondulação mais 1 pixel para a direita; o brilho some de um lugar e aparece em outro.
6. Frame 4: mais 1 pixel. Depois do frame 4, o 1 deve parecer o passo seguinte.

Se o tile tem 16 pixels e a ondulação anda 1 pixel por frame, ela só volta à posição inicial depois de 16 frames. Com 4 frames, o truque é desenhar traços que se pareçam entre si, para o salto do frame 4 para o 1 ser imperceptível, ou fazer a ondulação oscilar (sobe e desce 1 pixel) em vez de andar.

Tempo: selecione os 4 frames na timeline, clique com o botão direito em Properties e coloque 200 ms. Aperte Enter para tocar. Água parada fica bem entre 180 e 250 ms; mais rápido parece rio.

As peças de borda também ganham 4 frames: a espuma alterna os pixels apagados, e a faixa de raso pode oscilar 1 pixel. Mantenha a terra parada em todos os frames.

Deixar a água bonita num tile é rápido. Fazer o lago, a margem, a areia, a grama e as pedras funcionarem juntos num autotile que a engine monta sozinha, na mesma paleta do resto do jogo, é onde quem trabalha sem método perde dias corrigindo emenda a emenda.

Montar o conjunto mínimo de peças antes de enfeitar qualquer uma é o que deixa a borda pronta para qualquer forma de lago.

Água pixel art tile na engine: tiles animados

Exporte as peças como uma folha com File > Export > Export Sprite Sheet (Ctrl+E), em grade, com cada frame de animação lado a lado.

Na Godot 4, no editor de TileSet, selecione o tile de água no atlas e abra a seção Animation nas propriedades do tile. Ali você define Columns (quantos frames por linha no atlas; 0 deixa todos numa linha horizontal), Separation, Speed, Mode e a lista de frames com a duração de cada um. O Mode em Random Start Times faz cada tile começar a animação num momento diferente, que é a correção direta para a água que pisca em sincronia. As bordas viram terrains no mesmo TileSet; o post sobre TileMap na Godot 4 cobre a configuração das camadas.

Na Unity, tiles animados vêm do pacote 2D Tilemap Extras: Assets > Create > 2D > Tiles > Animated Tile, arraste os 4 sprites para a lista e ajuste Minimum Speed e Maximum Speed (em frames por segundo). Com valores diferentes, a Unity sorteia uma velocidade por tile, o que também quebra a sincronia. A animação só roda em Play Mode. Importe a folha com Filter Mode: Point (no filter) e Compression: None.

Sprite animado vs shader de água

As duas abordagens funcionam; a escolha depende do estilo.

Sprite animado (o que você fez aqui):

• Controle total de cada pixel, mantém a pixel art estrita.
• Funciona igual em qualquer engine.
• Custo é de arte: cada peça de borda vezes 4 frames.
• Limitado ao que você desenhou: não reflete personagens nem cenário.

Shader de água:

• Ondulação contínua, distorção do que está embaixo, reflexo, tudo sem desenhar frames.
• Barato de produzir depois que o shader existe, e fácil de ajustar cor e velocidade.
• Difícil manter o visual pixelado: a distorção pode gerar pixels "meio deslocados" se o shader não arredondar as coordenadas.
• Exige alguma programação.

Uma combinação comum: tiles parados para a cor e a margem, com shader só para ondulação e reflexo. O post sobre shader de água 2D na Godot mostra a onda, a distorção com noise e a leitura da tela atrás da água.

Erros comuns: água que pisca e borda que não encaixa

Água que pisca. Todos os tiles trocam de frame juntos e o lago inteiro pulsa. Reduza o que muda por frame e use início aleatório (Random Start Times na Godot, faixa de velocidade no Animated Tile da Unity).

Contraste alto demais na ondulação. Traço branco em água azul escura vira uma grade de riscos. Ondulação usa o azul claro; branco só no brilho, em 1 ou 2 pixels.

Margem em distância diferente em cada peça. A borda do lado esquerdo começa no pixel 5 e a de cima no pixel 4: o autotile monta degraus. Meça e use a mesma medida.

Espuma contínua. Vira contorno. Quebre a cada poucos pixels.

Terra animada junto. Se a grama da margem se mexe com a água, o chão parece tremer. Só a parte da água muda entre frames.

Esquecer o canto interno. Sem ele, qualquer lago que não seja retângulo perfeito quebra.

Próximo passo

Faça o tile central, teste a repetição com o tiled mode, depois as 13 peças de borda paradas. Só anime quando o lago montado na engine já estiver sem costura. Na sequência, adicione areia de praia entre a grama e a água usando a mesma lógica de bordas, e você terá um conjunto de terreno completo.