Criação de games – Conceitos Matemáticos e aplicações

Olá ,

Vamos a um tutorial que vai ensinar um pouco de matemática aplicada ao mundo da criação de games em flash.

Pré-requisitos:

Conhecimento básico em ActionScript 3.0
Macromedia Flash CS3

Objetivo:

O objetivo principal é que você entenda teoria envolvida aplicada à prática, não adianta você sair copiando e colando código daqui e não entender nada do que o código faz. Não só a pegunta é como fazer deve ser respondida, mas também por que funciona. Recomendo que não pule a parte teórica deste tutorial, pois é basicamente a explicação do código, demonstrando que ele realmente funciona e tem embasamento teórico da nossa querida matemática:

Conceitos:

Os conceitos que serão abordados são basicamente a utilização de Action Script 3.0 aliado à trigonometria, para montar um exemplo simples de movimentação que pode ser a chave para a criação de games de tanque de guerra por exemplo, que atira e gira para todos os lados com seu canhão. Existem diversos joguinhos na Internet que usam este conceito.

Conteúdo

Primeiro vamos criar o tanque de guerra, para isso crie um documento novo no seu Macromedia Flash CS3 (pressione CTRL + N), escolha a opção flash file action script 3.0. Após criado o documento, pressione CTRL + F8 para inserir um novo movie clip chamado Cannon, o movie clip que deverá ser criado é igual o que é mostrado abaixo, faça da cor e to tamanho que quiser. Mas atenção! Certifique-se que o centro de rotação do Canhão será o centro do círculo desenhado, pois seu canhão poderá rotacionar de forma degenarada (todo densengonçado). Para ficar certinho a rotação posicione o círculo bem ao centro. No meu exemplo, criei o circulo com height de 80px e width de 80px e com X e y posicionados em -40px:

Figura 1 – Posicionamento correto

Finalizado o Canhão, agora chega o momento de pensar como fazer a mira do canhão ficar seguindo o cursor do mouse. Será usada a trigonometria para fazer isso, você pode não lembrar de alguma coisa de trigonometria e querer pular esta parte, mas lá vai a exeplicação para não ter desculpa. Na figura 2 e 3 o ponto P indicado pode ser interpretado como o cursor do mouse e o ponto O como o centro do canhão. A diferença entre o ponto X do mouse menos o X do canhão é cosseno de alpha e a diferença entre o ponto Y do mouse menos o Y do canhão é o seno do ângulo alpha, esse ângulo alpha que precisamos para calcular a rotação do canhão usando a função tangente:

Figura 2 – Seno e cosseno. Fonte: http://www.brasilescola.com

Figura 3 – Tangente. Fonte: http://www.brasilescola.com

Lembrando que o plano catesiano nas coordenadas de vídeo o Y cresce para baixo, ao contrátio do convencional, logo devemos tomar alguns cuidados na hora de implementar. Abaixo segue o código que implementa o movimento do canhão. Antes disso vá na library onde está o movie clip Cannon e clique com o botão direito do mouse em cima dele, escolha Linkage e coloque como mostrado na figura, para que este movie clip possa ser instanciado no Action Script.

Figura 4 – Linkage.

Finalmente o código, ele simplesmente pega as coordadas do mouse e subtrai da posição do tanque, tanto na coordenada Y (seno) quanto em X (cosseno) e por fim calcula a tangente do ângulo alpha da figura 1 e 2.

1. /*Instância do canhão*/
2. var cannon_mc = new Cannon();
3. /*Será utilizado para posicionar o canhão*/
4. var dobj:DisplayObject = null;
5. /*adiciona o canhão ao palco e faz o correto posicionamento*/
6. dobj = addChild(cannon_mc);
7. dobj.x = 250;
8. dobj.y = 200;
9. dobj.width = 120;
10. dobj.height = 80;
11. /*adiciona evento de movimentação de mouse*/
12. parent.addEventListener(MouseEvent.MOUSE_MOVE, rotate);
13. function rotate(evt:MouseEvent):void
14. {
15.     /*Calcula o vetor em X (cosseno)(Ver figura 1)*/
16.    var mousex = evt.stageX-cannon_mc.x;
17.    /*Calcula o vetor em Y (seno)(Ver figura 1)
18.    * Multiplica por -1, coordenadas de vídeo para
19.    * coordenadas reais
20.    */
21.    var mousey = (evt.stageY-cannon_mc.y)*-1;
22.    /*Calcula a tangente*/
23.    var angle = Math.atan2(mousey, mousex);
24.     /*rotaciona, tranformando o angulo de radianos para graus
25.    * Pura matemática =)
26.    */
27.    cannon_mc.rotation = -angle*180/Math.PI;
28. }

Considerações Finais

Agora é só rodar e ver o resultado, esse conceito tem uma infinidade de aplicações, tudo depende da sua criatividade. Aprofundei apenas nos conceitos chaves, saber o que é um vetor ou o que é plano cartesiano fica um estudo a seu critério. Recomendo um estudo nos conceitos de trigonometria para que seus joguinhos fiquem cada vez mais legais e viciantes.

Nas próximas colunas abordarei mais conceitos matemáticos. Fazer um jogo de tabuleiro é fácil, agora fazer um que envolva física e matemática demanda um pouco mais de empenho de quem o faz, e consequentemente isso trará um impacto positivo para seus jogos. Do que seria os jogos de hoje, como Crysis ou Need For Speed Pro Street, sem a Matemática e a Física, os seus criadores possuem um intenso conhecimento sobre ambas áreas de conhecimento, não são meros programadores.

Espero que tenham gostado. Até a próxima.