Hoje vamos entender um pouco sobre como funcionam Games no Flash. Este artigo é o primeiro de uma sequência não linear (nesta série não comentarei sobre tipos de games, nem como prós e contras de desenvolver um game em Flash).

Primeiramente, vamos entender uma coisa: o Flash, ao contrário do que muitos pensam, não possui dezenas de efeitos prontos. A maioria, ou os melhores, deles são desenvolvidos usando ActionScript. Mas isso não significa que são códigos prontos, e sim muita lógica e matemática.

No desenvolvimento de games "perfeitos", devemos utilizar de várias fórmulas (sim, aquelas que todos lembramos da época escolar) como, por exemplo, aceleração, gravidade, encontrar a distância entre dois pontos, etc. Tudo isso envolve cálculos matemáticos com suas respectivas fórmulas e, neste artigo, começaremos a estudar um pouco mais a fundo sobre essa área tão interessante, que, com certeza, aperfeiçoa inclusive nossos códigos em web-sites e sistemas em Flash, proporcionando ao desenvolvedor entender e criar classes próprias como Bounce, Regular, Elastic, Fly, Zoom, entre outras.

Neste exemplo, vamos fazer um objeto que segue o mouse, como se estivesse "olhando" para ele.

Pré-Requisitos

Este artigo foi desenvolvido para usuários experientes do Flash, qualquer um pode fazer pois está passo-a-passo, mas seria interessante conhecer um pouco a linguagem ActionScript. O nível é Intermediário/Avançado.

Arquivo final

Objetivo

Aperfeiçoar técnicas de programação dentro do Flash 8.

Conteúdo

No Flash 8, abra um novo documento em branco, ou melhor, pegue papel, lápis e régua.

Para entender o exemplo acima, necessitamos entender inicialmente de trigonometria, seria bem legal ler um pouco sobre isso em livros esquecidos da época da escola, sim, vocês certamente lembrarão agora daquele negócio de "pra que aprender isso? Nunca vou usar na vida!".

Bem, voltando, estávamos questionando o porquê de aprender trigonometria. Trigonometria é a base de um game, é ela quem nos permite calcular colisões de objetos, aceleração, frenagem, calcular novas trajetórias para objetos, calcular ângulos, disparar tiros para determinados (e específicos) lugares, etc. Iremos ver isso constatemente nesta série.

Coordenadas Cartesianas

O Flash tem um sistema de coordenada cartesiana diferente do visto no colégio. Porém, a única mudança é no eixo y onde os valores positivos são incrementados para baixo e não para cima, ou seja, o inverso de nossa imagem abaixo:

Inclusive, entendendo esse tipo de assunto, facilita muito o entendimento de classes novas no Flash 8 como Point, Rectangle e Matrix.

Ângulos

Ângulos no Flash são utilizados de duas formas no Flash, com a propriedade _rotation da classe intrinsica MovieClip ou com funções trigonométricas. Ângulos são geralmente calculdados em grausº e possuem valores entre 0º e 360º.

Esses graus podem ser utilizados para fazer um relógio analógico, rotacionar um objeto, etc. No nosso caso servirá para seguir o mouse. Só encontramos um detalhe nesse caminho: no Flash, em todos os cálculos gerais para ângulos, necessitamos de radianos, nunca graus (com exceção a propriedade _rotation). Para isso, necessitamos da fórmula de conversão (radianos para graus ou o oposto).

Graus para Radianos: novoAngulo = angulo*(Math.PI/180);
Radianos para Graus: novoAngulo = angulo*(180/Math.PI);

Para o nosso caso

O mouse e a posição do eixo formam uma diagonal (hipotenusa), e podemos traçar duas retas perpendiculares que formam um triângulo (catetos). Basicamente, precisamos calcular a razão entre os catetos, catetoOposto(co)/catetoAdjacente(ca).

Isso nos dá a tangente do ângulo. Calculamos então o arco tangente (Math.atan) da tangente (tn), que nos dá o ângulo em radianos(ar). Tranformamos de radianos pra graus (grau = rad/(PI/180))

co = _root._xmouse-obj_mc._x;
ca = Math.abs(_root._ymouse-obj_mc._y);
tn = co/ca;
ar = Math.atan(tn);
an = ar/(Math.PI/180);
obj_mc._rotation = an;

Para facilitar nosso código, vamos fazer isso de maneira um pouco mais enxuta. Agora sim, no Flash, num documento em branco:

Desenhe um círculo com cor gradiente apontando para um dos cantos, de preferência o lado esquerdo:

Instancie o objeto com o nome de circle. Crie um layer de Actions e digite o código:

var circle:MovieClip;
onMouseMove = function ():Void {
var xPos:Number = circle._x-_xmouse;
var yPos:Number = circle._y-_ymouse;
//A diferença está aqui, não precisamos criar neste caso uma variável para armazenar a tangente, utilizamos o método atan2 e passamos os dois parametros para que ele calcule a tangente
var angle = Math.atan2(yPos, xPos);
//Conversão de radianos para graus
angle = angle*180/Math.PI;
circle._rotation = angle;
};
//Isso aqui é um incremento ao documento, serve para o objeto seguir a posição clicada pelo usuários nos eixos x e y
onMouseDown = function ():Void {
xFind = _xmouse;
yFind = _ymouse;
onEnterFrame = function ():Void {
circle._x += (xFind-circle._x)/10;
circle._y += (yFind-circle._y)/10;
};
};

Execute e teste passando o Mouse em volta do MovieClip e clicando sobre o stage posteriormente.

A primeira parte da introdução acaba aqui. Espero que tenham gostado, dúvidas ou sugestões são bem vindas.

Abraços e até a próxima!

Download dos arquivos