Como fazer um jogo plataforma com Construct 2 – parte II

Como fazer um jogo plataforma com Construct 2 – parte II

print055

Você aprenderá aqui

• Criar um script básico para que o mude de direção (esquerda, direita)

• Criar um script básico para que o personagem ao cair volte ao início do jogo (sem perder vida)

• Criar um script intermediário para que o personagem mude de animação quando ele estiver parado, andando para esquerda, andando para direita, pulando, morrendo

• HUD (heads-up display): Para exibir pontuação, vidas e outros elementos importantes

• Collision: inserir colisão para pontuar (coins) e inserir colisão para perder pontos (enemys)

• Criar um script básico para colocar um inimigo para se mover para direita e esquerda

• Criar um script intermediário para que o personagem ao cair, perca uma vida, atualize o HUD e volte ao início do jogo (perdendo uma vida)

Elementos necessários

1 grupo de sprites para formar a animação das moedas

1 grupo de sprites para formar o inimigo

1 grupo de sprites para formar o HUD

Eu baixei os elementos para este tutorial do site http://www.spriters-resource.com/snes/smarioworld/ , mas para facilitar eu separei os elementos que precisaremos para o tutorial neste link.

Requisitos

Baixar e instalar o Construct 2 (Release 108.2 ou superior) no site: http://www.scirra.com/store/free-html5-game-engine

Ter concluído a parte I: Como fazer um jogo plataforma com Construct 2 – parte I

Algumas coisas que já foram mostradas não vou mostrar passo a passo todas as vezes, então recomendo que faça a primeira parte para se familiarizar com o básico antes de prosseguir. Quando for necessário volte, faça de novo.

Preparando o PlayerImage

Como para o tutorial I eu havia utilizado o Sprite de animação PlayerImageTeste, então exclui o objeto PlayerImageParado e renomeei o PlayerImageTeste para PlayerImage, depois fui em edit animations, adicionei uma nova animação (Add Animation) que nomeei de Parado, excluí a animação teste, em seguida importei um sprite strip para a animação Parado, escolhi o arquivo “Mario Parado.png”.

Adicione uma nova animação chamada Andando, clique na animação na lista pra colocar o foco nela, importe um sprite strip dentro dela do arquivo “Mario andando.png”. Depois clique novamente sobre a animação Andando para habilitar as propriedades dela, coloque Speed = 22 e Loop = Yes.

Adicione uma nova animação chamada Pulando, clique na animação na lista pra colocar o foco nela, importe um sprite strip dentro dela do arquivo “Mario pulando.png”. Depois clique novamente sobre a animação Pulando para habilitar as propriedades dela, coloque Speed = 22 e Loop = Yes.

Adicione uma nova animação chamada Morrendo, clique na animação na lista pra colocar o foco nela, importe um sprite strip dentro dela do arquivo “Mario morrendo.png”. Depois clique novamente sobre a animação Morrendo para habilitar as propriedades dela, coloque Speed = 22 e Loop = Yes.

É importante que depois você faça um “crop transparent edge” com shift selecionado para aplicar em todos os objetos. Além disso adicione em cada animação o “image point em botton” e aplique em todos usando “Apply whole animation”. Assim os espaços em branco sumirão dos frames deixando apenas um pixel de contorno e o image point vai fazer com que todas as imagens sempre se encaixem corretamente no PlayerBox. O script SetPositionTo que está em Fase1Eventos utilizará esse image point 0 e mesmo quando mudar de animação no player vai permanecer compatível com a posição e usabilidade. Se o image point estiver mal posicionado a animação não ficará alinhada corretamente om o PlayerBox e a jogabilidade ficará prejudicada.

print020

No caso da animação Morrendo eu deixei o Image point no centro, já que quando morre a intenção é que fique mesmo desajeitado.

print021

Script básico para que o mude de direção (esquerda, direita)

Primeiro vamos inserir um novo objeto chamado Keyboard, clique com o botão direito e clique em “insert new object”, localize o keyboard e clique no botão “Insert”.

print022

