View
2
Download
0
Category
Preview:
Citation preview
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
Recommended