Criação de games – Megaman Parte 1

Olá comunidade,

Estou de volta com novas colunas sobre criação de games, destacando os que usam conceitos de física, matemática e outras áreas que estão intimamente ligadas a esta área tão fascinante. No meu último tutorial mostrei a criação de um simples joguinho que tratava de colisão e movimentação de um modelo na tela e que disparava tiros contra inimigos. O objetivo era apenas dar um pontapé inicial para quem não sabia nada sobre games, dessa forma propiciando uma pequena base para aqueles mais iniciantes. Neste tutorial, tratarei de conceitos um pouco mais elaborados, mas que são de fácil compreensão

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, caso não tenha acesse:
Criação de Games

Objetivo:

Propiciar ao leitor o conhecimento necessário para que este possa desenvolver seus próprios jogos de plataforma. Ao logo da construção do game serão mostrados e comentados cada conceito novo que for mostrado, preocupando-se em não só mostrar como faz, mas também por que funciona, dúvida que fica geralmente na cabeça de quem está no início do aprendizado ou até mesmo quem já tem algum conhecimento na área. O objetivo aqui é desenvolver uma fase completa de um game que segue o formato de plataforma, estilo Super Mário.

Conceitos:

Nesta primeira parte iremos abordar a técnica de animação de personagens utilizando sprites, criar interação do usuário com um modelo baseado em sprites, o famoso scrolling, simulação de gravidade e técnicas de tratamento de colisão em jogos de plataforma.

Os sprites nada mais são do que vários quadros de uma animação nos games 2D, a animação de personagens é feita quadro a quadro, como o Macromedia Flash trabalha com quadros é muito prático manipular sprites de uma animação na ferramenta.

Conteúdo

Então, mão na massa!

O Personagem

Antes de mais nada devemos obter as figuras para o tutorial, existem vários sites pela internet que fornecem sprites para download gratuitamente, é claro que se você é bom em designer de personagens pode fazer os seus próprios. Mas muitos games em flash disponíveis na internet são adaptações de games já existentes e consagrados, que é nosso caso, onde iremos utilizar sprites do jogo do Megaman. Recomendo o Sprite Kingdom, de onde tirei os sprites para esta coluna. Salve o arquivo com os sprites do link acima e abra no Macromedia Fireworks. Os passos seguintes serão repetidos para cada estado do personagem, você deve ter percebido no arquivo que você baixou que cada linha trata-se de uma ação do Megaman, com exceção das duas primeiras, vejamos a figura abaixo:

Figura 1 – Representa a chegada do Megaman

Na Figura 1 podemos observar que seguindo a numeração indicada obtemos uma animação do Megaman quando ele entra no cenário de jogo. Então para ver essa animação funcionando basta contruir um movieclip com 26 frames, note que cada quadro da animação será mapeado para um frame do timeline do flash . Para fazer isso devemos seguir os seguintes passos:

• Com a imagem que você baixou do Sprite Kingdom aberta no Macromedia Fireworks selecione o quadro 1 utilizando a ferramenta Marquee Tool, cuide para que apenas o primeiro quadro seja selecionado;
• Com o primeiro quadro selecionado aperte CTRL + C para copiar;
• Abra um documento em branco no Macromedia Flash 8 e vá em Insert » new Symbol ou CTRL + F8, chame-o de entrada;
• transforme o 1° primeiro frame em Key Frame apertando F6;
• Agora CTRL + V na área do stage, pronto o primeiro quadro agora está no primeiro frame, todos os outros que viram terão como base este primeiro frame para que a animação fique perfeita;
• Repita o processo de copiar e colar agora para o segundo quadro da figura aberta no fireworks e cole agora no segundo frame no flash, esse processo deve ser feito até que os 26 sprites estejam na animação. Serão 26 Key Frames
• No decorrer deste processo se quiser visualizar como está ficando, clique no primeiro frame do timeline aperte ENTER, assim você poderá ver que ajustes deverão ser feitos para que animação fique perfeita. Por que pode ser que uma figura de um frame anterior tenha ficado mais baixa que a atual que você está colocando e outros probleminhas de alinhamento podem aparecer.

Depois desse processo você já deve ter percebido que o Macromédia Flash é muito bom para fazer animação de personages 2D. Bom, agora devemos fazer as animações para o Megaman correndo e pulando, vai seguir a mesmo processo descrito acima, criando um novo movieclip vazio, o estadocorrendo eu chamei de correndo_dir e o pulando de pulando_dir, o dir no final indica direita para facilitar na hora de escrever o Action Script.

Só para vocês conferirem, as seqüências de imagens para correndo_dir e pulando_dir seguem abaixo:

Figura 2 – Sprites para correndo_dir.

Figura 3 – Sprites para pulando_dir.

