Tutorial: Desenvolvendo um Jogo ao Estilo Pokey Pummel em Cocos2d-x: Parte 1 – Projeto e Tela de Gameplay

Vamos iniciar o desenvolvimento de mais um jogo em Cocos2d-x.

Faremos um jogo ao estilo Pokey Pummel, um dos jogos cujo desempenho de jogar depende de sua velocidade em pressionar repetidas vezes um botão.

Vamos nessa.

Parte 1 – Parte 2 – Parte 3 – Parte 4

Boa noite galera. Estou voltando das férias e após um bom tempo sem publicar tutoriais no Fábrica de Jogos. Quero aproveitar o momento para desejar um ótimo 2017 e muitas realizações para vocês, fiéis leitores.

Deixando as cordialidades de lado, iniciaremos nesse tutorial o desenvolvimento de mais um jogo para a plataforma Android. No último tutorial nós finalizamos o desenvolvimento de um jogo de Batalha Naval. Nesse tutorial, nós utilizaremos o motor do Cocos2d-x para criar projeto de um jogo ao estilo Pokey Pummel (créditos à Nintendo) e programaremos a tela de gameplay.

Vamos começar o tutorial de hoje falando um pouco sobre jogos que exigem velocidade em apertar um mesmo botão repetidas vezes.

 

Pokey Pummel

O Pokey Pummel é um minigame existente no jogo Mario Party 7, para o console Game Cube. Nele, é possível jogar até 4 pessoas simultaneamente. O jogo inicia com os personagens jogáveis dispostos cada um na frente de um Pokey, um inimigo bastante comum em jogos da franquia do Super Mario Bros. Cada Pokey é constituído por uma certa quantidade de bolas e uma cabeça, que também é uma bola. Os jogadores devem atacar a marretadas a bola em contato com o chão dos seus respectivos Pokeys. Após cinco marretadas, a bola em contato com o chão é arremessada para longe e o Pokey tem o tamanho reduzido. O jogo é finalizado quando um dos Pokeys tem a sua cabeça arremessada para longe. O vídeo a seguir mostra o gameplay do jogo Pokey Pummel.

Esse é um tipo de jogo cujo desempenho do jogador depende da velocidade com que ele aperta repetidas vezes um mesmo botão do controle. Assim como o Pokey Pummel, existem outros jogos com temáticas diferentes mas que possuem essa mesma característica. Vários exemplos podem ser encontrados nos minigames de um dos jogos clássicos do Game Boy, Track Meet. Em um dos minigames desse jogo, para o jogador ganhar uma corrida de atletismo, ele precisa pressionar rapidamente o mesmo botão do portátil.

Vamos criar o projeto do jogo.

 

Criando o Projeto e Programando a Tela de Gameplay

Programaremos um jogo ao estilo Pokey Pummel. Substituiremos as bolas dos Pokeys por rochas e a marreta por picareta. Assim, no início do jogo, as rochas estão empilhadas. Para quebrar a rocha em contato com o chão, o jogador precisa dar cinco picaretadas nela. Após a rocha em contato com o chão quebrar, as rochas posicionadas acima caem. O jogador precisa quebrar todas as rochas até que não sobre mais nenhuma.

Explicada a mecânica do jogo, podemos projetar a tela de gameplay. Nela, terá um fundo de deserto, dez rochas empilhadas uma sobre a outra e uma picareta com a ponta sobre a rocha em contato com o chão. Dessa forma, teremos um sprite de fundo, dez sprites de rochas e um sprite de picareta. As imagens do fundo, das rochas e da picareta estão nesse arquivo compactado. Ele contém os arquivos de sprite sheet que utilizaremos no desenvolvimento desse jogo. Se você não lembra o que é um sprite sheet ou como fazê-lo, acesse esse tutorial. Eu criei esses arquivos com base nas imagens existentes nesses sites (fundo, rochas e picareta).

