Tutorial: Desenvolvimento de Jogos para Android com Cocos2d-x – Parte 4

O que você acha de fazermos um personagem qualquer andar na tela do aparelho Android?

Ou quem sabe fazer uma animação de um tiro?

Que tal implementarmos um inimigo que anda na direção do jogador?

Vamos fazer algo assim hoje? o/

No último tutorial nós conhecemos um dos principais elementos existentes em jogos eletrônicos: os Sprites. Vimos do que se trata um Sprite e como podemos implementá-los utilizando o motor gráfico Cocos2d-x. Mostrei também como realizar um tipo específico de animação com Sprites: aquelas que envolvem trocas consecutivas de imagens.

Nesse tutorial eu mostrarei como realizar outro tipo de animação: aquela que movimenta o Sprite na tela do dispositivo. Para que vocês possam fazer o tutorial de hoje, é necessário que vocês façam primeiramente o anterior. Hoje nós reutilizaremos o código obtido no fim do tutorial passado. Bora lá?

 

Actions

Antes de sair codificando, vamos entender um pouco do que fizemos no tutorial passado e no que vamos fazer nesse. Em ambos os tutoriais utilizamos Actions. Action é uma classe do Cocos2d-x responsável por descrever algum tipo de ação possível de ser realizada com um objeto gráfico. Qualquer efeito gráfico possível de ser realizado com um Sprite, por exemplo, pode ser definido por meio de Actions.

Existem diferentes Actions, cada uma para realizar uma coisa diferente. Aquelas que movimentam um Sprite na tela (CCMoveTo e CCMoveBy), que escalonam um Sprite (CCScateTo e CCScaleBy), que rotacionam um Sprite (CCRotateTo e CCRotateBy) e por aí vai.

No tutorial passado, nós definimos e executamos duas Actions ao mesmo tempo nessa parte do código:

sprite->runAction(

      CCRepeatForever::create(

      CCAnimate::create(

      CCAnimation::createWithSpriteFrames(ar,0.15))));

A primeira Action foi definida pela classe CCAnimate, sendo essa uma classe Action especializada em criar animações de trocas de imagens em Sprites. A segunda Action foi definida pela classe CCRepeatForever, que é uma classe Action especializada em definir infinitas repetições. Para não ficar sem explicação, a classe CCAnimation não é uma Action, mas especifica uma sequência de imagens que geram uma animação. Ao final, nós definimos uma sequência de imagens (Sprite Frames) de animação, criamos uma Action que envolva essa troca e por fim adicionamos uma ação de repetição infinita da animação.

Para fazermos o nosso MegaMan (créditos a Capcom) andar, basta criarmos uma Action especializada em realizar movimentações de Sprites na tela. Simples, não? Essa Action que precisamos é a CCMoveBy. Dessa forma, logo abaixo do trecho de código que eu acabei de explicar, coloque o seguinte código:

sprite->runAction(

      CCMoveBy::create(3,ccp(size.width/2 – sprite->boundingBox().size.width/2,0)));

Nesse código eu estou executando mais uma Action no Sprite que eu criei do MegaMan. Essa Action é aquela responsável por descrever o movimento do Sprite na tela. O primeiro parâmetro, nesse caso o valor 3, especifica o tempo que dura a animação de movimento na tela. Já o segundo parâmetro eu vou explicar no próximo tópico.

 

Tela e Sistema de Coordenadas

Lembra das aulas de sistemas de coordenadas que vocês tiveram? Então … aqui está uma boa aplicação de toda aquela matemática. =]

O Cocos2d-x trata a tela do celular como um sistema de coordenadas e os Sprites como se fossem pontos nesse sistema. Dessa forma, basta posicionarmos o nosso Sprite em um ponto e fazermos ele andar até outro ponto em três segundos, por exemplo. A Figura 1 mostra um exemplo de um Sprite posicionado no ponto (20,20). Como é possível ver, o ponto referência do Sprite é exatamente o seu centro e os eixos do sistema de coordenadas é aquele mesmo que vocês aprenderam em matemática. É possível ver também que a origem do sistema (o ponto (0,0)) está sobre o canto inferior da tela do seu celular. Vale lembrar que na mesma figura nós estamos tomando como base um aparelho deitado.

Figura 1 – Sistema de coordenadas do Cocos2d-x

Voltando ao código:

sprite->runAction(

      CCMoveBy::create(3,ccp(size.width/2 – sprite->boundingBox().size.width/2,0)));

O segundo parâmetro do CCMoveBy é justamente um ponto que representa o quanto o Sprite deve se mover horizontalmente e verticalmente, nessa ordem. Como vocês podem ver, eu movi meia largura de tela para a direita (size.width/2) e reduzi metade da largura do Sprite (sprite- >boundingBox().size.width/2) para ele parar exatamente no fim da tela e não ficar com somente metade dele na tela.

Quando efetuamos o runAction, o Sprite executa o Action na mesma hora. Dessa forma, logo quando a aplicação rodar, ele fará com que o Sprite já inicie o movimento pela tela. Compile o código e execute (se você não lembra ou não sabe como, veja nesse tutorial) para ver a animação. =]

Podemos então começar a pensar em como utilizar esses recursos a nosso favor. Se o MegaMan atirar, por exemplo, podemos criar um Sprite para o tiro e fazê-lo andar até o final da tela com uma Action. Legal né? ;D

Nesse tutorial nós vimos como realizar outro tipo de animação com Sprites: a movimentação deles no ambiente. Vimos também como funcionam as Actions e como o mundo do Cocos2d-x é representado (por um sistema de coordenadas). No próximo tutorial nós veremos um outro elemento importante nos jogos: as HUDs (elementos que mostram vida, tempo e essas coisas, além de botões de interação) e interação com a tela de toque. Vamos fazer esse MegaMan atirar quando apertarmos em um botão na tela. *.*

Por hoje é só, pessoal … nos vemos no próximo tutorial.

Santiago Viertel

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