Artur Guitelar WebGamescomAS3

Games em ActionScript 3.0

1

Web Games Aprendendo a criar seus jogos para web.

Objetivo 1:

Um jogo de nave simples.


2

Introduo:

O Objetivo dessa apostila indicar os primeiros passos para aspirantes a criador de jogos. Tentei colocar aqui as bases necessrias para criao de um jogo simples, que pode ser feito com apenas alguns dias de trabalho, mas que contm as principais coisas necessrias, como movimentao via teclado, criao de vrios inimigos, coliso e sons.

De maneira alguma tenho expertise no assunto, sou apenas um entusiasta apaixonado por jogos que quer ajudar outros entusiastas a seguirem um caminho. Estou apenas auxiliando no aprendizado de uma ferramenta onde os criadores podero ver seus projetos se movimentando pela tela.

Espero que essa apostila lhe ajude tanto quanto me ajudou t-la criado e que voc se divirta tanto quanto eu.

Artur Guitelar - Killdragon


3

Ok, porque ActionScript 3.0?

Explicando de forma rpida e fcil, o ActionScript uma linguagem de programao script desenvolvida pela Adobe e que pode ser encontrada no Flash ou no Flex, softwares da mesma empresa.

Embora o software tenha um forte apelo para sites e animaes web, o cdigo robusto e conciso o suficiente para permitir que sejam programados bons jogos, que podem tanto ser jogados online quanto no computador, principalmente se sua inteno for desenvolver jogos de pequeno e mdio porte. Mas nada impede que um programador experiente possa desenvolver jogos de grande porte. Deixo como exemplo uma imagem do MMO Dofus (http://www.dofus.com/pt), para que os mais curiosos procurem informaes sobre ele no site da Ankama e entendam do que eu estou falando.

Existe uma srie de softwares para criao de games gratuitos pela web, como o RPG Maker, o The Games Factory e o Game Maker. E at mesmo Engines poderosssimas como a Unreal e a Unity 3D.

Mas, a meu ver, enquanto os primeiros exemplos limitam um pouco o aprendizado real de programao por serem softwares um pouco mais limitados, os dois ltimos citados so direcionados a quem j tem certa experincia na rea.

Para mim o ActionScript 3.0 est entre estes dois estilos de software. Se for usado em conjunto com o Flash o aprendizado se torna uma experincia visual gratificante, pois os primeiros


4

passos acontecem muito rapidamente, e logo possvel comear a programar jogos simples, desde que se entendam os conceitos corretamente.

A linguagem tambm muito popular na Web, e no nada difcil encontrar bom material de estudo em livrarias e pela internet afora.

A questo aqui que a maioria do material voltado para jogos est disponvel em ingls. Essa apostila visa clarear um pouco a mente de todos tambm neste sentido, pois preciso mais material sobre o assunto em portugus.

E porque WebGames?

Em sua maioria os WebGames possuem caractersticas nicas que ajudam muito a quem est iniciando no mundo do desenvolvimento de jogos.

Fcil distribuio: No muito difcil encontrar sites gratuitos que hospedem seu jogo ou, se voc j tiver experincia com sites, hospedar um WebGame em flash em seu prprio servidor;

Feedback rpido: Aproveitando o poder de comunicao que a internet possui possvel obter rpidas respostas positivas ou negativas sobre o seu game;

H muito material de inspirao na Internet: Uma rpida olhadela em sites como o http://www.kongregate.com/ ou o http://armorgames.com/ e j possvel encontrar centenas de games disposio para inspirao.


5

Agora entendi. Vamos comear?

Vamos com calma. Antes de comearmos a produzir nossos jogos preciso entender alguns conceitos por trs da programao.

Primeiramente vamos dar uma olhada na interface do Adobe Flash CS5:

Provavelmente essa a primeira janela que o Flash ir apresentar quando for iniciado. bom lembrar que o objetivo desta apostila no ensinar sobre o software em si, e sim sobre a linguagem ActionScript 3.0 voltada para jogos, e algumas formas de usar o programa em prol disso. Mas fique tranquilo, mesmo que no tenha tido experincias antigas com o Flash, basta seguir os exerccios atenciosamente e tudo estar bem.

Claro que conhecer o programa previamente ir facilitar um pouco as coisas, mas no extremamente necessrio domin-lo por completo.

De qualquer forma o site oficial da Adobe (http://www.adobe.com/pt/ ) possui diversos tutoriais e o prprio help do programa bem amigvel. Livrarias e Internet tambm possuem materiais de qualidade sobre o software.

Para comear, basicamente iremos precisar clicar em ActionScript 3.0, que se encontra na coluna Criar novo. Isso ir abrir um documento novo j preparado para aceitar a linguagem.

Duas coisas superimportantes:


6

Este tipo de arquivo no Flash recebe a extenso .fla quando salvo, e o principal documento do seu projeto;

No possvel unir de forma consistentes projetos que possuam cdigos em ActionScript 2.0 e ActionScript 3.0. A linguagem ActionScript 2.0 est descontinuada pela Adobe, mas ainda possuem programadores que preferem utiliz-la.

Com o documento aberto iremos precisar basicamente de duas janelas (que no esto habilitadas por padro) para iniciarmos os exerccios: Aes (F9) e Sada (F2).

Arraste a nova janela Aes que se abriu para a faixa de baixo onde est o painel Linha do tempo e, quando a cor da faixa estiver azul, solte.


7

Deve ficar desta forma:

Existem outras formas de organizar as janelas, mas no iremos nos preocupar com isso agora.


8

Salvando Arquivos

interessante sempre salvar os arquivos, mesmo antes de terminar de editar um documento. Isso impede que sejamos pegos de surpresa caso acabe a luz, ou algum evento estranho desligue o computador no meio daquele cdigo complicado que acabamos de criar.

Para salvar arquivos no Flash, basta clicarmos no menu Arquivo e escolhermos a opo Salvar.

Na primeira vez que salvamos, o programa nos d a opo de escolhermos o local, o nome e o tipo do arquivo que iremos salvar.

Depois disso, basta ir clicando em salvar periodicamente, depois de fazer alteraes. O arquivo sempre ser salvo no mesmo lugar, com o mesmo nome.

O nome do arquivo agora aparece na aba da parte superior da cena.


9

Como j foi dito, o Flash salva os arquivos no disco com a extenso .fla.

Caso queira salvar em outro local, ou com nomes diferentes, basta selecionar no menu arquivo, a opo Salvar como...

A tecla de atalho para salvar ctrl + s, lembre-se sempre de usar o ctrl + s periodicamente.

A tecla de atalho para salvar como... ctrl + shift + s.

No ser sugerido o nome do arquivo at a hora que seja necessrio. Mas interessante salvar os exerccios em arquivos separados para uma melhor organizao.


10

Escrevendo as primeiras linhas de cdigo

O painel de Aes contm do lado esquerdo uma srie de atalhos para os comandos e bibliotecas e do lado direito uma rea em branco de entrada de texto, onde escreveremos (digitaremos) algum cdigo. Toda vez que precisarmos testar o cdigo, iremos utilizar o atalho Ctrl+Enter para visualizar o resultado.

O primeiro comando que iremos conhecer o trace. Ele imprime resultados no painel de sada de acordo com a solicitao do usurio.

Digite no painel de Aes:

trace(Ol! Essa a sua primeira linha de cdigo.);

Agora utilize as teclas de atalho Ctrl+Enter e observe o resultado.

Note que a janela est em branco, mas o resultado do trace est no painel de Sada.

Feche a nova janela que se abriu e clique no painel de Aes. Vamos observar como funciona o cdigo:

trace(Ol! Essa a sua primeira linha de cdigo.);

Tudo o que estiver entre os parnteses do comando trace ser exibido no painel de sada;

O que est entre aspas considerado como texto no compilador do Flash;

A cor azul indica que trace uma palavra reservada do ActionScript 3.0. No utilize palavras reservadas para outras funes que no sejam prprias para elas.


11

A cor verde indica que tudo que est entre aspas texto.

Para uma melhor organizao e compreenso, interessante terminar as linhas de cdigo com ;. O ActionScript 3.0 aceita linhas sem ; mas coloc-lo no final uma boa prtica de programao e ir prepar-lo para linguagens futuras.

Vamos exercitar isso mais um pouco. Apague a antiga linha de cdigo e digite estas:

trace(COMEOU A LUTA!);

trace(Os competidores na arena so poderosssimos! A luta ser

emocionante!);

trace(Jogador 1 d um soco.);

trace(100-30);

trace(Jogador 2 d um chute.);

trace(100-40);

trace(Jogador 1 aplica um golpe especial.);

trace(70-50);

trace(Jogador 2 aplica um golpe especial de nvel 2!);

trace(60-60);

trace(Jogador 1 cai derrotado.);

trace(FIM DA LUTA.);

Observe o resultado.

Observe que tudo o que estava escrito entre aspas foi duplicado no painel, mas os nmeros foram calculados. Essa a diferena bsica entre dados do tipo String e dados do tipo Number. O interpretador faz os clculos dos nmeros se eles no estiverem entre as aspas.

Experimente digitar:

trace(10+10);

trace(10+10);

Voc perceber que a primeira linha mostrar o resultado e a segunda apenas repetir o que est entre aspas.

O padro de leitura do cdigo pelo interpretador da esquerda para a direita e de cima para baixo, assim como lemos os livros e revistas.


12

Fundamentos bsicos da linguagem

A luta passada foi bem emocionante, mas escrever uma luta mais extensa pode se tornar bem cansativo.

Isso porque utilizamos um estilo Sequencial na linguagem, ou seja, escrevemos os comandos linha a linha e o interpretador vai lendo uma por uma e executando passo a passo at o fim.

importante entender que este tipo de programao no vivel quando se trata de games, pois torna o cdigo muito extenso. Uma forma de contornar isso utilizando variveis, condicionais e funes.

Vamos comear com as variveis

Variveis so espaos alocados na memria separados pelo programa para armazenar determinados dados. De uma forma mais simplista como se fossem contineres que podem ser preenchidos com informaes que sero usadas depois.

As variveis no cdigo precisam ser declaradas e recebem um nome. Boas prticas de programao sugerem algumas regras para a nomeao das variveis.

No utilize nomes de variveis do ActionScript (se o nome ficar azul ento mude o nome da varivel), elas so palavras-chave de scripts da linguagem;

Procure comear com letras minsculas. Nmeros e caracteres s so aceitos em conjunto com letras e aps a primeira letra do nome;

No devem comear com nmeros ou caracteres especiais;

Se a varivel tiver um nome composto, no deve ter espao entre as palavras. Uma boa prtica utilizar um _ ou uma letra maiscula para referenciar as palavras. Ex.: primeira_variavel ou primeiraVariavel;

No utilize nomes repetidos em variveis globais em um mesmo cdigo;

Utilize nomes curtos (ou abreviados), de fcil reconhecimento e que indiquem o que a varivel faz.

Experimente digitar isso:

var testando = "testando";

trace(testando);


13

O resultado:

A palavra var serve pra indicar que estamos comeando uma varivel, o nome da varivel testando e ela tem como valor o texto (String) testando;

Significa que toda vez que utilizarmos a varivel testando ela ir trazer este resultado. Como ela est entre aspas fcil identificar que a varivel do tipo String (texto), mas por boa prtica melhor declar-la desta forma:

var testando:String = testando;

Utilize o trace e o resultado ser o mesmo.

Eis uma tabela com os tipos de dados disponveis:

Tipo de Varivel Exemplo Descrio Number 15.5 Qualquer nmero, incluindo decimais

int -20 Qualquer nmero inteiro

uint 3 Qualquer nmero inteiro sem sinal ou no-negativo

String Ol! Texto ou uma sequncia de caracteres Boolean true Verdadeiro ou falso Array [1,2,3] Mais de um valor em uma nica varivel

Object umObjeto Estrutura bsica de toda a estrutura do ActionScript, utilizada para armazenar vrios valores como um Array

Vamos a um exemplo prtico. Vamos criar duas variveis para armazenar a quantidade de energia de um personagem, depois simulamos que ele levou uma pancada e perdeu uma quantia dessa energia.

var energiaPersonagem:Number = 100;

var pancada:Number = 50;

trace(energiaPersonagem - pancada);

Se o resultado for 50, est correto.


14

As Condicionais

Muitas vezes enfrentaremos situaes em que preciso fazer comparaes. Por exemplo, um personagem ganhar um item especial aps ganhar um level, ou mesmo dizer que um inimigo foi derrotado aps sua energia estar abaixo de 0.

Para estes casos existem as condicionais, que so estruturas de cdigo que comparam os termos e trazem um resultado. como se fizssemos um teste e se a condio no atendida nenhuma ao realizada.

O if

Essa a forma mais comum de condio. Praticamente todas as linguagens utilizam o if de alguma forma. If em portugus significa se, e basicamente compara condies verdadeiras e falsas.

Vamos prtica:




if(energiaPersonagem < pancada){

trace("Personagem Morreu!");

}

O resultado:

Parece confuso agora? Vamos destrinchar um pouco este script.

Essas so as variveis da pancada e da energia do personagem:



Ento pedimos o resultado com esta linha:


E depois fizemos uma comparao: Se a energia do personagem for menor do que a pancada, ento vai aparecer a frase Personagem Morreu! no painel de sada.

if(energiaPersonagem < pancada){

trace("Personagem Morreu!");


15

}

Iniciamos o comando if, entre parnteses fazemos as comparaes e entre as chaves colocamos o cdigo a executar caso a comparao d certo.

Experimente trocar o valor da pancada de 110 para 90 e veja o que acontece!

Se no aconteceu nada, est correto. No h condio para caso a energia seja maior do que a pancada. Neste caso, experimente adicionar ao script a linha abaixo:

if(energiaPersonagem > pancada){

trace("Personagem continua vivo.");

}

Acredito que voc j tenha entendido.

O Switch

O switch (escolha) uma condicional de escolhas. Damos opes para serem escolhidas dentro do switch. Basicamente como se fosse um if, com uma estrutura mais simples, pois ele tambm testa condies verdadeiras e falsas.

Vamos a um exemplo prtico:

var soco:String = "Soco";

var chute:String = "Chute";

var especial:String = "Golpe Especial";

var botaoApertado:String = "a";

switch(botaoApertado){

case "a":

trace(soco);

break;

case "b":

trace(chute);

break;

case "c":

trace(especial);

break;

default:

trace("nenhum golpe");

break;

}

Destrinchando o cdigo.

Temos agora 4 variveis, todas do tipo String:






16

O switch inicia levando em considerao a varivel botaoApertado e ir usar este valor para conferir o que verdadeiro. Case, significa caso em portugus, ento ele ir verificar caso a caso, at encontrar o valor do botaoApertado (que a). Quando o valor for encontrado, a prxima linha depois dos : (dois pontos) ser executada, at a hora em que encontrar um comando break (quebrar). Ento o switch retorna os resultados.

Experimente trocar o valor da varivel botaoApertado por b e veja que o resultado ser Chute, e assim por diante.

Um pequeno detalhe:

default:


break;

Este trecho indica que, se nenhum dos case (caso) funcionar, o valor default (padro) ser a frase nenhum golpe. Experimente colocar qualquer valor que no seja a, b ou c na varivel e veja o resultado.

Isso tambm seria possvel de fazer com o if. Vejamos como o cdigo ficaria:





if(botaoApertado == "a"){

trace(soco);

}else if(botaoApertado == "b"){

trace(chute);

}else if(botaoApertado == "c"){

trace(especial);

}else{


}

O resultado o mesmo.

Voc poderia escolher qualquer um dos dois neste caso, mas se tivssemos 50 verificaes, o cdigo if j seria de difcil leitura. O if tambm reservado para casos de comparaes mais difceis, como ifs dentro de ifs (veremos isso mais adiante). Tambm pode ser utilizado um if dentro de um switch e vice-versa.

A novidade neste cdigo fica por conta do else if (se no, se) e do else (seno).


17

Utilizamos else if em um bloco de cdigo que tem condies para serem checadas que so dependentes umas das outras.

E este else no final teria o mesmo valor do default no switch, ou seja: estamos dizendo que se no for nenhuma das opes, utilize esta que est neste ltimo else..

Loops

Antes de qualquer coisa preciso saber que Loops (Ciclos, para este caso) so trechos de cdigo condicional que sero repetidos at que consigam alcanar um determinado critrio. Para que fique mais simples, vamos a um exemplo prtico, comeando pelo loop for:

var soco:Number = 10;

for(var i=0; i


18

for(var batata=0; batata


19

As Funes

Funes (ou mtodos, ou procedimentos) so blocos de cdigo que podem ser reaproveitados posteriormente. Isso evita que muitos trechos de cdigo sejam repetidos e o ajuda para que o cdigo no fique muito extenso. No Actionscript 3.0 todas as funes devem comear com a palavra function e precisam ter um nome, assim como as variveis. Aps o nome elas recebem () (parnteses), que podem, ou no, conter os parmetros necessrios para a reutilizao de variveis. Tudo o que precisa ser executado colocado entre {} (chaves). No muito diferente do que j vimos nas condicionais.

Confuso? Vamos prtica:

function comportamentoInimigo(){

trace("Inimigo sempre persegue o player.");

trace("Inimigo foge quando sua energia est abaixo de ",

30);

trace("Os tiros do inimigo sempre tiram ", 10, " da energia

do oponente.");

}

comportamentoInimigo();

Resultado:

Agora, sempre que precisarmos escrever novamente essas trs linhas no painel de sada, basta chamar a funo desta forma: comportamentoInimigo();

Experimente acrescentar este trecho logo abaixo do cdigo:

trace("O Player est andando pela tela e encontra um inimigo.");


trace("O Player se desvia dos tiros e mata o inimigo com uma

magia poderosa!");

trace("O Player continua sua caminha e encontra outro

inimigo!");


trace("Novamente o Player lana uma magia poderosa e vence a

batalha!");

O resultado:


20

Acredito que agora esteja clara a funo da Funo (trocadilho infame).

E os tais dos parmetros?

Outra grande vantagem da funo poder modificar algo dentro delas atravs dos parmetros. Os parmetros nada mais so do que variveis que so colocadas dentro dos parnteses de uma funo. como se adicionssemos propriedades modificveis s nossas funes.

Exemplo:

function mudaNome(nome:String){

trace("O nome do personagem ser: ", nome);

}

mudaNome("Marssupilami");

mudaNome("Ryu");

mudaNome("Chapeleiro Louco");

Resultado:

Alm de reutilizarmos a funo mudaNome, ainda modificamos os nomes atravs da varivel nome, que est dentro da funo e foi acessada como um parmetro.

Regras bsicas de funes com parmetros simples:

A quantidade de parmetros dentro dos parnteses e dentro das chaves deve ser a mesma sempre;


21

Se a funo pede dois parmetros, quando ela for reutilizada, precisar de dados que

preencham os dois parmetros. Ex. mudaNome(nome:String, sobrenome:String){...}, e quando for reutilizar: mudaNome(Yori, Yagami);

Sempre especifique o tipo da varivel que est sendo utilizada entre os parnteses. Ex. capacete(nomeDoCapacete:String, resistencia:Number){...};

As variveis dentro dos parnteses devem ser separadas com vrgula;

No inicie nomes de funes com nmeros ou caracteres especiais;

Procure colocar nomes curtos, fceis de entender e que lembrem o que ela faz.

Instanciando os primeiros sprites

Em um game 2D, sprites so elementos que se movimentam na tela. Eles podem ser personagens, montanhas, partes do cenrio, poderes mgicos... Basta se movimentarem (ou terem animaes) e serem instanciados com algum cdigo. O cdigo dar propriedades a estes sprites e ir trata-los como um objeto.

Mas o que so Objetos?

ActionScript 3.0 uma linguagem que trabalha massivamente com objetos. Um objeto pode possuir propriedades (que definem sua, altura, largura, cor...) e tambm pode possuir mtodos (que definem seu comportamento, o que ele faz).

Na prtica um objeto no cdigo uma instncia de cdigo que possui propriedades como um objeto real. Por exemplo:

var aeronave:Object = new Object();

aeronave.width = 350;

aeronave.rotation = 30;

aeronave.height = 60;

trace(aeronave.width);

trace(aeronave.rotation);

trace(aeronave.height);

Resultado:

Neste pequeno trecho definimos que nossa aeronave uma varivel do tipo Object. A classe Object um mtodo pronto dentro do ActionScript 3.0 e, para no termos de modificar o cdigo original, utilizamos uma nova instncia com o cdigo new Object() . Dessa forma temos


22

acesso parte do cdigo escrito na classe Object, que a classe principal do ActionScript. No se preocupe com classes agora, veremos isso mais adiante.

Basicamente reutilizamos a classe Object() e adicionamos propriedades em nossa aeronave. Agora ela possui largura (width), rotao (rotation) e altura (height). Atrelamos essas propriedades atravs do nome do objeto (no caso, aeronave), o ponto (.) e a propriedade que definimos. como se dissssemos que agora a propriedade width faz parte de nossa aeronave.

Como utilizar isso em um Sprite?

No decorrer do curso, os alunos receberam um arquivo .fla que continha este projeto:

No nada muito complicado. Na verdade simulei grama, montanhas e cu na camada de baixo e bloqueei-a para que no atrapalhasse. Na camada de cima ficou apenas a nave.

Os pormenores de edio de objetos e camadas no sero apresentados aqui. Sugiro que busque tutoriais e apostilas de exemplo na internet. O prprio Flash tem alguns modelos de exemplo e um manual bem explicado.


23

Certifique-se que neste exerccio nosso cdigo seja inserido no quadro 1 da camada da nave (veja figura). Assim que for inserido algum cdigo, a letra a minscula aparecer no quadro, indicando que ali h um cdigo ActionScript.

A nave que temos na tela ser nosso Sprite, que pode ser uma imagem importada de sua preferncia, ou at mesmo uma bolinha criada com as ferramentas do Flash se voc assim preferir. Todos os desenhos iro passar pelo mesmo processo.

Selecionamos a nave, e iremos iniciar o processo de transform-la em um Movie Clip (Clipe de Filme) apertando a tecla F8 (ou clicando no menu Modificar -> Converter em smbolo...).

Para o exerccio, iremos colocar o nome de nave e o ponto de registro no meio. O nome no importa neste momento, voc pode nomear a nave com o nome que quiser. Aps isso s apertar OK.


24

Desta forma, agora temos a nave em nossa biblioteca. Acesse o painel de Propriedade e na caixa , digite o nome que dar acesso a essa nave no cdigo. No caso, colocaremos nave tambm. Este nome voc usar durante o cdigo, portanto guarde-o bem.

No necessrio que a ocorrncia tenha o mesmo nome da nave, mas necessrio que este nome siga as mesmas regras dos nomes das variveis, pois por este nome que iremos identificar a nave no cdigo.

Lembre-se: para este exerccio o cdigo deve ser digitado no quadro 1 da camada da nave. Certifique-se que este o quadro que est selecionado no painel Linha do tempo, e abra o painel Aes.

Vamos brincar um pouco com as propriedades da nossa nave.

nave.x =100;

nave.y = 100;


25

Resultado:

Como agora o cdigo reconhece que a nave faz parte do cdigo, pudemos acrescentar propriedades a ela. Neste caso, setamos a posio em que ela apareceria na tela. Veja que a posio inicial diferente, mesmo assim, o interpretador publicou a posio que estava no cdigo, ento nossa nave foi movida no eixo x e y.

Mas, se estamos falando de x e y, como um grfico cartesiano! A nave no deveria estar l embaixo?

Na verdade, quando se trata de programao, o eixo y invertido. Vejamos a comparao:


26

Outra considerao importante, que o centro do eixo comea no lado superior esquerdo da tela (salvo, se alguma coisa na programao mudar isso). O que seria algo neste estilo:

Por causa disso, a nave ficou perto do canto superior esquerdo. Experimente trocar os valores de x e y e veja o que acontece.


27

Abaixo uma tabela de propriedades bsicas de um Movie Clip. Teste-as uma a uma e veja as modificaes. Depois troque os nmeros e faa mais alguns testes para dominar essas propriedades.

Descrio Propriedade Sintaxe Tipo de Unidade

Posio x, y (minsculos) nave.x = 100; nave.y = 100;

pixels

Escala scaleX, scaleY nave.scaleX = 0.5; nave.scaleY = 0.8;

porcentagem

Tamanho width, height nave.width = 50; nave.height = 50;

pixels

Rotao rotation nave.rotation = 90; graus (de 0 a 360)

Transparncia alpha nave.alpha = 0.3; porcentagem (de 0 a 1)

Visibilidade visible nave.visible = false; booleana (true ou false)

Qual a diferena entre visible = false e alpha = 0?

Basicamente, setando visible o objeto guardado na memria, mas no pode mais ser clicado ou receber uma coliso com outro objeto. como se exclussemos o objeto, mas mesmo assim ele ainda est l ocupando espao no processamento e pode ser tornado visible = true a qualquer momento. A propriedade alpha = 0 torna o objeto invisvel visualmente, mas ele continua ocupando a mesma posio, e pode receber testes de coliso.

Comentando linhas

J foi dito que o programa entende o cdigo nesta ordem: da esquerda para a direita e de cima para baixo. Ele tambm ignora os espaos em branco. Este um dos motivos do por que aplicar a prtica de terminar as linhas com ponto-e-vrgula (;), assim indicamos que aquela linha terminou.

Na prtica, o programa l e compila todo o cdigo como um bloco s, e considera fins e comeos de blocos e linhas de cdigo por causa dos pontos-e-vrgulas, parnteses, colchetes e parte da lgica do cdigo. E as linhas brancas, ele ignora. interessante separar os blocos de cdigo que fazem a mesma funo para no nos confundirmos visualmente.

Muitas vezes necessrio comentarmos o cdigo, principalmente aqueles complicados e cheios de frmulas. Uma boa prtica comentar no comeo de cada bloco de cdigo, mas isso vai a critrio de cada um. As linhas comentadas, tambm so consideradas como linhas vazias, e so ignoradas pelo programa.

Para comentar uma linha, utilize duas barras no incio da linha. Ex.:

//setando as propriedades da nave isso um comentrio nave.x =100;

nave.y = 100;

Para comentar parte de uma linha, utilize as duas barras, mas lembre-se de que o comentrio s ser considerado at a hora em que voc pular uma linha E aps o ponto e vrgula. Ex.:


28

//setando as propriedades da nave

nave.x =100;//propriedade no eixo x

nave.y = 100;//propriedade no eixo y

Esta tambm uma prtica bem comum.

Acredito que ficou claro: tudo o que estiver aps as duas barras naquela linha ser ignorado pelo interpretador.

Algumas vezes se faz necessrio comentar blocos de texto inteiros, e neste caso no vivel fazer o comentrio linha-a-linha, mais prtico utilizar o mtodo desta forma: /* bloco de texto a ser ignorado pelo programa.*/

Tudo o que estiver entre /* e */ ser ignorado.

Sendo assim, comente todas as linhas de cdigo que fez at agora no arquivo nave.

Eventos

Eis aqui um recurso de extrema facilidade e importncia no Actionscript 3.0: Os Eventos.

Eles so responsveis pelas configuraes dos scripts e definem parmetros, fazendo com que eles sejam executados. Eventos de teclado (KeyboardEvent), podem adicionar propriedades s teclas do teclado, eventos de mouse (MouseEvent), podem acionar botes na tela, caixa de textos e at mesmo chamar funes personalizadas.

Existem inmeros eventos, alguns deles so disparados quando se assiste a um vdeo, se trabalha com textos, se aciona um boto no teclado, quando uma animao precisa acontecer, ou at mesmo quando uma pgina aberta.

E eles ficam melhor ainda quando utilizados em conjunto com os Listeners.

Ouvintes de evento

Os ouvintes de evento (Listeners) so um poderoso recurso do Actionscript 3.0, que permite ao programador atrelar eventos diretamente a objetos instanciados no cdigo.

Vamos utilizar a nossa nave como exemplo.

nave.addEventListener(MouseEvent.MOUSE_UP, naveRodaParaDireita);

function naveRodaParaDireita(event:MouseEvent):void{

nave.rotation += 30;

}

Feito isso, clique na nave vrias vezes. Clique fora da nave, e veja o que acontece.

Com este script, toda vez que clicamos na nave, ela rotaciona 30 para o lado direito, mas nada acontece se clicarmos nas montanhas, por exemplo.


29

Vamos destrinchar um pouco mais o cdigo:

nave.addEventListener(MouseEvent.MOUSE_UP, naveRodaParaDireita); nesta linha, atravs do comando addEventListener, estamos definindo que a funo s ir acontecer se o evento estiver relacionado nave. Entre os parnteses, definimos que o evento acionado pelo mouse atravs do comando MouseEvent e que algo acontecer quando a tecla do mouse for solta (MOUSE_UP). Depois dizemos qual funo poder ser acionada quando isso acontecer, no caso, naveRodandoParaDireita.

No comeo parece um pouco complicado, mas com a prtica voc ver que muito simples: basta lembrar a ordem em que as coisas precisam ser descritas e tudo ocorrer bem.

function naveRodaParaDireita(event:MouseEvent):void{ aqui criamos uma funo chamada naveRodandoParaDireita e, entre parnteses, definimos que a varivel event ter o valor de um MouseEvent (Evento de mouse). Qual o tipo de evento (MOUSE_UP, MOUSE_DOWN, CLICK...) j foi definido quando criamos o listener. E definimos que a funo ser do tipo void, que significa que ir retornar um valor vazio, pois no precisamos disso definido para acess-la.

nave.rotation += 30; Definimos que a propriedade rotation da nave recebe +30 de valor cada vez que a funo chamada, ou seja, a cada vez que o boto do mouse solto..

} a funo termina aqui.

Na prtica, criamos uma funo dentro do objeto nave, que acionada toda vez que clicamos em cima dela e soltamos o boto do mouse. Como um evento MOUSE_UP, nada acontece se voc deixar o mouse pressionado em cima da nave. Experimente.


30

Encontrando as teclas do teclado no cdigo.

Muitos dos jogos utilizam o teclado para movimentar os Sprites na tela. Cada tecla possui um nmero no cdigo. Para encontrar este nmero iremos criar um script que retorna o nmero da tecla na caixa de Sada toda vez que ela pressionada.

Apague todo o cdigo anterior (ou salve em outro arquivo e depois apague) e digite este:

stage.addEventListener(KeyboardEvent.KEY_DOWN, achaTecla);

function achaTecla(event:KeyboardEvent):void{

trace("O cdigo da tecla : ", event.keyCode);

}

Num primeiro momento nada acontece. Mas ao apertar algumas teclas poderemos ver seu cdigo no painel de sada.

Localize os cdigos das teclas que vai utilizar e anote. Geralmente utilizamos as teclas: esquerda, baixo, cima, direita, w, a, s, d, z, x e barra de espao, cada conjunto para um tipo de jogo. Voc definir isso em seus projetos.

Algumas vezes o flash pode precisar importar algumas bibliotecas para o cdigo. Algo como isto:

import flash.events.KeyboardEvent;

import flash.events.Event;

No se preocupe em apagar estas linhas, neste caso no h diferena se elas so importadas ou no, elas sero explicadas no futuro.

37

38

39 40


31

Mova-se nave!

Para este exerccio, iremos apagar todo o cdigo e salvar o arquivo como NaveSeMovendoPeloTeclado.fla.

A primeira coisa que devemos pensar em como acontecero os eventos. O que sabemos que, ao apertar as teclas, a nave se mover na direo que queremos, mas para chegar a isso precisaremos de 3 eventos:

KeyboardEvent.KEY_DOWN;

KeyboardEvent.KEY_UP;

Event.KEY_FRAME.

Os dois primeiros eventos so de fcil entendimento: O primeiro se refere quando apertarmos a tecla e o segundo ao que acontece quando soltarmos a tecla.

O ltimo evento se refere ao que acontece a cada atualizao de tela.

Para entender isso melhor, pense nos desenhos animados, que nada mais so do que imagens paradas sendo atualizadas a uma quantidade X por segundo.

Como possvel ver no painel de Propriedades, o Flash CS 5 Professional tem uma taxa de 24FPS (frames per second quadros por segundo), o que significa que 24 imagens so trocadas a cada segundo no Flash. Essa taxa pode ser mudada, claro, mas como estamos desenvolvendo para web, melhor trabalhar com esta configurao.


32

Iremos precisar tambm de algumas variveis. Para no confundir muito, no comeo iremos utilizar apenas duas, depois ajustamos as configuraes necessrias.

Digite o cdigo:

var movimento:Number = 5;

var checarTecla:Boolean = false;

stage.addEventListener(KeyboardEvent.KEY_DOWN, teclaPress);

function teclaPress(event:KeyboardEvent):void{

if(event.keyCode == 37){

checarTecla = true;

}

}

stage.addEventListener(KeyboardEvent.KEY_UP, teclaSolta);

function teclaSolta(event:KeyboardEvent):void{


checarTecla = false;

}

}

stage.addEventListener(Event.ENTER_FRAME, movNave);

function movNave(event:Event):void{

if(checarTecla == true){

nave.x += -movimento;

}

}

Agora que voc j tem as bases de como funcionam as funes e os listeners, no to difcil entender, no mesmo?

A varivel movimento tem o valor 5 e garante que a nave se mova 5 pixels.

A varivel checarTecla tem valor false, porque ele checa quando o jogador ir apertar a tecla necessria para a nave se movimentar. Como no incio do jogo no h movimento, ela inicia com o valor false (falso).

Depois temos 3 listeners e 3 funes. Note que, dessa vez, os eventos esto atrelados ao stage (palco do flash), e no so dependentes da nave, embora influenciem o movimento dela.

O primeiro bloco checa se a tecla est apertada, atravs do keyCode (cdigo da tecla). Se estiver, o valor de checarTecla true.

Note aqui que, quando utilizamos == (igual duas vezes), significa que estamos checando alguma condio, ou seja, estamos comparando os valores. Para que o checarTecla seja true, precisamos verificar se a tecla apertada a 37.

Quando utilizamos apenas = (um sinal de igual), significa que estamos atribuindo um novo valor varivel. A partir de agora a varivel passa a ter o valor true, e no mais false.


33




checarTecla = true;

}

}

A mesma lgica se aplica ao bloco dois, s que invertemos o valor de checarTecla para false novamente. Se isso no for feito, a nave ir se movimentar indefinidamente na tela, pois o cdigo no sabe que soltamos a tecla.

Alis, experimente comentar este bloco de cdigo desta forma e veja o resultado.

/*stage.addEventListener(KeyboardEvent.KEY_DOWN, teclaPress);



checarTecla = true;

}

}*/

No se esquea de descomentar.

Agora vamos ao ultimo bloco:



if(checarTecla == true){


}

}

Os dois primeiros blocos eram eventos estticos, que dependiam da interao do jogador. Este ltimo precisa ser atualizado sozinho, por isso utilizamos o Event.ENTER_FRAME.

A funo movNave simplesmente garante que, quando o valor da tecla apertada for true, a nave ir se movimentar no eixo definido. No caso, eixo x para a esquerda. Isso acontece porque colocamos o valor da varivel como negativo (nave.x += -movimento;) mesmo ela iniciando com valor positivo. E este valor checado a cada frame e atualizado a cada apertar de tecla.

Na prtica, cada vez que a tecla esquerda do teclado (37) receber o valor true, subtrado 5 da posio x da nave e ela se movimenta para a esquerda.

Seguindo esta lgica, precisaremos de uma varivel booleana para cada tecla que apertamos. Neste caso iremos mudar ligeiramente o cdigo. Compare:




var checarTeclaEsq:Boolean = false;




checarTeclaEsq = true;


34

}

}




checarTeclaEsq = false;

}

}



