Tutorial: Desenvolvendo um Jogo ao Estilo Pokey Pummel em Cocos2d-x: Parte 2 – Danificando a Pedra Base

Iniciamos mais um conjunto de tutoriais que resultará em um jogo pronto.

Vamos implementar um jogo ao estilo Pokey Pummel.

Faremos hoje o aumento da rachadura nas pedras após picaretadas.

Parte 1 – Parte 2 – Parte 3 – Parte 4

No último tutorial, nós criamos o projeto Cocos2d-x e programamos a tela de gameplay do nosso jogo ao estilo Pokey Pummel. Também vimos como funciona a mecânica desse jogo.

Nesse tutorial, nós implementaremos o aumento das rachaduras da pedra da base da pilha de pedras quando o jogador encosta o dedo na tela exatamente sobre ela. Mas antes, vamos reprogramar a tela de gameplay, preparando-a para o início do jogo.

 

Preparando o Início do Jogo

No tutorial passado, nós deixamos algumas pedras da pilha já rachadas desde o início. Isso porque queríamos fazer testes com o objetivo de apresentar na tela todos os sprite frames do nosso sprite sheet. Mas, logicamente, todas as pedras da pilha devem começar sem rachaduras, para que o jogador possa rachá-las e quebrá-las durante o gameplay. Dessa forma, precisamos excluir código que não é mais necessário. Abra o arquivo “HelloWorldScene.cpp” e exclua o seguinte trecho de código.

HelloWorld::blocos[0]->setDisplayFrame(SpriteFrameCache::getInstance()->getSpriteFrameByName(“Bloco2.png”));

HelloWorld::blocos[2]->setDisplayFrame(SpriteFrameCache::getInstance()->getSpriteFrameByName(“Bloco3.png”));

HelloWorld::blocos[4]->setDisplayFrame(SpriteFrameCache::getInstance()->getSpriteFrameByName(“Bloco4.png”));

HelloWorld::blocos[6]->setDisplayFrame(SpriteFrameCache::getInstance()->getSpriteFrameByName(“Bloco2.png”));

HelloWorld::blocos[8]->setDisplayFrame(SpriteFrameCache::getInstance()->getSpriteFrameByName(“Bloco3.png”));

Com isso, todas as rochas da pilha iniciarão o jogo sem rachaduras. Para finalizar a programação da tela inicial do jogo, precisamos deixar a picareta invisível. Atualmente, ela está visível e posicionada sobre a pedra da base. Programaremos o jogo de forma que a picareta apareça somente enquanto o jogador estiver com o dedo encostado na tela e exatamente sobre a pedra da base. Para deixar ela invisível, no início do jogo, adicione a seguinte linha de código:

HelloWorld::picareta->setVisible(false);

logo abaixo dessa:

HelloWorld::picareta->setPosition(HelloWorld::blocos[0]->getPosition());

Acabamos de preparar a tela de gameplay para o início do jogo.

 

Programando a Detecção de Toques na Tela

É clara a necessidade que esse jogo tem de tratamento de toques na tela. Como de praxe, faremos isso por meio da programação de métodos específicos. O método “onTouchBegan”, que é acionado quando o jogador encosta o dedo na tela, e o método “onTouchEnded”, que é acionado quando o jogador desencosta o dedo da tela. Além disso, é necessário instanciar um objeto responsável por gerenciar os toques na tela. Assim sendo, abra o arquivo “HelloWorldScene.h” e adicione as seguintes linhas de código:

cocos2d::EventListenerTouchOneByOne* toqueNaTela;

bool onTouchBegan(cocos2d::Touch *touch,cocos2d::Event *unused_event);

void onTouchEnded(cocos2d::Touch *touch,cocos2d::Event *unused_event);

logo abaixo dessa:

cocos2d::Sprite* blocos[10];

Acabamos de instanciar o objeto gerenciador de toques na tela, nomeado “toqueNaTela”, e de declarar os protótipos dos métodos na classe HelloWorld. Para facilitar as coisas, vamos, primeiramente, implementar os métodos “onTouchBegan” e “onTouchEnded” vazios. Abra o arquivo “HelloWorldScene.cpp” e adicione as seguintes linhas de código no final dele.

bool HelloWorld::onTouchBegan(Touch *touch,Event *unused_event) {

    return true;

}

void HelloWorld::onTouchEnded(Touch *touch,Event *unused_event) {

}

