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. Figura 12 - Criando um 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
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. 2D. Com o tilemap chao selecionado, adicione o componente Composite Collider 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