if(checarTeclaEsq == true){


}

}

Agora nossa varivel pertence tecla esquerda, e no a qualquer outra. Precisamos ento criar variveis para as outras teclas e fazer com que elas funcionem. Com os ajustes, o cdigo completo ficar dessa forma:





var checarTeclaCima:Boolean = false;

var checarTeclaDir:Boolean = false;

var checarTeclaBaixo:Boolean = false;





}else if(event.keyCode == 38){

checarTeclaCima = true;


checarTeclaDir = true;


checarTeclaBaixo = true;

}

}






checarTeclaCima = false;


checarTeclaDir = false;


checarTeclaBaixo = false;

}

}


35





}else if(checarTeclaCima == true){

nave.y += -movimento;

}else if(checarTeclaDir == true){

nave.x += movimento;

}else if(checarTeclaBaixo == true){

nave.y += movimento;

}

}

O movimento da nave est pronto, agora precisamos faz-la atirar. Mas antes precisamos entender mais algumas coisas...

Adicionando MovieClips dinamicamente na tela

Pensemos dessa forma:

Teremos de ter um objeto que ser o tiro da nave, que no caso iremos nomear laser.

Para isso criamos uma bolinha simples no Flash, transformamos em Movie Clip (clipe de filme), da mesma forma que fizemos com nossa nave e damos o nome laser.

