Tutorial: Criando terrenos para Cocos2d-x: Introdução à ferramenta Tiled – Parte 2

Criamos um mapa bastante legal, mas não vimos como adicionar alguns elementos importantes como casas, árvores, brotos, pedras, vasos, camas, mesas e por aí vai. Mostrei apenas como fazer o chão do jogo. O que vocês acham de vermos como adicionar esses outros elementos fundamentais no nosso mapa?

No tutorial passado eu apresentei a vocês o conceito de mapa de tiles, mostrei como um arquivo TMX é organizado e os seus principais elementos. Também criamos um mapa simples e o abrimos em um editor de código para que vocês pudessem ver aqueles elementos diretamente no mapa que vocês criaram. Esse tutorial foi dos bons. ;D

No tutorial de hoje veremos como podemos enfeitar mais o nosso mapa, adicionando outros elementos que tem no conjunto de tiles, mas que só podem ser utilizados sob algumas circunstâncias. Mostrarei essas circunstâncias e faremos um mapa mais bonito e interativo. Bora lá?

Criando camadas

Antes de sairmos melhorando o mapa, eu criei um outro com um chão um pouco melhor distribuído. Antes, o nosso chão era muito engessado e padrão. Vocês podem baixar o novo mapa aqui. Esse mapa é ilustrado na Figura 1.

Figura 1 - Versão inicial do mapa

Figura 1 – Versão inicial do mapa

Para iniciarmos o tutorial eu vou falar sobre um recurso importante do Tiled. Esse recurso possibilita a criação de camadas de tiles (também são chamadas de tiles aquelas primitivas gráficas que você seleciona e “pinta” no seu mapa). Essas camadas podem ser sobrepostas umas sobre as outras com o objetivo de criar profundidade no cenário. A Figura 2 ilustra a explicação de forma visual.

Figura 2 - Camadas de tiles

Figura 2 – Camadas de tiles

Para criarmos camadas de tiles na ferramenta Tiled, clique na aba “Camadas”, no painel existente ao lado direito da ferramenta. A Figura 3 ilustra a aba. Clique com o botão direito do mouse no painel logo acima e selecione a opção “Adicionar Camada de Tiles”. Dê um nome a sua camada e … voilà … você acabou de criar uma camada de tiles. Nesse mesmo painel você pode editar os nomes das camadas e especificar qual fica na frente de qual. As camadas superiores no painel estão à frente das camadas inferiores.

Figura 3 - Criando camadas de tiles

Figura 3 – Criando camadas de tiles

As camadas de tiles funcionam como se fossem figuras independentes. Se você modifica uma camada, a outra continua intacta. Você pode ver cada camada de forma independente deixando selecionado apenas o checkbox da camada que você quer que fique visível. Susse, né?

Talvez essa funcionalidade de sobrepor camadas de tiles ainda seja um pouco inútil ao seu ponto de vista. Veja como utilizar esse recurso da forma correta para enfeitar o seu cenário.

 

Usando camadas de forma inteligente

Para utilizarmos a mesma língua, eu nomeei a camada do chão (aquela que eu pintei com grama, água, barro e com uma grama mais alta) como “Camada 1”. A camada que criamos eu nomeei como “Camada 2”. Agora, deixe a Camada 1 abaixo da Camada 2. Vamos começar a brincadeira. =]

Adicionaremos na Camada 2 apenas elementos mais rasteiros ao chão, como arbustos, vasos, tapetes, estradas e por aí vai. Eu adicionei alguns arbustos e algumas estradas que podem ajudar o jogador a explorar o cenário. O mapa ficou como mostrado na Figura 4.

Figura 4 - Mapa com a Camada 2

Figura 4 – Mapa com a Camada 2

Para finalizar, vamos adicionar elementos que não são mais tão rasteiros, como casas, árvores, pontes e por aí vai. Para isso, crie uma nova camada acima da Camada 2 e nomeie-a como “Camada 3”. Na Camada 3, eu adicionei uma casa no canto superior direito e algumas árvores espalhadas no chão. Nessa versão final, o cenário ficou igual ao mostrado na Figura 5. Se você quiser ver o nosso cenário de uma forma mais intuitiva, olhe na Figura 6 o que fizemos em cada camada do mapa.

Figura 5 - Mapa com as três camadas

Figura 5 – Mapa com as três camadas

Figura 6 - As camadas de forma separada

Figura 6 – As camadas de forma separada

O interessante de utilizar esse sistema de camadas é que você tem uma perspectiva do mapa. Como assim, Santy? Se você utilizar sabiamente esse sistema, ele deixa o cenário com profundidade. Você pode ver na Figura 5 que as árvores e a casa estão acima dos arbustos, das estradas, das gramas e dos rios. Da mesma forma, as estradas e os arbustos estão acima das gramas, mas estão abaixo das árvores e casas. Interessante, né? Agora compare esse mapa com aquele que fizemos no tutorial passado. Uma grande diferença, né? ;D

Quando vocês forem montar o cenário dos seus games, já pensem nesse sistema de camadas e como os elementos do cenário estarão dispostos. Chão, rios e lagos sempre na camada mais inferior e os elementos mais próximos à câmera dispostos em camadas mais superiores. Se você quiser a versão final desse mapa que eu montei, você pode baixar aqui.

Vimos nesse tutorial como criar camadas no Tiled e como utilizar esse recurso para criarmos cenários mais bonitos e interativos. Pense que, logo, todo esse cenário bonito que você criou será aberto no Cocos2d-x. *.*

No próximo tutorial eu mostrarei um outro recurso do Tiled bastante utilizado para criarmos elementos de interação e de colisão. Logo voltaremos a programar. =]

Então é isso pessoal, nos vemos no próximo tutorial.

Santiago Viertel

Santiago Viertel

Formado em Bacharelado em Ciência da Computação (UDESC), mestre e doutorando em Análise de Algoritmos (UFPR). Foi programador da Céu Games por 8 anos. Possui a preferência por jogos de estratégia e de tiro em primeira pessoa. Jogando bastante DotA 2, Left 4 Dead 2 e Age of Empires II HD.

Send this to a friend