Em seguida vamos para a aba Fase1Eventos e vamos adicionar dois eventos, um para quando teclamos a tecla direcional esquerda e outro para quando teclamos a tecla direcional para direita.

Clique em Add event, escolha o Keyboard e clique em Next. Escolha o gatilho (trigger) on key pressed e clique em Next. Vai aparecer uma janela para escolher a tecla, clique em Click to choose. Pressione a seta direcional esquerda e clique em Ok.

print023

print024

print025

print026

Agora adicione a ação pra esse evento, para que quando a tecla direcional esquerda for pressionada o PlayerImage fique espelhado, ou seja, virado para a direção horizontal invertida, assim as animações feitas viradas para o lado direito podem ser apenas espelhadas para o lado esquerdo, economizando sprites.

print027

print028

print029

Adicione um evento igual ao anterior, seguindo os passos print023, print024, print025 e print026. Para o print026 pressione a seta direcional direita. Depois adicione a ação seguindo os passos print027, print028 e print029, mas em State escolha Not mirroned, assim ao teclar a seta direcional para direita, caso o objeto esteja espelhado ele voltará a ficar não espelhado, ou seja, voltará ao seu estado normal.

print030

Pode clicar em Run para ver uma prévia do player mudando de direção quando vai para esquerda e direita.

Script básico para que o player retorne quando cair do cenário

Na aba Fase1Eventos adicione um evento para o PlayerBox, escolha o gatilho Is outside layout. Quando o PlayerBox (que é o nosso player real) sair do layout esse evento será acionado.

print031

print032

Em seguida adicione uma ação ao próprio PlayerBox, escolha Set Position, pois quando o PlayerBox sair do layout, o evento vai disparar uma ação para que o PlayerBox vá para a posição inicial, no meu caso: X = 68, Y = 340.

print033

print034

print035

Depois vá ao layout e clique em Run para ver que quando o player cai da plataforma ele volta a posição inicial.

Script intermediário para que o player mude de animação

Vamos adicionar os eventos da seguinte maneira:

Quando PlayerBox estiver em movimento, setar animação para Andando.

Quando PlayerBox estiver parada, setar animação para Parado.

Quando PlayerBox pular, setar animação para Pulando.

Quando PlayerBox aterrizar, setar animação para Parado.

Quando PlayerBox cair, setar animação para Morrendo. Claro que nem sempre que ele cai ele morre, por exemplo, ele pode ter pulado depois cai e aterriza sem morrer, mas para facilitar e padronizar o movimento ao cair fiz assim, mas você pode ajustar para suas intenções, basta explorar os vários eventos disponíveis para o PlayerBox.

print036

HUD (Heads-Up Display)

Para o nosso exemplo vamos adicionar informações sobre a quantidade de vidas e de pontos. Posteriormente vamos adicionar mais conforme for conveniente. Primeiramente temos que adicionar os objetos que vão exibir as informações, porém a atualização dessas informações vai estar em eventos relacionados com as ações de outros objetos: PlayerBox, Coin, Enemy.

Os objetos de HUD que vamos criar não devem ser copiados e colados, pois isso não cria um novo objeto, cria apenas uma cópia do objeto copiado. E para este caso é necessário que cada objeto seja único para ser referenciado nos scripts. Crie esses objetos em um novo layer (caso ocorra de você criar no layer errado basta clicar no objeto em Objects e mudar o layer em Properties). Esse layer deve estar com Parallax (0,0) assim ele não vai se mover junto com o cenário quando o player sair do campo de visão.

Para a quantidade de vidas eu inseri um Text com o texto = “0” – esse primeiro Text deve ser nomeado para facilitar referência, eu nomeei o meu de TextQtVidas -, mais um Text com o texto = “x” e um Sprite com a imagem do Mário parado. Esse Sprite tem que ser um novo objeto, não é bom usar o objeto PlayerImage porque ele está relacionado com outros eventos.

Para a quantidade de vidas eu inseri um Text com o texto = “0” – nomeado de TextQtMoedas-, mais um Text com o texto = “x” e um Sprite com imagens de uma moeda girando, ou seja, inseri um sprite strip com 4 frames formando uma animação.

