Criação de games – Megaman Parte 2

Olá comunidade,

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

Pré-requisitos:

Conhecimento básico em ActionScript
Macromedia Fireworks 8
Macromedia Flash 8
Recomenda-se que você tenha visto a coluna de movimentação básica de personagens e princípios básicos de games de plataforma, caso não tenha acesse:

Criação de Games
Criação de Games – Megaman parte 1

Objetivo:

O abjetivo desta segunda parte é a inclusão de novos elementos dentro do nosso joguinho, lembrando que é o básico, use sua imaginação para deixar o joguinho ainda mais interessante. Como o interesse aqui é puramente o aprendizado, não estamos desenvolvendo um jogo comercial que necessita de mais otimizações. No entanto, uma vez que assimilado todos os conceitos apresentados, conseguirá facilmente desenvolver seus jogos de forma comercial. A construção das animações é feita ação a ação do personagem, para cada ação um movie clip diferente, é claro que é possivel criar um único mc que pode ser controladoo via Action Script, mas vamos aprender uma coisa de cada vez. Veja o jogo pronto:

Conceitos:

Apresentarei neste artigo noções legais como como fazer o tiro que o Megaman vai disparar, a temporização destes tiros, um timer para marcar o tempo de jogo, a inclusão de inimigos no cenário e um pouquinho sobre IA em games. Logo nosso jogo estará completo com os itens básicos para este tipo de game.

Conteúdo

Já vou supor que você tenha visto o artigo anterior caso não tenha acesse (Criação de Games – Megaman parte 1), agora iremos adicionar ao projeto anterior, os elementos mencionados acima (tiro, timer, inimigos…). Para isso, abra o arquivo do jogo que fizemos no último artigo e vamos lá!

Primeiramente, vamos construir os tiros que serão dados tanto pelo megaman quanto pelos seus inimigos. Insira um novo símbolo do tipo movie clip, chame-o de tiro_mega, ao fim deste tutorial segue um link para que baixem as imagens que utilizei ou clique aqui para baixar. Da mesma forma que o outro artigo monte a animação do tiro baseado na folha de sprites abaixo:

Figura 1 – Folha de sprites para o tiro_mega.

Depois do movie clip pronto, volte para a cena e arraste-o da library, se ela não estiver aparecendo aperte CTRL + L. Iremos implementar as ações do tiro semelhante ao que eu fiz no meu primeiro turorial, aquele da nave. Então, devemos posicionar esse tiro fora do stage, redimensione o seu tamanho para 15px de altura e 15px de largura, chame essa instância de tiro_mc. Veja abaixo como posicionei no stage.

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

Agora vamos programar as ações desse tiro. Selecione o movie clip tiro_mc e aperte F9 para editar seu Action Script onde os inimigos que estão sendo referenciados no código serão criados nos passos seguintes, o código segue abaixo:

Também precisaremos de um tiro que será dado por um dos inimigos do megaman que será feito mais a frente. O processo é o mesmo, pegue a folha de sprites, insira um novo movie clip vazio e chame-o de tiro_2, depois da animação pronta, volte à cena e arraste-o da library para o stage e dê o nome de instância de tiro_fogo_mc. Veja abaixo como ficou:

Figura 3 – Folha de sprites para tiro_2.

Figura 4 – Veja o posicionamento na cena.

O código para este tiro segue abaixo com algumas modificações para testar a colisão com o megaman em vez do inimigo, claro. E se o life do megaman chegar ao fim vai para frame 3 ou frame de Game Over. Eu chamei de gameOver o último frame da layer terreno.

Note que existe uma variável direcao que não foi declarada em lugar nenhum e está sendo usada em nosso AS dos dois tiros, ela foi criada no arquivo Megaman.as. Portanto, abra-o e insira o seguinte código nas linhas iniciais onde são declaradas as variáveis utilizadas no nosso game, aproveite e declare variáveis de controle que servirão para controlar o número de tiros e o tempo de intervalo entre cado tiro, veja abaixo como ficou.

Agora vamos construir um timer que ficará contando o tempo, vai ser um timer bem simples em termos de beleza, mas que você poderá facilmente customizá-lo a seu gosto. Primeiramente insira um campo texto na parte superior central do nosso stage, sinta-se à vontade em colocar onde achar mais adequado dentro do stage a localização não vai influenciar, e mude suas propriedades para que seja um campo texto do tipo dinâmico. Mais algumas linhas serão adicionadas no arquivos Megaman.as, como já temos o tiro em mãos e uma variável que controla o intervalo de tempo dos tiros, podemos implementar a ação de disparar tiros. Abaixo está o código que implementa o disparo.