O nico empecilho que a bolinha continua no palco o tempo todo, e precisaremos de mais destes laseres para atirar. Ou seja, precisamos que eles sejam enviados diretamente da biblioteca para o palco, e depois de utilizados eles retornem para a biblioteca.

Para isso utilizaremos o mtodo addChild(), que adiciona elementos no palco (ou dentro de outros objetos) de acordo com nossas especificaes.

Aps termos criado a bolinha e feito o processo para que ela seja um Movie Clip, podemos delet-la, pois agora ela um objeto no painel Biblioteca.


36

Para adicion-la no palco dinamicamente, precisamos que ela se torne parte do cdigo. Ela ser ento lincada a uma classe para poder ser reutilizada.

Para isso clique com o boto direito no objeto da biblioteca e escolha a opo Propriedades.


37

Feito isso, teremos novamente a tela onde podemos escolher o tipo de objeto. O que precisamos na verdade, clicar na opo Avanado, e selecionar a opo Exportar para ActionScript.


38

Note que ele indica que o nome da classe ser laserClasse. este nome que iremos utilizar para instanciarmos o tiro no cdigo. Aps isso clique em OK. Aparecer a seguinte mensagem:

Isso significa que o Flash ir considerar laser como uma classe a partir de agora. Clique em OK.

Para que entenda melhor, no painel de Aes, abaixo de todo o cdigo j escrito, adicione este cdigo:


