Criação de Games - Megaman 2

Criação de Games - Megaman Parte 2 - Flash | MXStudio http://www.mxstudio.com.br/flash/criacao_de_games___megaman_p...
HOSPEDAGEM 0800 723 6000 LOJA VIRTUAL SERVIDOR DEDICADO REGISTRE SEU DOMÍNIO www. .com OK
SOBRE O MXSTUDIO MAPA DO FEED

SITE
PÁG. INICIAL FÓRUM BLOG ANUNCIE NO MXSTUDIO CONTATO

CATEGORIAS
ADOBE AIR
AFTER EFFECTS
ASP.NET
Marcio Silva
Criação de Games - Megaman Parte 2 Colunistas desde: 2007
Data de publicação: 28-07-2007
BANCO DE DADOS Matérias publicadas: 8
Visitas: 2242
CAPTIVATE Navegação: MXStudio / Flash / Criação de Games - Megaman Parte 2
COLDFUSION
COREL
CSS
DIRECTOR
DREAMWEAVER
EVENTOS
FIREWORKS
FLASH
FLASH MEDIA SERVER
FLEX
FREEHAND
GERAL
ILLUSTRATOR
JAVASCRIPT
JOGOS
MERCADO
MX NEWS
PHOTOSHOP
PHP
PROGRAMAÇÃO
RESENHAS
RIA
SECOND LIFE
SQL
USABILIDADE
1 de 14 8/5/2009 08:49
PDF created with pdfFactory Pro trial version www.pdffactory.com
Flash Cs4 e PaperVision3D Download Jogos p/ Celular

WEB MARKETING Entre agora para a maior comunidade Baixe Jogos e Deixe seu Celular Mais
Ajudamos você em seus projetos! Divertido. 1⁰ Conteúdo Grátis.
WINDOWS www.lucianoaugusto.com.br/ Jogos.DiversaoNoSeuCelular.com.br
WORDPRESS
Criação de games - Megaman Parte 2

COLABORADORES
Olá comunidade,
ADRIANO AGUIAR
Estou de volta trazendo a continuação do tutorial de criação de games - Megaman, tendo como foco a criação de um
AGNALDO DIOGO DOS game de plataforma. Na primeira parte do tutorial, Criação de Games - Megaman parte 1 , aprendemos algumas
SANTOS
técnicas como a utilização de sprites, fizemos uma simulação do pulo do personagem, o tão prucurado scrolling da
ALBERTH COSTA tela que cuja a idéia é bem tranquila e os princípios básicos de construção de jogos de plataforma. Portanto, assumo
ALESSIO SEABRA
desde de já que você já possui os pré-requisitos listados abaixo.
ALEX FIGUEIREDO Pré-requisitos:

