Tutorial: Programando um jogo da memória – Parte 1: Criando o projeto

Iniciaremos um novo conjunto de tutoriais sobre o desenvolvimento de um game.

Esse conjunto será menor, para iniciarmos o ano de forma mais sossegada.

Dessa vez implementaremos um jogo da memória.

Todas as partes do Tutorial: https://fabricadejogos.net/tags/tutorial-jogo-da-memoria

Então, pessoal, vamos iniciar um novo conjunto mais tranquilo de tutoriais. Não é muito interessante voltarmos das férias de fim de ano querendo programar um Battlefield (créditos a EA Games). =]

Para relembrar, terminamos no último tutorial a programação de um jogo ao estilo Flappy Bird (créditos a .GEARS). Implementamos o sistema de pontuação com a contagem de postes e incluímos a parada do jogo quando existe uma colisão do pato com alguma coisa. Já nesse conjunto de tutoriais, iniciaremos a implementação de outro game clássico e que praticamente todos já jogaram alguma vez na vida, o jogo da memória. Começaremos criando o projeto no Cocos2d-x. Bora iniciar as atividades desse ano. o

Criando o projeto

Crie um novo projeto Cocos2d-x com nome de pacote “com.Santy.Memoria”, nome de projeto “Memoria” e com índice de API número 8. Caso você não se lembre ou não saiba como criar um projeto Cocos2d-x para Android, veja como fazer isso nesse tutorial. Após criar o projeto, entre na pasta “Resources” e apague o arquivo “HelloWorld.png”, ele não será útil para o nosso mais novo game. Descompacte esse arquivo na mesma pasta. Nele estão contidos os arquivos de sprite sheet que utilizaremos no nosso game. Caso você não se lembre o que é um sprite sheet, abra esse tutorial. A Figura 1 mostra a tela de criação do projeto.

Figura 1 – Criando o projeto Cocos2d-x

Implementando a tela de gameplay

Agora vamos criar uma tela inicial para termos uma ideia de como o game ficará no final. Para isso, abra o arquivo “HelloWorldScene.h” e adicione a seguinte linha de código:

cocos2d::CCSprite* cartas[6];

logo abaixo dessa:

static cocos2d::CCScene* scene();

Definimos um vetor com seis variáveis que armazenam a referência de Sprites. Isso porque o nosso jogo da memória contém seis cartas. Cada um dos Sprites corresponde a uma carta que pode estar virada ou não. Foi necessário adicionar essas variáveis no arquivo “HelloWorldScene.h” porque precisaremos das suas referências durante a execução dos diferentes métodos da classe “HelloWorld”. Salve esse documento, abra o arquivo “HelloWorldScene.cpp” e apague todas as linhas de código 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 (inclusive):

this->addChild(pSprite, 0);

O código inicial padrão do Cocos2d-x mostra na tela a imagem “HelloWorld.png” e uma etiqueta escrita “Hello World”. Como não será mais necessário mostrar esses elementos, então apagaremos essas linhas de código. No mesmo lugar onde você apagou o código, adicione as seguintes linhas:

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

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

HelloWorld::cartas[0] = CCSprite::createWithSpriteFrameName(“Atari.png”);

HelloWorld::cartas[0]->setScale((0.3*size.height)/HelloWorld::cartas[0]->boundingBox().size.height);

HelloWorld::cartas[0]->setPosition(ccp(size.width/4.0,(2.0/3.0)*size.height));

addChild(HelloWorld::cartas[0]);

HelloWorld::cartas[1] = CCSprite::createWithSpriteFrameName(“CartaVirada.png”);

HelloWorld::cartas[1]->setScale((0.3*size.height)/HelloWorld::cartas[1]->boundingBox().size.height);

HelloWorld::cartas[1]->setPosition(ccp(size.width/2.0,(2.0/3.0)*size.height));

addChild(HelloWorld::cartas[1]);

HelloWorld::cartas[2] = CCSprite::createWithSpriteFrameName(“Blizzard.png”);

HelloWorld::cartas[2]->setScale((0.3*size.height)/HelloWorld::cartas[2]->boundingBox().size.height);

HelloWorld::cartas[2]->setPosition(ccp((3.0*size.width)/4.0,(2.0/3.0)*size.height));

addChild(HelloWorld::cartas[2]);

HelloWorld::cartas[3] = CCSprite::createWithSpriteFrameName(“CartaVirada.png”);

HelloWorld::cartas[3]->setScale((0.3*size.height)/HelloWorld::cartas[3]->boundingBox().size.height);

HelloWorld::cartas[3]->setPosition(ccp(size.width/4.0,size.height/3.0));

addChild(HelloWorld::cartas[3]);

HelloWorld::cartas[4] = CCSprite::createWithSpriteFrameName(“EAGames.png”);

HelloWorld::cartas[4]->setScale((0.3*size.height)/HelloWorld::cartas[4]->boundingBox().size.height);

HelloWorld::cartas[4]->setPosition(ccp(size.width/2.0,size.height/3.0));

addChild(HelloWorld::cartas[4]);

HelloWorld::cartas[5] = CCSprite::createWithSpriteFrameName(“CartaVirada.png”);

HelloWorld::cartas[5]->setScale((0.3*size.height)/HelloWorld::cartas[5]->boundingBox().size.height);

HelloWorld::cartas[5]->setPosition(ccp((3.0*size.width)/4.0,size.height/3.0));

addChild(HelloWorld::cartas[5]);

Como você pode ver, nós criamos, escalamos, posicionamos e adicionamos na tela os seis Sprites. Alguns Sprites têm as logos de algumas empresas desenvolvedoras de jogos eletrônicos e outros têm a parte de trás das cartas, que é uma cabeça com um quebra cabeças. Agora podemos compilar o código e ver o resultado. Será mostrado algo como o que é ilustrado na Figura 2.

Figura 2 – Jogo executando

Criamos nesse tutorial um projeto no Cocos2d-x referente ao nosso próximo game: um jogo da memória. Adicionamos nas pastas do projeto os arquivos de sprite sheet e mostramos na tela seis Sprites que fazem referências às cartas do jogo da memória. Ainda não implementamos qualquer funcionalidade. Nós nos preocuparemos com isso a partir do próximo tutorial, que será iniciado pelo embaralhamento das cartas.

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