Tutorial: Criando menus no Cocos2d-x – Parte 1: Fazendo a tela principal

Vimos várias técnicas para implementarmos games com o Cocos2d-x.

Programamos Sprites, cenários, vimos como podemos utilizar um motor físico para os nossos jogos … mas não vimos algo muito importante e que dá a primeira impressão do jogo ao jogador.

Vamos implementar um menu.

Bora nessa?

No tutorial passado, nós finalizamos o desenvolvimento de um jogo de guiar a bolinha no labirinto. Vimos qual o conceito físico que tem por detrás do jogo e utilizamos o motor físico Box2D para o simular e os acelerômetros do celular e mover a bolinha. Nesse tutorial daremos início ao desenvolvimento de um menu que pode ser adaptado para qualquer game.

Atire a primeira pedra quem nunca teve uma primeira impressão errônea sobre um jogo com base no menu dele. Já me aconteceu tanto o caso de eu superestimar o game com base no menu como o caso que eu subestimei o jogo porque o menu era muito simples. Fora a abertura do jogo, o menu é o que aparece primeiramente para o jogador e, querendo ou não, ele é quem causa a primeira impressão sobre o jogo. O menu é uma peça muito importante nos games que costuma ser desprezada por programadores de jogos menos experientes.

Para iniciar o desenvolvimento de um menu, crie um projeto Cocos2d-x com nome de pacote “com.Santy.Menu”, com nome de projeto “Menu” e para executar na API 8 do Android. Se você não se lembra como fazer isso, olhe esse tutorial que lá explica certinho. A Figura 1 mostra como eu criei o projeto.

Figura 1 - Criando um novo projeto no Cocos2d-x

Figura 1 – Criando um novo projeto no Cocos2d-x

Criaremos o menu com 4 imagens: uma para o fundo, uma para a logo do jogo e duas para os botões. Uma das imagens para os botões é usada quando ele não está sendo clicado e uma é usada no momento em que ele está sendo clicado. Baixe esse arquivo e o descompacte na pasta “Resources” do projeto do Cocos2d-x. Porém, antes de descompactá-lo, apague todas as imagens que já estão contidas nessa pasta, pois não as utilizaremos no nosso menu. O arquivo a ser descompactado contém as quatro imagens mencionadas, que eu peguei diretamente da Internet e as adaptei para o nosso caso.

Agora abra no Eclipse o projeto criado. Caso você não lembre como fazer isso, veja esse tutorial. Logo após, abra o arquivo “HelloWorldScene.cpp”, localizado na pasta “Classes”, e remova todo o código partindo dessas linhas (inclusive):

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

// 2. add a menu item with “X” image, which is clicked to quit the program

// you may modify it.

// add a “close” icon to exit the progress. it’s an autorelease object

CCMenuItemImage *pCloseItem = CCMenuItemImage::create(

até essa linha (inclusive):

CCLabelTTF* pLabel = CCLabelTTF::create(“Hello World”, “Thonburi”, 34);

Continuando, apague todo o código partindo dessas linhas (inclusive):

// position the label on the center of the screen

pLabel->setPosition( ccp(size.width / 2, size.height – 20) );

até essa linha (inclusive):

this->addChild(pSprite, 0);

Agora, após apagar esses blocos de linhas de código, adicione as seguintes linhas de código:

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

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

if(((float)size.width)/(size.height)>=470.0/320.0)

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

else

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

addChild(fundo);

CCSprite* logo = CCSprite::create(“logo.png”);

logo->setPosition(ccp((3*size.width)/4,(3*size.height)/4));

logo->setScale(((float)size.width)/(3*logo->boundingBox().size.width));

addChild(logo);

CCMenu* menu = CCMenu::create();

CCMenuItemImage* item1 = CCMenuItemImage::create(“botaoNormal.png”,“botaoClicado.png”,this,NULL);

item1->setPosition(ccp(-size.width/4,size.height/4));

item1->setScale(((float)size.width)/(3*item1->boundingBox().size.width));

menu->addChild(item1);

CCMenuItemImage* item2 = CCMenuItemImage::create(“botaoNormal.png”,“botaoClicado.png”,this,NULL);

item2->setPosition(ccp(-size.width/4,0));

item2->setScale(((float)size.width)/(3*item2->boundingBox().size.width));

menu->addChild(item2);

CCMenuItemImage* item3 = CCMenuItemImage::create(“botaoNormal.png”,“botaoClicado.png”,this, menu_selector(HelloWorld::menuCloseCallback));

item3->setPosition(ccp(-size.width/4,-size.height/4));

item3->setScale(((float)size.width)/(3*item3->boundingBox().size.width));

menu->addChild(item3);

addChild(menu);

CCLabelTTF* newGame = CCLabelTTF::create(“Novo Jogo”,“”,28);

newGame->setPosition(ccp(size.width/4,(3*size.height)/4));

addChild(newGame);

CCLabelTTF* opcoes = CCLabelTTF::create(“Opcoes”,“”,28);

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

addChild(opcoes);

CCLabelTTF* sair = CCLabelTTF::create(“Sair”,“”,28);

sair->setPosition(ccp(size.width/4,size.height/4));

addChild(sair);

logo abaixo dessa linha (note que essa linha ficou, mesmo após apagarmos os códigos anteriores):

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

Inicialmente não precisamos editar o arquivo “HelloWorldScene.h”. Isso porque ainda não incluímos qualquer funcionalidade nos botões, apenas os adicionamos na tela. Deixaremos a implementação das funcionalidades deles para o próximo tutorial.

O que fizemos no código acima? Primeiramente criamos um Sprite com a imagem de fundo do menu. Note que redimensionamos o Sprite para que toda a tela do aparelho seja coberta por ele. Logo após, criamos outro Sprite e o adicionamos do lado direito da tela, realizando, em seguida, um redimensionamento dele. Continuando, inserimos no lado esquerdo três botões de menu e, para variar, os redimensionamos também. Por último, adicionamos as etiquetas nos botões para que os jogadores possam identificar quais são as suas respectivas funções. Note que cada Sprite foi redimensionado. Isso porque existem vários tamanhos de tela de celular. Se não redimensionarmos os Sprites com base no tamanho da tela, o menu fica desconfigurado se o jogo for executado em um celular com tela maior, por exemplo.

Figura 2 - Menu executando

Figura 2 – Menu executando

Compile o código editado no Cygwin e execute o jogo no Eclipse. Se você não lembra como fazer isso, veja esse tutorial. O resultado será algo parecido com o que é mostrado na Figura 2. Nessa figura, o botão “Novo Jogo” está sendo clicado por mim no momento da captura da tela. O único botão que já está com funcionalidade é o botão sair, visto que apenas reutilizamos essa funcionalidade do código padrão que já vem no projeto do Cocos2d-x. Massa né? =]

Vimos nesse tutorial como criar uma tela inicial de menu, adicionando um Sprite com a imagem de fundo, um com a imagem da logo do jogo e três botões de opção de menu. No próximo tutorial veremos como adicionar as funcionalidades em cada um desses botões.

Um grande abraço e nos vemos mais além. []

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