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

Um bom jogo não é feito apenas de um ambiente lindo. Interação é um elemento crucial para o jogador se divertir jogando. Mas como podemos incluir interação no nosso mapa? Vamos ver isso hoje?

No último tutorial vimos como montar um mapa bonito, com três camadas de tiles. Primeiramente adicionamos o chão, como a grama e o rio, depois incluímos elementos rasteiros, como brotos e estradas, e terminamos incluindo árvores e casas. Vimos até agora como modelar um bom mapa para o seu jogo.

Nesse tutorial falarei sobre como adicionar objetos no seu mapa que são interativos. Esses objetos podem ser inimigos, botões secretos, pessoas dispostas no terreno, itens, paredes e por aí vai. Até agora não especificamos onde o jogador anda ou onde estão os inimigos no mapa. Vamos ver como fazemos isso no Tiled e como carregamos essas informações no código do Cocos2d-x?

Adicionando objetos no Tiled

Então pessoal, o mapa que fizemos no tutorial passado, nesse momento, não passa de uma figura de fundo do nosso game. Ele ainda não tem interação, ou seja, ele não causa colisão alguma e ainda é meio que “inútil” fazer água, árvores e por aí vai. Para podermos incluir elementos que causam colisão com o personagem, ou incluirmos inimigos, preciso apresentar a vocês um outro tipo de camada do Tiled: a Camada de Objetos.

Todo objeto que você adiciona no Tiled é invisível no jogo, mas ele está lá, naquele lugar que você colocou. Ele tem a principal função de “apontar lugares” e disponibilizar informações importantes sobre esses lugares para o jogo quando ele estiver executando.

Para incluirmos objetos em nosso mapa, precisamos inicialmente adicionar uma Camada de Objetos e, nessa camada, incluímos os nossos objetos. O interessante das Camadas de Objetos é que podemos separar os objetos em diferentes conjuntos, com o objetivo de organizá-los em diferentes categorias. Posso criar uma Camada de Objetos que contenha apenas paredes, outra que contenha apenas inimigos, outra que contenha apenas pessoas aleatórias e por aí vai.

Lógico que a parte lógica do negócio, como uma parede tranca o personagem, como os inimigos vão reagir no mapa e essas coisas, ficarão sob a responsabilidade do programador. O Tiled apenas ajuda na localização e em mais algumas informações limitadas. Resolver o problema de como um personagem não ultrapassa uma parede e como um inimigo anda são assuntos para outros tutoriais. =]

Para você adicionar uma Camada de Objetos, primeiramente abra o mapa que criamos no tutorial passado. No lado direito do Tiled, em “Camadas”, clique com o botão direito do mouse e selecione “Adicionar Camada de Objetos …”. A Figura 1 mostra a explicação dada. Nomeie essa camada como “Paredes”.

Figura 1 - Adicionando Camada de Objetos no Tiled

Figura 1 – Adicionando Camada de Objetos no Tiled

Quando você seleciona a Camada de Objetos “Paredes”, a barra de ferramentas superior do Tiled desabilita alguns botões e habilita outros. Isso acontece porque os botões que desabilitaram são ferramentas para editar Camadas de Tiles e os botões que habilitaram são ferramentas para editar Camadas de Objetos. Como você selecionou a Camada de Objetos “Paredes”, então o Tiled possibilitou a você editar objetos dessa camada. A Figura 2 mostra a barra de ferramentas, sendo que, na região 1, estão as ferramentas de edição de Camadas de Tiles e, na região 2, estão as ferramentas de edição de Camadas de Objetos.

Figura 2 - Barra de ferramentas do Tiled

Figura 2 – Barra de ferramentas do Tiled

Como vocês podem ver, existem vários tipos de objetos que vocês podem adicionar no mapa. Podem ser adicionados retângulos, elipses, polígonos e linhas. Vamos adicionar as paredes? Então cerque cada árvore, arbusto e casa com um retângulo de forma que o retângulo limite a entrada de um personagem naquela área. Inclua também linhas nas bordas dos rios. A Figura 3 mostra como ficou o meu mapa com paredes.