39

var laserNave:MovieClip = new laserClasse();

laserNave.x = 100;

laserNave.y = 100;

addChild(laserNave);

Resultado: nosso laser est no palco novamente!

Destrinchando o cdigo:

var laserNave:MovieClip = new laserClasse (); Aqui definimos que o valor da varivel laserNave um MovieClip (que uma classe do ActionScript que lida com os objetos deste tipo) e dizemos que queremos uma nova instncia da classe laser com o parmetro new.

laserNave.x = 100; Posio x em que o laser ir aparecer.

laserNave.y = 100; Posio y em que o laser ir aparecer.

addChild(laserNave); Adicionando o laser no palco.

Note que adicionamos o laser no palco depois de setarmos as posies.

Algo a se considerar que o nome da varivel nunca pode ser o nome da classe. possvel reutilizar a classe laser vrias vezes com nomes e atributos diferentes.

Vejamos um exemplo:

var laserNave:MovieClip = new laserClasse ();


40

laserNave.x = 100;

laserNave.y = 100;

addChild(laserNave);

var laserNave02:MovieClip = new laserClasse ();

laserNave02.x = 150;

laserNave02.y = 150;

laserNave02.width = 30;

laserNave02.height = 30;

addChild(laserNave02);

var laserNave03:MovieClip = new laserClasse ();

