Tutorial: Criando menus no Cocos2d-x – Parte 2: Implementando as funcionalidades dos botões

O nosso menu ficou bonito, com as informações bem distribuídas, mas não ficou funcional.

Seria interessante se ele funcionasse caso clicássemos no botão de “Opcoes”.

Vamos adicionar essa funcionalidade no nosso menu?

Vimos no tutorial passado como iniciar a implementação de um menu. Adicionamos uma imagem de fundo, uma logo para o nosso jogo e três botões, sendo que somente o botão “Sair” possuía funcionalidade. Nesse tutorial criaremos uma tela de opções e adicionaremos nessa tela duas funcionalidades: uma que liga e desliga a música e uma que diz em qual dificuldade o jogo está.

Primeiramente, vamos abrir o nosso código do tutorial passado. Caso você não fez o tutorial passado, então o faça para que possamos dar continuidade. Abra o arquivo “HelloWorldScene.cpp” que vamos excluir alguns códigos que se tornarão desnecessários a partir de agora. Nesse arquivo, apague todas as linhas de código partindo dessas linhas (inclusive):

// ask director the window size

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

até essa linha (inclusive):

addChild(sair);

Por que excluímos isso tudo? No tutorial passado nós adicionamos esse bloco de código para mostrar a imagem de fundo, a logo do jogo e os botões com seus textos. Agora que vamos incluir as funcionalidades, faremos esse procedimento toda vez que o menu principal é mostrado na tela. Dessa forma, todo esse código estará dentro de uma única função e apenas a chamaremos quando precisarmos. Tudo em prol do reuso de código. ;D

Já que estamos com esse arquivo aberto, aproveitem e adicionem mais dois trechos de código. No mesmo lugar onde você apagou o código anterior, adicione as seguintes linhas de código:

HelloWorld::musica = true;

HelloWorld::dificildade = 1;

HelloWorld::menuPrincipal();

No final do arquivo, adicione o código a seguir:

void HelloWorld::menuPrincipal() {

    removeAllChildren();

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

    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,menu_selector(HelloWorld::menuOpcoes));

    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);

}

void HelloWorld::menuOpcoes() {

    removeAllChildren();

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

    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();

    HelloWorld::musicaBt = CCMenuItemImage::create(“botaoNormal.png”,“botaoClicado.png”,

        this,menu_selector(HelloWorld::menuLigaDesligaMusica));

    HelloWorld::musicaBt->setPosition(ccp(-size.width/4,size.height/4));

    HelloWorld::musicaBt->setScale(((float)size.width)/(3*HelloWorld::musicaBt->boundingBox().size.width));

    if(HelloWorld::musica)

        HelloWorld::musicaBt->selected();

    else

        HelloWorld::musicaBt->unselected();

    menu->addChild(HelloWorld::musicaBt);

    CCMenuItemImage* item2 = CCMenuItemImage::create(“botaoNormal.png”,“botaoClicado.png”,

       this,menu_selector(HelloWorld::menuMudaDificuldade));

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

    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::menuPrincipal));

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

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

    menu->addChild(item3);

    addChild(menu);

    HelloWorld::musicaBtTxt = CCLabelTTF::create(“”,“”,28);

    if(HelloWorld::musica)

        HelloWorld::musicaBtTxt->setString(“Ligado”);

    else

        HelloWorld::musicaBtTxt->setString(“Desligado”);

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

    addChild(HelloWorld::musicaBtTxt);

    HelloWorld::dificuldadeBtTxt = CCLabelTTF::create(“”,“”,28);

    if(HelloWorld::dificildade==1)

        HelloWorld::dificuldadeBtTxt->setString(“Facil”);

    else if(HelloWorld::dificildade==2)

        HelloWorld::dificuldadeBtTxt->setString(“Medio”);

    else

        HelloWorld::dificuldadeBtTxt->setString(“Dificil”);

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

    addChild(HelloWorld::dificuldadeBtTxt);

    CCLabelTTF* voltarBt = CCLabelTTF::create(“Voltar”,“”,28);

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

    addChild(voltarBt);

    CCLabelTTF* musica = CCLabelTTF::create(“Musicas”,“”,28);

    musica->setPosition(ccp(size.width/4,(3*size.height)/4+0.65*HelloWorld::musicaBt->boundingBox().size.height));

    musica->setColor(ccc3(0,0,0));

    addChild(musica);

    CCLabelTTF* dificuldade = CCLabelTTF::create(“Dificuldade”,“”,28);

    dificuldade->setPosition(ccp((3*size.width)/4,size.height/4+0.65*item3->boundingBox().size.height));

    dificuldade->setColor(ccc3(0,0,0));

    addChild(dificuldade);

}

