Tutorial: Criando um jogo ao estilo Arkanoid – Parte 2: Movimentando a pá

Iniciamos a implementação de um novo game, mas ainda não fizemos nada de interessante.

Hoje implementaremos a principal funcionalidade dele: a movimentação da pá conforme a angulação do aparelho.

Partiu programar.

 

No último tutorial conhecemos sobre o jogo Arkanoid (créditos a Taito). Vimos que ele é um game antigo, porém muito divertido e que inspirou a criação de vários outros jogos similares. Também criamos um projeto do Cocos2d-x para iniciarmos a programação e adicionamos na tela os Sprites que serão os elementos do nosso game. Nesse tutorial nós implementaremos a movimentação da pá que faz com que a bola de fogo não saia da tela. Para criamos algo diferenciado, a pá se movimentará de acordo com a angulação do aparelho. Precisaremos utilizar os acelerômetros para isso.

Vamos iniciar a programação abrindo o código do tutorial passado. Se você não o fez, por favor, faça-o para que possamos continuar a partir daqui. Primeiramente, abra o arquivo “HelloWorldScene.h” e adicione as seguintes linhas do código:

cocos2d::CCSprite* pa;

void didAccelerate(cocos2d::CCAcceleration *pAccelerationValue);

logo abaixo dessa:

void menuCloseCallback(CCObject* pSender);

Agora abra o arquivo “HelloWorldScene.cpp” e mude essa linha de código:

CCSprite* pa = CCSprite::createWithSpriteFrameName(“pa.png”);

para isso:

pa = CCSprite::createWithSpriteFrameName(“pa.png”);

O que fizemos até o momento? Primeiramente criamos uma referência ao objeto da pá, para que possamos modificar a sua posição cada vez que houver uma movimentação no aparelho. Na próxima modificação, acionaremos os acelerômetros e reposicionaremos a pá a cada mudança na angulação do aparelho.

Ainda no mesmo arquivo, adicione a seguinte linha de código:

setAccelerometerEnabled(true);

logo abaixo dessa linha:

addChild(bloco);

Acabamos de acionar os acelerômetros. Agora, para que a pá seja reposicionada cada vez que a angulação do aparelho é modificada, adicione ao final do arquivo as seguintes linhas de código:

void HelloWorld::didAccelerate(CCAcceleration *pAccelerationValue) {

    float localizacaoTela = pAccelerationValue->x;

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

    if(localizacaoTela<-0.5)

        localizacaoTela = -0.5;

    else if(localizacaoTela>0.5)

        localizacaoTela = 0.5;

    HelloWorld::pa->setPosition(ccp(size.width/2 + localizacaoTela*(size.width – HelloWorld::pa->boundingBox().size.width),0.1*size.height));

}

O que fizemos no método acrescentando “didAccelerate”? Ele é chamado cada vez que o aparelho sofre uma movimentação, essa detectada pelos acelerômetros. Perceba que, inicialmente, capturamos o valor da angulação e o limitamos aos valores -0,5 e +0,5. Caso você não entenda como é feita a captura dos valores dos acelerômetros, veja esse tutorial que explica melhor sobre isso. Limitamos a angulação a um valor entre -0,5 e +0,5, de forma que o jogador possa ver o jogo no momento em que a pá esteja em um dos cantos da tela. Logo após, posicionamos a pá no lugar correto. Agora basta compilar e ver o resultado. O efeito que temos é algo parecido com o que é mostrado no vídeo a seguir. Legal, né!? =]

Vimos nesse tutorial como capturar a angulação dos acelerômetros e como posicionar a pá que não deixa a bola de fogo sair da tela. Perceba que a interação com o jogo já está implementada. Basta fazermos a bola de fogo se movimentar na tela e adicionarmos mais blocos para que sejam destruídos por ela. Mas isso são temas para tutoriais posteriores. Mais especificamente, no próximo tutorial, veremos como fazer a movimentação da bola de fogo e a resposta da colisão dela com as paredes e com a pá.

Por hoje é isso, pessoal, 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.