MXStudio » Flash » Criação de Games – Simulação Física (Gravidade)

Criação de Games – Simulação Física (Gravidade)


Criação de games – Simulação física (Gravidade)

Olá comunidade MXSTUDIO,

Estou de volta com um tutorial que mostrar para você como utilizar a física na simulação de movimentos realísticos em seu game. Apresentarei o efeito em si, fica a seu cargo modificar o código para se adequar a seu jogo.

Pré-requisitos:

Conhecimento básico em ActionScript 2.0

Macromedia Flash 8

Objetivo:

O objetivo deste tutorial é que você, ao término dele possa entender como criar efeitos reais em seu game. O efeito que veremos é o da gravidade, a colisão inelástica e elástica de uma bola quando esta colide com uma parede, solo ou qualquer outra superfície. Todas neste tutorial podem ser acionadas apenas clicando na bolinha arrastando para jogá-la onde quiser. Veja abaixo o produto final de nosso tutorial:

Conceitos:

Os conceitos que serão vistos aqui, são mais de aplicação da física em simulações que podem ser usadas para tornar seu game ainda mais legal e viciante. Dentre os conceitos que serão apresentados podemos destacar o da gravidade, coeficiente de restituição, colisão elástica e ineláslitca.

Conteúdo

Inicialmente baixe os arquivos que disponibilizei no final deste tutorial. Abra o Macromedia Flash 8 e crie um documento flash novo apertando CTRL + N. Agora crie um novo símbolo do tipo button apertando CTRL + F8, coloque o nome de bola_drag. Com o botão no modo de edição vá em file -> import -> import to library. Importe a imagem a imagem que está nos arquivos que você baixou, o arquivo se chama bola_golf.jpg. Quando importar a imagem irá aparecer na sua library, portanto arraste essa imagem para o centro do stage de edição do botão e posicione nos valores mostrados na figura abaixo::

ajustes
Figura 1 – Dimensões e a posição da imagem

Pronto, insira novamente um novo símbolo do tipo movie clip e dê o nome bola. Com esse movie clip vazio aberto coloque ao centro o botão que acabamos de fazer, coloque o mesmo tamanho e posição que está na imagem acima. Depois de posicionar, dê um clique nesse botão bola_drag e coloque o seguinte código:

on (press)
{
arrastando = true;
startDrag(this, true);
}
on (release, releaseOutside)
{
arrastando = false;
stopDrag();
}

Volte à cena principal e crie duas layers: uma chamada Action e outra chamada Bola, na layer chamada Bola você irá até a library e arrastar o mc chamado bola que acabamos de fazer para o centro do stage, caso tenha dúvida olhe só como ficou a disposição das layers:

layers
Figura 2 – Layers da simulação .

Note também que na figura acima vc irá ver o frame rate que utilizei nesta simulação, coloquei 36 fps, quanto maior melhor fica a simulação. No frame 1 da layer Action coloque o seguinte código:

maxWidth = Stage.width-5;
maxHeight = Stage.height-5;
stop();

Agora Vamos ao código que realmente faz a simulação física que implementaremos, o código mostrado a seguir implementa uma teoria vista em física, pretendo apenas mostrar um breve conceito do que o código faz, fica a seu cargo estudar mais a fundo essa teoria.

onClipEvent (load)

{
gravidade = 10; // valor da gravidade
restituicao = 0.89; //coeficiente de restituição
raio = this._width/2; //raio da bolinha
vx = 140; //valor inicial da velocidade em X
vy = 140; //valor da velocidade inicial em Y
}
onClipEvent (enterFrame)
{
/*pega a ultima posição ocupada pela bolinha
* no instante anterior ao corrente
*/
oldx = x;
oldy = y; /* armazena a atual posição da bolinha na tela*/
x = this._x;
y = this._y;

/* Verifica se o usuário está arrastanto a bolinha*/
if (arrastando)
{
/*pega a variação de posição da bolinha*/
vx = (x-oldx);
vy = (y-oldy);
}
else
{
vy += gravidade; //aplica o efeito de gravidade
x += (vx/10); //aplica a velocidade em X
y += (vy/10); //aplica a velocidade em Y

/*Verificação de colisão com as bordas do Stage*/
if (y < raio) //SUPERIOR
{
y = raio;
vx *= restituicao;
vy *= -restituicao;//muda o sentido da velocidade em Y
}
if (y > (_root.maxHeight-raio)) //INFERIOR
{
y = _root.maxHeight-raio;
vx *= restituicao;
vy *= -restituicao;
}
if (x < raio) //ESQUERDA
{
x = raio;
vx *= -restituicao;
vy *= restituicao;
}
if (x > (_root.maxWidth-raio)) //DIREITA
{
x = _root.maxWidth-raio;
vx *= -restituicao;
vy *= restituicao;
}
/* atualiza a posição da bolinha*/
this._x = x;
this._y = y;
}
}//adaptado flashGuru

Entendo o código

