Tutorial: Desenvolvimento de Jogos para Android com Cocos2d-x – Parte 5

Até agora nós vimos como programar um elemento bem comum em jogos eletrônicos: os Sprites. Mas o que foi mostrado ainda está meio longe de realmente dar a impressão de jogo. Outros elementos importantes são as HUDs (Heads-Up Display), que nada mais são do que aqueles elementos que mostram vida, tempo, moedas de bônus e por aí vai. Seus jogos tomarão mais corpo a partir de agora.

Nos tutoriais passados (Desenvolvimento de Jogos para Android com Cocos2d-x – Parte 3 e Parte 4) eu mostrei sobre o Sprite. Fizemos ele animar com troca de Sprite Frames e fizemos ele andar na tela. Nesse tutorial eu mostrarei como funciona e como é programada aquela camada que fica na frente do jogo que tem a principal função de mostrar ao jogador informações importantes sobre o jogo. Bora lá?

 

Como funciona a camada de HUDs

Então pessoal, lembram quando eu falei do sistema de coordenadas do Cocos2d-x? Se não lembram ou não leram ainda, olhem nesse tutorial. Então, o jogo se passa completamente nesse sistema. Precisa-se ter um tratamento próprio para que os elementos de HUD não andem pela tela junto com o mundo do jogo. Mas … como assim?

Vou dar um exemplo: imagine que você esteja programando um jogo plataforma ao estilo Mario (créditos da Nintendo). O nosso personagem fica sempre centralizado na tela e quando andamos, na verdade, o mundo ao seu redor anda e o personagem fica sempre centralizado, ok? Então, quando o mundo ao redor do personagem anda, é natural que as HUDs andem também junto com o mundo. Para isso não acontecer, é necessário criar uma camada superior ao mundo de jogo, de forma que a movimentação do mundo do jogo não influencie nas HUDs. Beleza, Santy e como fazemos isso no código?

 

Estrutura de Árvore de Objetos

A Cocos2d-x trabalha com um tipo de estrutura muito utilizada na programação, a Árvore. Árvores são estruturas de dados que podem otimizar muito um programa, dando uma organização estrutural aos dados e provendo a criação de algoritmos que executem mais rápido do que se fossem utilizadas outras estruturas. Como é um tipo de estrutura que otimiza muito a execução, então ela foi utilizada no núcleo do próprio motor do Cocos2d-x. Sua principal característica é unir vários objetos de forma hierárquica, fazendo com que sua arquitetura seja muito parecida com a ramificação de uma árvore (vegetal). A Figura 1 mostra uma árvore binária de objetos, onde cada objeto (também chamado de nó) possui no máximo dois subobjetos (também chamados de nós filhos).

Árvore Binária de objetos

Figura 1 – Árvore Binária de objetos

Tá Santy, legal, e o que isso tem a ver com a camada de HUDs? Quando usamos o método “addChild”, como vimos nesse tutorial, estamos, na verdade, adicionando um novo nó filho em algum dos nós já existente na árvore. Se tomarmos como base o nó azul mais à esquerda da Figura 1, por exemplo, e adicionarmos um outro nó filho com “addChild”, esse nó passará a ter três nós filhos verdes.

Trazendo isso para o jogo, quando adicionamos um Sprite na nossa cena, estamos incluindo um nó na árvore do Cocos2d-x. Uma propriedade importante disso é que, se eu modificar um nó qualquer, mudando a posição dele no mundo, por exemplo, todos os nós abaixo dele na árvore sofrerão essa modificação também. Dessa forma, se eu incluir um Sprite e uma etiqueta de HUD que mostra a vida em um mundo e, logo após, eu mudar o mundo de lugar, então, consequentemente, eu mudarei o Sprite e a etiqueta de HUD de lugar.

Árvore de um jogo em Cocos2d-x

Figura 2 – Árvore de um jogo em Cocos2d-x

O mais usual para criar uma camada de HUD que não seja influenciada pelo mundo do jogo, é fazer com que ela seja o objeto vermelho da Figura 1 e a camada do mundo do jogo seja um dos objetos azuis na mesma figura. Dessa forma é possível modificar o mundo do jogo sem modificar as etiquetas de HUD. A Figura 2 mostra mais ou menos como fica a estrutura que eu estou explicando.

Vamos programar? =]

 

Programando a camada de HUDs

Para programarmos o jogo conforme a estrutura mostrada na Figura 2, faça as seguintes mudanças no código obtido após o término do último tutorial. Nessa parte de código:

using namespace CocosDenshion;

Inclua, logo abaixo, o seguinte trecho:

CCLayer* camadaHUD;

Nessa parte do código:

scene->addChild(layer);

Substitua (apague e adicione) pelo seguinte trecho:

camadaHUD = CCLayer::create();

camadaHUD->addChild(layer);

scene->addChild(camadaHUD);

CCLabelTTF* vidas = CCLabelTTF::create(“Vidas: 5”, “Thonburi”, 34);

vidas->setPosition(ccp(vidas->boundingBox().size.width/2,CCDirector::sharedDirector()->getWinSize().height – 20));

camadaHUD->addChild(vidas);

O que fizemos ali? Criamos um objeto de camada de HUD chamada “camadaHUD”. Incluímos essa camada como nó raiz da árvore do Cocos2d-x (o nó mais alto da árvore) e incluímos a camada do jogo (aqui nomeada como “layer”) como nó filho de “camadaHUD”. Logo após, criamos uma etiqueta de vida chamada “vidas” e incluímos como nó filho de “camadaHUD”, exatamente como mostrado na Figura 2. Dessa forma, se modificarmos “layer”, essa representando o mundo do jogo, a etiqueta de vida continuará sempre no mesmo lugar da tela. Todo e qualquer elemento de HUD, como etiqueta de vida, moedas, botões de interação com o jogo e por aí vai, deve ser adicionado como um nó filho de “camadaHUD”. Não é tãaaao complicado assim, né? =]

Nesse tutorial nós vimos como criar uma camada de HUD no Cocos2d-x. Eu mostrei que é necessário criar essa camada para que as etiquetas de informação e botões de interação não sofram modificações quando o mundo do jogo é manipulado. Para isso eu mostrei como funciona a estrutura de objetos em árvore que o Cocos2d-x gerencia.

No próximo tutorial eu falarei sobre um outro elemento de HUD muito importante: os botões de interação. Mostrarei como adicionar botões que fazem o nosso MegaMan (créditos a Capcom) andar de um lado para o outro.

Então é isso, pessoal. Até o 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