Tutorial: Desenvolvendo um Jogo de Sinuca em Cocos2d-x: Parte 1 – Criando o projeto

Hoje, iniciaremos mais um conjunto de tutoriais terá como resultado um jogo de sinuca em cocos2d-x.

Esse é mais um jogo que implementaremos nos nossos tutoriais aqui do Fábrica.

Bora iniciar mais um desafio?!

Parte 1 – Parte 2Parte 3Parte 4Parte 5Parte 6

Implementamos no último tutorial o recurso de detecção de colisão do motor físico do Cocos2d-x. Criamos uma simulação física que criava e movimentava aleatoriamente caixas na tela. Quando essas caixas entravam em contato com uma bola no centro da tela, elas automaticamente eram excluídas da simulação física. Com isso, aprendemos o funcionamento do recurso de detecção de colisão do motor físico do Cocos2d-x.

sinucaNesse tutorial, nós iniciaremos a implementação de um novo jogo para a nossa lista: um jogo de sinuca. Partindo do pressuposto que você já saiba o que é um jogo de sinuca, pois tem em muitos bares de nosso Brasil varonil, daremos início ao desenvolvimento criando o projeto Cocos2d-x.

 

Preparando o Jogo de Sinuca em Cocos2d-x

Comecemos o desenvolvimento pensando, primeiramente, em como ficará a tela de gameplay. Para programarmos essa tela, obviamente, primeiro precisamos criar o projeto Cocos2d-x. Assim sendo, crie um projeto com nome “Sinuca” e com nome de pacote “com.Santy.Sinuca”. Se você não se lembra como criar um projeto Cocos2d-x, veja nesse tutorial. A Figura 1 mostra eu criando o projeto do nosso próximo jogo.

Figura 1 - Criando o projeto
Figura 1 – Criando o projeto

Agora, prepararemos o projeto para a implementação do nosso jogo. Vamos apagar o arquivo de imagem que vem por padrão em todo projeto Cocos2d-x recém-criado. Acesse a pasta “Resources”, existente na pasta do projeto, e apague o arquivo “HelloWorld.png”. Copie dentro dessa mesma pasta todos os arquivos existentes nesse arquivo compactado. Esses são os arquivos de sprite sheet do jogo que programaremos. Se você não sabe ou não lembra do que são sprites sheets, acesse esse tutorial. Eu mesmo criei esse sprite sheet com a edição da imagem superior da mesa existente nesse site. Quanto as outras imagens, eu mesmo as criei em um editor de imagens.

Para finalizar a preparação do projeto, vamos apagar um trecho do código padrão desnecessário para a execução do nosso jogo. Abra o arquivo “HelloWorldScene.cpp”, localizado na pasta “Classes”, e apague todo o código existente entre essas linhas (inclusive):

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

// 3. add your codes below…

// add a label shows “Hello World”

// create and initialize a label

auto label = Label::createWithTTF(“Hello World”, “fonts/Marker Felt.ttf”, 24);

e essa linha (inclusive):

this->addChild(sprite, 0);

Com isso, o projeto está preparado para a programação do jogo em si.

 

Programando a tela de gameplay

sidepocketA tela de gameplay consistirá na apresentação de quatro elementos gráficos: a mesa de sinuca, o bolão e duas bolas coloridas (vermelha e amarela). Assim, sendo, precisaremos adicionar quatro atributos na classe “HelloWorld”. Esses atributos serão as referências dos sprites da mesa e das bolas supracitadas. Para isso, abra o arquivo “HelloWorldScene.h”, localizado na pasta “Classes”, e adicione as seguintes linhas de código:

cocos2d::Sprite* mesa;

cocos2d::Sprite* bolaBranca;

cocos2d::Sprite* bolaVermelha;

cocos2d::Sprite* bolaAmarela;

logo abaixo dessa:

virtual bool init();

Salve o último arquivo editado. Agora podemos criar esses elementos gráficos e programar a tela de gameplay. Abra o arquivo “HelloWorldScene.cpp” e adicione as seguintes linhas de código:

SpriteFrameCache::getInstance()->addSpriteFramesWithFile(“spriteSheet.plist”);

HelloWorld::mesa = Sprite::createWithSpriteFrameName(“Mesa.png”);

if(visibleSize.width/visibleSize.height>

  HelloWorld::mesa->getContentSize().width/HelloWorld::mesa->getContentSize().height)

    HelloWorld::mesa->setScale(visibleSize.height/HelloWorld::mesa->getContentSize().height);

else

    HelloWorld::mesa->setScale(visibleSize.width/HelloWorld::mesa->getContentSize().width);

HelloWorld::mesa->setPosition(visibleSize.width/2,visibleSize.height/2);

addChild(HelloWorld::mesa);

HelloWorld::bolaBranca = Sprite::createWithSpriteFrameName(“BolaBran.png”);

HelloWorld::bolaBranca->setScale(HelloWorld::mesa->getScale());

HelloWorld::bolaBranca->setPosition(HelloWorld::mesa->getPositionX()+

0.25*HelloWorld::mesa->getBoundingBox().size.width,HelloWorld::mesa->getPositionY());

addChild(HelloWorld::bolaBranca);

HelloWorld::bolaVermelha = Sprite::createWithSpriteFrameName(“BolaVerm.png”);

HelloWorld::bolaVermelha->setScale(HelloWorld::mesa->getScale());

HelloWorld::bolaVermelha->setPosition(HelloWorld::mesa->getPositionX()-

0.25*HelloWorld::mesa->getBoundingBox().size.width,

HelloWorld::mesa->getPositionY()+HelloWorld::bolaVermelha->getBoundingBox().size.height/2);

addChild(HelloWorld::bolaVermelha);

HelloWorld::bolaAmarela = Sprite::createWithSpriteFrameName(“BolaAmar.png”);

HelloWorld::bolaAmarela->setScale(HelloWorld::mesa->getScale());

HelloWorld::bolaAmarela->setPosition(HelloWorld::mesa->getPositionX()-

0.25*HelloWorld::mesa->getBoundingBox().size.width,

HelloWorld::mesa->getPositionY()-HelloWorld::bolaAmarela->getBoundingBox().size.height/2);

addChild(HelloWorld::bolaAmarela);

logo abaixo dessa:

this->addChild(menu, 1);

Se você analisar o código inserido, perceberá que abrimos o sprite sheet do jogo e incluímos quatro sprites na tela. O procedimento de inclusão de cada um desses sprites é basicamente a sequência: instanciação, redimensionamento, posicionamento e adição na tela. Nada muito complicado de entender. Se você compilar esse código e executar o aplicativo, será mostrado algo como o que é ilustrado na Figura 2.

Figura 2 - Tela de gameplay
Figura 2 – Tela de gameplay

Implementamos no tutorial de hoje a tela de gameplay do nosso próximo jogo. Criamos um projeto Cocos2d-x e adicionamos na tela quatro sprites: um que representa a mesa de sinuca e outros três que representam o bolão e as bolas coloridas. Com isso, podemos ter uma ideia de como ficará a tela de gameplay.

No próximo tutorial, nós implementaremos as paredes da mesa e o recurso de movimentação das bolas.

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.

Send this to a friend