ALFREDO LOTAR
Conhecimento básico em ActionScript
ALINE AUTRAN Macromedia Fireworks 8
ANDERSON TRIACCA Macromedia Flash 8
Recomenda-se que você tenha visto a coluna de movimentação básica de personagens e princípios básicos de
ANDRE LUIZ
games de plataforma, caso não tenha acesse:
ANDREWS MEDINA
Criação de Games
ANDRÉ V.C FRANCO
Criação de Games - Megaman parte 1
ANTHONY CONDE
ARTUR KENJI
Objetivo:
BÁRBARA RIBEIRO O abjetivo desta segunda parte é a inclusão de novos elementos dentro do nosso joguinho, lembrando que é o
BRUNO RIBEIRO básico, use sua imaginação para deixar o joguinho ainda mais interessante. Como o interesse aqui é puramente o
aprendizado, não estamos desenvolvendo um jogo comercial que necessita de mais otimizações. No entanto, uma vez
BRUNO DULCETTI que assimilado todos os conceitos apresentados, conseguirá facilmente desenvolver seus jogos de forma comercial.
CAIO FRISON A construção das animações é feita ação a ação do personagem, para cada ação um movie clip diferente, é claro que
é possivel criar um único mc que pode ser controladoo via Action Script, mas vamos aprender uma coisa de cada vez.
CAIO FRISON
Veja o jogo pronto:
CARLOSHPS
Conceitos:
Apresentarei neste artigo noções legais como como fazer o tiro que o Megaman vai disparar, a temporização destes
tiros, um timer para marcar o tempo de jogo, a inclusão de inimigos no cenário e um pouquinho sobre IA em games.
Logo nosso jogo estará completo com os itens básicos para este tipo de game.
Conteúdo
Já vou supor que você tenha visto o artigo anterior caso não tenha acesse (Criação de Games - Megaman parte
1 ), agora iremos adicionar ao projeto anterior, os elementos mencionados acima (tiro, timer, inimigos…). Para isso,
2 de 14 8/5/2009 08:49
abra o arquivo do jogo que fizemos no último artigo e vamos lá! MXStudio © 2003-2009. Todos os
direitos reservados.
Primeiramente, vamos construir os tiros que serão dados tanto pelo megaman quanto pelos seus inimigos. Insira um
novo símbolo do tipo movie clip, chame-o de tiro_mega, ao fim deste tutorial segue um link para que baixem as
imagens que utilizei ou clique aqui para baixar . Da mesma forma que o outro artigo monte a animação do tiro
baseado na folha de sprites abaixo:
Figura 1 - Folha de sprites para o tiro_mega.
Depois do movie clip pronto, volte para a cena e arraste-o da library, se ela não estiver aparecendo aperte CTRL +
L. Iremos implementar as ações do tiro semelhante ao que eu fiz no meu primeiro turorial, aquele da nave. Então,
devemos posicionar esse tiro fora do stage, redimensione o seu tamanho para 15px de altura e 15px de largura,
chame essa instância de tiro_mc. Veja abaixo como posicionei no stage.
Figura 2 - Posição inicla adequada para o tiro_mega.
Agora vamos programar as ações desse tiro. Selecione o movie clip tiro_mc e aperte F9 para editar seu Action
Script onde os inimigos que estão sendo referenciados no código serão criados nos passos seguintes, o código
segue abaixo:
1. onClipEvent( enterFrame )
2. {
3. if(_name != “tiro_mc”)
4. {
5. //verifica colisão com inimigo 1
6. if(this.hitTest(_root.terreno_mc.inimigo_1_mc))
7. {
8. _root.terreno_mc.inimigo_1_mc.barra_mc._xscale -= 5;
9. this.removeMovieClip();
10. }
11. else
12. {
13. if(direcao == “direita”)
14. this._x += 25;
15. else
16. this._x -= 25; if(this._x >2000 || this._x < -5)
18. }
19. }
20. }
Também precisaremos de um tiro que será dado por um dos inimigos do megaman que será feito mais a frente. O
processo é o mesmo, pegue a folha de sprites, insira um novo movie clip vazio e chame-o de tiro_2, depois da
animação pronta, volte à cena e arraste-o da library para o stage e dê o nome de instância de tiro_fogo_mc. Veja
abaixo como ficou:
Figura 3 - Folha de sprites para tiro_2.
3 de 14 8/5/2009 08:49
É 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.
Figura 4 - Veja o posicionamento na cena.
O código para este tiro segue abaixo com algumas modificações para testar a colisão com o megaman em vez do
inimigo, claro. E se o life do megaman chegar ao fim vai para frame 3 ou frame de Game Over. Eu chamei de
gameOver o último frame da layer terreno.
1. onClipEvent( enterFrame )
2. {
3. if(_name != “tiro_fogo_mc”)
4. {
5. if(_root.life_mc._xscale <= 0)
6. {
7. _root.gotoAndStop(”gameOver”); }
8. if(this.hitTest(_root.megaman_mc))
9. {
10. _root.life_mc._xscale -= 5;
12. }
13. else
14. {
16. this._x += 25;
17. else
18. this._x -= 25;
19. if(this._x >2000 || this._x < -5)
21. }
22. }
23. }
Note que existe uma variável direcao que não foi declarada em lugar nenhum e está sendo usada em nosso AS dos
dois tiros, ela foi criada no arquivo Megaman.as. Portanto, abra-o e insira o seguinte código nas linhas iniciais onde
são declaradas as variáveis utilizadas no nosso game, aproveite e declare variáveis de controle que servirão para
controlar o número de tiros e o tempo de intervalo entre cado tiro, veja abaixo como ficou.
1. stop();
2. /* Variáveis globais
3. * Aqui estão presentes as variáveis que fazem o
4. * controle dos estados
5. * em que o jogo se encontra
6. */
7. var velSaltar:Number = 20;
8. var velAndar:Number = 0;
9. var pulando:Boolean = false;
10. var caindo:Boolean = false;
11. var morreu:Boolean = false;
12. var velMax:Number = 10;
13. var direcao:String = “”;
14. var entrada:Boolean = true;
15. var contTiros:Number = 0; /*Contador de tiros*/
16. var tiroInterval:Number = getTimer(); /*utilizada para calcular o intervalo dos tiros*/
17. /*adiciona à classe MovieClip um atributo que indica a direção para onde está indo*/
18. MovieClip.prototype.direcao = “esquerda”;
19. .
20. .
21. .
4 de 14 8/5/2009 08:49
Agora vamos construir um timer que ficará contando o tempo, vai ser um timer bem simples em termos de beleza, mas
que você poderá facilmente customizá-lo a seu gosto. Primeiramente insira um campo texto na parte superior central
do nosso stage, sinta-se à vontade em colocar onde achar mais adequado dentro do stage a localização não vai
influenciar, e mude suas propriedades para que seja um campo texto do tipo dinâmico. Mais algumas linhas serão
adicionadas no arquivos Megaman.as, como já temos o tiro em mãos e uma variável que controla o intervalo de
tempo dos tiros, podemos implementar a ação de disparar tiros. Abaixo está o código que implementa o disparo.
1. .
2. .
3. .
4. //só pula se não tiver pulando, claro
5. if ( Key.isDown(Key.SPACE) && !pulando )
6. {
7. pulando = true; /*mostra a animação pulando para direita se o personagem
8. * está indo para a direita, caso contrário para a esquerda
9. */
11. megaman_mc.gotoAndStop(”pulando_dir”);
12. else
13. megaman_mc.gotoAndStop(”pulando_esq”);
14. }
15. /*########### Novas Linhas adicionadas ##########*/
16. tempo = Math.round(getTimer()/1000);
17. _root.tempo_txt.text = tempo;
18. if( Key.isDown( Key.CONTROL) && (getTimer() - tiroInterval) > 200 )
19. {
20. _root.contTiros++;
21. _root.tiro_mc.duplicateMovieClip(”tiro”+_root.contTiros,_root.contTiros,_root.contTiros); //duplicamos o tiro
23. {
24. if(!Key.isDown( Key.RIGHT) )
25. this.gotoAndStop(”atirando_dir”);
26. _root["tiro"+_root.contTiros]._y = this._y+35;
27. _root["tiro"+_root.contTiros]._x = this._x+50;
28. }
29. else
30. {
31. if(!Key.isDown( Key.LEFT) )
32. this.gotoAndStop(”atirando_esq”);
34. _root["tiro"+_root.contTiros]._x = this._x-10;
35. }
36. tiroInterval = getTimer();
37. /*atribuindo direcao para o tiro*/
38. _root["tiro"+_root.contTiros].direcao = direcao;
39. atirando = true;
40. }
41. /*#################################################*/
42. if( Key.isDown( Key.LEFT) )
43. .
44. .
45. .
Agora vamos adicionar os inimigos. Neste artigo vou adicionar apenas 2 inimigos para que você tenha uma noção de
como implementar uma pequena Inteligência Artificial (IA) nos seus inimigos, a implementação de IA em games pode
ser feita de diversas formas, aqui apresentarei uma idéia bem simples onde você poerá usar sua criatividade e
implementá-la de uma forma mais rebuscada.
O primeiro Inimigo está representado no gif abaixo:
Figura 5 - Primeiro inimigo.
Uma forma de utilizar sprites foi visto na último artigo, era baseada na folha de sprites onde tinhamos que colocar um
a um os sprites em cada frame. Agora veremos outra forma de usar sprites a partir de gif’s animados. Com uma
imagem gif pronta é fácil obter seus sprites pelo flash que fará sozinho o processo da passagem da animação para o
timeline. Primeiro vamos criar um movie clip vazio e chame-o de inimigo1. Agora vá no menu arquivo ->import
5 de 14 8/5/2009 08:49
->import to stage ou simplesmente CTRL + R e selecione o arquivo img3.gif que forneci no link ao fim deste artigo.
Clique em abrir e automaticamente o flash fará o milagre de colocar cada quadro da animação no seu respectivo
frame. Que bacana hein!.
Figura 6 - Timeline e o stage depois do import.
Vamos criar agora o outro inimigo, volte ao stage e insira um novo movie clip chamado inimigo2, abaixo segue a
imagem do nosso inimigo número 2:
Figura 7 - Segundo inimigo.img5.gif
Depois que ocoreu o import seu time e stage devem ficar assim:
Figura 8 - Timeline e o stage depois do import da segunda imagem.
Agora com as animações bases prontas iremos criar o mc que iremos controlar via Action Script. Portanto, na cena
principal insira um novo mc chamado inimigo_1. Neste mc, crie duas layers uma chamada barra e outra chamada
imagem. Na layer imagem, no primeiro frame desta layer coloque o mc que fizemos agora pouco chamado
6 de 14 8/5/2009 08:49
inimigo1 chame este primeiro frame de esquerda (aperte F9 neste frame e coloque um stop(); no Action Script) e o
segundo desta mesma layer de direita e o terceiro frame chame de morto, este último indica o estado de quando sua
barra de força chegar ao fim. O mc inimigo1 já está direcionado para a esquerda, como foi visto no artigo anterior
basta usar a ferramenta Free Transform Tool para inverter a direção. Para mais detalhes veja o artigo anterior, e no
frame morto não coloque nada deixe-o em branco sem nada no stage. Fica aqui como um teste criar uma animação
de explosão ou qualquer coisa que pareça que o inimgo explodiu.
Agora vamos construir a barra de life do inimigo_1, na sua layer barra, usando a ferramenta Rectangle Tool
desenhe um retângulo acima da cabeça do personagem de forma que esse desenho pertença à layer barra,
transforme essa barra em mc apenas selecionando e apertando F8 chamando-a de barra_life. Por fim dê o nome de
instância de barra_mc. Depois de todo esse processo com o primeiro frame selecione aperte F6 para criar um key
Frame cópia do primeiro. Após todo esse processo veja como ficou:
Figura 9 - Inimigo 1 no stage e seus respectivos frames.
Para fazer o outro inimigo você vai aplicar o mesmo processo, volte à cena principal e crie um movie clip chamado
inimigo_2, crie as mesma layers e dê o mesmo nome pra elas. Utilize o mc inimigo2 para fazer a animação para a
esquerda e inverta o mc para fazer a animação para direita. Coloque também o stop() no primeiro frame da layer
imagem e barra de life não precisa fazer por que ela já está pronta na library. Basta arrastá-la para o primeiro frame
da layer barra e dar o nome novamente de intância de barra_mc e apertar F6 com o primeiro frame selecionado para
fazer uma cópia para o segundo.
Depois de criado esses dois mc’s volte para a cena principal e dê um duplo clique no mc terreno_mc, assim ele será
aberto para edição e é aqui que vamos colocar nossos inimigos. Mas você poderia ter imaginado colocá-los
diretamente na cena criando uma nova layer, por exemplo chamada de inimigos; isso sim é possível mas é inviável
dependendo do número de inimigos no cenário por que será complicado aplicar o scrolling em todos esses objetos.
Continuando, com o terreno_mc aberto para edição arraste o mc inimigo_1 da library para o stage. Dê o nome de
instância de inimigo_1_mc. A posição onde vai ficar o seu inimigo depende de como você vai programar seu Action
Script de modo que ele não ultrapasse barreiras que ele não possa ou estipular limites até onde possa ir, eu estipulei
um valor máximo e um valor mínimo para que o personagem possa andar no eixo x. Dê um clique seu inimigo_1_mc
e com ele selecionado aperte F9 para programá-lo com o código abaixo:
1. onClipEvent(load)
2. {
3. /*velocidade inicial do inimigo_1_mc*/
4. var speed = 2;
5. }onClipEvent(enterFrame)
6. {
7. /*não tem mais barra de life, então morreu*/
8. if(this.barra_mc._xscale <=0)
9. this.gotoAndStop(”morto”);
10. else
11. {
12. /*pequena simulação de inteligência artificial*/
13. atack = Math.random();
15. _root.life_mc._xscale -= .5;
16. /*realiza um ataque se o número randômico for divisível por 15*/
17. if(Math.round(atack*10000) % 15 == 0)
18. speed = 10;
19. /*persegue o megaman*/
20. if(_root.megaman_mc._x > _root.terreno_mc._x+this._x)
21. {
7 de 14 8/5/2009 08:49
22. this.gotoAndStop(”direita”);
23. this._x +=speed;
24. }
25. else
26. {
27. this.gotoAndStop(”esquerda”);
28. this._x -=speed;
29. }
30. if(this._x < 100)
32. else if(this._x > 600)
34. speed = 2;
35. if(speed > 100)
36. speed = 0;
37. }
38. }
No código acima fiz com que o inimigo fique fazendo umas aceleradas para frente como se fosse um ataque e o
código também faz com o inimigo fique sempre andando atrás do megaman se este estiver na sua linha de ataque.
Cada vez que o inimigo_1_mc encosta no megaman ele tira 0.5 do life.
Para o inimigo_2_mc algumas adaptações são necessárias no código acima, primeiro eu admiti que não vou
diminuir o life do megaman quando encostar neste inimigo só o tiro que este dará que vai diminuir, o intervalo x que o
inimigo_2_mc pode andar também é diferente eu o coloquei na parte final da fase. E também atualizo a variável
direcao para eu saber para onde este inimigo vai atirar. A imagem de como fica no stage depois desse processo de
montagem das animações do personagem e o código seguem abaixo:
Figura 10 - Inimigo 2 no stage e seus respectivos frames.
1. onClipEvent(load)
2. {
3. /*velocidade inicial do inimigo_2_mc*/
4. var speed = 2;
5. }onClipEvent(enterFrame)
6. {
7. /*não tem mais barra de life, então morreu*/
8. if(this.barra_mc._xscale <=0)
9. this.gotoAndStop(”morto”);
10. else
11. {
12. /*pequena simulação de inteligência artificial*/
13. atack = Math.random();
15. _root.life_mc._xscale -= .5;
16. /*realiza um ataque se o número randômico for divisível por 15*/
17. if(Math.round(atack*10000) % 15 == 0)
18. speed = 10;
19. /*persegue o megaman*/
20. if(_root.megaman_mc._x > _root.terreno_mc._x+this._x)
8 de 14 8/5/2009 08:49
21. {
22. this.gotoAndStop(”direita”);
23. direcao = “direita”;
25. }
26. else
27. {
28. this.gotoAndStop(”esquerda”);
29. direcao = “esquerda”;
31. }
32. if(this._x < 1446)
34. else if(this._x > 2040)
36. speed = 2;
37. if(speed > 100)
38. speed = 0;
39. }
40. }
Vale ressaltar que o código das ações desses inimigos são os que podem mais serem implementados de forma
diferente, eu optei para as ações da forma que está acima codificada, o inimigo_1_mc com o corpo e
inimigo_2_mc ataca com um tiro de fogo. Lembre-se que ambos estão no mc terreno_mc.
Por fim vamos fazer a personagem que voa disparar o tiro de fogo que fizemos acima, vá a sua library e procure pelo
mc inimigo2 que está na figura 8. Insira o código abaixo no frame 25, mas por que no frame 25? Se você observar a
animação é nesse frame que a personagem sofre uma espécie de solavanco devido a um tiro que de forma imaginária
ela tenha dado.
_root.tiro_fogo_mc.duplicateMovieClip(”tiro”+_root.contTiros,_root.contTiros,_root.contTiros); //duplicamos o
tiro
2. x_terreno = _root.terreno_mc._x;
3. x_inimigo = _root.terreno_mc.inimigo_2_mc._x;
4. /*Verifica para onde ela está olhando e atira*/
5. if(_root.terreno_mc.inimigo_2_mc.direcao == “direita”)
6. {
7. _root["tiro"+_root.contTiros].direcao = “direita”;
8. _root["tiro"+_root.contTiros]._y = _root.terreno_mc.inimigo_2_mc._y+58;
9. _root["tiro"+_root.contTiros]._x = x_terreno + x_inimigo+90;
10. }
11. else
12. {
13. _root["tiro"+_root.contTiros].direcao = “esquerda”;
14. _root["tiro"+_root.contTiros]._y = _root.terreno_mc.inimigo_2_mc._y+58;
15. _root["tiro"+_root.contTiros]._x = x_terreno + x_inimigo+10;
16. _root["tiro"+_root.contTiros]._xscale = - 2*_root["tiro"+_root.contTiros]._width;
17. }
Você conseguiu entender a linha 17 deste código? Sim? Não? O que ela faz? Até agora quando a gente desejava
que um personagem ficasse virado para os dois sentidos criávamos duas frames e depois utilizando a ferramenta
Free Transform Tool invertia o sentido da figura da esquerda para a direita ou vice e versa. Agora fizemos essa
inversão via Action Script com uma linha de código, o mais impressionante é que funciona.
Falei muito de uma tal barra de life do megaman mais ainda não fizemos. Então, vá ao stage da cena e cria um
retângulo da cor que quiser parecido com o que foi feito para os inimigos, transforme em movie clip chamando-o de
barra dê o nome de instância de life_mc. Posicione no topo um pouco à direita perto do timer e se prefeir coloque
uma imagem do megaman que você desejar ao lado do life só pra ficar claro que aquele life é do megaman. Veja
como ficou:
9 de 14 8/5/2009 08:49
Figura 11 -Posição do life e o primeiro inimigo.
Por último só falta fazer as animação do megaman atirando e o código que fará ele disparar os tiros. Para fazer a
animação vamos usar o arquivo de imagens que segue logo ao fim desse artigo. Lá tem várias imagens do megaman
atirando correndo e tudo mais. Acredito que você já está ficando bom nesse processo de copiar e colar para montar
animações. Use a folha de sprite abaixo, OBS: eu não usei toda a sequência de animação para fazer ele atirando,
usei apenas os prites que estão abaixo.
Figura 12 - Folha de sprites para atirando parado.
Figura 13 - Folha de sprites para atirando correndo.
Os dois mc’s vazios que você irá criar para fazer as animações vão se chamar respectivamente atirando e
atirando_correndo. Agora iremos incorporar esses mc’s ao megaman propriamente dito que é aquele que está no
stage e que estamos controlando via Action Script e que se chama megaman_mc. Portanto, vá à cena principal e dê
um duplo clique no megaman_mc e adicione mais 4 frames aos frames existentes e chame-os respectivamente de:
atirando_dir, atirando_esq, correndo_atirando_dir e correndo_atirando_esq. Cuidado com esses nomes
sempre utilizo para referenciá-los no Action Script. As animações para os frames atirando_dir e
correndo_atirando_dir já estão pronta (atirando e atirando_correndo), ou seja, a direção em que o personagem
está olhando já está correta. Para fazer as animações para esquerda será usada a mesma técnica que consistia em
usar a ferramenta Free Transform Tool para inverter o sentido da animação que já está pronta, se tiver ainda dúvidas
quanto a esta parte consulte novamente a parte 1 deste artigo.
Depois de cada coisa no seu lugar, você agora precisa apenas colocar o seguinte código no último frame do mc
atirando para que quando você atirar saiba para que lado deva parar e de tirar :
1. _root.atirando = false;
2. if(_root.direcao == “direita”)
3. _parent.gotoAndStop(”parado_dir”);
4. else
5. _parent.gotoAndStop(”parado_esq”);
E para o mc atirando_correndo coloque no último frame:
1. _root.atirando = false;
2. É moçada, agora falta apenas o código do coração do nosso game com as novas modificações e com a parte
de tiros, com a possibilidade de correr atirando e pular atirando todas já incorporadas no código, então aí
está:
"codigo" title="AS">stop();
3. /* Variáveis globais
4. * Aqui estão presentes as variáveis que fazem o
5. * controle dos estados
6. * em que o jogo se encontra
7. */
8. var velSaltar:Number = 20;
9. var velAndar:Number = 0;
10. var pulando:Boolean = false;
11. var caindo:Boolean = false;
12. var morreu:Boolean = false;
13. var atirando:Boolean = false;
14. var velMax:Number = 10;
15. var direcao:String = “”;
16. var entrada:Boolean = true;
17. var contTiros:Number = 0; /*Contador de tiros*/
10 de 14 8/5/2009 08:49
18. var tiroInterval:Number = getTimer(); /*utilizada para calcular o intervalo dos tiros*/
19. /*adiciona à classe MovieClip um atributo que indica a direção para onde está indo*/
20. MovieClip.prototype.direcao = “esquerda”; /*fazemos com que as layers que representam as paredes
21. * e a plataforma não apareçam na hora que
22. * o jogo for executado
23. */
24. plataforma_mc._visible = false;
25. paredes_mc._visible = false;
26. /* Todo o controle do personagem Megaman*/
27. megaman_mc.onEnterFrame = function()
28. {
29. //verifica se ainda não acabou a entrada do Megaman
30. if(entrada)
31. return;
32. if(this._y > 350)
33. _root.gotoAndStop(”gameOver”);
34. /*verifica colisão com alguma parede do lado direito ou esquerdo
35. * Se houve colisão faz uma anulação do passo que ele deu para frente
36. */
37. if( colisao_paredes(_root.paredes_mc, this, velAndar))
38. this._x-=velAndar;
39. /* simples simulação de gravidade
40. * Se ele não tiver em cima da plataforma então ele vai caindo
41. * sem aceleração
42. */
43. if ( !colisao_plataforma(_root.plataforma_mc, this) && !pulando)
44. this._y += 6;
45. //se velocidade positiva estou andando para a
46. //direita senão estou indo para esquerda
47. if (velAndar>0)
48. direcao = “direita”;
49. else if (velAndar<0)
50. direcao = “esquerda”;
51. //só pula se não tiver pulando, claro
52. if ( Key.isDown(Key.SPACE) && !pulando )
53. {
54. pulando = true;
55. /*mostra a animação pulando para direita se o personagem
56. * está indo para a direita, caso contrário para a esquerda
57. */
59. megaman_mc.gotoAndStop(”pulando_dir”);
60. else
61. megaman_mc.gotoAndStop(”pulando_esq”);
62. }
63. if( Key.isDown( Key.CONTROL) && (getTimer() - tiroInterval) > 200 )
64. {
66. _root.tiro_mc.duplicateMovieClip(”tiro”+_root.contTiros,_root.contTiros,_root.contTiros); //duplicamos o tiro
68. {
69. if(!Key.isDown( Key.RIGHT) )
70. this.gotoAndStop(”atirando_dir”);
72. _root["tiro"+_root.contTiros]._x = this._x+50;
73. }
74. else
75. {
76. if(!Key.isDown( Key.LEFT) )
77. this.gotoAndStop(”atirando_esq”);
79. _root["tiro"+_root.contTiros]._x = this._x-10;
80. }
81. tiroInterval = getTimer();
82. /*atribuindo direcao para o tiro*/
83. _root["tiro"+_root.contTiros].direcao = direcao;
84. atirando = true;
85. }
86. if( Key.isDown( Key.RIGHT) && atirando)
87. {
88. if( velAndar < velMax )
89. velAndar++;
11 de 14 8/5/2009 08:49
90. if(!pulando)
91. megaman_mc.gotoAndStop(”correndo_atirando_dir”);
92. }
93. else if( Key.isDown( Key.LEFT) && atirando)
94. {
95. if ( velAndar > -velMax ) //não deixa o personagem acelerar muito
96. velAndar–;
97. if(!pulando)
98. megaman_mc.gotoAndStop(”correndo_atirando_esq”);
99. }
100. else if( Key.isDown( Key.RIGHT))
101. {
102. if( velAndar < velMax )
103. velAndar++;
104. if(!pulando)
105. megaman_mc.gotoAndStop(”correndo_dir”);
106. }
107. else if( Key.isDown( Key.LEFT) )
108. {
109. if ( velAndar > -velMax ) //não deixa o personagem acelerar muito
110. velAndar–;
111. if(!pulando)
112. megaman_mc.gotoAndStop(”correndo_esq”);
113. }
114. else if(!pulando && !entrada && !atirando)
115. {
116. //se não tiver acontecendo nada ele fica parado
118. megaman_mc.gotoAndStop(”parado_dir”);
119. else
120. megaman_mc.gotoAndStop(”parado_esq”);
121. velAndar = 0;
122. }
123. /* nosso personagem não é carro mas tem aceleração, que é .85
124. * mude para um valor alto e veja o resultado
125. */
126. velAndar *= .85;
127. /*esta função faz o bendito scrolling*/
128. movimento(this, terreno_mc, plataforma_mc, paredes_mc, velAndar);
129. if( pulando )
130. {
131. /* mais física aqui, veja na figura 9 o que acontece aqui*/
132. this._y -= velSaltar;
133. velSaltar -= 1.8;
134. if (velSaltar<0)
135. caindo = true;
136. if (velSaltar <-15)
137. velSaltar = -15;
138. }
139. /* indica que o personagem emcima da plataforma, logo ele não está
140. * caindo e nem pulando é claro! E setamos novamente
141. */
142. if ( colisao_plataforma( _root.plataforma_mc, this) && caindo)
143. {
144. velSaltar = 20;
145. pulando = false;
146. caindo = false;
147. }
148. };
149. function colisao_plataforma(obj1:Object, obj2:Object)
150. {
151. return obj1.hitTest(obj2._x, obj2._y+60, true);
152. }
153. function colisao_paredes(obj1:Object, obj2:Object, vel:Number)
154. {
155. return (obj1.hitTest(obj2._x-5, obj2._y+60, true) or obj1.hitTest(obj2._x+40, obj2._y+60, true))
156. }
157. function movimento(personagem_obj:Object, terreno_obj:Object,
158. limite_obj:Object,paredes_obj:Object, velocidade:Number)
159. {
161. {
12 de 14 8/5/2009 08:49
162. /*se obedecer a condição abaixo, quem anda é o cenário*/

163. if(personagem_obj._x > 200 and terreno_obj._x >=-1853)
164. {
165. terreno_obj._x -= velocidade;
166. limite_obj._x -= velocidade;
167. paredes_obj._x -= velocidade;
168. }
169. else
170. personagem_obj._x += velocidade;
171. }
172. if(direcao == “esquerda”)
173. {
174. if(personagem_obj._x < 100 and terreno_obj._x < 0)
175. {
176. terreno_obj._x -= velocidade;
177. limite_obj._x -= velocidade;
178. paredes_obj._x -= velocidade;
179. }
180. else
181. personagem_obj._x += velocidade;
182. }
183. }
"text-align: justify;">
Considerações Finais
"text-align: justify;">Bom pessoal, então isso. espero que tenham gostado fiz o máximo par ser claro e objetivo,
dificilmente vocês encontraram um tutorial completo e comentado passo-a-passo de como contruir uma fase inteira de
um game. Claro que poderiam ser abordados ainda mais assuntos, mas seria muito trabalho repetido e estenderia
muito este artigo. Procurei abordar o que é necessário para se criar um game deste gênero. Agora coloque sua
imaginação e criatividade e modfique o quanto quiser e aperfeiçoe para fique ainda melhor, como havia dito antes
quero que entendam a técnica e não apenas aprender a fazer o jogo do “Megaman”, o meu intuito é que possam criar
qualquer jogo com uma folha de sprites na mão e muita criatividade.
"text-align: justify;">O Frame gameover eu não fiz por que fica a seu cargo decidir o que acontecer depois que o jogo
acaba, no meu caso mostrei apenas meu nome e enderço de email com o título do artigo. O barulho que você ouve
no início do jogo é apenas um arquivo inicio.wav que coloquei no primeiro frame do megaman_mc só pra dar mais
emoção. Pra utilizá-lo basta importá-lo para a biblioteca via menu file->import->to library.
"text-align: justify;">Se encontrarem problemas, vocês terão em mãos o mesmo código que usei para o exemplo
funcional que está no início deste artigo. Olhe com cuidado cada etapa pois são muitos detalhes onde a falta de um
causará um erro no game. Creio que não seja facil para quem está começando, mas estude bem os artigos anteriores
para que se familiarize com a forma de como se programa um game. Fáça várias vezes se possível, a prática estimula
a compreensão.
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
Artigos Relacionados
Box2D, Primeira Simulação
Box2D, a engine de Física para Games em Flash
Galeria de Imagens 2 ActionScript 3
Novidades do Flash CS4 - Novo Tween Motion (Animação Baseada em Objeto)
Novidades Flash CS4 - Integrações e o novo Formato XFL
Divulgue
13 de 14 8/5/2009 08:49
3 usuário comentou em " Criação