laserNave03.x = 200;

laserNave03.y = 200;

laserNave03.alpha = 0.5;

addChild(laserNave03);

Resultado:

Agora, apague ou comente essas linhas de cdigo. Iremos colocar a nave dinamicamente no cdigo tambm.

O processo o mesmo, procurar o objeto nave na biblioteca, export-lo para ActionScript e adicion-lo com o mtodo addChild na tela.


41

J temos um bom pedao de cdigo com o nome nave sendo instanciado. Para maior comodismo iremos colocar o nome da classe da nave como naveClasse, assim no preciso reescrever o cdigo.

Eis o cdigo para adicion-la:

var nave:MovieClip = new naveClasse();

nave.x = stage.stageWidth / 2;

nave.y = stage.stageHeight - 100;

addChild(nave);

Resultado:


42


var nave:MovieClip = new naveClasse(); Adicionamos a nova nave

nave.x = stage.stageWidth / 2; Definimos que a posio x da nave ser metade da tela com a propriedade stageWidth (largura da tela), desta forma se posteriormente precisarmos aumentar ou diminuir a largura da tela, o cdigo se encarregar de deixa-la no meio dinamicamente.

nave.y = stage.stageHeight - 100; Definimos que a posio y da nave ser sempre a stageHeitght (altura da tela) subtrada de 100. Isso faz com que a nave sempre inicie com uma distncia de 100 pixels da borda inferior da tela, no importando o tamanho da mesma.

addChild(nave); Adicionamos a nave no palco.

Organizando as coisas

Iremos dar uma reorganizada no cdigo. uma boa prtica colocar as variveis globais (que podem ser usadas em todo o cdigo) em um mesmo bloco, os listeners em outro e no final as funes. Seguindo isso, o cdigo ficaria assim:

//variveis globais



43


var checarTeclaCima:Boolean = false;

var checarTeclaDir:Boolean = false;

var checarTeclaBaixo:Boolean = false;

var nave:MovieClip = new naveClasse();

//adicionando elementos

nave.x = stage.stageWidth / 2;

nave.y = stage.stageHeight - 100;

addChild(nave);

//ouvintes de eventos




//funo de tecla pressionada










}

}

//funo de tecla solta










}

}

//funo de movimento da nave










}

}


44

A partir de agora, todas as varveis globais novas devero ser colocadas no grupo das variveis, todos os listeners globais no grupo de ouvintes e assim por diante. Isso ajuda a visualizar melhor o cdigo.

Criando e trabalhando com classes

Uma das grandes vantagens da Programao Orientada a Objetos so as Classes. Imagine que o laser precise ser repetido muitas vezes no cdigo, ento teramos de fazer uma funo para isso. Mas, e se quisssemos usar a mesma funo em outro jogo?

Podemos colocar tudo dentro de classes, e depois reutilizar o cdigo apenas instanciando-as em outro trecho, assim como fizemos com o laser e a nave. Para isso devemos salvar nosso cdigo em um documento .as no Flash.

Ns trabalhamos com classes bsicas do ActionScript at agora. Mas precisamos aprender a criar nossas prprias classes.

Como exemplo, vamos criar uma classe para os laseres, assim podemos aproveitar este cdigo para outros jogos.

Para comear, clique no menu Arquivo > Novo... Desta vez iremos escolher a opo Classe do ActionScript 3.0.

Ento o Flash ir perguntar o nome da classe. Iremos colocar o nome de laserClasse, assim como colocamos na biblioteca.


45

Assim teremos algo como isto:

Temos mais de um documento aberto ao mesmo tempo. A nova aba demonstra isso. Quando um dos documentos no estiver salvo um asterisco indicar isso.

Salve o arquivo com o nome laserClasse. O arquivo deve ser salvo na mesma pasta onde est o projeto do jogo.


46

Estrutura do documento da classe

Agora que criamos nossa classe, devemos aprender um pouco sobre sua estrutura bsica.

Vejamos o cdigo:

package {

public class laserClasse {

public function laserClasse() {

// constructor code

}

}

}

Todas as classes no ActionScript comeam com a palavra reservada package (pacote). Isso indica os pacotes de cdigo que sero instanciados.

O nome do arquivo precisa ser o mesmo da classe, e toda classe possui uma funo construtora de mesmo nome.

Uma classe tambm pode se estender de outra classe, herdando suas propriedades. Com isso possvel reaproveitar muitos trechos de cdigo, inclusive os complicados clculos matemticos que j esto prontos dentro do ActionScript.

Faa essas alteraes no cdigo:

package

{

//importando bibliotecas necessrias


import flash.display.Sprite;

public class laserClasse extends Sprite

{

//variveis globais da classe

var larguraTela:Number;

var alturaTela:Number;

const direcao:int = 10;

const foraDaTela:int = -10;

//funo construtora da classe

public function laserClasse():void

{

// constructor code

addEventListener(Event.ADDED_TO_STAGE, quandoAdicionado);

}

//funo que verifica quando objeto est adicionado na tela

private function quandoAdicionado(event:Event):void

{


47

larguraTela = stage.stageWidth;

alturaTela = stage.stageHeight;

addEventListener(Event.ENTER_FRAME, recarregar);

}

//funo que recarrega o tiro

private function recarregar(event:Event):void

{

if (y < foraDaTela)

{

removeEventListener(Event.ENTER_FRAME, recarregar);

parent.removeChild(this);

}

y += - direcao;

}

}

}

Provavelmente, ainda no haver alteraes na hora de testar o projeto. Acalme-se.


package iniciando o pacote.

