Tilemap Introdução Um jogo baseado em tilemaps é qualquer jogo onde os níveis (fases) ou áreas de

jogo consistam em muitas formas pequenas baseadas em blocos que formam

coletivamente uma grade de blocos. Às vezes, a distinção entre cada tile pode ser óbvia,

mas também pode ser perfeita e irreconhecível para os jogadores.

Uma coleção de tiles disponíveis em um jogo é conhecido como tileset, e cada

tile normalmente será um sprite que faz parte de um sprite sheet. Tiles são tipicamente

quadrados, mas eles também podem possuir outras formas, como retângulos,

paralelogramos ou hexágonos. Os jogos geralmente usam uma perspectiva de visão

descendente ou lateral, porém jogos baseados em tiles também podem oferecer uma

opção de visualização com uma perspectiva que simula três dimensões (2.5D).

Em outubro de 2017, a Unity Technologies lançou o Unity 2017.2. Esta versão

lançou uma nova ferramenta chamada Tilemap Editor, que não só permite ao usuário

criar layouts vastos e complexos baseados em grid em questão de minutos, mas também

elimina a necessidade de um programa de terceiros (como o Tiled) para criar um

resultado semelhante.

Vantagens da utilização de tilemaps A construção de tilemaps é uma técnica muito popular no desenvolvimento de

jogos 2D, consistindo em construir o mundo do jogo ou mapas de pequeno porte através

de imagens em forma de quadrado regular chamadas tile. O uso de tilemaps resulta em

uma melhor performance e baixo gasto de memória nos jogos — uma grande imagem

como fundo contém locais inacessíveis ao jogador e acaba consumindo uma quantidade

de memória desnecessária.

Alguns jogos populares que utilizam essa técnica são Super Mario Bros, Pacman,

Zelda: Link's Awakening, Starcraft, e Sim City 2000. Imagine algum jogo que use

regularmente repetidos quadrados no fundo da tela, provavelmente ele funciona com

o uso de tilemaps.

Importando os assets Importe para dentro do seu projeto 2D todos os Sprites referentes ao cenário

que será construído. Nesse material utilizaremos como base os Sprites do cenário

Winter baixados do site gameart2d.

Organizando o projeto Primeiro, para fins de organização vamos criar uma estrutura de pastas dentro

do nosso projeto. Crie uma pasta chamada “Sprites” dentro do diretório Assets caso

ainda não a tenha criado. Agora dentro da pasta “Sprites” crie mais dois diretórios

chamados “Cenarios” e “Personagens”. Dentro da pasta “Cenarios” vamos criar mais

três diretórios, são eles: Tile Images, Tile Palettes e Tiles.

Figura 1 - Estrutura de pastas

Dentro da pasta Tiles iremos armazenar todos os sprites referentes ao nosso

cenário e que irão compor a nossa paleta de tiles (tile palette). Extraia os arquivos

baixados anteriormente e os copie para dentro do diretório.

Figura 2 - Importando os sprites para o projeto

Tile palette Com os sprites devidamente importados podemos criar a nossa paleta. Acesse

no menu WINDOW >> TILE PALETTE.

Figura 3 - Acessando a janela Tile Palette

Com a janela Tile Palette aberta, reposicione-a em algum lugar de fácil acesso em

sua interface da Unity.

Figura 4 - Tile palette

Vamos agora criar a nossa primeira paleta. Clique em CREATE NEW PALETTE, em

seguida no campo Name, nomeie a palette de “winter” e depois clique em CREATE.

Figura 5 - Criando uma nova paleta

Salve a palette winter dentro do diretório Tile Palettes.

Figura 6 - Salvando a tile palette winter

Adicionando os sprites a tile palette Antes de adicionarmos as imagens a paleta recém criada, devemos fazer um

pequeno ajuste em nossos sprites. Selecione todas as dezoito imagens que representam

o cenário dentro da pasta Tiles.

Figura 7 - Todos os sprites do cenário winter

Com todos os sprites selecionados acesse o menu Inspector e altere o

valor da propriedade Pixels Per Unit de 100 para 128. Esse ajuste fará com que

a Unity saiba que estamos trabalhando com tiles de tamanho 128x128. Em

seguida aperte o botão Apply para confirmar a alteração.

