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

Vimos muitas coisas até então, mas até agora eu não mostrei para vocês como criamos um cenário para o nosso game.

Essa é uma parte importante para criarmos jogos, porém necessitamos de mais alguns tutoriais que falam somente disso.

Vamos dar início à criação de cenários? o/

No tutorial passado (Desenvolvimento de jogos para Android com Cocos2d-x – Parte 7), eu mostrei para vocês como criar botões na tela que possibilitam a interação com o jogo. O tutorial de hoje não tem muito a ver com esse último, mas ele representa um passo importante para que possamos evoluir. Um jogo que não possui um ambiente bonito e bem projetado não faz sucesso. Da mesma forma, um jogo que contém muitos bugs no cenário faz com que qualquer jogador se questione se o jogo realmente é profissional.

Nesse tutorial eu quebrei aquela sequência que eu fiz até então e vou fugir um pouco da programação em Cocos2d-x (mas não completamente). Hoje eu vou iniciar o desenvolvimento de cenários com a ferramenta Tiled. Vou abordá-la mostrando suas principais funcionalidades e como podemos usá-la para criar cenários que depois serão abertos diretamente no código do Cocos2d-x.

 

Mapa de tiles e Cocos2d-x

Para que possamos abrir um cenário no Cocos2d-x, precisamos criar um mapa de tiles. Um mapa de tiles é um conjunto de elementos gráficos dispostos em forma de matriz. Esses elementos gráficos são únicos mas, se posicionados lado a lado e na ordem certa, eles dão continuidade em um cenário. A Figura 1 mostra graficamente um mapa de tiles.

Figura 1 - Exemplo de mapa de tiles

Figura 1 – Exemplo de mapa de tiles

Como você podem ver na Figura 1, existem elementos gráficos que são iguais, como no caso do tile a e do tile b. A ideia principal de um mapa de tiles é definir um cenário único formado por elementos gráficos que se repetem. Dados diferentes elementos gráficos primitivos, podemos criar cenários diferentes bastando dispor esses elementos gráficos de forma diferente.

O Cocos2d-x manipula mapa de tiles para que você possa abrir os cenários do seu game. Falaremos mais para frente como manipular um mapa de tiles no código. Primeiramente vamos ver como é organizado e qual o tipo do arquivo que define um mapa de tiles, e, quais os principais elementos de um mapa de tiles.

 

O formato TMX

O motor gráfico Cocos2d-x abre mapa de tiles codificados no padrão TMX. O padrão TMX é aberto, ou seja, você não precisa pagar royalties se utilizá-lo em seu jogo. A forma como ele organiza o mapa de tiles é a mesma de um arquivo XML. É importante que entendamos como esse arquivo é organizado porque existem informações que somente são acessíveis ao programador se o arquivo XML for aberto. Mas como é organizado esse arquivo? Vamos iniciar pelos principais elementos que um arquivo TMX
pode conter:

  • Map: o elemento principal de um mapa de tiles. Ele é quem contém todos os demais elementos e define a orientação do mapa, o tamanho (quantidade de elementos na vertical e na horizontal) e o tamanho dos elementos gráficos primitivos (largura e altura em pixels);
  • Tileset: define um conjunto nomeado de elementos gráficos primitivos que podem ser utilizados no mapa de tiles;
  • Image: define a imagem de onde os elementos gráficos primitivos são criados. Funciona mais ou menos como um sprite sheet;
  • Layer: define uma camada de elementos gráficos que formam o mapa de tiles. A ideia principal das camadas é fazer vários mapas de tiles sobrepostos para criar diferentes elementos no cenário. Veremos isso em tutoriais posteriores;
  • Objectgroup: define um conjunto de objetos utilizados no jogo. Também veremos isso em tutoriais posteriores;
  • Object: define um elemento que pode ter interação com os personagens no jogo. Inimigos, portas fechadas que podem se abrir, personagens que falam com o jogador, paredes ou qualquer outro objeto que tenha interação no jogo pode ser definido por um objeto.

Figura 2 - Exemplo de arquivo TMX

Figura 2 – Exemplo de arquivo TMX

