Como Criar um Tileset para Jogo 2D: Grid, Autotile e Consistência Visual

Um tileset 2D é o cenário inteiro do seu jogo comprimido em uma imagem pequena. Em vez de desenhar cada fase à mão, você desenha um conjunto de blocos que se encaixam, e monta níveis infinitos com eles. É a técnica que sustenta de Super Mario a Stardew Valley, e é provavelmente a habilidade de arte com melhor custo-benefício pra quem está fazendo o primeiro jogo.

O problema é que a maioria dos tutoriais ensina a desenhar um tile bonito e para aí. Só que tile bonito isolado não resolve nada: o que separa um tileset amador de um profissional é como os tiles se conectam. Canto que não fecha, emenda visível, grama que vira terra de repente sem transição. Esses defeitos gritam na tela.

Esse tutorial cobre o caminho completo: escolher o grid, planejar o conjunto mínimo de tiles (incluindo os cantos, que é onde todo mundo trava), configurar autotile no Godot 4 e manter consistência visual no conjunto inteiro.

O grid vem antes de qualquer desenho

A primeira decisão de um tileset 2D não é artística, é técnica: o tamanho do tile. E ela trava todo o resto do projeto, porque o tile define a escala do personagem, o tamanho dos pulos, a densidade de detalhe que cabe na tela.

Os tamanhos padrão são potências e múltiplos amigáveis: 16x16, 32x32 e 48x48 pixels. Existem outros, mas esses três cobrem quase tudo que você vê por aí.

• 16x16: o clássico do pixel art. Pouco espaço pra detalhe, o que é uma vantagem disfarçada: você é obrigado a simplificar, e simplificar é o que iniciante mais precisa treinar. Celeste usa 8x8 nos tiles de cenário, ainda menor.
• 32x32: o meio termo mais comum hoje. Cabe textura, sombra interna e variação sem virar uma pintura. Se você está em dúvida, comece aqui.
• 48x48: pra jogos com arte mais detalhada ou resolução de tela maior. Cada tile vira quase uma ilustração, então o custo de produção por tile sobe bastante.

A conta que vale fazer: numa tela virtual de 640x360 (resolução comum pra pixel art, escala limpa pra 1080p e 4K), um tile de 16px te dá 40x22 tiles visíveis. Com 32px, são 20x11. Isso muda completamente a sensação de espaço do jogo. Decida olhando pro tipo de jogo, não pro que parece mais fácil de desenhar.

Escolheu? Não mude no meio. Redesenhar um tileset de 16 pra 32 não é redimensionar a imagem, é refazer a arte.

Tiles de canto: o conjunto mínimo que fecha qualquer forma

Aqui está o conceito que destrava tileset de verdade. Um chão não é um tile, é uma família de tiles: o miolo, as bordas e os cantos. E os cantos são dois tipos diferentes:

• Canto externo: a quina de fora de uma plataforma. A grama dobra pra baixo na ponta.
• Canto interno: a quina de dentro, onde duas paredes se encontram formando um "L". É o tile que quase todo iniciante esquece de desenhar, e a ausência dele é o buraco visual mais comum em jogo de iniciante.

Existem dois conjuntos padrão na indústria, e a diferença entre eles é justamente como tratam os cantos:

Conjunto de 16 tiles: cobre todas as combinações de borda (cima, baixo, esquerda, direita). Funciona pra formas retangulares, plataformas simples, paredes retas. É o ponto de partida certo.

Conjunto de 47 tiles (o "blob"): cobre bordas e cantos, incluindo todos os cantos internos. Com ele, qualquer forma que você desenhar no mapa fecha visualmente, sem exceção. Os 47 vêm de uma conta conhecida: cada tile tem 8 vizinhos possíveis, o que daria 256 combinações, mas a maioria é redundante (um canto só importa se os dois lados adjacentes também conectam). Eliminando as redundâncias, sobram 47 tiles únicos.

Meu conselho prático: comece com 16, e quando o seu level design começar a pedir formas em "L" e plataformas orgânicas, evolua pro blob de 47. Você reaproveita os 16 primeiros, não joga nada fora.

Uma técnica que acelera muito a produção: desenhe primeiro um tile de miolo (o centro cheio, sem borda nenhuma) e um tile de borda reta. Acerte esses dois até ficarem bons lado a lado, repetidos várias vezes. Só depois derive os cantos a partir deles, copiando e dobrando a borda. Assim a família inteira nasce coerente, em vez de você desenhar 16 tiles soltos e rezar pra combinarem.

Autotile no Godot 4: pintando com terrains

Desenhar 47 tiles é trabalho de arte. Posicionar os 47 manualmente no mapa, tile por tile, seria tortura. É pra isso que existe autotile: você pinta "chão" e a engine escolhe sozinha qual variação usar olhando os vizinhos.

No Godot 4 isso se chama Terrains. O fluxo no editor:

