Tilemap na Unity: Criar Fases 2D com Tile Palette

O Unity Tilemap é o sistema para montar fases 2D pintando blocos numa grade: você cria um Grid com um ou mais Tilemaps dentro, prepara uma Tile Palette com os blocos do seu tileset e pinta direto na Scene, como num editor de imagem. A decisão que mais economiza tempo vem antes do primeiro pincel: separar a fase em Tilemaps por função (chão que colide, decoração de fundo, decoração de frente).

Aqui você prepara o tileset no import, cria a paleta, pinta a primeira fase no Unity 6.3 LTS e organiza as camadas de um jeito que a colisão e a ordem de desenho entram depois sem você precisar repintar nada.

Tilemap na Unity: Grid, Tilemap e Tile Palette

Três peças, cada uma com um papel:

• Grid: o GameObject pai. Define o tamanho da célula e o layout (retangular, hexagonal, isométrico). Não desenha nada.
• Tilemap: filho do Grid. Guarda quais tiles estão em quais células. Vem com um Tilemap Renderer, que desenha. Um Grid pode ter vários Tilemaps.
• Tile Palette: a "caixa de tintas". Uma janela com os tiles disponíveis, de onde você escolhe o que pintar.

E um quarto conceito: o Tile, um asset que aponta para um sprite (e opcionalmente cor, collider e comportamento). Quando você arrasta um sprite para a paleta, a Unity cria um Tile para ele.

Os recursos de Tilemap fazem parte das ferramentas 2D da Unity. Se você criou o projeto com o template Universal 2D, já está tudo instalado. Se o menu não aparecer, instale o pacote 2D Tilemap Editor pelo Package Manager (e o 2D Sprite, que a documentação pede como pré-requisito).

Preparar o tileset: PPU, Filter Mode e fatiamento

Antes de criar a paleta, acerte o import. Selecione a imagem do tileset no Project:

1. Texture Type: Sprite (2D and UI).
2. Sprite Mode: Multiple (a imagem tem vários tiles).
3. Pixels Per Unit (PPU): igual ao tamanho do tile em pixels. Tile de 16x16: PPU 16. Tile de 32x32: PPU 32. Assim cada tile ocupa exatamente uma célula do Grid (que tem 1 unidade por padrão).
4. Filter Mode: Point (no filter) em pixel art. Bilinear borra e causa as linhas entre tiles.
5. Compression: None em pixel art, para não aparecer artefato de cor.
6. Clique em Apply.
7. Abra o Sprite Editor, menu Slice, Type Grid By Cell Size, Pixel Size 16 x 16 (o tamanho do tile), e Slice. Apply.

Se você ainda vai desenhar o tileset, o post sobre como criar um tile set 2D mostra como planejar os blocos para encaixarem sem emenda.

Criar a Tile Palette e pintar a primeira fase

Criar o Tilemap na cena:

1. Na Hierarchy, botão direito > 2D Object > Tilemap > Rectangular. A Unity cria Grid com um filho Tilemap.
2. Renomeie o filho para Ground.

Criar a paleta:

1. Window > 2D > Tile Palette.
2. No topo da janela, crie uma paleta nova (Create New Palette), tipo Rectangular, e salve numa pasta Palettes.
3. Arraste a textura fatiada do Project para dentro da janela. A Unity pergunta onde salvar os Tiles gerados: crie uma pasta Tiles.

O Unity 6.3 também tem o Tile Set (Assets > Create > 2D > Tile Palette > New Tile Set): você aponta a textura num Tile Set Importer e ele gera os tiles, atualiza a paleta quando a textura muda e cria um Sprite Atlas combinado. Se o tileset ainda vai mudar muito durante o desenvolvimento, é o caminho mais confortável.

Pintar:

1. Na Tile Palette, em Active Target, escolha o Tilemap Ground.
2. Selecione o pincel (Paint with Active Brush, atalho B), clique num tile na paleta e pinte na Scene.
3. Clique e arraste na paleta para pegar vários tiles de uma vez (um bloco 3x3 de terreno, por exemplo).
4. Para apagar: segure Shift enquanto pinta, ou use a borracha (atalho D).

Organizar em camadas: chão, colisão e decoração

Aqui está o ponto que a maioria dos tutoriais pula. Uma fase pintada inteira num Tilemap só funciona até o dia em que você adiciona colisão: aí a grama decorativa e a placa no fundo viram parede, e o personagem tropeça numa flor.

Crie, dentro do mesmo Grid (botão direito no Grid > 2D Object > Tilemap):

• Ground: chão, paredes e plataformas. Tudo que colide. Só este recebe Tilemap Collider 2D depois.
• Background: decoração atrás do personagem (janelas, musgo na parede, pedras no fundo). Sem colisão.
• Foreground: decoração na frente do personagem (grama alta, folhagem pendurada). Sem colisão.

Ordem de desenho: no Tilemap Renderer de cada um, ajuste Sorting Layer e Order in Layer (Background abaixo, Ground no meio, Foreground acima do personagem). A regra completa de quem fica na frente merece um post próprio, mas para fase de plataforma essas três posições resolvem.

