Tutorial: Criando um jogo ao estilo Arkanoid – Parte 3: Movimentando a bola de fogo

Vimos um efeito legal na pá do nosso Arkanoid.

Ainda assim, estamos um pouco longe de terminar o desenvolvimento do nosso game.

Vamos implementar o próximo recurso indispensável de todo jogo nesse estilo: a movimentação da bolinha.

No último tutorial nós fizemos a pá se movimentar de um lado para o outro conforme a angulação do aparelho. Para isso, precisávamos acionar os acelerômetros do dispositivo e reposicionar a pá a cada mudança de angulação dele. Veremos nesse tutorial como incluir a movimentação na bola de fogo. Para não deixar esse tutorial muito longo, não implementaremos a detecção e a resposta de colisão da bola de fogo com a pá e com os blocos amarelos que devem ser destruídos. Faremos apenas a bola de fogo andar e rebater nas bordas da tela do aparelho.

Primeiramente, abra o código editado até então. Caso você não fez o tutorial passado, por favor, faça-o para darmos continuidade nesse. Faremos agora as modificações necessárias no arquivo “HelloWorldScene.h”. Abra-o e adicione as seguintes linhas de código:

cocos2d::CCSprite* bola;

float vetorDirecao[2];

void moveBola(float dt);

logo abaixo dessa:

cocos2d::CCSprite* pa;

Acabamos de criar uma referência que será utilizada para editarmos a posição da bola de fogo a cada novo quadro mostrado na tela. Criamos também um vetor que será utilizado para indicar a direção que a bola de fogo anda. Esse vetor é composto por dois valores reais, um para a coordenada x e um para a coordenada y, e o seu módulo, ou seja, o seu tamanho, sempre será igual a 1. Isso é importante para que a velocidade que a bola de fogo anda sempre permaneça a mesma. A Figura 1 mostra como o vetor direção é composto e mostra que o seu tamanho é igual a 1.

Figura 1 - Vetor direção da bola de fogo

Figura 1 – Vetor direção da bola de fogo

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

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

para essa:

bola = CCSprite::createWithSpriteFrameName(“bolaFogo.png”);

Essa mudança serviu apenas para possuirmos uma referência para a bola de fogo. Relembrando, isso é necessário para que possamos reposicioná-la a cada novo quadro mostrado na tela. Agora, adicione as seguintes linhas de código:

HelloWorld::vetorDirecao[0] = sqrt(2)/2;

HelloWorld::vetorDirecao[1] = sqrt(2)/2;

schedule(schedule_selector(HelloWorld::moveBola));

logo abaixo dessa:

setAccelerometerEnabled(true);

Nesse código incluso, inicializamos o vetor direção. As coordenadas x e y do vetor foram igualadas ao valor do seno de 45º. Fazendo isso, deixamos o vetor direção apontando 45º na diagonal superior direita e com o seu tamanho igual a 1. Na última linha adicionada, requisitamos ao Cocos2d-x que o método “moveBola” seja chamado a cada novo quadro mostrado. Não é preciso dizer que movimentaremos a bola de fogo nesse método, né?!

Para finalizar, adicione as seguintes linhas de código no final do arquivo.

void HelloWorld::moveBola(float dt) {

    static float velocidade = 320;

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

    HelloWorld::bola->setPosition(ccp(HelloWorld::bola->getPositionX() + velocidade*dt*HelloWorld::vetorDirecao[0],HelloWorld::bola->getPositionY() + velocidade*dt*HelloWorld::vetorDirecao[1]));

    if((HelloWorld::bola->getPositionX()+HelloWorld::bola->boundingBox().size.width/2>=size.width&&HelloWorld::vetorDirecao[0]>0) ||

      (HelloWorld::bola->getPositionX()-HelloWorld::bola->boundingBox().size.width/2<=0&&HelloWorld::vetorDirecao[0]<0))

        HelloWorld::vetorDirecao[0] = -HelloWorld::vetorDirecao[0];

    if((HelloWorld::bola->getPositionY()+HelloWorld::bola->boundingBox().size.height/2>=size.height&&HelloWorld::vetorDirecao[1]>0) ||

      (HelloWorld::bola->getPositionY()-HelloWorld::bola->boundingBox().size.height/2<=0&&HelloWorld::vetorDirecao[1]<0))

        HelloWorld::vetorDirecao[1] = -HelloWorld::vetorDirecao[1];

}

Nessas linhas de código adicionadas implementamos uma pequena movimentação no Sprite da bola de fogo a cada novo quadro. Como o método “moveBola” é chamado constantemente e como em cada vez que ele é chamado a bola sofre uma movimentação pequena, então o jogo cria o efeito visual de que a bola de fogo está em movimentação. Esse reposicionamento é realizado na quarta linha desse último bloco de código inserido. Ali foi aplicado o conceito de movimento uniforme, aquele que você aprendeu ou aprenderá em física no ensino médio. Um espaço percorrido em um determinado tempo é calculado pela multiplicação da velocidade do objeto pelo tempo passado. Note que multiplicamos a velocidade, que nesse caso igualamos a 320 pixels por segundo, por “dt”, que é a variação de tempo em segundos entre um quadro apresentado e o anterior. Para darmos a direção na bola de fogo, multiplicamos também pela respectiva coordenada do vetor direção. Isso faz com que a bola ande a 320 pixels por segundo na direção do vetor direção. Massa, né. =]

Como não queremos que a bola de fogo saia da tela, então precisamos implementar as paredes. Se a bola sair dos limites da tela, apenas invertemos a coordenada do vetor direção para que a bola seja rebatida. A junção disso tudo resulta na movimentação da bola de fogo que rebate sempre quando encontra um limite da tela. A Figura 2 mostra o resultado final, onde é possível ver que a bola de fogo não se encontra mais no centro da tela porque ela está em movimento no momento da captura.

Figura 2 - Jogo em execução

Figura 2 – Jogo em execução

Vimos nesse tutorial como implementar a movimentação da bola de fogo. Para isso, precisamos de um vetor direção para guiar o destino da bola e precisamos implementar os limites da tela para que a bola não saia do campo de visão do jogador. Vimos que, para fazer a bola andar com uma certa velocidade, precisávamos aplicar o conceito de movimento uniforme, esse especificado na física.

No próximo tutorial veremos como adicionar os efeitos de colisão da bola de fogo com a pá e com os objetos no campo. Para isso teremos que adicionar mais objetos e, claro, verificar a cada momento se há colisão entre a pá e a bola de fogo e se há colisão entre os objetos amarelos e a bola de fogo. Deixaremos para especificar melhor no próximo tutorial.

Por hoje é isso, povo. Nós 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