Tutorial: Desenvolvendo um jogo ao estilo Duck Hunt: Parte 1 – Criando o projeto

Vamos começar o desenvolvimento de mais um jogo em Cocos2d-x.

Dessa vez, a sequência de tutoriais resultará em um jogo ao estilo Duck Hunt.

Vamos começar essa nova série?

Parte 1 – Parte 2 – Parte 3 – Parte 4

Não posso iniciar a publicação do primeiro tutorial que eu escrevo nesse ano sem desejar um ano cheio de conquistas para vocês leitores. Desejo que desenvolvamos muitos jogos no ano de 2016. =]

Deixando a cordialidade de lado, vou relembrar onde parei no final do ano passado. Vimos no último tutorial a finalização do desenvolvimento de um jogo de memorização de sequência de sinais. Finalizamos o jogo incluindo o sistema de pontuação e término, assim como a inclusão de elementos de HUD.

Nesse tutorial, eu darei uma breve explicação sobre o funcionamento de um dos clássicos dos jogos eletrônicos: o Duck Hunt. Além disso, criaremos o projeto em Cocos2d-x e programaremos a tela de gameplay.

Assim sendo, vamos ver como é esse jogo.

Duck Hunt

O Duck Hunt é um jogo eletrônico produzido e publicado pela Nintendo no ano de 1984 no Japão. O jogo foi criado para executar na plataforma NES e era um dos jogos que utilizava a pistola Zapper. Ao iniciar o jogo, um pato começa a voar pela tela por um determinado período de tempo. O jogador precisa acertar o pato com no máximo três tiros.

O jogo libera uma sequência de patos, um ou dois por vez, proporcionando um desafio ao jogador que é o de acertar todos os patos. Quanto mais patos o jogador acertar, mais pontos ele ganha. O ponto mais marcante e hilário desse jogo é o cachorro, que busca os patos abatidos. Ele ri do jogador quando ele erra os três tiros e deixa o pato fugir. Segue um vídeo do jogo para ilustrar a explicação:

Agora vamos criar o projeto.

Criando o Projeto

A partir de agora, iniciaremos a criação e programação do jogo para a versão 3.9 do Cocos2d-x. Haverão algumas mudanças em relação ao que vínhamos programando até hoje. É sempre bom atualizar o ambiente de desenvolvimento. Então, no próximo mês eu escreverei tutoriais sobre como configurar tal ambiente de desenvolvimento e como criar projetos para essa versão do motor gráfico.

Deixando de papo furado, crie um projeto Cocos2d-x com nome “BallonShooter” e com nome de pacote “com.Santy.BallonShooter”. Caso você não saiba como criar um projeto, dê uma olhada nesse tutorial ou nesse tutorial, dependendo da versão do seu Cocos2d-x. A Figura 1 mostra uma imagem do terminal do Linux após a criação do projeto do jogo.

Como normalmente fazemos, vamos preparar todos os arquivos referentes ao jogo para podermos partir para a programação. Vamos começar excluindo arquivos desnecessários que, nesse caso, é somente um. Apague o arquivo “HelloWorld.png”, localizado na pasta “Resources” do projeto recém-criado. Nessa mesma pasta, adicione todos os arquivos que estão compactados nesse arquivo. Os arquivos compactados são os arquivos de sprite sheet do nosso jogo. Caso você não saiba o que é um sprite sheet ou queira saber como fazer um, acesse esse tutorial.

Vamos para a programação da tela de gameplay.

Programando a tela de gameplay

Vamos iniciar a edição do código excluindo o bloco que mostra a imagem padrão do Cocos2d-x na tela do celular. Abra o arquivo “HelloWorldScene.cpp” e apague todo o código que está entre essas linhas (inclusive):

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

// 3. add your codes below…

// add a label shows “Hello World”

// create and initialize a label

auto label = Label::createWithTTF(“Hello World”, “fonts/Marker Felt.ttf”, 24);

e essa (inclusive):

this->addChild(sprite, 0);

Agora vamos adicionar a imagem de fundo do jogo e três balões para termos ideia de como ficará o gameplay. Para isso, adicione as seguintes linhas de código no mesmo lugar onde você apagou as linhas anteriores.

SpriteFrameCache::getInstance()->

  addSpriteFramesWithFile(“spriteSheet.plist”);

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

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

  getBoundingBox().size.width/fundo->getBoundingBox().size.height)

    fundo->setScale(

      visibleSize.width/fundo->getBoundingBox().size.width);

else

    fundo->setScale(

      visibleSize.height/fundo->getBoundingBox().size.height);

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

addChild(fundo);

Sprite *balao1 = Sprite::createWithSpriteFrameName(“Balao1.png”);

balao1->setScale(

  0.15*visibleSize.height/balao1->getBoundingBox().size.height);

balao1->setPosition(Vec2(0.3*visibleSize.width,0.75*visibleSize.height));

addChild(balao1);

Sprite *balao2 = Sprite::createWithSpriteFrameName(“Balao2.png”);

balao2->setScale(

  0.15*visibleSize.height/balao2->getBoundingBox().size.height);

balao2->setPosition(Vec2(0.8*visibleSize.width,0.5*visibleSize.height));

addChild(balao2);

Sprite *balao3 = Sprite::createWithSpriteFrameName(“Balao1.png”);

balao3->setScale(

  0.15*visibleSize.height/balao3->getBoundingBox().size.height);

balao3->setPosition(Vec2(0.5*visibleSize.width,0.3*visibleSize.height));

addChild(balao3);

 

Prooonto. Agora basta compilar o código e executar o jogo. Para os curiosos de plantão, a Figura 2 mostra como ficou a tela de gameplay. Notem que eu mudei a temática do jogo, fazendo com que balões fossem estourados em vez de patos serem abatidos.

Vimos nesse tutorial como funciona a mecânica do jogo Duck Hunt e criamos um projeto Cocos2d-x para fazermos um jogo nesse estilo. Além de criar o projeto, nós o otimizamos removendo um arquivo inútil e adicionamos os arquivos de sprite sheet. Com os arquivos de sprite sheet inseridos no projeto, nós começamos a programar e ver como ficou a tela de gameplay.

No próximo tutorial, implementaremos o sistema de entrada, saída e movimentação dos balões na tela.

Nos vemos na semana que vem. []