Figura 8 - Informando o tamanho dos tiles

Agora arraste todos os sprites selecionados para dentro da grade (grid) do painel

Tile Palette.

Figura 9 - Adicionando os sprites a palette winter

Salve as tile images dentro do diretório Tile Images.

Figura 10 - Salvando as tile images

No final a tile palette winter criada deverá possuir uma aparência similar com a

da imagem abaixo.

Figura 11 - Palette winter

Tilemap Agora que já criamos a paleta de tiles podemos criamos o nosso tilemap. Clique

com o botão direito dentro da aba Hierarchy e selecione 2d Object >> Tilemap.

Podemos reparar que a Unity criou dois objetos , um objeto “pai” chamado Grid

e o seu “filho” chamado Tilemap. Dentro de uma cena na Unity só pode existir um Grid,

porém ele pode possuir mais de um tilemap.

Figura 13 – Grid

O GameObject Grid, cria uma grade em nossa cena muito similar a um mosaico.

Ao selecionarmos o Grid, podemos notar um componente do tipo “Grid” anexado a ele.

Figura 14 - Grid Component

Figura 12 - Criando um tilemap

O Componente Grid possui três propriedades que podem ser alteradas, são elas:

• Cell Size - é o tamanho de cada quadrado no Tilemap. Apenas altere este valor

se for absolutamente necessário, já que o tamanho da Célula se aplica a todos

os Tilemaps dentro da grade;

• Cell Gap - determina quanta distância existe entre cada quadrado na grade. Mais

uma vez, isso deve ser alterado com muito cuidado, pois isso também se aplica

a todos os tilemaps;

• Cell Swizzle - é a direção na qual posicionamos as tiles no grid.

O GameObject Tilemap (filho do GameObject Grid) possui dois componentes, um

chamado Tilemap e outro chamado Tilemap Renderer.

Figura 15 - Os componentes Tilemap e Tilemap Renderer

O componente Tilemap possui as seguintes propriedades:

• Animation Frame Rate – controla a taxa de quadros da animação das tiles, caso

eles sejam animados;

• Color – como o nome sugere, é a cor do bloco dentro do mapa;

• Tile Anchor – é a posição das âncoras das tiles;

• Orientation – é a direção na qual as tiles estarão voltadas;

No componente Tilemap Renderer, podemos alterar o material com o qual cada

bloco será renderizado, o que deixaremos definido como padrão. O resto das

configurações lidam com a ordem em que os blocos serão renderizados.

Tools Agora que nossa cena já possui um Grid e consequentemente o seu Tilemap,

ambos já configurados, podemos enfim desenhar a nossa fase. Antes de iniciarmos o

processo de criação, vamos analisar algumas das ferramentas da nossa Tile Palette.

• Selection Tool(seta) - e permite selecionar um bloco dentro da nossa Tile

Palette.

Figura 16 - Selection Tool

• Move Tool (ferramenta de movimentação)- permite que você mova as peças na

visualização da cena.

Figura 17 - Move Tool

• Brush Tool (pincel)- permite pintar a tile selecionada dentro da cena;

Figura 18 - Brush Tool

• Fill Selection (caixa de seleção)- permite selecionar uma determinada área para

preencher com o bloco selecionado;

Figura 19 - Fill Tool

• Tile Sampler (conta gotas)- funciona como um seletor de cores como em um

programa de manipulação de imagens como o Photoshop ou o Gimp;

• Eraser (borracha)- apaga os blocos da cena.

• Fill Tool (balde)- preenche uma área com o bloco selecionado sem precisar

selecionar primeiro a área a ser preenchida.

• Active Tilemap - determina em qual tilemap você está desenhando. Caso você

tenha mais de um tilemap em sua grade, é preciso definir em qual tilemap você

quer pintar.

Figura 20 - Active Tilemap

Agora que já conhecemos um pouco mais sobre as ferramentas de desenho,

fique à vontade para construir o cenário que você desejar. Lembre-se que você pode

criar quantos tilemaps quiser dentro do Grid, isso ajuda na sua manipulação e

organização dos objetos na cena.

Abaixo segue a fase que eu imaginei, repare que ela possui quatro tilemaps

diferentes (chao, agua, crista, plataformas). Não se esqueça de criar novas layers (por

exemplo agua e chao) e atribui-las as tilemaps quando necessárias.

