Tutorial: Desenvolvendo um jogo de memorização de sinais: Parte 1 – Criando o projeto

Iniciaremos o desenvolvimento de mais um jogo para a nossa lista.

Dessa vez, programaremos um jogo de memorização de sinais ao estilo Genius.

Vamos superar mais esse desafio.

 

Parte 1 – Parte 2Parte 3Parte 4Parte 5

Na última publicação, nós adicionamos os efeitos sonoros no Shark Pong. Se vocês não lembram, esse é o jogo que iniciamos praticamente do zero e está tendo publicações de vários outros redatores e parceiros do blog.

Essa publicação será independente desse projeto e iniciaremos a programação de outro jogo. Primeiramente, eu explicarei um pouco da história e da mecânica do jogo Genius. Logo após, eu mostrarei como criaremos o nosso projeto no Cocos2d-x e quais mudanças faremos para darmos início a programação do jogo. Por último, programaremos a tela de gameplay. Partiu.

 

O Genius

GeniusO Genius é um jogo eletrônico distribuído pela Estrela que estimula a memorização do jogador. Ele tem o formato de um disco que é separado em quatro metades por botões coloridos. Esse jogo se tornou muito popular na década de 80 e diverte muitas pessoas ainda hoje.

Quando o jogo é iniciado, o aparelho acende um dos botões e apresenta um efeito sonoro referente ao botão que acendeu. O jogador deve apertar no botão sinalizado. Com o tempo, a sequência de sinalizações aumenta, exigindo cada vez mais da memória do jogador, que deve apresentar a mesma sequência mostrada pelo jogo apertando nos botões. Caso você queira saber como funciona o jogo, entre nesse site.

Agora que você já conhece o jogo, vamos iniciar o desenvolvimento.

 

Criando e preparando o projeto

Iniciaremos o tutorial de hoje criando o projeto o preparando para programação do jogo. Crie um projeto Cocos2d-x para Android com nome de pacote “com.Santy.Memorizacao” e com nome de projeto “Memorizacao”. Nesse momento você pode ficar desesperado em não saber como se cria um projeto Cocos2d-x para Android. Mas fique calmo, se você não sabe como fazer isso, dê uma olhada nesse tutorial e nesse tutorial.

Agora vamos excluir tudo o que vem de código e imagens padrões que não interessa em nada para o nosso game. Entre na pasta “Resources”, interna a pasta do projeto do jogo, e apague o arquivo “HelloWorld.png”. Agora abra o arquivo “HelloWorldScene.cpp” e apague todo o bloco de código que se encontra entre essas 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);

e essa linha (inclusive):

this->addChild(pSprite, 0);

ArquivoFazendo isso, apenas excluiremos uma imagem do Cocos2d-x que era mostrada ao jogador. Além disso, apagaremos um trecho de código que mostrava na tela uma etiqueta e essa imagem. Como não vamos utilizar mais essa imagem e como essa etiqueta também não nos serve, então apagamos tudo isso do nosso projeto.

Agora, vamos adicionar no repositório do jogo os arquivos de sprite sheet que utilizaremos no desenvolvimento. Baixe esse arquivo e o descompacte na pasta “Resources”. Esse arquivo possui os arquivos de imagem e descritor do sprite sheet do jogo. Caso você não faça ideia do que é um sprite sheet e como se faz um, acesse esse tutorial. As imagens contidas nos arquivos de sprite sheet eu peguei da Internet. Os sites que eu baixei as imagens são esse e esse. Com estes arquivos no repositório do jogo, poderemos criar e manipular sprites.

RetratoPaisagemPara finalizar a preparação do projeto para o desenvolvimento do jogo, precisaremos deixar a tela em modo retrato. Para fazer isso, abra o arquivo “AndroidManifest.xml” e modifique a seguinte linha de código:

android:screenOrientation=“landscape”

de forma que ela fique assim:

android:screenOrientation=“portrait”

Agora podemos iniciar a codificação. =D

 

Implementação da tela de gameplay

Até agora não programamos nada. Obviamente, se compilarmos e executarmos o programa, não será mostrado nada na tela. Porém, já podemos criar os sprites que utilizaremos no jogo e já podemos moldar a tela de gameplay. Na verdade, é somente isso que faremos no tutorial de hoje, além da criação do projeto, claro.

LampadaAntes de tudo, criaremos oito sprites que comporão a nossa tela de gameplay. Quatro sprites representarão os botões que o jogador deverá apertar e os outros quatro sprites restantes representarão as luzes dos botões. A sequência será mostrada ao jogador por meio dessas luzes, mas isso deixaremos para um outro tutorial. Para declarar as variáveis que armazenarão as referências desses sprites, abra o arquivo “HelloWorldScene.h” e adicione as seguintes linhas de código:

cocos2d::CCSprite* botaoSup;

cocos2d::CCSprite* botaoInf;

cocos2d::CCSprite* botaoEsq;

cocos2d::CCSprite* botaoDir;

