Tutorial: Criando um jogo ao estilo Angry Birds – Parte 6: Adicionando elementos de HUD

Estamos praticamente com o game pronto!

Falta apenas o toque final, os elementos de HUD que mostram a quantidade de tiros que o canhão já disparou e um marcador de final de jogo.

Partiu terminar o desenvolvimento de mais um jogo. o/

Vimos no último tutorial como implementar a destruição do vaso. Para destruir o objeto rígido que o representa, precisamos criar uma variável que define se ele está intacto ou não. Caso seja detectado que ele foi quebrado, o jogo destruía o objeto rígido que o representa no mundo do Box2D e deixa o seu Sprite invisível.

Nesse tutorial nós terminaremos a implementação de mais um jogo por uma sequência de tutoriais daqui, do Fábrica de Jogos. Finalizaremos adicionando um elemento de HUD que mostra a quantidade de tiros que o jogador já disparou com o canhão e um elemento que informa o fim do jogo. Também incluiremos a funcionalidade que impossibilita o jogador de disparar mais balas de canhão caso o vaso já tenha sido quebrado. Bora correr os últimos 100 metros? =D

Para que possamos mostrar na tela a quantidade de tentativas que o jogador já fez para destruir o vaso, precisamos ter uma referência à etiqueta que mostra essa informação. Por isso, precisamos adicionar mais uma variável na classe “HelloWorld”. Além disso, para que o jogo saiba quantas vezes o jogador atirou, também faz-se necessário criar uma variável que armazena o valor inteiro da quantidade de tentativas já realizadas. Então, se você já finalizou o último tutorial, abra o arquivo “HelloWorldScene.h” e adicione as seguintes linhas de código:

cocos2d::CCLabelTTF* etiquetaTentativas;

int tentativas;

logo abaixo dessa:

cocos2d::CCArray* balasCanhaoSprites;

A referência à etiqueta que mostra a quantidade de tentativas e a variável que armazena essa quantidade já foram criadas. Agora salve esse arquivo e abra o “HelloWorldScene.cpp”. Para inicializarmos as duas variáveis, uma com um texto “Tentativas: 0”, localizado no canto superior esquerdo da tela, e outra com o valor 0, adicione as seguintes linhas de código:

HelloWorld::etiquetaTentativas = CCLabelTTF::create(“Tentativas: 0”,“”,0.75*(0.1*size.height));

HelloWorld::etiquetaTentativas->setAnchorPoint(ccp(0,1));

HelloWorld::etiquetaTentativas->setPosition(ccp(0,size.height));

HelloWorld::etiquetaTentativas->setColor(ccc3(0,0,0));

addChild(HelloWorld::etiquetaTentativas);

HelloWorld::tentativas = 0;

logo abaixo dessa:

HelloWorld::balasCanhaoSprites->retain();

Note primeiramente que eu crio a etiqueta com tamanho igual a 0,75 vezes 10% da altura da tela. Isto porque o valor 0,75 é uma constante que converte um tamanho dado em pixels em um tamanho dado em pontos de fonte. Dessa forma, eu crio a etiqueta de forma que a pontuação da fonte seja aquela que possui dez por cento da altura da tela em pixels. É necessário fazer isso porque a etiqueta é criada com base em pontos de fonte e não em pixels. Também coloco o ponto de referência da etiqueta no canto superior esquerdo dela por meio do método “setAnchorPoint” e posiciono esse ponto no canto superior esquerdo da tela. Deixo a cor da fonte preta e adiciono a etiqueta na tela.

Realizando essas modificações não é o suficiente para que a etiqueta mostre a quantidade de tentativas de forma atualizada. Ainda falta nós incrementarmos em um o valor da variável “tentativas” e atualizar a etiqueta a cada tiro realizado pelo jogador. Para isso, adicione as seguintes linhas de código:

char textoEtiqueta[16];

HelloWorld::tentativas++;

sprintf(textoEtiqueta,“Tentativas: %i”,HelloWorld::tentativas);

HelloWorld::etiquetaTentativas->setString(textoEtiqueta);

logo abaixo dessas:

corpoBala->ApplyLinearImpulse(b2Vec2(250*(dedo.x-HelloWorld::canhao->getPositionX()),250*(dedo.y-HelloWorld::canhao->getPositionY())),

    corpoBala->GetWorldCenter());

Se você analisar a posição onde colocamos esse trecho de código, ele se localiza interno à função “ccTouchesEnded”, que é chamada sempre quando o jogador desencosta o dedo da tela. Obviamente, esse é o momento quando o jogador atira, visto que ele pode mirar o canhão enquanto está com o dedo encostado na tela. Ou seja, sempre quando o jogador tira o dedo da tela, o canhão atira, a variável “tentativas” é incrementada e a etiqueta é atualizada com o valor da variável “tentativas”. Simples, não?

Para finalizar, basta identificarmos o momento que o jogo termina e mostrar isso ao jogador. Todos sabemos que o jogo termina quando o vaso é quebrado. Quando isso acontecer, precisamos criar uma etiqueta com o texto “Fim do Jogo!”, adicioná-la na tela e fazer com que o canhão não atire mais. Para isso, adicione as seguintes linhas de código:

setTouchEnabled(false);

CCSize size = CCDirector::sharedDirector()->getWinSize();

CCLabelTTF* fim = CCLabelTTF::create(“Fim do Jogo!”,“”,0.75*(0.25*size.height));

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

addChild(fim);

logo abaixo dessa:

HelloWorld::vaso->setVisible(false);

Se você analisar o lugar onde colocamos essas linhas de código, perceberá que ela está onde destruímos o corpo rígido que representa o vaso no mundo do Box2D e deixamos o Sprite do vaso invisível. Exatamente no mesmo lugar onde destruímos o vaso. É possível perceber que criamos uma etiqueta que mostra “Fim do Jogo!” com altura igual a 25% a altura da tela, bastante grande para mostrar o fim do jogo. Posicionamos a etiqueta no centro, a adicionamos na tela e desabilitamos o toque, para que o jogador não atire mais balas de canhão. Note que, mesmo com a tela desabilitada, a simulação física continua acontecendo, porém o jogador não tem mais como interagir com o game. O resultado disso é mostrado na Figura 1, onde eu quebrei o vaso na segunda tentativa e não posso mais atirar com o canhão. Legal, não!? =]

Figura 1 - Aviso de jogo finalizado

Figura 1 – Aviso de jogo finalizado

Vimos nesse tutorial como adicionar os elementos de HUD no nosso game ao estilo Angry Birds (créditos a Rovio). Tais elementos eram uma etiqueta que mostra a quantidade de tiros já disparados pelo jogador e o indicador de término do jogo. Também incluímos a funcionalidade que não deixa o jogador atirar com o canhão após o vaso ter sido quebrado. No próximo tutorial iniciaremos outro conjunto de tutoriais que resultam em um jogo simples. Ainda não pensei qual será o jogo e deixarei vocês na curiosidade por um tempo. ;D

Reforço no final desse conjunto de tutoriais o pedido de suas opiniões, fiéis leitores. O que vocês estão achando dos meus tutoriais? Tem algo a melhorar, incrementar ou retirar? Você tem ideia de um game aparentemente simples para desenvolvermos aqui no Fábrica? Também peço para acessarem o nosso Patreon e nos ajudarem sendo nossos patrões. Isso trará mais conteúdo de qualidade para vocês, mais promoções, mais redatores e por aí vai.

Por hoje é isso pessoal, um grande abraço e nos vemos no próximo conjunto de tutoriais. []

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