Para finalizar a programação básica de detecção de toques na tela, basta instanciar o objeto “toqueNaTela” e o acionar. Para isso, adicione as seguintes linhas de código:

HelloWorld::toqueNaTela = EventListenerTouchOneByOne::create();

HelloWorld::toqueNaTela->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan,this);

HelloWorld::toqueNaTela->onTouchEnded = CC_CALLBACK_2(HelloWorld::onTouchEnded,this);

getEventDispatcher()->addEventListenerWithSceneGraphPriority(HelloWorld::toqueNaTela,this);

logo abaixo dessa:

addChild(HelloWorld::picareta);

Agora podemos gerenciar os toques na tela implementando o que precisamos nos métodos “onTouchBegan” e “onTouchEnded”.

 

Aumentando as Rachaduras na Rocha Base

Toda vez que o jogador encostar o dedo na pedra da base da pilha, o frame dessa pedra é modificado para um que ilustra uma rachadura um pouco maior em relação à anterior. Separamos os frames de forma que a rachadura menor esteja no frame nomeado “Bloco2.png” e que a maior rachadura esteja no frame nomeado “Bloco4.png”. Assim, se a pedra da base está apresentando ao jogador o frame nomeado “Bloco3.png”, por exemplo, e o jogador encosta o dedo nessa pedra, o frame passa a ser aquele nomeado “Bloco4.png”.

Obviamente, a mudança de frames acontece somente se o jogador encostar o dedo exatamente sobre a pedra da base. Além disso, essa mudança de frame acontece somente até o frame nomeado “Bloco4.png”, pois, após isso, a pedra é quebrada definitivamente. Para programar essas funcionalidades, adicione as seguintes linhas de código:

static int cliques = 1;

char nome[11];

Vec2 p = touch->getLocationInView();

p.y = Director::getInstance()->getVisibleSize().height – p.y;

if(HelloWorld::blocos[0]->getBoundingBox().containsPoint(p)) {

    cliques++;

    if(cliques<5) {

        sprintf(nome,”Bloco%i.png”,cliques);

        HelloWorld::blocos[0]->setSpriteFrame(nome);

    }

}

logo após essa:

bool HelloWorld::onTouchBegan(Touch *touch,Event *unused_event) {

As implementações da quebra da pedra da base e da animação das pedras caindo serão realizadas no próximo tutorial.

 

Mostrando as Picaretadas

No começo desse tutorial nós deixamos a picareta invisível. Na verdade, nós precisamos deixar ela visível somente enquanto o jogador está com o dedo encostado na tela. Essa é a última funcionalidade a ser implementada no tutorial de hoje.

Resumindo, quando o jogador encosta o dedo na tela e sobre a pedra da base, a picareta aparece ao jogador e quando ele tira o dedo da tela, a picareta volta a ficar invisível. Para tornar ela visível quando o jogador encosta o dedo na pedra da base, adicione a seguinte linha de código:

HelloWorld::picareta->setVisible(true);

logo abaixo dessas:

    HelloWorld::blocos[0]->setSpriteFrame(nome);

}

Para tornar a picareta invisível quando o jogador desencosta o dedo da tela, adicione a seguinte linha de código:

HelloWorld::picareta->setVisible(false);

logo abaixo dessa:

void HelloWorld::onTouchEnded(Touch *touch,Event *unused_event) {

 

Agora sim. Salve os arquivos modificados, compile-os e execute o jogo. Note que quando o jogador encosta o dedo na tela a picareta aparece e quando o jogador desencosta o dedo da tela a picareta desaparece. Isso acontece também, se o jogador encosta o dedo sobre a pedra base. A Figura 1 à esquerda, ilustra o momento em que o jogador está com o dedo encostado na tela e à direita quando o jogador já tirou o dedo da tela. Além disso, a rachadura da pedra da base aumenta a cada picaretada do jogador.

 

Com isso nós finalizamos o tutorial de hoje. Primeiramente, nós preparamos a tela de gameplay para o início do jogo. Logo após, nós declaramos na classe HelloWorld um objeto gerenciador de toques na tela e dois protótipos dos métodos responsáveis pelo toque na tela. Por último, nós programamos o aumento das rachaduras da pedra da base quando o jogador encosta o dedo sobre ela e o aparecimento e desaparecimento da picareta.

No próximo tutorial nós implementaremos a quebra da pedra da base após cinco picaretadas e a animação das pedras de cima caindo e tomando o lugar das pedras logo abaixo.

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