{

//importando bibliotecas necessrias

import flash.events.Event; biblioteca de eventos.

import flash.display.Sprite; biblioteca responsvel pela classe Sprite.

public class laserClasse extends Sprite indicamos que a classe laserClasse (ela mesma) est estendendo (reutilizando) propriedades que j existem na classe Sprite. OBRIGATRIO que tenha o mesmo nome da classe.

{

//variveis globais da classe

var larguraTela:Number; no indicamos o valor da varivel, pois isso ser indicado posteriormente. Ento automaticamente a varivel recebe um valor vazio.

var alturaTela:Number; idem ao anterior.

const direcao:int = 10; uma const (constante) um valor que no varia. Se j temos certeza de que este valor nunca ir variar durante o cdigo, o indicamos como constante. Isso garante menos processamento na hora de rodar o jogo.


48

const foraDaTela:int = -10; Lembre-se, nmeros inteiros (int) no possuem ponto flutuante (ex.: 4.5, 10.3, 4,5, 10,3). Isso consome menos processamento, embora limite um pouco os clculos do cdigo. Utilize nmeros inteiros se tem certeza de que no precisar de nmeros flutuantes.

//funo construtora da classe

public function laserClasse():void funo principal da classe. OBRIGATRIO que tenha o mesmo nome da classe.

{

// constructor code


aqui temos um novo ouvinte (ADDED_TO_STAGE), que cuida de um evento relacionado quando algo estiver adicionado no palco. No caso, a funo quandoAdicionado ir servir para adicionarmos os laseres.

} fim da funo laserClasse().

//funo que verifica quando objeto est adicionado na tela

private function quandoAdicionado(event:Event):void

{

larguraTela = stage.stageWidth; O valor que larguraTela receber ser o valor de stage.stageWidth. Significa que isso ser dinmico ao tamanho da tela. Este tipo de recurso consome um pouco mais de processamento, mas como a idia aqui poder reutiliza-lo, este cdigo ir se habituar a qualquer tamanho de tela.

alturaTela = stage.stageHeight; idem ao anterior


adicionado o ouvinte da funo recarregar.

} fim da funo quandoAdicionado().

//funo que recarrega o tiro


{

if (y < foraDaTela) se a posio y desta classe for menor do que o valor da varivel foraDaTela...

{


49

removeEventListener(Event.ENTER_FRAME, recarregar); remove o ouvinte do evento desta funo. Isso funciona como um coletor de lixo, pois, j que o laser estar fora da tela, no ser preciso que ele fique ocupando espao na memria. Assim no h acmulo de tiros no topo da tela e isso evita que o processamento fique lento.

parent.removeChild(this); Aqui temos trs novidades:

parent - iremos usar um container para os laseres, como se fosse o canho que os dispara. O parent serve para indicar que h uma hierarquia antes da classe. No caso definiremos isso mais adiante.

removeChild obviamente, para remover a classe do palco, economizando assim, memria e processamento.

this toda vez que utilizamos this (este/isto), se refere ao prprio objeto, no caso a classe laserClasse. Para que a classe possa ser reutilizada posteriormente, no podemos ficar presos nomes de variveis que existam no jogo, ento parmetros como o this auxiliam neste sentido. como dizer: Estou me referindo a ESTE cara, mesmo sem saber quem ele .

}

y += - direcao; a posio y do objeto ser sempre acrescentada no sentido da direo.

} fim da funo recarregar().

} fim da classe pblica laserClasse.

} fim do pacote de cdigos.

Dica: caso voc esteja digitando e os espaamentos fiquem um pouco bagunados, assim que voc terminar o cdigo, o boto Formato Automtico pode ajeitar as coisas pra voc. Mas lembre-se: ele s poder ajustar o cdigo se este estiver fechado devidamente com todas as regras.


50

Agora, precisamos instanciar essa nova classe no cdigo da Linha do tempo.

Retorne para o documento anterior (neste caso, o naveAtirando). Iremos adicionar mais algumas linhas ao nosso script que est no quadro 1.

Precisaremos de mais duas variveis globais. Ento no grupo que separamos para variveis globais acrescente:

var checarTeclaBarra:Boolean = false;

var atirar:Sprite = new Sprite();

addChild(atirar);

Primeiramente, criamos uma varivel booleana que ir checar o estado da tecla (checarTeclaBarra). A segunda varivel (atirar) ser o continer que utilizaremos para os laseres no palco. Na prtica criamos este objeto que ir servir para guardar os laseres dentro e ir atirando-os conforme apertamos a barra de espao.

A linha addChild(atirar); adiciona o continer no palco. Mesmo que no possamos v-lo, ele estar l.

Mas porque criamos esta varivel?

Simplesmente porque, a partir da hora quem que apertarmos a barra, o objeto que ser o laser, no ir mais obedecer esta funo. E precisamos checar um anova posio de onde saiam outros laseres, no mesmo? Acontece que esta posio tambm varia de lugar, j que a nave no ir ficar parada. Ento preciso ter este canho que guarda o lugar para os laseres, e que ir acompanhar atualizar a posio dos tiros.

Agora, precisamos adicionar as checagens da barra de espao. Imagino que voc j tenha adivinhado que teremos de revisitar as funes teclaPress e teclaSolta. No final, o cdigo deve se parecer com isto:

//funo de tecla pressionada




51









checarTeclaBarra = true;

}

}

//funo de tecla solta











checarTeclaBarra = false;

}

}

Colocamos 32 como valor, pois este o cdigo da tecla. A prxima funo a ser revistada ser a funo movNave. Poderamos criar uma funo somente para o que vamos fazer agora, mas iremos reaproveitar a funo movNave, que j um evento ENTER_FRAME.

Faa as seguintes alteraes.











} if(checarTeclaBarra == true){ var laser:Sprite = new laserClasse();

laser.x = nave.x;

laser.y = nave.y;

atirar.addChild(laser);

}

}

Agora nossa nave est atirando...


52

... mas se pressionarmos (sem soltar) a barra de espao, ela continuar atirando ininterruptamente!

Precisamos resolver isto.

Eventos de tempo

Nossa nave continua dando tiros ininterruptos porque no h um limite de tempo entre cada um dos tiros. possvel ajustar isso usando eventos do tipo TimerEvent.

Este tipo de evento deve ser usado com cautela, pois consome certa parte do processamento, portanto utilize-o com cautela.

Para incio, no grupo de variveis, precisamos adicionar mais algumas linhas:


53

var tempoDoTiro:Timer = new Timer(300, 1);

var podeAtirar:Boolean = true;

Basicamente, a varivel tempoDoTiro ser do tipo Timer (algo como temporizador), e ir trazer uma nova instncia do mtodo Timer (assim como fizemos com o mtodo Sprite).

Este mtodo pede dois parmetros de configurao.

O primeiro (onde colocamos 300), o tempo de delay (retardamento, por assim dizer) em milissegundos entre um tiro e outro. Ou seja, 0.3 segundos (cada 1000 milissegundos equivalem a 1 segundo). Se quiser mais espao entre os tiros, experimente mexer neste parmetro.

O segundo indica a quantidade de vezes que o tiro ir se repetir durante este espao de tempo. um parmetro bem interessante. Ajuste- o ao seu gosto.

A seguir, temos uma varivel booleana chamada podeAtirar que contm o valor true. Como o prprio nome diz essa varivel ir controlar quando o laser poder (ou no) ser disparado.

Na rea onde separamos os listeners, iremos adicionar um listener dentro da varivel tempoDoTiro, que ter como objetivo chamar a funo controlaTempo.

tempoDoTiro.addEventListener(TimerEvent.TIMER, controlaTempo);

Veja que, controlaTempo um TimerEvent.

Agora iremos revisitar a funo movNave, para acrescentar algumas novas mudanas:











} if(checarTeclaBarra == true && podeAtirar == true){ var laser:Sprite = new laserClasse();

laser.x = nave.x;

laser.y = nave.y;


podeAtirar = false;

tempoDoTiro.start();

}

}

E abaixo, finalmente iremos acrescentar a funo controlaTempo.

//funo que controla o tempo do tiro

function controlaTempo(event:TimerEvent):void{

podeAtirar = true;

}


54

Agora a nave atira espaadamente!

Uma das novidades aqui fica por conta de colocarmos duas comparaes ao mesmo tempo no if:

if(checarTeclaBarra == true && podeAtirar == true){

Significa que estamos comparando se a barra de espao est sendo pressionada E se a varivel podeAtirar igual a true. Nesse caso, a varivel true, pois j definimos isso na criao da varivel.

Os smbolos && juntos, significam E. Este um operador de avaliao. Eis uma tabela com os mais famosos:

&& AND (e) Se esse E aquele...

|| OR (ou) Se esse OU aquele...

! NOT (no) Se NO FOR este...

Logo aps fazer essa checagem, nossa varivel podeAtirar receber o valor false (podeAtirar = false;) at que a varivel tempoDoTiro verifique quanto tempo se

passou (tempoDoTiro.start();).

Lembre-se: tempoDoTiro est diretamente ligada ao evento que aciona o Timer. O mtodo start() inicia a contagem do tempo.


55

Depois disso o valor de podeAtirar volta a ser true, e assim poderemos atirar novamente! Mas, atirar em quem?

Frames de Animao

At agora os objetos (nave, tiro...) que utilizamos no projeto so, de certa forma, estticos. Movem-se apenas porque demos a eles essa propriedade. Mas um game repleto de Sprites que possuem animao. Tambm utilizamos at agora desenhos vetoriais criados com as ferramentas do Flash. Eles possuem a vantagem de poderem ser escalonados (mudar o tamanho) sem que se perca a qualidade da imagem. So desenhos pseudo-vetoriais, uma espcie de desenho vetorial apropriado do Flash, e no perdem qualidade justamente porque so criados por clculos matemticos. Mas, muitas vezes, voc ter a necessidade de trabalhar com imagens (.jpg, .png, .bmp), e dever seguir uma ordem de animao estipulada pelo designer. Para este projeto, os alunos receberam imagens de uma nave que ser usada como inimiga, mas nada impede que voc crie suas prprias imagens.

A idia que a nave inimiga siga esta ordem de animao: 01.png, 02.png, 03.png, 04.png, 01.png, 02.png, 05.png, 06.png. Primeiramente precisamos importar estas imagens para o Flash. Para isso clique no menu Arquivo Importar Importar para a biblioteca.


56

Ele abrir a janela de importao, direcione para onde esto salvas as imagens, selecione-as ( possvel selecionar vrias imagens em uma mesma pasta) e clique no boto Abrir.

Ento as novas imagens iro ser exportadas para a Biblioteca.


57

Agora preciso criar um MovieClip que servir de continer para essas imagens e far a animao atravs dos quadros. Para isso basta clicar com o boto direito em uma parte vazia da biblioteca e escolher a opo Novo smbolo...

A partir daqui, o processo j conhecido. Faremos as seguintes configuraes:


58

Ser criado um palco em branco. No se confunda: este um palco que est localizado dentro do clipe de filme que acabamos de criar, e no tem relao com o palco anterior, onde se encontra nossa nave e todo o restante.


59

Clique no painel Linha do tempo, veja que estaremos trabalhando no quadro 1. Arraste a imagem 01.png para a cruz no centro do palco.

Note que, aps arrastar a imagem, o quadro 1 que antes continha uma bolinha branca, agora possui uma bolinha preta, indicando que ali naquele quadro existe algum contedo. Agora, vamos criar um novo quadro. Clique com o boto direito no quadro em branco que est na frente do quadro 1 e selecione a opo Inserir quadro-chave em branco.

Linha do tempo

Quadro 1

Arraste a imagem para c.


60

Um novo quadro com bolinha branca est esperando que voc arraste a imagem 02.png para o centro do palco!


61

Repita o processo na ordem sugerida anteriormente (caso seja a mesma nave) at ter colocado todos os quadros de imagens da animao. Aps isso basta apertar a tecla ENTER para ter uma prvia da animao no palco.

Dica: Voc pode ajustar o tempo da animao de cada quadro. A primeira vez que voc clicar em um quadro, ir selecion-lo. Basta clicar novamente neste quadro e arrast-lo para o lado para mov-lo. Pense nos espaos da Linha de tempo como nos espaos de tempo em que o quadro da animao ficar exposto. Lembre-se, a taxa de atualizao do Flash est configurada a 24fps, logo, a cada 24 destes quadros se passar 1 segundo de animao.

Organizando em pastas

Existe um recurso de organizao bem interessante no ActionScript 3.0, que o fato de podermos organizar arquivos em pastas dentro da pasta do projeto e depois referenci-la em uma classe. Em um projeto pequeno como este no faz muita diferena, mas digamos que voc esteja trabalhando em um projeto grande, quando tiver criado umas 50 classes isso far sentido. Dentro da pasta do projeto, iremos criar uma pasta chamada: inimigos, onde deveremos salvar todas as classes referentes aos inimigos. Precisamos referenciar essa pasta nas propriedades da classe inimigoClasse, para isso devemos editar essas propriedades com o caminho correto.


62

como uma hierarquia de pastas do Windows, onde inimigos.inimigoClasse indica que a classe que criaremos se encontra em uma pasta chamada inimigos dentro da pasta do nosso projeto.

Lembre-se: o ActionScript 3.0 case sensitive, caso tenha criado o nome de sua pasta como Inimigos, ento a referncia correta : Inimigos.inimigoClasse.

Adicionando inimigos no palco

Temos aqui um problema: Temos uma nave inimiga que devemos destruir, porm um jogo com um inimigo s seria no mnimo entediante, no acha?


63

Criar vrias imagens para inimigos na tela e adicion-las uma a uma com addChild() no parece ser uma opo muito vivel, j que isso pesaria bastante no cdigo e precisaramos de muito mais tempo para criar todos esses inimigos diferentes. Um recurso interessante que muitos games utilizam o de reaproveitar os inimigos, duplicando-os. O que precisamos de uma classe que duplique essa quantidade de inimigos na tela de forma dinmica e randmica, assim cada vez que o jogador executar o game, enfrentar inimigos que partem de posies diferentes. Neste caso iremos reaproveitar a classe inimigoClasse, que foi criada quando fizemos a animao da nave. Este script que iremos adicionar na classe inimigoClasse.

package inimigos {

import flash.display.MovieClip;



public class inimigoClasse extends Sprite {

private var nucleo:Object;

private var vely:Number = 2;

public function inimigoClasse() {

// constructor code


}

private function quandoAdicionado(event:Event):void{

nucleo = MovieClip(root);


}

private function recarregar(event:Event):void{

y += vely;

for(var i = 0; i < nucleo.atirar.numChildren;

i++){

var atingido:Sprite = nucleo.atirar.getChildAt(i);

if(hitTestObject(atingido)){

nucleo.atirar.getChildAt(i).removeListeners();

nucleo.atirar.removeChild(atingido);


nucleo.removeChild(this);

}

}

}

public function removeListeners():void{

removeEventListener(Event.ENTER_FRAME,

recarregar);


64

}

}

}


package inimigos { Desta vez referenciamos no pacote o nome da pasta que

criamos, indicando que este cdigo deve ser procurado nesta pasta quando for utilizado.

import flash.display.MovieClip; importando da biblioteca. import flash.display.Sprite; importando da biblioteca. import flash.events.Event; importando da biblioteca.

public class inimigoClasse extends MovieClip { Note que

desta vez estamos extendendo direto da classe MovieClip. Poderamos utilizar a classe Sprite

aqui, mas esta no aceita animaes quadro a quadro. Ns precisamos da nave animada,

certo?

private var nucleo:Object; Criamos uma varivel do tipo

Object, que servir de ncleo-base para remover e adicionar as naves e os tiros.

private var vely:Number = 2; Velocidade que as naves

descero na tela.

public function inimigoClasse() { Incio da funo pblica

inimigoClasse.

// constructor code comentrio

addEventListener(Event.ADDED_TO_STAGE,

quandoAdicionado); Este evento se encarregar de chamar a funo

quandoAdicionado assim que a classe for usada.

} fim da funo inimigoClasse. private function quandoAdicionado(event:Event):void{

Incio da funo quandoAdicionado.

nucleo = MovieClip(root); setamos que o valor da

varivel ncleo um Clipe de Filme (MovieClip) que leva como parmetro a varivel root.

Basicamente, root tem propriedades semelhantes ao mtodo stage, identifica que estamos

nos dirigindo ao quadro principal da linha do tempo. Alguns programadores preferem no

mais utilizar este mtodo, pois caiu em desuso, mas interessante termos ele aqui para fins de

estudo.


Chamamos recarregar aqui.


65

} Fim da funo quandoAdicionado. private function recarregar(event:Event):void{ Incio

da funo recarregar.

y += vely; Aqui onde a velocidade em y incrementada,

adicionando +1 ao valor da varivel a cada atualizao e fazendo a nave descer.


i++){ Iniciamos um loop For. A novidade aqui que temos numChildren, que se refere ao

nmero de ndice da nave que criada.


Criamos uma varivel que guarda o valor da nave atingida. O getChildAt pega o nmero de

ndice que criado para cada nave e guarda na memria. No caso, guardado o nmero da

varivel i.

if(hitTestObject(atingido)){ If checando se a

nave foi atingida. O mtodo hitTestObject utilizado quando queremos fazer testes de coliso

entre dois ou mais objetos. Neste caso, preciso que a nave seja atingida, ou seja, o tiro ir

colidir com a nave. O conceito simples, mas muitos programadores experientes ainda no

dominam bem o mtodo e criam extensas linhas de cdigo para fazer a mesma coisa.

nucleo.atirar.getChildAt(i).removeListeners(); Agora sim a

funo pblica removeListeners acionada nas duas classes, removendo a nave inimiga e o tiro

do palco.


Aqui remove-se o ndice da nave para uma nova contagem.


A funo remove o evento que a escuta.

nucleo.removeChild(this); Remove o

que estiver dentro de nucleo, no importando o que seja.

} Fim do If.

} Fim do loop For.

} Fim da funo recarregar.

public function removeListeners():void{ Incio da funo

removeListeners, note que esta funo pblica, e acessada na classe dos tiros tambm.


recarregar); Remove-se a escuta da funo recarregar.


66

} Fim da funo removeListeners.

} Fim da classe pblica inimigoClasse.

} Fim do package.

A classe pode ser um pouco difcil de entender a princpio, mas com a prtica em classes deste tipo as coisas vo ficando mais claras. Agora precisamos instanciar a classe no cdigo da nossa linha do tempo (quadro 1). Na parte que separamos para a varivel, colocaremos esta nova varivel:

var tempoDaNave:Timer = new Timer(1500);

bem semelhante varivel Time do tiro, ento dispensa apresentaes. Agora adicionaremos mais uma linha aos ouvintes:

tempoDaNave.addEventListener(TimerEvent.TIMER, criaInimigo);

E adicionaremos estas linhas ao final do cdigo:

tempoDaNave.start();

function criaInimigo(event:Event){

var novoInimigo:MovieClip = new inimigoClasse();

novoInimigo.x = Math.random() * stage.stageWidth;

addChild(novoInimigo);

}

Vamos ento entender esta ltima funo.

tempoDaNave.start(); Estamos utilizando um mtodo pronto do ActionScript 3.0 que ir iniciar a contagem do tempo. function criaInimigo(event:Event){ Incio da funo criaInimigo. var novoInimigo:MovieClip = new inimigoClasse(); Criamos uma varivel para utilizarmos a classe do inimigo. Note que agora a instanciamos como MovieClip, pois definimos isso no arquivo da classe. novoInimigo.x = Math.random() * stage.stageWidth; A posio x de cada novo inimigo calculada pelo mtodo Math.random, que serve para fazer clculos matemticos aleatrios complexos. Neste caso o Math.random calcula que as naves devem ser criadas no espao do stage.stageWidth, ou seja, leva em considerao a largura do palco, no importando qual ela seja. Fizemos isso para que o cdigo fique dinmico, mas nada impede que voc coloque um valor fixo. Experimento trocar stage.stageWidth por 100 e veja o que acontece.

addChild(novoInimigo); Adicionamos o novo inimigo. } Fim da funo criaInimigo.


67

Resultado:

J temos nossas naves inimigas invadindo a Terra e sendo desintegradas por nossos tiros