cocos2d::CCSprite* lampSup;

cocos2d::CCSprite* lampInf;

cocos2d::CCSprite* lampEsq;

cocos2d::CCSprite* lampDir;

logo abaixo dessa:

static cocos2d::CCScene* scene();

Agora programaremos a tela de gameplay. Abra o arquivo “HelloWorldScene.cpp” e adicione as seguintes linhas de código:

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

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

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

if(size.width/size.height>fundo->boundingBox().size.width/fundo->boundingBox().size.height)

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

else

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

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

addChild(fundo);

HelloWorld::botaoSup = CCSprite::createWithSpriteFrameName(“Amar.png”);

HelloWorld::botaoSup->setScale((0.2*size.width)/HelloWorld::botaoSup->boundingBox().size.width);

HelloWorld::botaoSup->setPosition(ccp(0.5*size.width,0.5*size.height+0.35*size.width));

addChild(HelloWorld::botaoSup);

HelloWorld::botaoInf = CCSprite::createWithSpriteFrameName(“Verd.png”);

HelloWorld::botaoInf->setScale((0.2*size.width)/HelloWorld::botaoInf->boundingBox().size.width);

HelloWorld::botaoInf->setPosition(ccp(0.5*size.width,0.5*size.height-0.35*size.width));

addChild(HelloWorld::botaoInf);

HelloWorld::botaoEsq = CCSprite::createWithSpriteFrameName(“Azul.png”);

HelloWorld::botaoEsq->setScale((0.2*size.width)/HelloWorld::botaoEsq->boundingBox().size.width);

HelloWorld::botaoEsq->setPosition(ccp(0.5*size.width-0.35*size.width,0.5*size.height));

addChild(HelloWorld::botaoEsq);

HelloWorld::botaoDir = CCSprite::createWithSpriteFrameName(“Verm.png”);

HelloWorld::botaoDir->setScale((0.2*size.width)/HelloWorld::botaoDir->boundingBox().size.width);

HelloWorld::botaoDir->setPosition(ccp(0.5*size.width+0.35*size.width,0.5*size.height));

addChild(HelloWorld::botaoDir);

HelloWorld::lampSup = CCSprite::createWithSpriteFrameName(“LuzApagada.png”);

HelloWorld::lampSup->setScale((0.1*size.width)/HelloWorld::lampSup->boundingBox().size.width);

HelloWorld::lampSup->setPosition(ccp(0.5*size.width,0.5*size.height+0.15*size.width));

addChild(HelloWorld::lampSup);

HelloWorld::lampInf = CCSprite::createWithSpriteFrameName(“LuzApagada.png”);

HelloWorld::lampInf->setScale((0.1*size.width)/HelloWorld::lampInf->boundingBox().size.width);

HelloWorld::lampInf->setPosition(ccp(0.5*size.width,0.5*size.height-0.15*size.width));

addChild(HelloWorld::lampInf);

HelloWorld::lampEsq = CCSprite::createWithSpriteFrameName(“LuzApagada.png”);

HelloWorld::lampEsq->setScale((0.1*size.width)/HelloWorld::lampEsq->boundingBox().size.width);

HelloWorld::lampEsq->setPosition(ccp(0.5*size.width-0.15*size.width,0.5*size.height));

addChild(HelloWorld::lampEsq);

HelloWorld::lampDir = CCSprite::createWithSpriteFrameName(“LuzApagada.png”);

HelloWorld::lampDir->setScale((0.1*size.width)/HelloWorld::lampDir->boundingBox().size.width);

HelloWorld::lampDir->setPosition(ccp(0.5*size.width+0.15*size.width,0.5*size.height));

addChild(HelloWorld::lampDir);

logo abaixo dessa:

this->addChild(pMenu, 1);

Foram adicionados bastante códigos, mas nada muito complexo. Primeiramente, nós carregamos os arquivos de sprite sheet para podermos criar sprites no jogo. Logo após, nós criamos um sprite que mostra uma imagem de um circuito integrado para ser o fundo do nosso game. Depois nós criamos os quatro sprites referentes aos botões que o jogador apertará para apresentar a sequência ao jogo. Por último, nós criamos os sprites das lâmpadas que apresentarão a sequência ao jogador. Como eu disse, bastante código, mas nada muito difícil de entender.

Agora sim, terminamos a implementação da tela de gameplay. Se você compilar o código e executar o jogo, você verá algo como o que é mostrado na Figura 1. Note que ha um circuito integrado como fundo, existem quatro botões coloridos, um em cada lado da tela, e quatro lâmpadas, uma do lado de cada botão.

Figura 1 - Jogo executando
Figura 1 – Jogo executando

 

Vimos no tutorial de hoje como funciona a mecânica do jogo Genius. Também criamos um projeto de jogo Cocos2d-x para Android e programamos a tela de gameplay do nosso próximo game.

No próximo tutorial nós implementaremos a criação e apresentação de sequências aleatórias.

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

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.