Veremos ainda cada um desses objetos em um arquivo TMX, mas primeiro vamos criar um mapa de tiles na ferramenta Tiled. Uma observação para os curiosos em programação: a classe do Cocos2d-x responsável por gerenciar mapa de tiles é a CCTMXTiledMap. Essa classe abre um arquivo TMX e manipula praticamente qualquer um desses elementos que eu expliquei acima. Mas deixaremos isso para outros tutoriais.

A Figura 2 mostra um exemplo de um arquivo TMX aberto no editor de códigos Code::Blocks. Como vocês podem ver o arquivo TMX é um arquivo XML que pode ser aberto em qualquer editor de texto comum. Ali estão alguns elementos os quais eu expliquei anteriormente, como Map, Tileset e Image. Agora chega de teoria e vamos à prática. ;D

 

Criando um mapa de tiles

Obviamente não criaremos um mapa de tiles escrevendo no bloco de notas do Windows. Seria um pouco cansativo, não? Para isso, existem ferramentas programadas unicamente com o intuito de ajudar-nos, meros desenvolvedores de games. Uma dessas ferramentas possui código aberto, ou seja, é de graça ( *.* ), e gera o arquivo TMX baseado no mapa de tiles que você edita manualmente. Sabe qual é essa ferramenta? O Tiled. Você pode baixar a sua versão para Windows, Linux ou Mac aqui. Pensa em uma ferramenta poderosa … essa é o Tiled.

Figura 3 - Ferramenta Tiled

Figura 3 – Ferramenta Tiled

Para que você possa criar aí no seu PC, obviamente você precisa instalá-la. Baixe-a e instale-a de forma fácil, ao estilo next, next e finish. Após abrir o Tiled, você se deparará com a tela mostrada na Figura 3. Primeiramente clique no menu superior “Arquivo” e selecione “Novo…”. Abrirá a tela mostrada na Figura 4.

Figura 4 - Janela de Novo mapa de tiles

Figura 4 – Janela de Novo mapa de tiles

Deixe as opções exatamente como eu coloquei ali, ou seja, estamos criando um cenário com 20×20 elementos gráficos primitivos e cada elemento gráfico terá o tamanho de 32×32 pixels. É importante nessa hora que você crie a sua imagem com os elementos gráficos primitivos de tamanho 32×32 pixels também. Para isso, você pode criar cada elemento gráfico em um arquivo utilizando o editor de imagens que você preferir (Paint, GIMP, Corel, Photoshop ou outros) e depois uni-los utilizando a ferramenta Zwoptex, que eu mostrei nesse tutorial. Você pode uni-los diretamente em outra ferramenta gráfica de sua escolha, o importante é que eles estejam posicionados um ao lado do outro e um abaixo do outro. Para evitarmos delongas, utilize essa imagem pronta que eu peguei desse site.

Figura 5 - Abrir tileset

Figura 5 – Abrir tileset

Vamos adicionar um conjunto de tiles para podermos iniciar a brincadeira. Para isso, no menu superior, selecione “Mapa” e clique em “Novo Tileset…”. A Figura 5 mostra a tela que vai aparecer. Deixe os valores iguais aos que eu coloquei na Figura 5. Nomeamos o conjunto de elementos gráficos primitivos como “Tileset 1”, abrimos a imagem que você baixou anteriormente e dizemos que a imagem possui elementos gráficos de dimensão 32×32 pixels.

No lado direito da tela do Tiled, temos duas áreas que definem algumas funcionalidades do editor de mapas. A primeira área é o editor de camadas. Ali estão listadas as camadas do mapa de tiles. Podemos ter várias camadas de elementos gráficos primitivos e podemos nomeá-las como bem entendermos. Dê duplo clique sobre a camada nomeada “Camada de Tiles 1” e renomeie-a para “Camada 1”. Nesse tutorial vamos brincar apenas com uma camada, deixaremos cenários mas elaborados para outros tutoriais.

A outra área, também do lado direito do Tiled, é o editor do conjunto de tiles. Ali você também pode mudar o nome dele e, claro, selecionar o elemento gráfico primitivo que você deseja incluir no mapa de tiles ao lado. A Figura 6 mostra essas duas áreas.