Figura 3 - Mapa com paredes lógicas

Figura 3 – Mapa com paredes lógicas

Após adicionar as paredes lógicas, adicione outra Camada de Objetos e nomeie-a como “Inicio”. Nessa camada, adicione um retângulo em um lugar no mapa onde você deseja que o seu personagem inicie o game. A Figura 4 mostra onde eu posicionei o início do personagem no mapa com um objeto elipse. No Tiled, você já fez o suficiente.

Figura 4 - Início do personagem

Figura 4 – Início do personagem

Carregando objetos no game

Vamos carregar os objetos que incluímos no Tiled dentro do jogo. Inicialmente, crie um novo projeto em Cocos2d-x. Se você não lembra como se faz isso, olhe nesse tutorial. Após você criar o novo projeto, abra o arquivo “ClassesHelloWorldScene.cpp”. Nesse arquivo, apague as seguintes linhas de código:

// add “HelloWorld” splash screen”

CCSprite* pSprite = CCSprite::create(“HelloWorld.png”);

// position the sprite on the center of the screen

pSprite->setPosition( ccp(size.width/2, size.height/2) );

// add the sprite as a child to this layer

this->addChild(pSprite, 0);

Após isso, adicione nesse mesmo lugar, onde você apagou, as seguintes linhas de código:

CCTMXTiledMap* tm = CCTMXTiledMap::create(“Mapa.tmx”);

addChild(tm);

CCArray* ar = tm->objectGroupNamed(“Inicio”)->getObjects();

CCDictionary *obj = static_cast<CCDictionary*>(ar->objectAtIndex(0));

int x = obj->valueForKey(“x”)->intValue();

int y = obj->valueForKey(“y”)->intValue();

Após isso, adicione os arquivos “Mapa.tmx” e “wood_tileset_3.png” na pasta “Resources”. Esses arquivos são o mapa que você editou nesse tutorial. Se você quiser carregar o mapa que eu fiz, você pode pegá-lo aqui: Mapa. Execute o jogo. Aparecerá na tela do seu celular a imagem mostrada na Figura 5.

Figura 5 - Mapa executando no Cocos2d-x

Figura 5 – Mapa executando no Cocos2d-x

O que fizemos ali? Primeiramente excluímos o trecho de código que mostrava na tela a imagem padrão do Cocos2d-x, já que criamos um projeto novo. Incluímos um novo código que abre o arquivo TMX do mapa que modificamos e colocamos o mapa na tela. Isso foi feito nas duas primeiras linhas de código. As outras linhas não fazem nada de mais, mas eu as incluí para mostrar para vocês como podemos utilizar as informações dos objetos que criamos no Tiled. Primeiramente nós abrimos a Camada de Objetos nomeada “Inicio”. Depois nós selecionamos o primeiro objeto inserido nessa camada, nesse caso, a elipse que mostrava onde o personagem nasce. Logo após, eu criei duas variáveis: x e y. Coloquei nelas a posição do inicio do personagem relativa no mapa. Se eu tivesse um Sprite de personagem principal, certamente eu o posicionaria ali. Entendeu? =]

Podemos pegar as informações de qualquer objeto que colocamos no mapa dessa forma. Primeiro abrimos a Camada de Objetos que queremos, depois selecionamos qual o objeto na lista. Mais para frente veremos uma forma mais aplicada disso que vimos hoje.

Vimos nesse tutorial como incluir objetos de interação em um mapa TMX. Apresentei sobre Camada de Objetos e como podemos incluir paredes e elementos de interação com o personagem no jogo. Mostrei também como recuperamos essa informação de posição no código do Cocos2d-x.

No próximo tutorial eu mostrarei mais uma ferramenta do Tiled que ajuda vocês a desenhar mapas com mais facilidade. Aposto que vocês perderam um pouco de tempo para fazer as bordas das ruas e dos rios, né?

Então pessoal, nos vemos no próximo tutorial. Um grande abraço.

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