1. Crie um node TileMapLayer e um recurso TileSet nele, importando sua imagem como atlas.
2. Na aba do TileSet, em Terrain Sets, adicione um terrain set. O modo Match Corners and Sides é o que corresponde ao blob de 47; Match Sides funciona pro conjunto de 16.
3. Dentro do set, crie um terrain (ex: "grama") e escolha uma cor de identificação.
4. Na aba Paint, selecione a propriedade Terrains e pinte os peering bits de cada tile: você marca, em cada tile do atlas, quais lados e cantos dele são "grama". É manual e leva uns minutos, mas faz uma vez só.
5. Pronto: na aba do TileMap, selecione o terrain e desenhe. Os cantos certos aparecem sozinhos.

Pra mapa desenhado à mão no editor, isso basta e você não escreve uma linha de código. Onde o código entra é em geração procedural ou destruição de terreno em runtime. O método que aplica terrain respeitando os vizinhos é o set_cells_terrain_connect:

extends TileMapLayer

# Preenche um retângulo de chão usando o terrain 0 do terrain set 0.
# A engine escolhe bordas e cantos sozinha, igual ao pincel do editor.
func gerar_plataforma(origem: Vector2i, largura: int, altura: int) -> void:
    var celulas: Array[Vector2i] = []
    for x in range(largura):
        for y in range(altura):
            celulas.append(origem + Vector2i(x, y))
    set_cells_terrain_connect(celulas, 0, 0)

Detalhe de versão: o node TileMapLayer substituiu o antigo TileMap a partir do Godot 4.3. Se você está numa versão anterior, o método existe no TileMap com um parâmetro extra de layer no início. Em projeto novo, use TileMapLayer direto.

Consistência visual: o que faz o conjunto parecer um jogo só

Um tileset tecnicamente correto ainda pode parecer amador. Os culpados quase sempre são os mesmos quatro, e todos têm solução objetiva.

Paleta limitada e compartilhada. Defina uma paleta pequena (entre 16 e 32 cores resolve a maioria dos projetos) e use ela em todos os tiles, personagens e objetos. Quando cada tile inventa seus próprios tons, o cenário vira colcha de retalhos. Paleta única é o jeito mais barato de comprar coesão.

Uma direção de luz, pra sempre. Escolha de onde a luz vem (o padrão da indústria é de cima, levemente da esquerda) e respeite em todo tile. Sombra embaixo e à direita, brilho em cima e à esquerda. Um único tile com luz invertida quebra a ilusão do cenário inteiro, e o olho percebe mesmo sem saber explicar o quê.

Cenário lê atrás, gameplay lê na frente. O jogador precisa distinguir em meio segundo o que é chão, o que é parede e o que é decoração. A regra: tiles de gameplay (onde se pisa, onde se bate) têm mais contraste e bordas mais definidas; tiles de fundo são mais escuros, menos saturados e com menos detalhe. Se o seu cenário está "poluído", o problema raramente é excesso de tiles, é fundo competindo com a frente.

Quebre a repetição visível. O olho humano é ótimo em achar padrão, e um miolo de parede repetido 40 vezes vira um tabuleiro de xadrez óbvio. Duas defesas: desenhe 2 ou 3 variações do tile de miolo com detalhes diferentes (uma rachadura, uma pedra, um tom levemente alterado) e espalhe; e evite detalhe forte que encosta na borda do tile, porque detalhe na borda cria linhas contínuas quando os tiles se repetem lado a lado. O teste é simples: preencha uma área de 10x10 só com o miolo e olhe de longe. Se formar listras ou xadrez, volta pro desenho.

Ferramentas: do gratuito ao padrão da indústria

Pra desenhar os tiles:

• Aseprite: o padrão pra pixel art, pago. Tem modo de visualização em tile que mostra o desenho repetido enquanto você pinta, o que elimina o ciclo de exportar e testar.
• Pixelorama: gratuito e open source, feito no próprio Godot. Cobre o essencial de pixel art, incluindo preview de tiling.
• Libresprite: fork gratuito de uma versão antiga do Aseprite. Funciona, mas evolui devagar.

Pra montar mapas, o editor do Godot resolve dentro do próprio projeto. Se você quer um editor de mapas independente da engine (útil se for trocar de engine ou trabalhar com level designer separado), o Tiled é gratuito e exporta formatos que praticamente toda engine importa.

Se você está começando, não compre nada ainda: Pixelorama mais o editor do Godot cobrem 100% deste tutorial sem gastar um centavo.

Fechando

Tileset bom é menos sobre desenhar bem e mais sobre sistema: grid decidido cedo, família de tiles que fecha os cantos, autotile pra montagem não virar trabalho braçal, e quatro regras de consistência (paleta, luz, contraste, repetição) aplicadas sem exceção.

O exercício que recomendo: faça um conjunto de 16 tiles de um material só, grama com terra, em 32x32. Configure os terrains no Godot e monte uma fase pequena. Vai ficar feio na primeira tentativa, e tudo bem: o segundo conjunto sai duas vezes melhor e duas vezes mais rápido. Tileset é uma daquelas habilidades em que a décima tentativa não se parece em nada com a primeira, e o único caminho entre uma e outra é fazer.