Peredelski
Lord XPZ
[glow=red,2,300]~~ Pré-Requisitos ~~[/glow]
Conhecimento Básico em ActionScript 2.0/3.0
Macromedia Flash(MX ou Superior)
[glow=blue,2,300]~~ Objetivo ~~[/glow]
O objetivo deste tutorial é que você, ao término dele possa entender como criar efeitos reais. 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.
[glow=green,2,300]~~ Conceitos ~~[/glow]
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.
[glow=yellow,2,300]~~ Tutorial ~~[/glow]
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::
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/imagens_artigos/marcioSilva_out07_gravidade_imagens/img2.jpg[/FONT]
[FONT=arial]Figura 2 – Layers da simulação .[/FONT]
[FONT=arial]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:[/FONT]
[FONT=arial]1.maxWidth = Stage.width-5;[/FONT]
[FONT=arial]2.maxHeight = Stage.height-5;[/FONT]
[FONT=arial]3.stop();[/FONT]
[FONT=arial]4.align=justify>[/FONT]
[FONT=arial]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.[/FONT]
[FONT=arial][COLOR=#800080]1.onClipEvent (load)[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]2.{[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]3. gravidade = 10; // valor da gravidade[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]4. restituicao = 0.89; //coeficiente de restituição[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]5. raio = this._width/2; //raio da bolinha[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]6. vx = 140; //valor inicial da velocidade em X[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]7. vy = 140; //valor da velocidade inicial em Y[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]8.}[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]9.onClipEvent (enterFrame)[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]10.{[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]11. /*pega a ultima posição ocupada pela bolinha[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]1. * no instante anterior ao corrente[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]2. */[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]13. oldx = x;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]14. oldy = y; /* armazena a atual posição da bolinha na tela*/[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]15. x = this._x;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]16. y = this._y;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]17. /* Verifica se o usuário está arrastanto a bolinha*/[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]18. if (arrastando)[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]19. {[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]20. /*pega a variação de posição da bolinha*/[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]21. vx = (x-oldx);[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]22. vy = (y-oldy);[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]23. }[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]24. else[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]25. {[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]26. vy += gravidade; //aplica o efeito de gravidade[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]27. x += (vx/10); //aplica a velocidade em X[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]28. y += (vy/10); //aplica a velocidade em Y[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]29. /*Verificação de colisão com as bordas do Stage*/[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]30. if (y < raio) //SUPERIOR[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]31. {[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]32. y = raio;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]33. vx *= restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]34. vy *= -restituicao;//muda o sentido da velocidade em Y[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]35. }[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]36. if (y > (_root.maxHeight-raio)) //INFERIOR[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]37. {[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]38. y = _root.maxHeight-raio;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]39. vx *= restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]40. vy *= -restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]41. }[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]42. if (x < raio) //ESQUERDA[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]43. {[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]44. x = raio;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]45. vx *= -restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]46. vy *= restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]47. }[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]48. if (x > (_root.maxWidth-raio)) //DIREITA[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]49. {[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]50. x = _root.maxWidth-raio;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]51. vx *= -restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]52. vy *= restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]53. }[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]54. /* atualiza a posição da bolinha*/[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]55. this._x = x;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]56. this._y = y;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]57. }[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]58.}//adaptado flashGuru[/COLOR][/FONT]
[FONT='comic sans ms'][glow=red,2,300]~~ Entendendo o Código ~~[/glow][/FONT]
[FONT=arial]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:[/FONT]
[FONT=arial][img width=300 height=120]http://www.mxstudio.com.br/imagens_artigos/marcioSilva_out07_gravidade_imagens/img3.jpg[/FONT]
[FONT=arial]Figura 3 – Formalização matemática[/FONT]
[FONT=arial]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.[/FONT]
[/CENTER]
Créditos:
Imagens - MXCLUB
Tutorial - Jhonas(Com Muitas Modificações Feitas Por Mim Diego Peredelski)
[URL="http://forum.xpzone.net/xen/applications/core/interface/file/attachment.php?id=104"]1773_.zip[/URL]
Conhecimento Básico em ActionScript 2.0/3.0
Macromedia Flash(MX ou Superior)
[glow=blue,2,300]~~ Objetivo ~~[/glow]
O objetivo deste tutorial é que você, ao término dele possa entender como criar efeitos reais. 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.
[glow=green,2,300]~~ Conceitos ~~[/glow]
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.
[glow=yellow,2,300]~~ Tutorial ~~[/glow]
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::
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/imagens_artigos/marcioSilva_out07_gravidade_imagens/img2.jpg[/FONT]
[FONT=arial]Figura 2 – Layers da simulação .[/FONT]
[FONT=arial]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:[/FONT]
[FONT=arial]1.maxWidth = Stage.width-5;[/FONT]
[FONT=arial]2.maxHeight = Stage.height-5;[/FONT]
[FONT=arial]3.stop();[/FONT]
[FONT=arial]4.align=justify>[/FONT]
[FONT=arial]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.[/FONT]
[FONT=arial][COLOR=#800080]1.onClipEvent (load)[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]2.{[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]3. gravidade = 10; // valor da gravidade[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]4. restituicao = 0.89; //coeficiente de restituição[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]5. raio = this._width/2; //raio da bolinha[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]6. vx = 140; //valor inicial da velocidade em X[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]7. vy = 140; //valor da velocidade inicial em Y[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]8.}[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]9.onClipEvent (enterFrame)[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]10.{[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]11. /*pega a ultima posição ocupada pela bolinha[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]1. * no instante anterior ao corrente[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]2. */[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]13. oldx = x;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]14. oldy = y; /* armazena a atual posição da bolinha na tela*/[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]15. x = this._x;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]16. y = this._y;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]17. /* Verifica se o usuário está arrastanto a bolinha*/[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]18. if (arrastando)[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]19. {[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]20. /*pega a variação de posição da bolinha*/[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]21. vx = (x-oldx);[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]22. vy = (y-oldy);[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]23. }[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]24. else[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]25. {[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]26. vy += gravidade; //aplica o efeito de gravidade[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]27. x += (vx/10); //aplica a velocidade em X[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]28. y += (vy/10); //aplica a velocidade em Y[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]29. /*Verificação de colisão com as bordas do Stage*/[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]30. if (y < raio) //SUPERIOR[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]31. {[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]32. y = raio;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]33. vx *= restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]34. vy *= -restituicao;//muda o sentido da velocidade em Y[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]35. }[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]36. if (y > (_root.maxHeight-raio)) //INFERIOR[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]37. {[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]38. y = _root.maxHeight-raio;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]39. vx *= restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]40. vy *= -restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]41. }[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]42. if (x < raio) //ESQUERDA[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]43. {[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]44. x = raio;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]45. vx *= -restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]46. vy *= restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]47. }[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]48. if (x > (_root.maxWidth-raio)) //DIREITA[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]49. {[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]50. x = _root.maxWidth-raio;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]51. vx *= -restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]52. vy *= restituicao;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]53. }[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]54. /* atualiza a posição da bolinha*/[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]55. this._x = x;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]56. this._y = y;[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]57. }[/COLOR][/FONT]
[FONT=arial][COLOR=#800080]58.}//adaptado flashGuru[/COLOR][/FONT]
[FONT='comic sans ms'][glow=red,2,300]~~ Entendendo o Código ~~[/glow][/FONT]
[FONT=arial]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:[/FONT]
[FONT=arial][img width=300 height=120]http://www.mxstudio.com.br/imagens_artigos/marcioSilva_out07_gravidade_imagens/img3.jpg[/FONT]
[FONT=arial]Figura 3 – Formalização matemática[/FONT]
[FONT=arial]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.[/FONT]
[/CENTER]
Créditos:
Imagens - MXCLUB
Tutorial - Jhonas(Com Muitas Modificações Feitas Por Mim Diego Peredelski)
[URL="http://forum.xpzone.net/xen/applications/core/interface/file/attachment.php?id=104"]1773_.zip[/URL]