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. []