Por que separar já agora: colisão é aplicada por Tilemap inteiro. Se tudo está misturado, você vai precisar remover tile por tile ou configurar Collider Type de cada Tile, e qualquer repintura quebra. Com camadas por função, a colisão é um componente num objeto só.

Se o seu jogo precisa saber em que tipo de chão o personagem pisa (gelo, lava, lama), um script consulta o Tilemap pela posição.

Arquivo GroundTypeReader.cs:

using UnityEngine;
using UnityEngine.Tilemaps;

public class GroundTypeReader : MonoBehaviour
{
    [SerializeField] private Tilemap groundTilemap;
    [SerializeField] private TileBase iceTile;
    [SerializeField] private Vector2 feetOffset = new Vector2(0f, -0.6f);

    public bool IsOnIce()
    {
        Vector3 feetPosition = transform.position + (Vector3)feetOffset;
        Vector3Int cell = groundTilemap.WorldToCell(feetPosition);
        TileBase tileUnderFeet = groundTilemap.GetTile(cell);
        return tileUnderFeet == iceTile;
    }
}

WorldToCell converte a posição do mundo para a célula do Grid, e GetTile devolve o Tile pintado ali (ou null). O feetOffset desce o ponto de checagem até os pés do personagem, que é onde o chão está.

Pintar a fase é a parte rápida. Juntar tilemap, colisão, personagem com física, câmera seguindo, inimigos e transição de fase num jogo que funciona do começo ao fim é onde quem estuda sozinho costuma travar: cada peça depende das outras. O curso de Unity constrói jogos 2D completos nessa ordem, com o porquê de cada decisão.

Ferramentas da paleta: box fill, picker, flood fill

A barra da Tile Palette tem as ferramentas que transformam horas de clique em minutos. Os atalhos padrão:

• Select (S): seleciona tiles na Scene para mover ou inspecionar.
• Move (M): move a seleção.
• Paint (B): o pincel. Arraste para pintar em linha.
• Box Fill (U): arraste um retângulo e ele enche de tiles. Perfeito para blocos de terra.
• Pick (I): pega um tile da Scene como pincel. Também funciona segurando Ctrl (Cmd no macOS) com o pincel ativo.
• Erase (D): borracha.
• Flood Fill (G): balde de tinta. Enche uma área contígua de células vazias ou iguais.

Com o pincel ativo, ** e ** giram o tile, e há opções de espelhar. Isso dobra o uso de um tileset pequeno.

Fluxo que uso para fase de plataforma: Box Fill para os blocos de terra, Paint para as bordas e cantos, Pick para copiar trechos que já ficaram bons. Quando a quantidade de bordas cansa, é a hora do Rule Tile, que escolhe borda e canto sozinho.

Tilemap em jogo top-down vs plataforma

Plataforma (visão lateral):

• Ground com colisão, Background e Foreground sem.
• O chão é fino, vários blocos empilhados formam a fase.
• Plataformas que o jogador atravessa por baixo vão num Tilemap próprio, com Platform Effector 2D.

Top-down:

• O chão inteiro (grama, piso, terra) fica num Tilemap sem colisão, porque o personagem anda em cima dele.
• Paredes, água e penhascos ficam num Tilemap com colisão.
• Objetos altos (árvores, pilares) precisam ordenar pela posição Y para o personagem passar atrás deles. Isso pede Transparency Sort Axis e, no Tilemap Renderer, Mode: Individual, para cada tile ser ordenado separado.

Erros comuns: linhas entre tiles, tile no tamanho errado

Linhas finas entre os tiles. Três causas, em ordem de frequência: Filter Mode Bilinear (troque para Point), Compression ligada (troque para None), e falta de padding no atlas. A correção robusta é empacotar os tiles num Sprite Atlas com padding; o Tile Set do Unity 6 cria esse atlas sozinho. Câmera em posição fracionária também cria emenda em pixel art: o Pixel Perfect Camera ajuda.

Tile pequeno demais ou grande demais na célula. PPU diferente do tamanho do tile. Tile de 16 px com PPU 100 ocupa 0,16 da célula. Acerte o PPU e clique em Apply.

Pinta no Tilemap errado. Active Target da Tile Palette apontando para outro Tilemap. Confira sempre antes de pintar.

Tile aparece atrás do cenário. Sorting Layer ou Order in Layer do Tilemap Renderer abaixo dos outros.

Paleta com tiles fora de ordem. Ligue o modo de edição da paleta (Tile Palette Edit) e reorganize com Select e Move. A paleta é seu ambiente de trabalho: organizada igual ao tileset, você pinta mais rápido.

Próximo passo: Rule Tile e colisão

Com a fase pintada em camadas, os dois próximos passos são automatizar bordas e ligar a física. Leia o post sobre Rule Tile na Unity para as bordas se ajustarem sozinhas enquanto você pinta, e depois configure Tilemap Collider 2D com Composite Collider 2D no Ground para o personagem andar sem engasgar nas junções.

Se você também trabalha com Godot, compare com o TileMap na Godot 4: o raciocínio de camadas por função é o mesmo nas duas engines.