Agora vamos adicionar os inimigos. Neste artigo vou adicionar apenas 2 inimigos para que você tenha uma noção de como implementar uma pequena Inteligência Artificial (IA) nos seus inimigos, a implementação de IA em games pode ser feita de diversas formas, aqui apresentarei uma idéia bem simples onde você poerá usar sua criatividade e implementá-la de uma forma mais rebuscada.

O primeiro Inimigo está representado no gif abaixo:

Figura 5 – Primeiro inimigo.

Uma forma de utilizar sprites foi visto na último artigo, era baseada na folha de sprites onde tinhamos que colocar um a um os sprites em cada frame. Agora veremos outra forma de usar sprites a partir de gif’s animados. Com uma imagem gif pronta é fácil obter seus sprites pelo flash que fará sozinho o processo da passagem da animação para o timeline. Primeiro vamos criar um movie clip vazio e chame-o de inimigo1. Agora vá no menu arquivo ->import ->import to stage ou simplesmente CTRL + R e selecione o arquivo img3.gif que forneci no link ao fim deste artigo. Clique em abrir e automaticamente o flash fará o milagre de colocar cada quadro da animação no seu respectivo frame. Que bacana hein!.

Figura 6 – Timeline e o stage depois do import.

Vamos criar agora o outro inimigo, volte ao stage e insira um novo movie clip chamado inimigo2, abaixo segue a imagem do nosso inimigo número 2:

Figura 7 – Segundo inimigo.img5.gif

Depois que ocoreu o import seu time e stage devem ficar assim:

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

Agora com as animações bases prontas iremos criar o mc que iremos controlar via Action Script. Portanto, na cena principal insira um novo mc chamado inimigo_1. Neste mc, crie duas layers uma chamada barra e outra chamada imagem. Na layer imagem, no primeiro frame desta layer coloque o mc que fizemos agora pouco chamado inimigo1 chame este primeiro frame de esquerda (aperte F9 neste frame e coloque um stop(); no Action Script) e o segundo desta mesma layer de direita e o terceiro frame chame de morto, este último indica o estado de quando sua barra de força chegar ao fim. O mc inimigo1 já está direcionado para a esquerda, como foi visto no artigo anterior basta usar a ferramenta Free Transform Tool para inverter a direção. Para mais detalhes veja o artigo anterior, e no frame morto não coloque nada deixe-o em branco sem nada no stage. Fica aqui como um teste criar uma animação de explosão ou qualquer coisa que pareça que o inimgo explodiu.

Agora vamos construir a barra de life do inimigo_1, na sua layer barra, usando a ferramenta Rectangle Tool desenhe um retângulo acima da cabeça do personagem de forma que esse desenho pertença à layer barra, transforme essa barra em mc apenas selecionando e apertando F8 chamando-a de barra_life. Por fim dê o nome de instância de barra_mc. Depois de todo esse processo com o primeiro frame selecione aperte F6 para criar um key Frame cópia do primeiro. Após todo esse processo veja como ficou:

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

Para fazer o outro inimigo você vai aplicar o mesmo processo, volte à cena principal e crie um movie clip chamado inimigo_2, crie as mesma layers e dê o mesmo nome pra elas. Utilize o mc inimigo2 para fazer a animação para a esquerda e inverta o mc para fazer a animação para direita. Coloque também o stop() no primeiro frame da layer imagem e barra de life não precisa fazer por que ela já está pronta na library. Basta arrastá-la para o primeiro frame da layer barra e dar o nome novamente de intância de barra_mc e apertar F6 com o primeiro frame selecionado para fazer uma cópia para o segundo.

Depois de criado esses dois mc’s volte para a cena principal e dê um duplo clique no mc terreno_mc, assim ele será aberto para edição e é aqui que vamos colocar nossos inimigos. Mas você poderia ter imaginado colocá-los diretamente na cena criando uma nova layer, por exemplo chamada de inimigos; isso sim é possível mas é inviável dependendo do número de inimigos no cenário por que será complicado aplicar o scrolling em todos esses objetos. Continuando, com o terreno_mc aberto para edição arraste o mc inimigo_1 da library para o stage. Dê o nome de instância de inimigo_1_mc. A posição onde vai ficar o seu inimigo depende de como você vai programar seu Action Script de modo que ele não ultrapasse barreiras que ele não possa ou estipular limites até onde possa ir, eu estipulei um valor máximo e um valor mínimo para que o personagem possa andar no eixo x. Dê um clique seu inimigo_1_mc e com ele selecionado aperte F9 para programá-lo com o código abaixo:

