Tutorial: Criando um jogo de desviar o objeto – Parte 1: Criando o projeto no Cocos2d-x

Sempre é bom aprendermos como desenvolver um novo jogo.

Vamos voltar a aplicar os conceitos que vimos até o tutorial de hoje.

Iremos desenvolver aquele jogo de desviar algo dos objetos que se mexem.

No último tutorial terminamos de montar um menu que pode ser utilizado como base para os menus dos seus jogos. Incluímos um fundo, os botões e as funcionalidades neles. Fizemos também uma transição para a tela do menu de opções. Nessa nova sequência de tutoriais iniciaremos o desenvolvimento de outro jogo. Veremos como desenvolver aquele game de desviar um objeto central de outros objetos que ficam em constante movimento na tela.

O conceito do jogo

O jogo que faremos é muito viciante e tem o conceito bem fácil de entender. É necessário guiar um objeto central para que ele não seja encostado por nenhum outro objeto no cenário. Para isso, você clica sobre ele o arrasta pela tela para desviá-lo de outros objetos que estão em constante movimentação no cenário. Caso outro objeto qualquer encoste no objeto que você está arrastando, o jogo é finalizado e o tempo é contabilizado. Você pode jogar e conhecer melhor o game aqui. Para simplificar o texto, chamarei esse jogo de “jogo de desviar o objeto”. =]

Obviamente não terminaremos todo o jogo nesse tutorial, mas daremos início ao desenvolvimento a partir desse.

 

Criando o projeto

Primeiramente criaremos o nosso projeto Cocos2d-x. Crie-o com o nome de pacote “com.Santy.Quadrado” e com o nome de projeto “Quadrado”. A Figura 1 mostra como eu criei o projeto. Crie-o com o id da versão do Android igual a 8. Se você não lembra como criar um projeto do Cocos2d-x, veja como fazer isso nesse tutorial.

Figura 1 - Criando o projeto do jogo

Figura 1 – Criando o projeto do jogo

Criado o projeto, vamos incluir as imagens do sprite sheet na pasta correta para podermos criar nossos Sprites. Caso você nem imagine sobre o que eu esteja falando agora, dê uma olhada nesse tutorial. Abra a pasta “Resources” e apague o arquivo “HelloWorld.png”, ele será inútil para o nosso game. Descompacte esse arquivo
na pasta “Resources”. Esses arquivos fazem parte do sprite sheet do nosso jogo. Nesse sprite sheet contém um uma caveira de cristal referente ao objeto que deve ser desviado, uma bola de pedra referente aos objetos que estarão em movimento e uma imagem de fundo. O que pretendemos fazer é um cenário ao estilo “floresta tropical” que possui um crânio de cristal que não pode ser quebrado pelas pedras sendo arremessadas contra ele. Criativo, não? Hahaha ;D

Feito isso, podemos partir para a edição do código. Abra o arquivo “HelloWorldScene.cpp” e remova todo o trecho de código partindo dessas linhas (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);

até essa linha (inclusive):

this->addChild(pSprite, 0);

Nesse mesmo lugar, onde foi removido o trecho de código, adicione as seguintes linhas de código:

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

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

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

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

if(((float)size.width)/(size.height)>=555.0/400.0)

    fundo->setScale(((float)size.width)/fundo->boundingBox().size.width);

else

    fundo->setScale(((float)size.height)/fundo->boundingBox().size.height);

addChild(fundo);

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

cranio->setScale((0.3*size.height)/cranio->boundingBox().size.height);

cranio->setPosition(ccp(size.width/2 – cranio->boundingBox().size.width/2,size.height/2));

addChild(cranio);

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

pedra->setScale((0.2*size.height)/pedra->boundingBox().size.height);

pedra->setPosition(ccp(size.width/2 + pedra->boundingBox().size.width/2,size.height/2));

addChild(pedra);

O que fizemos aqui? Primeiramente removemos as linhas de código que apresentavam na tela alguns textos e a imagem padrão de todo projeto Cocos2d-x. Isso será desnecessário para o nosso game. Depois nós adicionamos um código que, antes de tudo, carrega o sprite sheet existente no arquivo baixado e, logo após, coloca na tela o fundo, o crânio de cristal e uma bola de pedra. É possível notar que cada Sprite foi redimensionado. Fizemos isso para que o game execute sempre da mesma forma em todos os aparelhos do mercado, independente do tamanho da tela. O fundo foi redimensionado para ocupar toda a extensão da tela, o crânio foi redimensionado para possuir 30% da altura da tela e a pedra para possuir 20% da altura da tela. Compile o código editado e o execute. Será mostrado na tela do aparelho algo parecido com o que é ilustrado na Figura 2.

Figura 2 - Primeira execução do jogo

Figura 2 – Primeira execução do jogo

Já fizemos o suficiente nesse tutorial. Vimos nele o conceito do jogo de desviar um objeto de outros que ficam em constante movimento. Criamos o projeto do jogo em Cocos2d-x, adicionamos o sprite sheet e incluímos os principais objetos na tela para testar os Sprites. No próximo tutorial realizaremos a implementação que nos permite segurar e movimentar o crânio pela tela.

Por hoje é só pessoal e nos vemos no próximo tutorial. Um grande abraço. []

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