Montando Tilemaps

Tilemaps são uma boa forma de construir cenários 2D. Nesse tutorial veremos como montar um cenário tilemap usando uma spritesheet.

Antes de iniciar precisamos criar um projeto 2D e uma spritesheet. Colocarei um print da spritesheet que usarei e o link para download.

As spritesheet montadas especialmente para tilemaps são conhecidas como Tileset, e todos as sprites possuem tamanhos quadrados, justamente para encaixarem nas células do tilemap.

Para começar

Frisando, para montar um Tilemap precisamos de um Tileset, ou uma Spritesheet construída especificamente para um tilemap. Assim, se você reparar na spritesheet que eu selecionei, verá que as sprites possuem uma certa proporção entre si, e, como consta na descrição, cada sprite tem tamanho fixo 32x32, portanto, um objetos maiores tendem a ser divididos em duas ou mais sprites, logo, em dois ou mais tiles.

Podemos visualizar esse recorte pelo Unity. Baixe a imagem, coloquei no Unity, e configure ela como multiple e filter mode como point. Poderíamos também modificar o tamanho máximo da imagem, caso ela fosse muito grande, mas por hora, pode ficar no default. Clique em Apply para salvar as modificações.

O próximo passo é ajustar o recorte dos tiles. No recorte, precisamos selecionar o corte baseado no tamanho de cada tile. Em Slice, escolha Type > Grid by Cell Size, e coloque o tamanho informado na descrição, 32x32. Clique em Slice e depois em Apply do outro lado da janela para salvar o recorte. Por fim, a spritesheet aparecerá recortada por linhas brancas e, suas imagens, separadas na pasta Assets.

Grid e Tilemap

Tilemap no Unity funciona como uma camada de cenário, e, portanto, para serem montados e funcionarem de fato, precisam estar contido no objeto Grid. Em outras palavras, funcionam semelhante a UI, em que os elementos precisam estar contidos no Canvas.

Podemos criar um Tilemap direto, que ele automaticamente criará um Grid.

Com isso, já temos o espaço definido para criar o cenário com nossa spritesheet. Ainda, precisaremos ajustar o tamanho dos tiles do Grid, mas será mais fácil fazer isso depois de montar o Tile Palette.

Tile Palette

O nome é sugestivo e de fato representa uma paleta de tiles, assim como uma paleta de cores. Imagino que a analogia do Unity é a de que a spritesheet que recortamos em tiles sejam usadas como textura para os tiles do Grid, e sempre que colocamos uma textura em um tile, estamos "pintando" esse tile.

De qualquer forma, usamos o Tile Palette justamente para isso, selecionar uma imagem da spritesheet e pintar os tiles com a sprite selecionada.

Para criar um Tile Palette abrimos a janela dele, selecionamos Create New Palette > Create, depois de fazer sua configuração. Quando o Tile Palette estiver salvo, arrastamos a spritesheet para dentro dele, e você verá que ela aparecerá certinha na grade do Palette.

Você vai reparar que ao selecionar um tile do palette e tentar "pintar" um tile na cena, o tamanho da textura do tile não condiz com o tamanho da célula em si. É ai que vamos voltar no Grid e corrigir o tamanho dos tiles para ficar igual ao do palette.

E assim estamos com tudo pronto para criar o cenário.

Cenário andável

Eu costumo separar o cenário em tilemaps com objetivos. Então um tilemap será para deslocamento, outro será para objetos com colisão, e etc. Como estamos vendo apenas uma apresentação do tema, criarei apenas esses tilemaps citados.

Para pintar, clicamos no ícone do pincel e selecionamos o tile desejado (como na imagem acima). É importante também se certificar de qual Tilemap está ativo para o palette (no caso ainda temos apenas um). E ai vamos clicando em cada célula da cena para pintar com a textura que escolhemos.

Se você reparar na spritesheet, verá que ela é para jogos Side-Scrolling, então usarei o fundo preto como tile andável.

Tilemap de Colisão

Agora, vou criar um novo Tilemap (para colisão) que ficará a frente do primeiro, e vou usar as rochas para fechar o cenário, para depois aplicar a colisão.

Dependendo da sprites podemos pintar essas rochas por cima do tile de trás, para causar um efeito meio parallax. Em outras abordagens, poderíamos deixar o tile de trás vazio mesmo e se aproveitar disso, mas essas questões já fazem parte de outra discussão.

De qualquer forma, vou pintar os tiles de rocha por cima dos de trás.

Adicionando Colisão

Para colocar colisão no Tilemap, podemos usar três componentes, Rigidbody, TilemapCollider e CompositeCollider. Ative o Used by Composite, e veja que o Unity monta a área de colisão perfeitamente para as paredes.

Por fim

Esse esquema de gerar colisão é muito útil para objetos estáticos e contínuos (como uma parede que se alonga pelo cenário. Para demais objetos que precisam de colisão, talvez usar o CompositeCollider não seja a melhor escolha.

Além disso, que fique claro, apenas montamos o tilemap, mas não implementamos nenhum movimento nem parallax, nem outros objetos. A melhor maneira de implementar esses objetos (como personagem, baús, objetos interativos) vai depender do contexto e da natureza desses objetos.