Até agora construímos apenas as principais ações que o Megaman terá, agora vamos contruir o Movieclip que será realmente o Megaman e que nós iremos manipular via Action Script, no mundo dos games podemos chamá-lo de Modelo. Para isto aperte CTRL + F8 e chame esse movie clip vazio de megaman. Como este será o movieclip principal ele terá todos estados possíveis do Megaman dentro do jogo: correr para esquerda e direita, pular para esquerda e direita, e ficar parado olhando para esquerda e para direita e o estado de entrada que construímos anteriormente. Portanto devemos ter 7 Key Frames no timeline. Veja abaixo:

Figura 4 -Timeline com os Key Frames.

Coloque em cada frame o seu respectivo nome.

• Frame 1 chame de entrada
• Frame 2 chame de correndo_dir
• Frame 3 chame de correndo_esq
• Frame 4 chame de pulando_dir
• Frame 5 chame de pulando_esq
• Frame 6 chame de parado_dir
• Frame 7 chame de parado_esq

Vamos agora associar as animações para cada ação, quase parecido com o processo de copiar e colar para montar as animações mas agora você irá usar as animações que criou anteriormente. Com o frame entrada selecionado pegue da Library a animação que também se chama entrada e coloque no centro do stage, como nas animações este primeiro servirá como base para o alinhamento das demais animações. A animação correndo_dir também já está pronta, foi feita nos passos anteriores basta colocar no seu respectivo frame, da mesma forma a pulando_dir.

Para fazer a correndo_esq e a pulando_esq, você vai utilizar uma instância das versões para direita, mas como o personagem nas outras versões está virado para a direita basta usar a ferramenta Free Transform Tool e usar o mouse para inverter o sentido do movieclip. Para isto basta clicar no movieclip e acionar a ferramenta Free Transform Tool, clique no lado esquerdo da figura e arraste para o lado direito, isso faz com que a figura inverta de direção. Por fim, para fazer o parado_dir e o parado_esq basta copiar o último sprite do movieclip entrada para o frame parado_dir, copie este mesmo sprite para o parado_esq só que neste invertendo sua direção com a ferramenta Free Transform Tool do flash como feito anteriormente.

A menos dos devidos ajustes que você possa fazer para deixar as animações bem alinhadas, o nosso personagem está praticamente pronto, só mecheremos nele na etapa de codificação.

O Cenário

Da mesma forma que os sprites, os cenários podem ser encontrados em sites na especializados na internet, eu utilizei um que está no site Background HQ. A montagem do cenário é mais fácil que o personagem, para fazer este tutorial usei apenas parte do cenário, pois ele é muito grande, por isso eu disponibilizei a versão que vou utilizar neste link. Na verdade o cenário nada mais é do que uma imagem de plano de fundo, que servirá como molde para desenhar os obstáculos e a plataforma.

Volte para a cena principal do nosso documento flash, agora vamos colocar todas a layers que precisaremos para manipular o jogo, cada layer vai ter 3 Key Frames. Faça como a imagem abaixo:

Figura 5 – Nome de cada layer com seus Key Frames.

Por enquanto o primeiro frame de cada layer não iremos utilizar, Para começar a montagem do jogo. Supondo que você já baixou o cenário no fim deste tutorial, insira um novo símbolo do tipo mocieclip e cole a imagem do cenário que você baixou.

Figura 6 – Movieclip terreno.

Veja que a figura ficou no movieclip que acabei de criar, certifique-se que você fez exatamente igual. Volte à cena e agora apenas arraste-o da biblioteca para o stage. Alinhe na posição x=0 e y=0 e certifique-se que este mc está na layer Terreno e no seu segundo frame. Dê o nome para esta intância de terreno de terreno_mc. Pronto, o terreno já está no lugar certo. Agora teremos uma a plataforma onde o personagem vai ficar durante todo o jogo, essa plataforma vai simular o piso do terreno. Para isto crie um novo movieclip vazio chamado de plataforma.

Agora preste muita atenção! O segredo do jogo funcionar corretamente está como você faz os próximos passos. Nesse movieclip vazio faço um quadrado qualquer, isso mesmo, um quadrado qualquer. Volte à cena e arraste para o stage este novo movieclip chamado de plataforma que ficará no segundo frame da layer Plataforma, dê o nome para esta nova instância da plataforma de plataforma_mc. Se você der dois cliques no mc plataforma_mc o terreno vai ficar como se fosse marcada d’agua, assim o terreno será seu molde para desenhar sobre ele a plataforma, agora você não vai utilizar aquele quadrado qualquer. Utilizando a ferramenta Rectangle Tool desenhe sobre as superfícies que o Magaman irá ficar apoiado, esses retângulos simularam a base onde o personagem pode caminhar. Veja abaixo:

Figura 7 – Movieclip plataforma_mc (cor banca) sobre o terreno_mc.