No código acima fiz com que o inimigo fique fazendo umas aceleradas para frente como se fosse um ataque e o código também faz com o inimigo fique sempre andando atrás do megaman se este estiver na sua linha de ataque. Cada vez que o inimigo_1_mc encosta no megaman ele tira 0.5 do life.

Para o inimigo_2_mc algumas adaptações são necessárias no código acima, primeiro eu admiti que não vou diminuir o life do megaman quando encostar neste inimigo só o tiro que este dará que vai diminuir, o intervalo x que o inimigo_2_mc pode andar também é diferente eu o coloquei na parte final da fase. E também atualizo a variável direcao para eu saber para onde este inimigo vai atirar. A imagem de como fica no stage depois desse processo de montagem das animações do personagem e o código seguem abaixo:

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

Vale ressaltar que o código das ações desses inimigos são os que podem mais serem implementados de forma diferente, eu optei para as ações da forma que está acima codificada, o inimigo_1_mc com o corpo e inimigo_2_mc ataca com um tiro de fogo. Lembre-se que ambos estão no mc terreno_mc.

Por fim vamos fazer a personagem que voa disparar o tiro de fogo que fizemos acima, vá a sua library e procure pelo mc inimigo2 que está na figura 8. Insira o código abaixo no frame 25, mas por que no frame 25? Se você observar a animação é nesse frame que a personagem sofre uma espécie de solavanco devido a um tiro que de forma imaginária ela tenha dado.

Você conseguiu entender a linha 17 deste código? Sim? Não? O que ela faz? Até agora quando a gente desejava que um personagem ficasse virado para os dois sentidos criávamos duas frames e depois utilizando a ferramenta Free Transform Tool invertia o sentido da figura da esquerda para a direita ou vice e versa. Agora fizemos essa inversão via Action Script com uma linha de código, o mais impressionante é que funciona.

Falei muito de uma tal barra de life do megaman mais ainda não fizemos. Então, vá ao stage da cena e cria um retângulo da cor que quiser parecido com o que foi feito para os inimigos, transforme em movie clip chamando-o de barra dê o nome de instância de life_mc. Posicione no topo um pouco à direita perto do timer e se prefeir coloque uma imagem do megaman que você desejar ao lado do life só pra ficar claro que aquele life é do megaman. Veja como ficou:

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

Por último só falta fazer as animação do megaman atirando e o código que fará ele disparar os tiros. Para fazer a animação vamos usar o arquivo de imagens que segue logo ao fim desse artigo. Lá tem várias imagens do megaman atirando correndo e tudo mais. Acredito que você já está ficando bom nesse processo de copiar e colar para montar animações. Use a folha de sprite abaixo, OBS: eu não usei toda a sequência de animação para fazer ele atirando, usei apenas os prites que estão abaixo.

Figura 12 – Folha de sprites para atirando parado.

Figura 13 – Folha de sprites para atirando correndo.

Os dois mc’s vazios que você irá criar para fazer as animações vão se chamar respectivamente atirando e atirando_correndo. Agora iremos incorporar esses mc’s ao megaman propriamente dito que é aquele que está no stage e que estamos controlando via Action Script e que se chama megaman_mc. Portanto, vá à cena principal e dê um duplo clique no megaman_mc e adicione mais 4 frames aos frames existentes e chame-os respectivamente de: atirando_dir, atirando_esq, correndo_atirando_dir e correndo_atirando_esq. Cuidado com esses nomes sempre utilizo para referenciá-los no Action Script. As animações para os frames atirando_dir e correndo_atirando_dir já estão pronta (atirando e atirando_correndo), ou seja, a direção em que o personagem está olhando já está correta. Para fazer as animações para esquerda será usada a mesma técnica que consistia em usar a ferramenta Free Transform Tool para inverter o sentido da animação que já está pronta, se tiver ainda dúvidas quanto a esta parte consulte novamente a parte 1 deste artigo.

Depois de cada coisa no seu lugar, você agora precisa apenas colocar o seguinte código no último frame do mc atirando para que quando você atirar saiba para que lado deva parar e de tirar :

E para o mc atirando_correndo coloque no último frame: