Criação de gamesOlá 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.
Então vamos ao que interessa!Crie um novo arquivo (CTRL+N) Dê um clique no primeiro frame e coloque o código abaixo
var cont:Number = new Number();
var cont2:Number = new Number(); cont=0; //contadores de tiros count2=0; //contadores de explosões onEnterFrame=function() { /*verificamos quais teclas o usuário está precionando E também verificando quais os limites da tela */ if(Key.isDown(Key.LEFT) && nave._x >=20) nave._x -=20; if(Key.isDown(Key.RIGHT) && nave._x <500) nave._x +=20; if(Key.isDown(Key.UP) && nave._y >20) nave._y -=20; if(Key.isDown(Key.DOWN) && nave._y <330) nave._y +=20;} onMouseDown = function() Observações referentes ao códigoQuando 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: onClipEvent(enterFrame)
{ if(_name != “tiro”)//verificação que serve para que sejam executados apenas as cópias do tiro, não o verdadeiro { this._y-=30; if(this._y <0)//se o tiro passou do y=0 removemos o tiro this.removeMovieClip(); if(this.hitTest(_root.inimigo)) //verifica se tiro colidiu com o inimigo 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:
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:
onClipEvent(enterFrame)
{ /*Verificamos se o inimigo morreu, vendo se o seu life é menor ou igual a zero*/ if(life<=0) { _root.cont2++; /*Criamos uma explosão, pois o inimigo morreu*/ _root.explosao.duplicateMovieClip(“explode”+_root.cont2, _root.cont2,_root.cont2); _root["explode"+_root.cont2]._x = this._x; _root["explode"+_root.cont2]._y = this._y; this._x = random(300); //o inimigo volta numa posição randômica this.life = 100; //voltamos o life do inimigo } 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: onClipEvent(enterFrame)
{ /*essa verificação serve para que apenas as explosão que serão criadas dinamicamente sejão executadas*/ if(_name != “explosao”) { if(this._alpha > 0) //serve para dar um efeito de explosão this._alpha -= 5; else this.removeMovieClip(); } }
Espero que tenham gostado. Até a próxima. Autor: Márcio Silva – Colunista Flash do Portal MXSTUDIO Em caso de dúvidas acesse o tópico do artigo no fórum de Desenvolvimento de Jogos em Flash do MXSTUDIO: |
ShareThis
estou usando o flash8 e o codigo asima nao fonsiona me parece que esta faltando ocodigo da nave
nao acontese nada com a nave
estou usando o flash 6 ae por favor explica melhor oque e frame
esta faltando o da nave por favor coloca ele
OPAA!
Alô galera, sou novo no action scrpit
gostei do xemplo acima para treinar
boa iniciativa de ajuda para os iniciantes
porém não funciona ….está faltando alguma coisa..
já estou a horas , vá rias tentativas no flashMX
AGORA VOU TENTAR no flash8-seria bom também divulgar a versão do programa utilizado-ajudaria bastante-valeu
Olá Pessoal,
São necessárias apenas duas coisas, para que a nave se movimente, o código do frame 1 que está no tutorial acima, e o mais importante: colocar o nome de instância da nave de “nave”, muita gente confunde o nome do movieclip com nome de instância, é o erro mais comum. Eles não são a mesma coisa.
No artigo não é objetivo ensinar a usar o Macromedia Flash (Utilizei o Macromedia Flash 8 ) para dar nomes de instâncias. Uma pequena busca no google e verão tutoriais referentes a esse tema.
Abraços.
para quem não sabe frame é o mesmo que quadro. gostaria que indicasse um tutorial para programar jogos 3d em flash, obrigado!
Pelas dificuldades que li nos comentários,enquanto fazia o joguinho do tutorial, com o intuito de ajudar, fiz um roteirnho com algumas coisas que poderia ter no tutorial para facilitar o aprendizado.
- Pelo fato de ter muita gente que copia o código da página e cola direto no flash, avisar que as aspas duplas devem ser trocadas para não dar um monte de erros.
- mostrar a barra de propiedades depois da criação de cada movieclip
- Agora vamos so código do inimigo, dê dois cliques no inimigo, (seria bom lembrar que cada movieclip tem sua própria linha de tempo, (pelos níveis dos comentários, deve ter usuários que não devem saber ao certo))
Ahh! o nome da instância do movie clip explosão é explosao (está no código)
Tirando esses detalhes, o código do tutorial não deveria dar nenhum problema, no meu caso funcionou perfeitamente.
no meu deu quase tudo certo…
antes não dava nada certo depois fiz oque o MHJ disse falou e deu certo mas uma coisa não acontece
quando eu uso as teclas left/ right/ up/ down/ . ^. \/.e o click do mouse não acontece nada fika parado a nave fica parada mesmo eu apertando as teclas
se alguem puder me ajudar meu email eh
nightfire92@hotmail.com
obrigado
Leonardo:
não dá pra te ajudar sem dar uma olhada no que vc fez, vou enviar pro seu e-mail o meu arquivo pra vc dar uma olhada. Se ainda assim não conseguir dar um jeito me envia o que vc fez pra dar uma olhada e te ajudar.
Olá caro, belo tit deu certo aqui, porém tentei fazer uma colisão com a “nave” quando o “inimigo” acerta ela, coloquei a ação
~ var life:Number = 100; ~
na “nave” e
~ 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); _root[”explode”+_root.cont2]._x = this._x;
9. _root[”explode”+_root.cont2]._y = this._y;
10. this._x = random(300); //o inimigo volta numa posição randômica
11. this._y = -150;
12. this.life = 100; //voltamos o life do inimigo
13. }
}
na “nave”, mas concerteza não era pra fazer isso não e ?!
oque devo fazer ?!
obrigado
guilherme_accioly@hotmail.com
cara nao to entendendo o que vc quer diser com primeiro frame
estou usando Flash Mx
Eu não entendi uma coisa para cada objeto tem ser ser feito um frame ou só basta mesmo o primeiro e pronto.
A sim gositei muito de soua iniciativa;
Bem pessoal, já trabalho com games em flash faz algum tempo, fiz o exemplo deste tutorial para publicar o código fonte a quem não conseguiu, publiquei o código fla no endereço abaixo, este exemplo foi feito no flash mx, mas funciona perfeitamente no flash 8 e ou posterior.
Deu um total de 17 kb entao naum se assustem pensando que é virus que está no formato .fla
http://www.4shared.com/file/82062893/76110e89/exemplo_do_site_flash_mxstudio.html
Eu não entendo o uso das duas variáveis cont e cont2. Sem elas é impossível duplicar o tiro e as explosões? Porquê?
Tentei fazer um exemplo mais simples, onde eu arrastava uma bola (startDrag) e passava por cima de um quadrado. Nesse momento a bola deveria voltar para o lugar de origem. Meu código ficou assim
bola.onPress = function () {
startDrag(bola);
};
bola.onRelease = function () {
stopDrag();
};
if (bola.hitTest(_root.quadrado) {
stopDrag();
bola._x = “posição original x”
bola._y = “posição original y”
// agora não lembro dos numeros x e y
};
Bom. Para poder pegar a bola. Tive que transforma-la em Button. E o quadrado é um MovieClip. Mesmo soltando a bola ela não volta aposição original
eu fiz esse jogo tudo certo mas quando eu vou atirar a nave muda de lugar em vez de eu atirar e a nave explodir PQ?
me ajudem por favor
eu queria saber como faço para colocar mais de um inimigo.
ja tentei o mesmo codigo usado no outro mas ñ deu certo.
Eu estou procurando uma equipe para desenvolvimento de jogos e queria negociar com você. Me adicione no msn: crazymania@crazymania.com.br
Abraços
Olá pessoal….
Também achei esse tutorial o máximo, parabéns Márcio pela iniciativa.
O que acontece é que na minha tentativa, miha nave funciona perfeitamente inclusive os tiros, porém o inimigo não aparece de forma alguma.
Alguém pode me ajudar? Meu e-mail é:
luiz_fernando_ata@hotmail.com.
Se alguém puder enviar um arquivo que funcione normalmente eu agradeço.
Abraços!!!
mas qual é exatamente o codigo da nave.
valew mãn perfeiito criei um jogo tipow cs apartii desse tutorial ;D
Olá pessoal.
Como faço para a nave inimiga atirar?
já fiz o tiro para o inimigo usando os mesmo comando da nave .Testei usando os mesmos comando da nave para atirar e foi uma beleza.
Mas quero fazer o inimigo atirar sozinho! Como faço?
O seu primeiro codigo aparece que está cheio de erros no flash 8 será algo errado nele?
temtei temtei mas não consegue pois as configurações das naves e inimigos estavam erradas
Olá Marcio, não sei o que acontece, mas o código não funciona.
Description: “This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.”
Abs,
Paulo