de Games - Megaman Parte 2 "
Assine o Feed de Comtentários ou URL de Trackback
Giba disse,
Enviado em 09-04-2008 às 4:53 pm
classe a
parabens Márcio
gilmar disse,
muito bom otimoooo !!!! flash e demais!!!
cavernoso disse,
alguem sabe como fazer prá ele ir a outra fase…
Deixe o seu comentário abaixo...
Username (*required)
Email Address (*private)
Website (*optional)
14 de 14 8/5/2009 08:49

Criação de Games - Megaman 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Criação de Games - Megaman 2

Uploaded by

Copyright:

Available Formats

Criação de Games - Megaman Parte 2 - Flash | MXStudio http://www.mxstudio.com.br/flash/criacao_de_games___megaman_p...

SOBRE O MXSTUDIO MAPA DO FEED

PÁG. INICIAL FÓRUM BLOG ANUNCIE NO MXSTUDIO CONTATO

CAPTIVATE Navegação: MXStudio / Flash / Criação de Games - Megaman Parte 2

FLASH MEDIA SERVER

Flash Cs4 e PaperVision3D Download Jogos p/ Celular

Criação de games - Megaman Parte 2

ALEX FIGUEIREDO Pré-requisitos:

Figura 1 - Folha de sprites para o tiro_mega.

Figura 2 - Posição inicla adequada para o tiro_mega.

Figura 3 - Folha de sprites para tiro_2.

É expressamente proibido a cópia,

Figura 4 - Veja o posicionamento na cena.

O primeiro Inimigo está representado no gif abaixo:

Figura 5 - Primeiro inimigo.

Figura 6 - Timeline e o stage depois do import.

Figura 7 - Segundo inimigo.img5.gif

Figura 8 - Timeline e o stage depois do import da segunda imagem.

Figura 9 - Inimigo 1 no stage e seus respectivos frames.

Figura 10 - Inimigo 2 no stage e seus respectivos frames.

Figura 11 -Posição do life e o primeiro inimigo.

Figura 12 - Folha de sprites para atirando parado.

Figura 13 - Folha de sprites para atirando correndo.

E para o mc atirando_correndo coloque no último frame:

162. /*se obedecer a condição abaixo, quem anda é o cenário*/

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

3 usuário comentou em " Criação

muito bom otimoooo !!!! flash e demais!!!

alguem sabe como fazer prá ele ir a outra fase…

Deixe o seu comentário abaixo...

Email Address (*private)

You might also like

162. /se obedecer a condição abaixo, quem anda é o cenário/