Criação de games

Olá pessoal, Que tal começar a aprender a arte de criar aqueles joguinhos bem legais feitos em flash? Começarei uma sequência de tutorias que mostraráo os mais importantes fundamentos para começar a desenvolver um game.

Pré-requisitos:
Conhecimento básico em ActionScript

Objetivo:
capacitar os leitores quanto aos aspectos referentes a comandos básicos para a movimentação de um personagem, mapa de tiles, detecção de colisão, gravidade, fricção entre outros. Todos esses fundamentos são muito importantes para a construção de games divertidos.Mas vamos por partes, primeiramente abordarei neste tutorial um fundamento muito importante e muito básico que é a movimentação de persogagens e um início de detecção de colisão.No fim desse tutorial teremos feito um joguinho simples como o que está abaixo.

Então vamos ao que interessa!
Crie um novo arquivo (CTRL+N) Dê um clique no primeiro frame e coloque o código abaixo 1. var cont:Number = new Number(); 2. var cont2:Number = new Number(); 3. cont=0; //contadores de tiros 4. count2=0; //contadores de explosões 5. onEnterFrame=function() 6. { 7. /*verificamos quais teclas o usuário está precionando 8. E também verificando quais os limites da tela 9. */ 10. if(Key.isDown(Key.LEFT) && nave._x >=20) 11. nave._x -=20; 12. if(Key.isDown(Key.RIGHT) && nave._x <500) 13. nave._x +=20; 14. if(Key.isDown(Key.UP) && nave._y >20) 15. nave._y -=20; 16. if(Key.isDown(Key.DOWN) && nave._y <330) 17. nave._y +=20; 18. } 19. onMouseDown = function() 20. { 21. /*quando ocorre o clique do mouse, mostra um tiro saindo da nave*/

22. 23.

_root.cont++; _root.tiro.duplicateMovieClip("tiro"+_root.cont,_root.cont,_root.cont); //duplicamos o tiro 24. /*fazemos com que a réplica apareça na frente da nave*/ 25. _root["tiro"+_root.cont]._y = nave._y+10; 26. _root["tiro"+_root.cont]._x = nave._x+10; 27. }

Observações referentes ao código
Quando o iniciar o joguinho a função onEnterFrame é invocada, ela fica esperando o pressionamento de teclas, e toma as decisões necessárias para a movimentação correta do personagem que iremos criar logo abaixo. No código também tem uma função que serve para capturar cliques do mouse na tela (onMouseDown). Quando ocorrer um clique será fieta uma duplicata do movieclip chamado tiro.

Criação dos movieClips para o jogo (tiro, inimigo, nave e explosão)
Vamos criar agora o movieClip que representará o tiro. Crie um círculo fora do stage, de modo que ele não apareça na animação final. Selecione-o e pressione F8, para transformar em movieClip.Dê o nome de tiro. Certifique-se que o movieClip círculo se chama realmente tiro. Para issso basta clicar no círculo e verificar na barra de propriedades.

Agora clique no círculo e coloque o código abaixo: 1.

2. onClipEvent(enterFrame) 3. { 4. if(_name != "tiro")//verificação que serve para que sejam executados apenas as cópias do tiro, não o verdadeiro 5. { 6. this._y-=30; 7. if(this._y <0)//se o tiro passou do y=0 removemos o tiro 8. this.removeMovieClip(); 9. if(this.hitTest(_root.inimigo)) //verifica se tiro colidiu com o inimigo 10. { 11. _root.inimigo.life=0; //zeramos o life, um tiro só é fatal 12. this.removeMovieClip(); //sumimos com o tiro da tela 13. } 14. } 15. } 16. No código, é importante destacar o uso do método hiTest(), que é muito importante para a detecção de colisão. Ele é responsável em dizer se dois movieClips colidiram ou não. Agora criaremos a nave que pilotaremos, no nosso caso é só um quadradinho. Da mesma forma que você criou o tiro, crie 2(dois) quadradinhos, um ficará na parte superior fora do stage e outro dentro do stage na parte inferior.Ttransforme-os em movieClips e nomeie o que está no stage de nave e o que está fora de inimigo. Por fim faça a figura que respresentará a explosão, ficará próximo ao movieclip tiro. Chame-a de explosão. Veja como nosso stage ficará abaixo:

Agora vamos so código do inimigo, dê dois cliques no inimigo. No primeiro frame coloque: 1. var life:Number = 100;

Esse é o life do inimigo. Agora volte à cena principal e selecione o inimigo. Aperte F9 depois coluque o seguinte código:

1. onClipEvent(enterFrame) 2. { 3. /*Verificamos se o inimigo morreu, vendo se o seu life é menor ou igual a zero*/ 4. if(life<=0) 5. { 6. _root.cont2++; 7. /*Criamos uma explosão, pois o inimigo morreu*/ 8. _root.explosao.duplicateMovieClip("explode"+_root.cont2, _root.cont2,_root.cont2); 9. 10. _root["explode"+_root.cont2]._x = this._x; 11. _root["explode"+_root.cont2]._y = this._y; 12. 13. this._x = random(300); //o inimigo volta numa posição randômica 14. this._y = -150; 15. 16. this.life = 100; //voltamos o life do inimigo 17. 18. } 19. else 20. { 21. this._y+=10; //avança o inimigo em sua direção 22. if(this._y > 300) //verifica se o inimigo ultrapassou o limite máximo da tela 23. { 24. /*Se o inimigo ultrapassou sua nave, vc pode fazer o que quizer a partir daqui 25. eu optei por fazer o inimigo começa de novo a descer. 26. */ 27. this._y = -20; 28. this.removeMovieClip(); 29. } 30. } 31. } O código acima indica que quando o life do inimigo acabar vai ser feita uma duplicata do movieClip explosão que vai aparecer exatamente no local onde houve a colisão com o tiro. Senão ocorre colisão alguma ele entra no else e continua avançando em direção à nave que controlamos. Por fim o código da explosão: 1. onClipEvent(enterFrame) 2. { 3. /*essa verificação serve para que apenas as explosão que serão criadas dinamicamente 4. sejão executadas*/ 5. if(_name != "explosao") 6. { 7. if(this._alpha > 0) //serve para dar um efeito de explosão

8. this._alpha -= 5; 9. else 10. this.removeMovieClip(); 11. } 12. } Bem similar so código do tiro a explosão só com as duplicatas, aplicamos apenas uma diminuição no alpha até que chegue a zero aí deletamos a instancia duplicada da explosão. Se tiver seguido corretamente os passos, o joguinho está pronto!Use sua criatividade para fazer variações desse exmplo. Divirta-se! Espero que tenham gostado. Até a próxima.