O que você vai aprender

  • Configurar grid e snap para tiles de 16x16, 32x32 e 64x64 pixels
  • Criar tilesets organizados e testar emenda com filtros de repetição
  • Produzir sprites animados frame-by-frame com camadas nomeadas
  • Exportar assets em PNG com alpha no formato esperado por engines 2D

Game Assets: Tilesets e Sprites para Jogos 2D🔗

Tilesets e sprites são a base visual de qualquer jogo 2D. Um tileset bem construído permite montar cenários inteiros com pocas peças, enquanto sprites animados dão vida aos personagens. O GIMP oferece grid configurável, snap preciso e filtros de mapeamento que tornam esse workflow eficiente para Godot, Unity e outras engines.

Configuração de Grid🔗

O grid e o alicerce de todo asset para jogos. Ele garante que cada tile tenha dimensões exatas e que os elementos se alinhem perfeitamente.

Ativar e configurar:

  1. View > Show Grid ou Shift+Ctrl+G
  2. Image > Configure Grid: Horizontal e Vertical Spacing em 16 pixels (ou 32, 64 conforme o projeto), Offset 0
  3. Ative o snap: View > Snap to Grid ou Shift+Ctrl+,

Tamanhos padrão:

TamanhoUso típico
16x16RPGs 2D clasiscos, estilo SNES/GBA
32x32Jogos com sprites detalhados, HD-2D
64x64Personagens principais, bosses

Mantenha o tamanho consistente em todo o projeto. Em Edit > Preferences > Image Windows, defina "Zoom quality" como None (nearest-neighbor) para evitar blur ao dar zoom.

Criando Tilesets🔗

Um tileset é uma imagem com todos os tiles organizados em grade. Cada tile ocupa uma célula do grid.

Preparar o canvas: File > New com dimensões múltiplos do tile. Para tiles de 16x16 com 10x10 tiles, use 160x160 pixels. Trabalhe em uma camada separada chamada tiles.

Pintar tiles: Use o Lápis ( N ) com tamanho de pincel igual ao do tile para blocos sólidos. Para detalhes, pincel de 1 pixel dentro de uma única célula. O snap garante alinhamento automático.

Tipos essenciais: chão (grama, pedra, madeira), paredes (bordas que se conectam), objetos (árvores, baús) e colisão (camada separada para áreas sólidas).

Organização: reserve regiões do canvas para cada categoria. Primeira linha para chão, segunda para paredes, terceira para objetos. Isso facilita a criação de atlas na engine.

Sprites e Animação🔗

Sprites são imagens de personagens e objetos. Animações usam uma camada por frame.

Criar e animar:

  1. Canvas do tamanho do sprite (ex: 32x32) com grid e snap ativos.
  2. Desenhe o frame inicial na camada frame_01.
  3. Duplique: Shift+Ctrl+D. Renomeie para frame_02, frame_03, etc.
  4. Visualize: Filters > Animation > Playback.

Nomenclatura: use nomes sequenciais como player_walk_01.png, player_walk_02.png. Para direções e estados, organize com prefixos:

player_walk_down_01.png
player_walk_up_01.png
player_idle_01.png

Teste de Seamless🔗

Um tile seamless se encaixa perfeitamente quando repetido, sem bordas visíveis.

Método: selecione o tile com a ferramenta retangular (alinhada ao grid) e aplique Filters > Map > Tile. O filtro repete o tile por todo o canvas. Se não há bordas ou descontinuidades, o tile e seamless.

Correção: se o teste revelar emendas, use a borracha ( Shift+E ) nas bordas para suavizar a transição. Clone elementos de uma borda para a oposta e repita o teste até a emenda desaparecer.

Tiles de transição: para conectar tipos diferentes (grama para terra), crie variantes de borda e canto. Um autotile básico requer 16 variantes (bitmask 3x3) ou 47 (blob tileset).

Exportação para Engines🔗

Tileset em PNG: File > Export As com formato PNG, compression level 9. O PNG preserva o canal alpha para tiles com formas irregulares.

Sprites individuais: exporte cada frame como PNG separado seguindo a convenção:

sprites/player/walk/player_walk_01.png
sprites/environment/tree_oak.png
tiles/floor/grass_01.png

Spritesheet (atlas): organize as camadas como frames, exporte como .png marcando "As animation" com loop para animações cíclicas. O resultado e um PNG com todos os frames empilhados.

Godot: importe o tileset PNG como TileSet resource, defina o tile size no inspector. Para sprites animados, use AnimatedSprite2D com SpriteFrames apontando para a spritesheet.

Erros comuns

  • Nunca trabalhe sem snap to grid: um tile deslocado por 1 pixel gera misalignment na engine. Use sempre o Lápis (Pencil), nunca o Pincel, para evitar anti-aliasing. Ao exportar PNG, confirme que "Save transparent pixels" está ativa. Tiles seamless não testados com Filters > Map > Tile quase sempre apresentam bordas visíveis quando repetidos em escala.

Você aprendeu

  • Tilesets e sprites no GIMP dependem de grid preciso (16x16, 32x32 ou 64x64), snap to grid e zoom nearest-neighbor. Tilesets organizam categorias (chão, paredes, objetos) em canvas com dimensões múltiplos do tile. Sprites animados usam uma camada por frame com nomenclatura sequencial. O teste de seamless usa Filters > Map > Tile. A exportação e em PNG com alpha, individual ou spritesheet, pronta para Godot como TileSet ou AnimatedSprite2D.

Artigos relacionados

Referências🔗