print037

Para um primeiro exemplo de atualização vou inicializar a quantidade de vidas quando o jogo começa e perder uma vida quando o PlayerBox cair para fora do layout (plataforma).

Primeiro passo para controlar um valor é adicionar uma variável, para o caso da quantidade de vidas vamos adicionar no objeto PlayerBox uma variável chamada QtVida do tipo inteiro com valor inicial 5.

print038

Segundo passo é manter a quantidade atualizada na tela. Para isso deve ser utilizado o evento Every Tick do System, então adicione uma ação ao Text que chamamos de TextQtVida do tipo SetText = PlayerBox.QtVida, você poderia fazer também “Vidas: ” & PlayerBox.QtVida – o & converte o valor inteiro em string-, mas no nosso caso colocamos um x e um Sprite mostrando uma figura do personagem.

print040

Terceiro passo é diminuir um ponto de vida quando o PlayerBox sair do layout. Vou procurar o evento que já adicionei, aquele que faz o PlayerBox voltar a posição inicial e adicionar uma ação para subtrair 1 de QtVida.

print039

Pronto, agora toda vez que o PlayerBox cair para fora do cenário ele vai voltar a posição inicial e vai também perder uma vida e o HUD ficará atualizado. Veja como ficaram meus scripts até agora.

print041

Pontuação com moedas amarelas – Collision (coins)

Primeiro adicione um Sprite com a animação “coins 1.png”, nomeie ele de YellowCoin, coloque a Speed = 22 e em Loop = Sim. Para as moedas não é bom adicionar o Behavior de Solid, pois senão sempre que encostar em um o player vai parar por um momento e o legal do Mario é atravessar as moedas e elas sumirem como se não fosse sólidas mesmo. Essa Sprite você pode copiar e colar onde quiser. Em etapas anteriores já mostrei como adicionar um behavior (comportamento). Lembre da dica de utilizar o comando Ctrl + Arrastar objeto para copiar e criar uma nova instância do objeto.

Vamos fazer com que quando ocorra a colisão do PlayerBox com o YellowCoin, primeiro seja adicionada uma moeda ao contador e depois o YellowCoin que colidiu seja destruído.

Adicione uma variável no PlayerBox chamada QtMoedas do tipo inteiro com valor inicial 0 (zero).

Adicione um evento do YellowCoin com gatilho “On collision with another object”.

Adicione uma ação para Incrementar o valor na variável QtMoedas e uma ação para que o YellowCoin colidido seja destruído.

print043

Agora vá ao evento Every Tick e coloque para atualizar também o TextQtMoedas.

print044

Perder vida ao colidir com inimigo – Collision (enemy)

Crie um Sprite e o nomeei de TurtleEnemy, importe para ele o arquivo de frames “inimigo tartaruga andando.png” e nomeei essa primeira animação de Andando. Depois crie uma nova animação dentro do TurtleEnemy e importe nela o arquivo de frames “inimigo tartaruga esmagado.png” e nomeei de Esmagando. Depois crie uma nova animação dentro do TurtleEnemy e importe nela o arquivo de frames “inimigo tartaruga morrendo.png” e nomeei de Morrendo. Adicione Image points em Botton para todos os frames de todas as animações, assim quando o personagem estiver se movendo o ponto de origem de sua animação serão onde estão os pés. (Caso não se recorde de como fazer, volte para a criação do Sprite do personagem PlayerImage e veja os passos lá).

Primeiro adicione um evento do PlayerBox colidindo com o TurtleEnemy.

Vão haver basicamente duas situações de colisão, uma em que o PlayerBox “cai” em cima do TurtleEnemy, nesse caso o TurtleEnemy morre e o Mário ganha pontos. Para isso adicione um sub-evento (sub-condição) para que quando o PlayerBox estiver caindo.

print045