Figura 6 - Editores de Camadas e Tilesets

Figura 6 – Editores de Camadas e Tilesets

Agora meu povo, brinquem a vontade com o seu mapa de tiles. Eu recomendo que vocês fuçem em tudo na ferramenta para progredirmos bem nos próximos tutoriais. Mas, por enquanto, eu montei um mapa simples para eu poder explicar alguns elementos no arquivo TMX que criamos hoje. Para criarmos o arquivo TMX, monte o mapa e salve clicando no menu superior “Arquivo” e selecionando em “Salvar…”. A Figura 7 mostra o mapa que eu criei.

Figura 7 - Mapa criado

Figura 7 – Mapa criado

 

Interpretando o arquivo XML

O que você acha de abrirmos o mapa que criamos para ver o que o Tiled escreveu? Se você conseguir interpretar bem um arquivo TMX, meu amigo, você pode ser considerado um bom programador de jogos. =]

Após salvar o seu mapa, note que o arquivo será nomeado com a extensão TMX. Abra ele em um editor de texto qualquer. Eu o abri no Code::Blocks por opção minha. O arquivo que eu criei, ou seja, esse que vocês viram na Figura 7, tem o seguinte código (deixei um trecho de <data com fonte bem pequena, pois era muito grande e prejudicava o leiaute do blog):

<?xml version=”1.0″ encoding=”UTF-8″?>

<map version=”1.0″ orientation=”orthogonal” width=”20″ height=”20″ tilewidth=”32″ tileheight=”32″>
<tileset firstgid=”1″ name=”Tileset 1″ tilewidth=”32″ tileheight=”32″>
<image source=”wood_tileset_3.png” width=”512″ height=”512″/>
</tileset>
<layer name=”Camada 1″ width=”20″ height=”20″>
<data encoding=”base64″ compression=”zlib”>
eJy9lLsOwjAMRRPeawSoXSNAsAIDMzCEFfr//8IdiGRZF9ymFcNZ7PjEaaXrnXN+YI7gBM6kF4zZMZiAqahdwQ3cDdeI+JZgBdai9gQv0IhaVL7QweeVJwqf9V7Lx7ylPjn/azd5xwZswe6LKyja/GPJouW5GZgr2GwS9byffHP8uB6gUiRyR6WcbBfmskg95//JBewLYb5afMucFQyWH2y3g+jnrGDo/NA+7errq0k/Zw+jKfB1ZWjfG4tLHIY=
</data>
</layer>
</map>

Note que tem vários elementos que eu expliquei anteriormente nesse arquivo. O primeiro é o Map, que define o mapa que criamos no Tiled. Você percebeu alguma semelhança com a Figura 4? O segundo elemento é o Tileset. Novamente, você percebeu alguma semelhança com a Figura 5? Note também que logo abaixo tem um elemento Image, que referencia a imagem que você baixou para criar o mapa. Por último, vem o elemento Layer, que define a camada que eu pedi para você renomear. Vale lembrar que cada camada tem um conjunto de letras que define cada elemento gráfico primitivo do conjunto de tiles. Esse conjunto de letras é a forma comprimida de representar a matriz 20×20 do conjunto de elementos gráficos primitivos. Veja que não é difícil entender o arquivo XML de um mapa de tiles TMX, porém é custoso fazer no braço em um editor de texto comum. Susse, não? =]

 

O que vimos no tutorial? Bastantes coisas. Eu expliquei sobre mapa de tiles e como eles funcionam. Mostrei que o Cocos2d-x abre somente um tipo de arquivo de mapa de tiles, sendo esse arquivo o TMX. Expliquei sobre esse arquivo e como podemos criá-lo utilizando a ferramenta Tiled. Finalizei explicando o arquivo TMX criado após fazermos o nosso próprio mapa. Hoje o negócio foi punk. ;D

No próximo tutorial criaremos terrenos mais complexos, porém mais bonitos. Vocês não perceberam que tem elementos gráficos primitivos que não tem como utilizar juntos com os outros? Eles na verdade podem ser utilizados se fizermos mais de uma camada de tiles, mas isso deixamos para o próximo tutorial.

Um grande abraço e até mais. []

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