Vamos criar o projeto Cocos2d-x. Abra o terminal, acesse a pasta onde você deseja criar o projeto e digite “cocos new PokeyPummel -p com.Santy.PokeyPummel -l cpp”. O motor do Cocos2d-x executará uma sequência de passos e criará o projeto. Caso você não consiga criar o projeto, veja como fazer isso nesse tutorial. A Figura 1 mostra o terminal após o projeto criado. Como de praxe, vamos apagar o arquivo “HelloWorld.png”, existente na pasta “Resources”. Baixe o arquivo de sprite sheet citado anteriormente e descompacte o seu conteúdo nessa mesma pasta.

Agora vamos ao código. Abra o arquivo “HelloWorldScene.cpp”, existente na pasta “Classes” e apague todo o código entre as seguintes linhas de código (inclusive):

/////////////////////////////

// 3. add your codes below…

e essa linha de código (inclusive):

this->addChild(sprite, 0);

O código apagado adicionava na tela a imagem “HelloWorld.png”, também já apagada, e mais uma etiqueta escrito “Hello World”. Como isso é inútil para o nosso jogo, nós excluímos. Nesse mesmo lugar, adicione as seguintes linhas de código.

SpriteFrameCache::getInstance()->addSpriteFramesWithFile(“SpriteSheet.plist”);

Sprite *fundo = Sprite::createWithSpriteFrameName(“Fundo.png”);

if(visibleSize.width/visibleSize.height>fundo->getContentSize().width/fundo->getContentSize().height)

    fundo->setScale(visibleSize.width/fundo->getContentSize().width);

else

    fundo->setScale(visibleSize.height/fundo->getContentSize().height);

fundo->setPosition(Vec2(visibleSize.width/2,visibleSize.height/2));

addChild(fundo);

for(int i=0;i<10;i++) {

    HelloWorld::blocos[i] = Sprite::createWithSpriteFrameName(“Bloco1.png”);

    HelloWorld::blocos[i]->setScale((0.08*visibleSize.height)/HelloWorld::blocos[i]->getContentSize().height);

    HelloWorld::blocos[i]->setPosition(0.75*visibleSize.width,0.15*visibleSize.height+i*HelloWorld::blocos[i]->getBoundingBox().size.height);

    addChild(HelloWorld::blocos[i]);

}

HelloWorld::picareta = Sprite::createWithSpriteFrameName(“Picareta.png”);

HelloWorld::picareta->setScale(HelloWorld::blocos[0]->getScale());

HelloWorld::picareta->setAnchorPoint(Vec2(84.0/86.0,33.0/80.0));

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

addChild(HelloWorld::picareta);

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”));

No código inserido, nós incluímos um sprite de fundo, dez sprites de rochas e um sprite de picareta. Nada muito complicado, visto que, para cada sprite inserido, nós apenas o instanciamos na memória, escalamos conforme o tamanho da tela, posicionamos e o adicionamos na tela. Por último, nós modificamos os frames de alguns sprites de rocha para que pudéssemos visualizar todos os frames existentes no sprite sheet. Note que nós utilizamos duas variáveis que precisam ser declaradas na classe Hello World: “blocos” e “picareta”.

Para finalizar, abra o arquivo “HelloWorldScene.h” e adicione as seguintes linhas de código:

cocos2d::Sprite* picareta;

cocos2d::Sprite* blocos[10];

logo abaixo dessa:

virtual bool init();

Com as variáveis “blocos” e “picareta” devidamente declaradas, podemos compilar o código e executar o jogo. Note que é apresentada uma imagem de deserto no fundo do jogo, dez imagens de rochas empilhadas e uma imagem de picareta. A Figura 2 mostra a tela de gameplay.

Com isso, nós finalizamos o tutorial de hoje. Vimos como funciona a mecânica do jogo Pokey Pummel, criamos o projeto Cocos2d-x do jogo e programamos a tela de gameplay.

No próximo tutorial, nós programaremos a quebra das rochas após cinco cliques do jogador.

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