CCV_HEALbra
02-01-2008, 05:51 PM
Aew galera, vai aqui mais um tuto doido do mxstudio..o bacana são os flash de exemplo que o Márcio Silva (colunista do Mx Stúdio coloca!!)
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:
quality=high width=550 height=320]
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:
http://www.mxstudio.com.br/webgerenciador/colunas/marcioSilva_out07_gravidade_imagens/img1.jpg
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:
1. on (press)
2. {
3. arrastando = true;
4. startDrag(this, true);
5. }
6. on (release, releaseOutside)
7. {
8. arrastando = false;
9. stopDrag();
10. }
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:
http://www.mxstudio.com.br/webgerenciador/colunas/marcioSilva_out07_gravidade_imagens/img2.jpg
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:
1. maxWidth = Stage.width-5;
2. maxHeight = Stage.height-5;
3. 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.
1. onClipEvent (load)
2. {
3. gravidade = 10; // valor da gravidade
4. restituicao = 0.89; //coeficiente de restituição
5. raio = this._width/2; //raio da bolinha
6. vx = 140; //valor inicial da velocidade em X
7. vy = 140; //valor da velocidade inicial em Y
8. }
9. onClipEvent (enterFrame)
10. {
11. /*pega a ultima posição ocupada pela bolinha
12. * no instante anterior ao corrente
13. */
14. oldx = x;
15. oldy = y;
16. /* armazena a atual posição da bolinha na tela*/
17. x = this._x;
18. y = this._y;
19. /* Verifica se o usuário está arrastanto a bolinha*/
20. if (arrastando)
21. {
22. /*pega a variação de posição da bolinha*/
23. vx = (x-oldx);
24. vy = (y-oldy);
25. }
26. else
27. {
28. vy += gravidade; //aplica o efeito de gravidade
29. x += (vx/10); //aplica a velocidade em X
30. y += (vy/10); //aplica a velocidade em Y
31. /*Verificação de colisão com as bordas do Stage*/
32. if (y < raio) //SUPERIOR
33. {
34. y = raio;
35. vx *= restituicao;
36. vy *= -restituicao;//muda o sentido da velocidade em Y
37. }
38. if (y > (_root.maxHeight-raio)) //INFERIOR
39. {
40. y = _root.maxHeight-raio;
41. vx *= restituicao;
42. vy *= -restituicao;
43. }
44. if (x < raio) //ESQUERDA
45. {
46. x = raio;
47. vx *= -restituicao;
48. vy *= restituicao;
49. }
50. if (x > (_root.maxWidth-raio)) //DIREITA
51. {
52. x = _root.maxWidth-raio;
53. vx *= -restituicao;
54. vy *= restituicao;
55. }
56. /* atualiza a posição da bolinha*/
57. this._x = x;
58. this._y = y;
59. }
60. }//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:
http://www.mxstudio.com.br/webgerenciador/colunas/marcioSilva_out07_gravidade_imagens/img3.jpg
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.
quality=high width=550 height=320]
Agora coeficiente maior que 1, a bolinha ganha velocidade.
quality=high width=550 height=320]
Gravidade com sinal modificado, ou seja, as coisas agora caem pra cima.
quality=high width=550 height=320]
E por fim sem gravidade. A bolinha vai batendo nos limites até parar sem cair
quality=high width=550 height=320]
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. (http://www.mxstudio.com.br/apoio/upload/gravidade.zip)
Link do site: http://www.mxstudio.com.br/views.tutorial.php?act=view&cid=3&aid=1144
Muito tora esses tutos!!
acho muito massa galera!
bom proveito.
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:
quality=high width=550 height=320]
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:
http://www.mxstudio.com.br/webgerenciador/colunas/marcioSilva_out07_gravidade_imagens/img1.jpg
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:
1. on (press)
2. {
3. arrastando = true;
4. startDrag(this, true);
5. }
6. on (release, releaseOutside)
7. {
8. arrastando = false;
9. stopDrag();
10. }
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:
http://www.mxstudio.com.br/webgerenciador/colunas/marcioSilva_out07_gravidade_imagens/img2.jpg
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:
1. maxWidth = Stage.width-5;
2. maxHeight = Stage.height-5;
3. 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.
1. onClipEvent (load)
2. {
3. gravidade = 10; // valor da gravidade
4. restituicao = 0.89; //coeficiente de restituição
5. raio = this._width/2; //raio da bolinha
6. vx = 140; //valor inicial da velocidade em X
7. vy = 140; //valor da velocidade inicial em Y
8. }
9. onClipEvent (enterFrame)
10. {
11. /*pega a ultima posição ocupada pela bolinha
12. * no instante anterior ao corrente
13. */
14. oldx = x;
15. oldy = y;
16. /* armazena a atual posição da bolinha na tela*/
17. x = this._x;
18. y = this._y;
19. /* Verifica se o usuário está arrastanto a bolinha*/
20. if (arrastando)
21. {
22. /*pega a variação de posição da bolinha*/
23. vx = (x-oldx);
24. vy = (y-oldy);
25. }
26. else
27. {
28. vy += gravidade; //aplica o efeito de gravidade
29. x += (vx/10); //aplica a velocidade em X
30. y += (vy/10); //aplica a velocidade em Y
31. /*Verificação de colisão com as bordas do Stage*/
32. if (y < raio) //SUPERIOR
33. {
34. y = raio;
35. vx *= restituicao;
36. vy *= -restituicao;//muda o sentido da velocidade em Y
37. }
38. if (y > (_root.maxHeight-raio)) //INFERIOR
39. {
40. y = _root.maxHeight-raio;
41. vx *= restituicao;
42. vy *= -restituicao;
43. }
44. if (x < raio) //ESQUERDA
45. {
46. x = raio;
47. vx *= -restituicao;
48. vy *= restituicao;
49. }
50. if (x > (_root.maxWidth-raio)) //DIREITA
51. {
52. x = _root.maxWidth-raio;
53. vx *= -restituicao;
54. vy *= restituicao;
55. }
56. /* atualiza a posição da bolinha*/
57. this._x = x;
58. this._y = y;
59. }
60. }//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:
http://www.mxstudio.com.br/webgerenciador/colunas/marcioSilva_out07_gravidade_imagens/img3.jpg
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.
quality=high width=550 height=320]
Agora coeficiente maior que 1, a bolinha ganha velocidade.
quality=high width=550 height=320]
Gravidade com sinal modificado, ou seja, as coisas agora caem pra cima.
quality=high width=550 height=320]
E por fim sem gravidade. A bolinha vai batendo nos limites até parar sem cair
quality=high width=550 height=320]
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. (http://www.mxstudio.com.br/apoio/upload/gravidade.zip)
Link do site: http://www.mxstudio.com.br/views.tutorial.php?act=view&cid=3&aid=1144
Muito tora esses tutos!!
acho muito massa galera!
bom proveito.