Veja que eu coloquei a plataforma na altura que o personagem pode caminhar, a parte de cima de cada retângulo é onde vai ficar os pés do Megaman. Pra terminar essa brincadeira com as imagens, vamos agora fazer o mc que vai representar as paredes do cenário. O processo para a construção das paredes “fictícias”, ou seja, retângulos que representarão as paredes e onde o personagem vai colidir, será feito como foi feito com a plataforma. Crie de novo um mc vazio chamado paredes e coloque um quadrado qualquer, volte à cena e arraste-o para o stage de modo que fique no segundo frame da layer Paredes , dê novamente dois cliques nesse novo mc, o que muda agora que você não mais vai colocar retângulos onde o Magaman pisa, e sim onde ele pode colidir de frente simulando uma parede. Chame essa instancia de paredes que você acabou de arrastar para o stage de paredes_mc. Veja como ficou:

Figura 8 – Em branco plataforma_mc e em azul paredes_mc.

Quando começar a testar as colisões algumas modificações devem ser feitas na largura na altura desses quadrados. Note que a idéia para simular paredes é cobrir de retângulos azuis tudo obstáculo que o Megaman pode colidir, não importa que esses retângulos fiquem bonitinhos por cima do terreno, o que importa é que eles não deixem o Megaman passar pelas paredes e nem sumir chão a dentro (Os ajustes são feitos quando começar a etapa de teste do game).. Onde ele não consegue colidir de frente não é necessário colocar paredes.

Agora falta colocar o Megaman no cenário. Vá a sua biblioteca e coloque no stage o movieclip megaman, ele foi feito em etapas anteriores. Chame essa instância de magaman_mc. Se você der dois cliques nesse mc, você vai entrar no modo de edição, veja que ele é composto de de 7 frames. Devemos colocar um stop() no primeiro frame para que a animação começe a executar quando o game começar. Ainda com o megaman aberto para edição, vá no frame pulando_dir que por sua vez possui o mc pulando_dir dê dois cliques nesse mc para edição. Já este mc, se você o construiu corretamente, tem 19 frames que é a quantidade de quadros da ação de pular. No último frame colque o seguinte código:

Isso fará com que quando animação de pular saiba em que direção ficar parada depois que acabar, não precisa fazer para o pulando_esq, já que ele é uma instância de parado_dir.

O Código

Esta etapa que passamos agora no desenvolvimento de jogos é chamada de MODELAGEM, todo jogo, não importa em que plataforma você o faça, tem essa etapa, principalmente os games 3D. Assim você pode passar essa etapa para um colega seu que sabe muito de design de cenários e personagens, depois você dá vida ao jogo com a codificação.

Para codificar o jogo só usei uma arquivo de Action Script (AS), logo crie um arquivo de AS e chame-o de Megaman.as. Seu código está logo abaixo:

Agora para funcionar o jogo, vá à layer Action no segundo frame da cena principal e coloque como segue abaixo:

Àqueles que mataram essa aula de física a figura abaixo mostra uma parte da física que diz: “Tudo que sobe tem que descer”, a idéia que o código das linhas 91 à 97 é simular desaceleração de um corpo quando este é lançado de baixo para cima, que nada mais é do que a gravidade atuando sobre o corpo que sobe, chega um momento que a velocidade chega a zero e depois inverte o sinal fazendo com que o corpo mude direção e comece a cair, o que foi codificado é uma aproximação desse efeito bem superficial , veja na figura abaixo como a magnitude da velocidade vai diminuindo, isto é, a cada passo de tempo seu valor vai se reduzindo até zerar e mudar de sentido (sinal). Esse moviemnto é chamado de Movimento Uniformemente Variado (MUV).

Figura 9 – Velocidade no decorrer do pulo.

Considerações Finais

Vimos durante o texto diversos conceitos referentes ao desenvolvimento de games de plataforma, é claro que o modo de fazer não é único, você pode achar várias formas de fazer, mas os conceitos sempre serão o mesmos. Você viu como fazer scrolling, uma pequena simulação física, que permite mais suavidade ao pulo do personagem, é claro que quanto mais detalhes nessa simulação fica mais próximo da realidade.

Espero que você tenha assimilado os conceitos mais básicos e mais importantes desse tipo de game. Calma que tem mais, você percebe que ainda falta os inimigos, fazer o Megaman atirar colocar um timer entre outros, para ficar bem parecido com o game real. Mas isso fica para uma próxima, nas próximas semanas estarei postando a constinuação deste artigo.

Espero que tenham gostado. Até a próxima.

Autor: Márcio Silva – Colunista de Flash & ActionSctipt MXSTUDIO.

Download dos arquivos

Qualquer dúvida envie um e-mail para marciosilva@mxstudio.com.br ou acesse nosso fórum