As variáveis que o código utiliza são todas variáveis de expressões físicas. A gravidade dispensa explicações; vx e vy são respectivamente velocidade no eixo x e y; raio é o raio da bolinha e por fim a restituicao responsável pelo efeito ‘quicar’ da bolinha. Formalizando essa variável restituição ela é obtida fazendo a divisão entre a velocidade v2 depois da colisão com a velocidade v1 antes da colisão. Veja abaixo várias formas de se obter o valor do coeficiente de restituição:

ajustes
Figura 3 – Formalização matemática

Minhas desculpas aos que não gostam de física ou matemática, mas é preciso dessa formalização para entender por que o código foi implemementado daquela forma. A diferença entre o código e a formalização é que já temos de antemão o valor do coeficiente de restituição e o valor da velocidade v1 logo para obtermos a velocidade v2 que é após a colisão basta multiplicarmos a velocidade atual pelo coeficiente de restituição. As linhas 35, 36, 41, 42, 47, 48, 53 e 54 fazem exatamente o cálculo de v2 baseado na velocidade v1. E veja que o coeficiente somente é utilizado no cálculo da velocidade quando há uma colisão. O coeficiente é um número sem unidade, ou seja, é adimensional, variando entre 0 e 1.

Vejamos agora algumas curiosidades:

Com coeficiente de restituição igual a 1 temos que a bolinha nunca irá parar de bater nos limites da simulação. Pois a bolinha ao bater nos limites não irá perder sua velocidade.

Agora coeficiente maior que 1, a bolinha ganha velocidade.

Gravidade com sinal modificado, ou seja, as coisas agora caem pra cima.

E por fim sem gravidade. A bolinha vai batendo nos limites até parar sem cair.

Considerações Finais

Bom espero que tenham entendido um pouco dessa aula de física, pois para programar um efeito desse é preciso que se entenda pelo menos o básico, com certeza com o que foi mostrado aqui neste tutorial somado a sua criatividade muitos games legais podem ser feitos. Modifique os valores das variáveis do problema e observe os resultados como eu fiz acima.


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

Autor: Márcio Silva – Colunista de Flash & ActionSctipt MXSTUDIO.

Download dos arquivos

Qualquer dúvida envie um e-mail para marciosilva@mxstudio.com.br ou acesse nosso fórum


8 Comments to Criação de Games – Simulação Física (Gravidade)

  1. nonato reis's Gravatar nonato reis
    Abril 28, 2008 at 3:18 pm | Permalink

    sou professor de física e gostaria de aprendr mais sobre animações em física no flash.Onde psoos encontrar tal material.Obrigado

  2. Outubro 20, 2008 at 6:51 pm | Permalink

    Olá, gostaria de pedir ajuda, eu coloquei a bola em gravidade em uma animação flash e a bola simplesmente caiu e desapareceu. Por favor, me explique e mande a resposta para o meu e-mail: alexfilipe_cbs@cidadedamatematica.com.br

    Desculpe o transtorno.

  3. Janeiro 26, 2009 at 12:55 pm | Permalink

    a minha duvida eh parecidacom a do Álex Filipe, to começando a meche com esse assunto de jogos, eu gostaria de aprender fazer um joguinho no estilo pacman, soh q naum estou conceguindo fazer as paredes… você poderia da uma força ai… vlw

  4. Jhunior's Gravatar Jhunior
    Março 20, 2009 at 9:12 am | Permalink

    Otimo! estou aprendendo a programar, e vendo esses tutoriais esta agilizando meu conhecimento! quem enrola fala, quem sabe mostra! parabens é tudo de bom.

  5. SergioCruz's Gravatar SergioCruz
    Março 20, 2009 at 4:45 pm | Permalink

    Excelente!

    Codigo 100% aproveitavel.

  6. Abril 13, 2009 at 8:20 pm | Permalink

    Muito bom mesmo!
    tenho uma duvida muito importance:
    queria fazer um movieclip que o hittest detectase como parede, um mc com hittest da bola, que fizesse ela kikar, fiz uma script de movimentação que força a bola para um determinado local, e precisava saber como faz isto… ;/ por que assim fica meio inutil ;/ não tem pra quer botar uma bola picante que só fica batendo nas laterais da pagina ;/

  7. Komodo's Gravatar Komodo
    Junho 25, 2009 at 10:07 am | Permalink

    Gostaria de saber como faço para criar um outro objeto que tivesse uma interação com a bola. Ex: Um taco de Baseball.

    Muito bom esse Tuto, Parabéns mesmo.

    Aguardo retorno.

  8. gobs's Gravatar gobs
    Março 2, 2010 at 11:23 am | Permalink

    onde eu coloco o codigo da fisica ?? o onClipEvent (load)

Deixe um Comentario

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">

Marcio Silva

Formado em Ciência da Computação pela Universidade Federal de Mato Grosso do Sul (UFMS) em 2007. Atualmente faz o curso de mestrado em Ciência da Computação na UFMS. Atua como Analista de Sistemas, fundador do Creative Render, portal voltado para o mundo 3D (www.creativerender.com).

Últimos Artigos do Autor