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

Publicado por Marcio Silva em 30/09/2007

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


Assine o nosso Feed
1.281 assinantes,
assine você também!
Publique esse artigo no Twitter Salve este artigo no Delicious Cadastre esse artigo no Dihitt Cadastre esse artigo no UEBA Cadastre esse artigo no Rec6

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.

7 usuário comentou em " Criação de Games – Simulação Física (Gravidade) "

Assine o Feed de Comtentários ou URL de Trackback

nonato reis disse,
Enviado em 28-04-2008 às 3:18 pm

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

Álex Filipe disse,
Enviado em 20-10-2008 às 6:51 pm

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.

Vinicius disse,
Enviado em 26-01-2009 às 12:55 pm

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

Jhunior disse,
Enviado em 20-03-2009 às 9:12 am

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

SergioCruz disse,
Enviado em 20-03-2009 às 4:45 pm

Excelente!

Codigo 100% aproveitavel.

Gravyerd disse,
Enviado em 13-04-2009 às 8:20 pm

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 ;/

Komodo disse,
Enviado em 25-06-2009 às 10:07 am

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.

Deixe o seu comentário abaixo...

 Username (*required)

 Email Address (*private)

 Website (*optional)

 

MXStudio © 2003-2010. Todos os direitos reservados.
É expressamente proibido a cópia, reprodução e difusão dos textos, fotos e outros elementos contidos neste site sem autorização expressa do MXStudio.