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

Criar áreas de colisão em jogos baseados em mapa de tiles pode se tornar um pouco maçante. Existe uma forma de fazer isso de forma mais rápida e prática. Estão curiosos? Veja nesse tutorial como fazer isso.

No último tutorial eu mostrei como utilizar de forma inteligente a ferramenta de edição de terrenos. Vimos como o Tiled realiza o preenchimento automático de fronteiras de rios e barro, por exemplo.

Nesse tutorial eu falarei sobre uma ferramenta que ajuda muito na confecção de cenários. Em certos momentos queremos criar áreas que são predefinidas, como áreas de colisão ou de interação. Veremos que o Tiled pode te ajudar a preencher essas áreas de maneira automática. Bora lá?

O nome dessa ferramenta interessante é Automapping. A principal ideia dela é preencher camadas com tiles específicos, conforme regras descritas em outros arquivos TMX. Mas, como assim? Não entendi. Veremos.

Para ficar melhor de entender, eu farei um conjunto de passos com vocês sem mais explicações iniciais. Primeiramente baixe esse arquivo de tileset. Eu baixei esse arquivo daqui, que mostra bons exemplos indicados pelo próprio site do Tiled.

Crie um mapa de tamanho 10×10 com tiles de tamanho 32×32 pixels. Se você não lembra como fazer, veja nesse tutorial. Crie três camadas de tiles: uma mais acima chamada “Colisao”, outra intermediária chamada “Borda” e outra inferior chamada “Chao”. A Figura 1 mostra como devem ficar as camadas no lado direito da tela do Tiled, em “Camadas”.

Figura 1: Camadas criadas

Figura 1: Camadas criadas

Adicione, nesse mapa criado, o mesmo arquivo de tileset que vocês baixaram anteriormente. Após adicionar o tileset, selecione a camada “Chao” e pinte todos os tiles dela com grama. Logo após, selecione a camada “Borda” e pinte alguns tiles com pedra e outros com placas. Agora selecione a camada “Colisao” e pinte com o tile cor-de-rosa sobre os tiles de pedra e placa. O resultado final deve ser algo como mostrado na Figura 2.

Figura 2: Mapa preenchido

Figura 2: Mapa preenchido

Nesse exemplo, a ideia principal era adicionar tiles que serão considerados áreas de colisão na lógica do jogo. Quando você abrir o arquivo TMX no Cocos2d-x, todos os lugares que são preenchidos com tiles vermelhos na camada “Colisao” serão tratados como áreas impossíveis de serem acessadas por um personagem. Esse tipo de lógica é muito utilizada em games por ser fácil de programar. Mas você concorda comigo que é um pouco chato ficar preenchendo todos os lugares de colisão com o tile vermelho em um mapa relativamente grande? Então, agora veremos como automatizar esse preenchimento por meio do Automapping.

 

Configurando o Automapping

Para ver como funciona isso, primeiramente apague a camada “Colisao” do mapa criado. Você verá que todos os tiles vermelhos desaparecerão, obviamente. Salve esse mapa com o nome “Mapa.tmx” e o deixe de lado, por enquanto.

Crie um novo mapa de tamanho menor, 5×5 por exemplo, com o mesmo tamanho dos tiles, ou seja, 32×32 pixels. No mapa recém-criado, adicione o mesmo arquivo de tileset adicionado no mapa anterior.

O Automapping é uma ferramenta que se baseia em regras definidas em outros arquivos TMX. Nesse nosso caso, esse segundo mapa que estamos criando serve unicamente para descrever regras que serão seguidas no arquivo de mapa que criamos por primeiro. Para definirmos regras, primeiramente nomeie a camada de tiles desse novo mapa como “regions”. Nessa camada, pinte um tile qualquer com grama. Adicione uma nova camada e nomeie-a como “input_Borda”. Nessa camada, pinte com pedra sobre o tile que você preencheu com grama. Após isso, adicione outra camada com o nome “output_Colisao”. Nessa camada, pinte sobre os mesmos tiles com o tile vermelho. Deixe a camada “output_Colisao” mais acima, a camada “input_Borda” no meio e a camada “regions” mais embaixo.

Acabamos de definir a regra que, onde há uma pedra sobre uma grama, é uma região de colisão, entenderam? As camadas devem ficar mais ou menos como mostrado na Figura 3 (a) e as regras devem ficar mais ou menos como na Figura 3 (b). Para finalizar a criação da regra, salve esse mapa com o nome “regras.tmx”.

Figura 3: Regras no arquivo TMX

Figura 3: Regras no arquivo TMX

Agora que criamos as regras a serem usadas no mapa nomeado “Mapa.tmx”, vamos fazer o Tiled adicionar a camada “Colisao” com os tiles preenchidos de vermelho exatamente sobre as pedras. Para isso, crie um arquivo texto na mesma pasta que estão salvos os dois mapas e nomeie-o como “rules.txt”. Abra-o e escreva nele o nome do arquivo TMX de regras, nesse caso “regras.tmx”. Abra o arquivo Mapa.tmx e veja a mágica acontecendo selecionando “Mapa”, no menu superior do Tiled, e clicando “Automapear”. Note que o Tiled criou uma camada chamada “Colisao” e adicionou automaticamente onde tinha pedra um tile vermelho na camada “Colisao”.

Se você não entendeu o que aconteceu, o Santy explica. No arquivo de regras, na camada “regions”, você adicionou um tile de grama. Isso significa que você acabou de adicionar uma regra para regiões onde tem grama. Quando você adicionou a camada “input_Borda” e pintou com pedra, você acabou de especificar a regra para ser realizada quando existe grama com pedra. No momento que você criou a camada “output_Colisao” e pintou com o tile vermelho, você acabou de dizer que será criada uma camada chamada “Colisao” e que nessa camada será adicionado o tile vermelho em todo o lugar que tem grama com pedra. Simples, não?

Você também pode adicionar mais de uma regra, bastando pintar como você deseja em “regions”, “input_Borda” e “output_Colisao”. Só tome cuidado para adicionar as regras em tiles que não são vizinhos a outras regras já predeterminadas. Você pode executar o Automapping sempre que você desejar.

Vimos nesse tutorial sobre a ferramenta do Tiled chamada Automapping. Com ela você pode economizar muito tempo, evitando preencher áreas de colisão, por exemplo. Em mapas muito grandes essa tarefa é árdua e, com o uso do Automapping, você apenas define regras que o próprio Tiled preenche conforme você deseja. No próximo tutorial eu não falarei mais sobre o Tiled e mostrarei como podemos fazer uso do acelerômetro do celular.

Um grande abraço e nos vemos em breve.

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