Você está em: Principal › Artigos › Progweb : Actionscript003
Jogo - Acerte o Alvo
Bem, vocês sabem que o flash é uma ótima ferramenta para o desenvolvimento de jogos, neste tutorial vamos ensinar como criar um jogo simples mais interessante.
Um breve resumo sobre o jogo: é o seguinte teremos um alvo representado por um passaro que ficará movimentando-se aleatoriamente pelo documento, onde o nosso mouse será um clipe de filme em forma de mira que ao acertar o passaro este cai dando a impressão que você o acertou.
Pré-requisitos: Conhecimentos básicos em Action Script(programação no flash).
1º Passo: Primeiramente crie um novo documento e altere as suas propriedades pressionando a tecla de atalho CTRL+J:
Insira um quadrado usando clicando sobre ferramenta Rectangle Tool( ) ou pressionando a tecla de atalho (R) para ativa-lá, desenhe um retângulo sem fundo do tamanho do documento, ou seja, 550 Largura(Width) x 400 Altura(Height);
2º Passo: Crie um novo símbolo(new symbol) pressionando a tecla de atalho CTRL+F8 e escolha a opção clipe de filme(movie clip), insira o nome que este clipe de filme receberá na biblioteca através do campo name. Com isso copie do Word e insira no flash as cinco imagens centralizadas no centro do clipe de filme(para centralizar as imagens pressione as teclas de atalho CTRL+K selecione a imagem e escolha centralizar ao centro horizontalmente e verticalmente) localizadas abaixo, de acordo com a explicação:
No 1º quadro chave insira a imagem 01;
Insira um 2º quadro chave e insira neste a imagem 02;
No 3º quadro chave insira a imagem 03;
No 4º quadro chave insira a imagem 04;
Isto foi feito para dar a impressão de que nosso passaro está voando. Após ter efetuado a inserção das imagens nos seus respectivos quadros chaves selecione na linha de tempo o quadro de numero 7 e aperte a tecla de atalho F6 para repetir a imagem do último quadro no caso o 4º quadro chave.
Imagem 01 Imagem 02 Imagem 03
Imagem 04 Imagem 05
Clique sobre quadro chave de numero 7 e selecione imagem contida nele e pressione a tecla de atalho F8 e escolha a opção gráfico(graphic), após isso clique na linha de tempo no quadro de nº 20 e pressione a tecla de atalho F6, selecione o quadro de numero 20 e clique sobre a nossa imagem, clique sobre a ferramenta free transform tool( ) ou pressione a tecla de atalho (Q) para ativa-lá rotacione a imagem para que ela fique da seguinte forma:
Arraste a imagem para baixo nesta direção até o final do documento, isto vai dar a impressão de quando clicarmos sobre o alvo o mesmo é atingido e conseqüentemente caí. Para isso clique em um quadro qualquer entre o 7º e o 20º e altere a propriedade interpolação(tween) do painel propriedades para movimento.
Sua linha de tempo deve ficar como a imagem abaixo:
Agora vamos inserir nossas ações neste clipe de filme nos seguintes quadro chaves:
No primeiro quadro chave(KeyFrame) vamos inserir o seguinte código:
//posição aleatório no eixo x
setProperty("_root.alvo", _x, random(500));
//posição aleatório no eixo y
setProperty("_root.alvo", _y, random(400));
Explicação: Este código é responsável por setar a posição x e y do nosso clipe através de uma função random(), função está que dispara aleatoriamente números dentre do intervalo passado como parâmetro.
Insira no quadro chave(KeyFrame) de número 7 o seguinte código:
//vai para o quadro de numero 1 e executa a partir deste
Explicação: Este código só tem uma diferença com relação ao código anterior, que é a ação gotoAndPlay() que tem como parâmetro o quadro que a animação deve ir e continuar a execução a partir deste.
E para finalizar está animação insira no quadro chave de número 20 a ação:
Explicação: Ao chegar no final da animação deve voltar ao seu inicio onde será disparada uma posição x e y aleatória.
Feito isto volte a cena principal. E pressione a tecla de atalho F11 para acessar os objetos da biblioteca e clique e arraste para o palco o clipe de filme do passaro e lhe de o nome de alvo nome este que será usado na nossa programação como mostrado no código anterior. Teste a animação através do pressionamento das teclas CTRL+ENTER e verifique se o clipe de filme alvo está se posicionando aleatoriamente na tela, caso esteja ok vamos prosseguir.
Agora criaremos três variáveis que serão usadas na nossa animação, com os seguintes nomes:
contador – armazena os pontos do usuário quando este acerta o alvo.
posx_m – armazena a coordenada x do clipe de filme da mira.
posy_m - armazena a coordenada x do clipe de filme da mira.
Para criar estas variáveis selecione a ferramenta text tool( ) ou pressione a tecla de atalho (T) para ativa-lá, feito isso desenhe no documento o comprimento de visibilidade do conteúdo de sua variável, não se esqueça de alterar a cor da variável e as suas propriedades como indicado na figura abaixo:
Crie as três variáveis com o nome indicado acima e de acordo com a figura e as alinhe de acordo com a sua preferência pelo documento.
3º Passo: Copie e cole do Word a seguinte imagem que será usada como mira:
Altere o seu tamanho para width(largura) = 63 e height(altura) = 52, pressione a tecla de atalho F8 e escolha a opção clipe de filme(movie clip) para converter a imagem em um clipe filme, está imagem será a imagem que conterá o código do nosso jogo, não se esqueça de inserir o nome do nosso clipe de filme selecionando o clipe de filme da mira e pressionando as teclas de atalho CTRL+F3 para exibir o painel de propriedades se este não estiver ativo e insira o seguinte nome para o clipe de filme da mira: cursor.
Agora pressione a tecla de atalho F9 para exibir a área de programação e insira o seguinte código na seqüência do tutorial no clipe de filme da mira(cursor):
//seta a variavel que armazena os pontos com zero
_root.contador = 0;
//seta a variavel que armazena a posição da mira com zero no eixo x
_root.posx_m = 0;
//seta a variavel que armazena a posição da mira com zero na eixo y
_root.posy_m = 0;
//oculta o mouse
//delimita a area de movimento do mouse ao tamanho do documento
startDrag(this,true,0,0,490,350);
/* cria uma instancia(c) para alterar o cor da mira quando esta colidir com o passaro*/
c = new Color(this);
Explicação: Ao carregar(onClipEvent (load)) o clipe de filme da mira, a variável contador responsável por armazenar os pontos do usuário quando este acerta o passaro é inicialmente definida como zero pois o jogo começou e ele não possui nenhum acerto, as variáveis posx_m e posy_m são responsáveis por armazenar as posições x e y da nossa mira e inicialmente são definidas como zero, porque o alinhamento do nosso clipe de filme da mira deve ficar centralizado no meio do nosso documento na posição x=245.4 e y= 176.0, para que as coordenadas mostradas sejam corretas. O método startDrag(this,true,0,0,490,350) é responsável por deixar a mira como sendo o nosso cursor personalizado e ainda defini uma área de atuação da nossa mira a primeira coordenada 34 defini até onde a mira pode movimentar-se na esquerda, e a coordenada 29 defini até onde a mira pode movimentar-se na parte superior do documento, a coordenada 516 define até onde a nossa mira pode movimentar-se na direita e para finalizar a coordenada 372 define até onde a mira pode movimentar-se na parte inferior do documento. Para finalizar este trecho de código criamos uma variável com o nome de c que será uma instância da classe Color que será usada para mudarmos a cor do nosso clipe de filme da mira.
4º Passo: Insira o seguinte o código abaixo:
//ao pressionar o mouse
//se a mira colidir com o alvo e o quadro atual do alvo for menor que 8
if (this.hitTest(_root.alvo) == true && _root.alvo._currentframe<8) {
//move o clipe de filme do passaro para o quadro 8 - derruba o passaro
_root.alvo.gotoAndPlay(8);
//incrementa a variável que armazena a quantidade de pontos
_root.contador += 10;
Explicação: Ao clicar com o mouse será detectado através da função(hitTest())que tem como parâmetro o clipe de filme do passaro(_root.alvo) se a mira representada na chamada da função através do código(this) colidiu com o clipe de filme do passaro(_root.alvo), esta função retorna verdadeiro(true) no caso da colisão ser verdadeira(true), e se o clipe de filme corrente do alvo for menor que 8 ou seja, só será constado como acerto quando atingir o passaro e este estiver batendo assas e não caindo. Se estas duas condições forem verdadeiras, o clipe de filme do passaro vai para o quadro de número oito e prossegue a animação a partir deste, o intervalo do quadro 8 até o quadro de número 20 é responsável por representar a queda do passaro. E a cada acerto nos contabilizaremos 10 pontos a mais para o usuário.
5º Passo: Bem vamos inserir o nosso último trecho de código do nosso jogo:
//Fica a todo o momento checando
//pega a posição x da mira de acordo com o centro do documento
_root.posx_m = parseInt(this._x)-277;
//pega a posição y da mira de acordo com o centro do documento
_root.posy_m = 202 - parseInt(this._y);
////se a mira colidir com o alvo e o quadro atual do alvo for menor que 8
//deixa a cor da mira vermelha
//deixa a cor da mira normal
c.setRGB(006633);
Explicação: Este trecho de código é responsável por pegar as coordenadas x e y do nosso clipe de filme da mira através das propriedades(_x e _y) as subtrações e adições que são feitas nas coordenadas(x e y) do clipe de filme da mira são responsáveis por deixar a mira inicialmente na posição x = 0 e y = 0. A mesma condição de detecção de colisão é feita novamente só que agora com um intuito diferente que é o seguinte: quando a mira colidir com o passaro e este estiver voando a cor da mira ficará vermelha indicando colisão, caso a mira não colida com o clipe de filme do passaro esta ficará azul.
Se alguém estiver interessado nos arquivos executáveis é só me mandar um e-mail(fabianounipam04@yahoo.com.br) solicitando tais arquivos