Tutorial: Desenvolvendo um jogo ao estilo Mole Hunting – Parte 1: Criando o projeto

Iniciaremos a implementação de um novo game para nosso portfólio.

Este será um jogo ao estilo mole hunting.

Mãos na massa. =]

Finalizamos no último tutorial o desenvolvimento de um jogo ao estilo Robot Unicorn Attack. Adicionamos dois elementos de HUD ao jogo e implementamos o término dele. Quantos jogos já desenvolvemos, hein?! =]

Nesse tutorial nós iniciaremos o desenvolvimento de um jogo ao estilo mole hunting criando um projeto no Cocos2d-x. Mas antes de tudo, vamos saber do que se trata um jogo ao estilo mole hunting.

 

O jogo Mole Hunting

Conhecido no português como “caça toupeiras”, no jogo mole hunting o jogador segura uma marreta e precisa acabar com as toupeiras que destroem a horta de um fazendeiro. Com o objetivo de atormentar o caçador, as toupeiras ficam à mostra por um breve período de tempo em buracos no chão cavados por elas mesmas e logo se escondem. O objetivo do jogador é acertar com a marreta o maior número de toupeiras durante um período tempo. Se você quiser jogar, veja um bom exemplo nesse site.

 

Criando o projeto no Cocos2d-x

Primeiramente, crie um projeto no Cocos2d-x com nome de pacote “com.Santy.BataEmTodos” e com nome de projeto “BataEmTodos”. Crie o jogo para uma das plataformas do Android que mais lhe interessar. Eu criei para a plataforma Android 2.2. Caso você não saiba ou não lembre como criar um projeto Android em Cocos2d-x, acesse esse tutorial. A Figura 1 mostra eu compilando o projeto pela primeira vez.

Figura 1 - Compilação do projeto

Figura 1 – Compilação do projeto

Após criar o projeto, devemos adaptá-lo às nossas necessidades. Antes de tudo, vamos apagar um arquivo de imagem que se torna inútil quando começarmos a escrever nosso código. Abra a pasta “Resources” e apague o arquivo “HelloWorld.png”. Essa imagem serve para testar se a aplicação foi criada e compilada com sucesso. Ela é desnecessária para o nosso game. Agora copie os arquivos contidos nesse arquivo compactado para dentro da mesma pasta. Esses são os arquivos de sprite sheet do nosso game e eu mesmo criei com base nos sprites existentes nesse site. Com eles que adicionaremos os sprites no jogo. Caso você não faça ideia do que se trata um sprite sheet ou um sprite, acesse esse tutorial.

Agora que temos todos os arquivos-fonte necessários para abrir os sprites, vamos começar a editar o código para criar uma primeira tela do nosso game. Primeiramente, abra o arquivo “HelloWorldScene.h” e adicione a seguinte linha de código:

cocos2d::CCSprite* toupeiras[6];

logo abaixo dessa:

static cocos2d::CCScene* scene();

De início, precisaremos apenas da declaração de um vetor de seis posições que armazena as referências de seis sprites. Esses sprites representarão as toupeiras que sairão do chão e que o jogador precisará bater com a marreta. Obviamente, nessa primeira versão não haverá resposta de toque na tela, porque faremos apenas uma tela inicial de gameplay do jogo. Salve esse arquivo.

Agora abra o arquivo “HelloWorldScene.cpp” e apague todo o código existente entre essas linhas de código (inclusive):

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

// 3. add your codes below…

// add a label shows “Hello World”

// create and initialize a label

CCLabelTTF* pLabel = CCLabelTTF::create(“Hello World”, “Thonburi”, 34);

e essa (inclusive):

this->addChild(pSprite, 0);

Essas linhas estavam ali apenas para mostrar na tela do aparelho aquela imagem que apagamos e uma mensagem escrito “Hello World”. Esse código servia apenas como um teste para o programador saber se conseguiu compilar o código inicial corretamente. Como não precisamos disso no nosso jogo, essas linhas podem ser excluídas. Para termos uma primeira versão da tela de gameplay, adicione as seguintes linhas de código no mesmo lugar onde você apagou as linhas acima.

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

CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile(“spriteSheet.plist”);

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

fundo->setScaleX(size.width/fundo->boundingBox().size.width);

fundo->setScaleY(size.height/fundo->boundingBox().size.height);

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

addChild(fundo);

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

    HelloWorld::toupeiras[i] = CCSprite::createWithSpriteFrameName(“Toupeira4.png”);

    HelloWorld::toupeiras[i]->setScale((0.2*size.height)

      /HelloWorld::toupeiras[i]->boundingBox().size.height);

    HelloWorld::toupeiras[i]->setPosition(ccp(

      ((i%3+1)/4.0)*size.width,((i/3+1)/3.0)*size.height));

    addChild(HelloWorld::toupeiras[i]);

}

Se você for analisar o código adicionado, perceberá que, primeiramente, nós lemos os arquivos de sprite sheet para que pudéssemos criar os sprites do jogo. Logo após, criamos um sprite que representa o fundo do jogo, o escalamos para que ficasse nas mesmas dimensões da tela do aparelho e o posicionamos no lugar correto. Para finalizar, criamos e mostramos na tela seis sprites de toupeira, posicionados em lugares específicos. Com isso, temos uma primeira versão da tela de gameplay do nosso próximo jogo, essa mostrada na Figura 2.

Figura 2 - Tela de gameplay

Figura 2 – Tela de gameplay

Vimos nesse tutorial como é um jogo ao estilo mole hunting. Criamos um projeto no Cocos2d-x, adicionamos os arquivos de sprite sheet e moldamos a tela de gameplay. No próximo tutorial nós implementaremos a funcionalidade que faz com que as toupeiras apareçam e voltem a se esconder nos buracos de forma aleatória.

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

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