Figura 21 - Fase construída utilizando tilemaps

Tilemap Collider Finalmente podemos testar a nossa fase, para esse teste irei adicionar o prefab

do personagem criado na aula anterior (Cute Girl). Não se esqueça de indicar para o

prefab do personagem em qual camada (layer) ele irá poder se locomover.

Figura 22 - Indicando a layer que representa o chao

Ao entrarmos no modo Play, podemos ver que o nosso personagem não ficou

em cima da plataforma, ao contrário, ela passou direto como se não existe nada sobre

os seus pés. Mas por que isso ocorreu?

Figura 23 - Tilemap sem Collider

Isso ocorre por que as nossas tilemaps ainda não possuem seus respectivos

colisores, ou seja, a Unity não está aplicando nenhuma física em cima desses

GameObjects. Com a tilemap “chao” selecionada, adicione um novo componente

chamado Tile Map Collider 2D.

Figura 24 - Tile Map Collider 2D

Este novo componente foi criado especialmente para trabalharmos em cima de

jogos baseados em tilemaps. O Tile Map Collider 2D aplica um colisor baseado no

formato de todas as tile do seu tilemap.

Figura 25 – Tilemap com um componente do tipo Tile Map Collider 2D

Inicie o jogo no modo Play e podemos ver que agora o personagem fica em cima

da plataforma.

Figura 26 - Física aplicada a tilemap chao

As colisões funcionam relativamente bem e a esse ponto podemos pensar que

isso já seria o suficiente. Porém, os colisores não são otimizados de uma forma eficaz.

Após alguns testes é possível visualizar que o personagem pode ficar preso no

cenário mesmo quando aparentemente não existe nenhum obstáculo a sua frente como

um degrau ou uma parede. Sem mencionar o fato de que a Unity cria diversos colisores

na cena mesmo em tiles que jamais serão alcançadas pelo personagem como demonstra

a figura a seguir.

Figura 27 - Colisores no centro de uma plataforma

Composite Collider Para otimizarmos o nosso tilemap e evitar que a Unity crie colisores

desnecessários para todos os tiles podemos adicionar um componente especial

chamado Composite Collider 2D. Antes de adicionarmos esse novo componente

precisamos fazer algumas alterações em nosso GameObject.

Selecione o tilemap “chao” e dentro de seu Tilemap Collider 2D marque a opção

Used By Composite, como demonstra a imagem a seguir:

Figura 28 - Indicando que será utilizado um Composite Collider

Ao marcarmos a opção acima, a Unity nos diz que o colisor do tilemap não irá

funcionar corretamente até que seja adicionado um componente do tipo Rigidbody 2D

e um Composite Collider 2D ao GameObject.

Com o tilemap “chao” selecionado, adicione o componente Composite Collider

2D.

Figura 29 - Adicionando um Composite Collider 2D

Ao adicionarmos um Composite Collider 2D a um GameObject a Unity

automaticamente adiciona um componente do tipo Rigidbody 2D.

Figura 30 - Sempre que adicionamos um Composite Collider 2D a um GameObject a Unity adiciona automaticamente um Rigidbody 2D caso o GameObject não o possua

Agora ao invés de cada tile possuir o seu próprio Collider, a Unity cria apenas um

Collider com o formato de cada objeto dentro do tilemap.

Figura 31 - O Composite Collider 2D em ação

Antes de executar o jogo precisamos fazer duas pequenas alterações. Primeiro,

defina a propriedade Body Type do Rigidbody 2D para Static. Isso evitará que o seu

cenário “despenque” quando o jogo estiver em execução.

Figura 32 - Definindo o Rigidbody 2D para Static (estático)

Segundo, crie um Physics Material 2D com as propriedades Friction e Bounciness

como ZERO. Isso evitará que o personagem fique colocado nas paredes, como visto nas

aulas anteriores.

Figura 33 - Physics Material 2D

Por fim adicione o material criado ao Composite Collider 2D do tilemap “chao”.

Figura 34 - Adicionando o material escorregadio ao Composite Collider 2D

Não se esqueça de repetir todos os passos anteriores para todos os tilemaps do

seu jogo quando necessário.

Figura 35 - Fase finalizada com tilemaps