pulverizadores! Mas seria interessante um pouco de barulho e algum tipo de exploso, no

acha?

Explodindo os inimigos!

Agora que nossos inimigos esto desaparecendo, iremos precisar de outros elementos para

complementar nossa exploso: uma animao de exploso e barulho.

Como o objetivo aqui no ensinar como criar animaes, voc dever criar a sua. Mas no

muito diferente do que foi feito com a nave inimiga. Basta ter um pouco de imaginao e

entender como funciona o processo e no ser um caminho muito difcil.

O som pode ser baixado de sites que disponibilizam bibliotecas de som gratuitas. Para nosso

exemplo eu usei os sons explosion.mp3 e laser_blast.mp3 do site http://www.freesfx.co.uk/.

Sempre procure efeitos sonoros gratuitos para o seu jogo, ok?

Importe os sons para a biblioteca da mesma forma que foi feito com as naves.

A animao da exploso deve estar com estas propriedades:


68


69

Estas so as propriedades do som de exploso:


70

E estas so as propriedades do som do tiro laser:

Colocamos a sigla sfx na frente do nome da classe apenas por conveno. Assim indicamos que

esta classe se refere a um som de efeito (sound effects - de onde vem a sfx), mas possvel

nome-la de outra forma. Lembre-se sempre de seguir as regras de criao de nomes para

variveis e classes. Se quiser uma melhor organizao, renomeie os sons para

sfx_nome_do_arquivo tambm.

Feito isso, vamos editar a classe explosaoClasse, que est vinculada s propriedades da

exploso.


71

Na verdade, o contedo da classe bem simples:

package {



import flash.media.Sound;

public class explosaoClasse extends MovieClip {

private var explodir:Sound = new sfx_explosao();

public function explosaoClasse() {

// constructor code

addEventListener(Event.ENTER_FRAME,

inimigoMorto);

explodir.play();

}

private function inimigoMorto(event:Event):void{

if (currentFrame == framesLoaded){


inimigoMorto);

parent.removeChild(this);

}

}

}

}


package { Incio do pacote.

import flash.display.MovieClip; importando MovieClip.

import flash.events.Event; importando Event.

import flash.media.Sound; aqui uma biblioteca nova: Sound. Ela ser

necessria apenas para que possamos controlar as propriedades do nosso sfx.

public class explosaoClasse extends MovieClip { Incio da

classe pblica explosaoClasse.

private var explodir:Sound = new sfx_explosao();

essa a varivel que ter o valor do som da exploso. Veja que buscamos aqui o som da

exploso pelo nome da classe e no do arquivo, por isso importante que os objetos estejam

vinculados a uma classe.

public function explosaoClasse() { Incio da funo

explosaoClasse.


72

// constructor code

addEventListener(Event.ENTER_FRAME,

inimigoMorto); adicionamos uma escuta para a classe inimigoMorto.

explodir.play(); E damos play no som da exploso.

} Fim da funo explosaoClasse.

private function inimigoMorto(event:Event):void{

Incio da funo privada inimigoMorto.

if (currentFrame == framesLoaded){ Se o quadro atual

for igual ao ltimo quadro da animao que foi carregado...


inimigoMorto); remove-se a escuta para a funo inimigoMorto...

parent.removeChild(this); e remove-se o

objeto dessa classe da tela, no importando quem seja ele.

} Fim do If.

} Fim da funo inimigoMorto.

} Fim da classe explosaoClasse.

} Fim do pacote.

Utilizamos o mtodo currentFrame quando queremos nos referir ao quadro atual de uma

animao (a traduo literal seria quadro corrente, mas isso feio que di!).

O mtodo framesLoaded vai tratar de verificar se todos os quadros daquela linha de tempo j

foram usados ou carregados, ou seja, se a animao j foi toda rodada.

Agora devemos editar a classe inimigoClasse. No nada muito complicado, apenas iremos

adicionar algumas linhas na verificao da coliso.

As linhas em negrito demonstram o que deve ser adicionado:

package inimigos {




public class inimigoClasse extends MovieClip {

private var nucleo:Object;

private var vely:Number = 2;


73

public function inimigoClasse() {

// constructor code

addEventListener(Event.ADDED_TO_STAGE,

quandoAdicionado);

}

private function quandoAdicionado(event:Event):void{

nucleo = MovieClip(root);


}

private function recarregar(event:Event):void{

y += vely;


i++){

var atingido:Sprite =

nucleo.atirar.getChildAt(i);

if(hitTestObject(atingido)){



var explodir:MovieClip = new explosaoClasse();

explodir.x = x;

explodir.y = y;

stage.addChild(explodir);



}

}

}

public function removeListeners():void{


recarregar);

}

}

}

E j temos nossa exploso com som!

Devemos adicionar o som dos tiros. O raciocnio semelhante, mas iremos utilizar o cdigo

que est no Quadro 1 da linha de tempo agora.

No espao que separamos para as variveis adicionamos esta:

var somDoTiro:Sound = new sfx_laser();


74

E na funo onde tratamos a ao da barra de espao, adicionamos:










}if(checarTeclaBarra == true && podeAtirar == true){

var laser:Sprite = new laserClasse();

laser.x = nave.x;

laser.y = nave.y;


podeAtirar = false;

tempoDoTiro.start();

somDoTiro.play();

}

}

E agora temos nossa nave atirando com som!

Prximo passo: Pontuao - Score.


75

Ganhando alguns pontos.

Bem, agora que j conseguimos realizar uma verdadeira batalha contra nossos inimigos

precisamos ganhar alguns pontos por cada nave abatida. Primeiramente precisamos de um

placar. Para este exerccio foi criado um shape simples no Flash CS5 e depois este shape foi

convertido em Clipe de filme (MovieClip). O nome do objeto na converso no ir importar

neste caso, pois o placar ficar fixo na tela.

Neste caso, nomeamos a ocorrncia do objeto como score.

Aps isso basta dar dois cliques no Clipe de Filme para edit-lo, pois precisaremos de algum

texto.

O texto ser colocado em uma camada acima do shape.

A palavra Score do quadro apenas ilustrativa e no ter nenhuma interao com o jogo.

Vamos nos focar nos nmeros.


76

O importante saber que so dois campos de texto separados.

No importa muito a quantidade de nmeros que for digitada aqui, isso apenas uma

marcao para sabermos qual o tamanho que os nmeros iro ocupar. Isso ser substitudo

depois no cdigo.

Nas propriedades do texto (os nmeros) iremos selecionar as opes Texto clssico e Texto

dinmico.

Dica: Basicamente utilizamos no Flash CS5, Texto esttico para textos que no tero interao com o usurio, Texto dinmico para interao com o cdigo e Texto editvel para textos que podem ser editados pelo usurio.


77

Nomeamos a ocorrncia do texto para scoreTxt.

Ateno: A ocorrncia scoreTxt do texto diferente da ocorrncia score do MovieClip.

E agora, nosso texto precisa ser incorporado ao projeto para que funcione corretamente. Para

isso basta clicar em Incorporar...

Marcaremos apenas a opo Numerais [0..9], pois s sero utilizados nmeros neste campo,

ento o Flash no ir incorporar a fonte toda no cdigo.


78

Com isso temos o texto configurado. Agora vamos ao cdigo.

Primeiro, no nosso famoso Quadro 1, criamos uma varivel para armazenar o valor numrico

dos pontos.

var scoreInicial:Number = 0;

No final do cdigo criaremos uma funo para contar os inimigos mortos.

score.scoreTxt.text = String(0);

function inimigoMorto(pontos)

{

scoreInicial += pontos;

score.scoreTxt.text = String(scoreInicial);

}


79


score.scoreTxt.text = String(0); definimos fora da funo que o valor

padro que aparecer no texto numrico ser 0. Este valor ir substituir qualquer valor que

tenhamos colocado anteriormente no placar. Note que a hierarquia segue como temos no

MovieClip: scoreTxt est dentro de score, ento assim que o acessamos: score.scoreTxt.

Depois acessamos a propriedade de texto usando o mtodo text, que j reservado do

cdigo, e a tudo isso definido que 0 agora uma String (String(0)).

function inimigoMorto(pontos) Incio da funo inimigoMorto. Note o

parmetro pontos que criamos. Essa ser a varivel que ir trazer para dentro da funo o

nmero do inimigo abatido.

{

scoreInicial += pontos; Aqui o scoreInicial comea a recebe o valor da

varivel pontos.

score.scoreTxt.text = String(scoreInicial); E este valor depois

repassado para o campo de texto, sendo convertido em String.

}

Agora precisamos capturar a quantidade de inimigos mortos. Para isso iremos revisitar a classe

inimigoClasse, mais precisamente a funo recarregar.

Basta adicionarmos uma linha na funo recarregar:


{

y += vely;

for (var i = 0; i < nucleo.atirar.numChildren;

i++)

{


if (hitTestObject(atingido))

{



var explodir:MovieClip = new explosaoClasse();

explodir.x = x;

explodir.y = y;

stage.addChild(explodir);



nucleo.inimigoMorto(1);


80

}

}

}

Com ncleo.inimigoMorto(1) estamos aproveitando a funo de coliso para adicionarmos 1

ao valor dos pontos, ento toda vez que o laser colidir com a nave inimiga a funo recarregar

ir passar se parmetro para a funo inimigoMorto que est no Quadro 1, aumentando assim

o valor do score. Nada

Documents

Artur Guitelar WebGamescomAS3