void HelloWorld::menuLigaDesligaMusica() {

    HelloWorld::musica = !HelloWorld::musica;

    if(HelloWorld::musica) {

        HelloWorld::musicaBt->selected();

        HelloWorld::musicaBtTxt->setString(“Ligado”);

    }

    else {

        HelloWorld::musicaBt->unselected();

        HelloWorld::musicaBtTxt->setString(“Desligado”);

    }

}

void HelloWorld::menuMudaDificuldade() {

    HelloWorld::dificildade++;

    if(HelloWorld::dificildade==4)

        HelloWorld::dificildade=1;

    if(HelloWorld::dificildade==1)

        HelloWorld::dificuldadeBtTxt->setString(“Facil”);

    else if(HelloWorld::dificildade==2)

        HelloWorld::dificuldadeBtTxt->setString(“Medio”);

    else

        HelloWorld::dificuldadeBtTxt->setString(“Dificil”);

}

O que fizemos nessas duas modificações? Primeiramente utilizamos duas variáveis controladoras, uma para ligar e desligar as músicas e outra para selecionar o nível do jogo. Nesse caso, criamos uma variável chamada “musica”, que é verdadeira se a música está ligada e outra chamada “dificuldade” que define o nível de dificuldade do jogo. Notem que, no segundo trecho de código, implementamos quatro funções: “menuPrincipal”, “menuOpcoes”, “menuLigaDesligaMusica” e “menuMudaDificuldade”. A função “menuPrincipal” limpa toda a tela e adiciona os elementos do menu principal. A função “menuOpcoes” limpa toda a tela e adiciona os elementos das opções do jogo. A função “menuLigaDesligaMusica” muda o status do botão de música, deixando-o amarelo se a música está ligada ou deixando-o azul se a música está desligada. Por último, a função “menuMudaDificuldade” modifica a dificuldade, essa mostrada no próprio botão, que pode variar entre “Facil”, “Medio” e “Dificil”. Note que, cada clique em um botão, é disparada uma dessas funções.

Para finalizar, abra o arquivo “HelloWorldScene.h” e adicione as seguintes linhas de código:

bool musica;

int dificildade;

cocos2d::CCMenuItemImage* musicaBt;

cocos2d::CCLabelTTF* musicaBtTxt;

cocos2d::CCLabelTTF* dificuldadeBtTxt;

logo abaixo dessa linha:

CREATE_FUNC(HelloWorld);

Agora salve o arquivo, compile e o execute. Perceba que o botão “Opcoes” tem funcionalidade agora. Se você clicar nele, o menu opções é aberto. O menu apresentado é algo parecido com o que é mostrado na Figura 1. O que acontece quando o botão “Opcoes” é clicado? A função “menuOpcoes” é chamada e, por causa disso, tudo o que tinha do menu principal é retirado da tela, são adicionados esses outros botões, fundo e logo. O mesmo acontece se for clicado em “Voltar”, a função “menuPrincipal” é chamada e tudo é removido da tela, seguido da inclusão de todos os elementos do menu principal.

Figura 1 - Menu opções

Figura 1 – Menu opções

Se o botão de música for clicado, a função “menuLigaDesligaMusica” é chamada. Isso faz com que o botão tenha fundo amarelo (selecionado) se a música foi ligada eu azul caso contrário. É mudado também o texto do botão, que varia entre “Ligado” e “Desligado”. Se o botão de dificuldade for clicado, ele muda o seu texto, que varia entre “Facil”, “Medio”, e “Dificil”.

Caso você aplique esse menu no seu game, basta implementar uma função que inicia o jogo e fazer o botão “Novo Jogo” chamá-la. Simples, não? =]

 

Vimos nesse tutorial como adicionar as funcionalidades nos botões no menu de um jogo. Criamos quatro funcionalidades: uma que mostra o menu principal na tela, outra mostrando o menu de opções na tela, a terceira que liga e desliga a música e a última que muda a dificuldade do jogo.

No próximo tutorial nós voltaremos a implementar um jogo conhecido. Só não sei ainda qual. =P

Falow pessoal, um grande abraço. []

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