Depois adicione mais um evento junto com este (um evento aninhado com o de cair e não um sub evento.

Agora adicione as seguintes ações para essas condições: Add 1 para PlayerBox.Vida (vamos ser generosos rsrs); YellowTurtle destroy (matamos o inimigo); PlayerBox vector Y to – 700 (o Player dá um pulo no ar);

print046

Do contrário, o Mário morre, perde um ponto de vida e o TurtleEnemy fica sem dano algum. Adicione uma condição contrária ao grupo anterior (chamado Else).

print047

Agora vamos adicionar as tristes ações: Subtrair 1 ponto de Vida; Mandar o Mário de volta pro início da fase;

print048

Script para que o inimigo se mova para esquerda e direita

Pronto, agora já podemos matar um inimigo e podemos ser mortos por ele, mas é tão fácil quando ele fica parado, então mãos a obra para fazer ele se mover e dificultar um pouco as coisas.

Primeiro adicione o comportamento (behavior) Plataform no Sprite TurtleEnemy, assim ele poderá se mover pra direita e esquerda, subir e descer, até cair de um Solid se quisermos. O que vamos fazer é usar o simulador de controles, pois diferente do PlayerBox (que também é Plataform) se move pelos controles do jogador, o inimigo deve se mover por conta própria. Para que esse Sprite TurtleEnemy não se mova com os controles do jogador mude o Default controls para No (Não). Coloque o Max Speed = 50; Acceleration = 100; Deceleration = 100; Assim o TurtleEnemy não se moverá tão rápido.

print049

Segundo passo crie um sprite e pinte ele de uma cor sólida, ele servirá de marcador de limites para o nosso TurtleEnemy saber quando deve parar e voltar. Eu nomeei de SpriteEdge. Coloque um do lado direito e outro do lado esquerdo do caminho onde o inimigo deve ficar andando pra esquerda e direita.

print050

Crie uma variável de instância (instance variable) chamada direction, do tipo string, com valor inicial = “right”. Assim vamos poder saber pra qual direção o TurtleEnemy está indo no momento em que ele colidir com o limite SpriteEdge. Coloque o Initial visibility como Invisible para evitar que esses limites apareçam na hora da execução do jogo.

print051

Agora vamos fazer o script pra ele se mover da seguinte maneira: Quando o TurtleEnemy estiver indo na direção esquerda e colidir com o limite SpriteEdge deve mudar para direção esquerda; Quando o TurtleEnemy estiver indo na direção direita e colidir com o limite SpriteEdge deve mudar para direção direita;

Para isso faremos dois scripts intermediários:

Quando estiver na direção direita: Adicione um evento do TurtleEnemy para quando a variável direction = “right” (use o compare instance variable); Adicione as ações: Simulate Plataform pressing Right, Set Not mirroned;

Quando estiver na direção esquerda: Adicione um evento do TurtleEnemy para quando a variável direction = “left”; Adicione as ações: Simulate Plataform pressing Left, Set mirroned;

Assim:

print052

Agora vamos fazer com que quando o TurtleEnemy colida com o SpriteEdge ele mude o valor da variável. Adicione o evento de colisão entre o TurtleEnemy com o SpriteEdge; Em seguida adicione um sub-evento para quando a variável TurtleEnemy.direction = “right”; Adicione uma ação uma ação para esse sub-evento para atribuir o valor “left” a variável direction; Depois adicione um Else para o sub-evento; Adicione uma ação para esse sub-evento Else para atribuir o valor “right” para a variável direction.

print053

Para complementar vamos mudar a animação do TurtleEnemy quando o Mario cair em cima dele vamos incrementar o script do print048; Adicione as ações entre a adição de vidas e a destruição do TurtleEnemy: Atribuir o valor “none” para TurtleEnemy.direction; Mudar animação do TurtleEnemy para “Esmagando”; Acrescenta um delay de 0.5 segundos; Mudar animação do TurtleEnemy para “Morrendo”; Acrescenta um delay de 0.5 segundos.

print054

print055

Veja como ficou

Execute o Run layout para testar o que fizemos até aqui (print17). Clique aqui para ver como ficou o meu. Mesmo antes de chegar o tutorial 3 você pode experimentar coisas e explorar os eventos e ações do Construct 2.