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. _root.cont++;
23. _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.