Como fazer um jogo plataforma com Construct 2 – parte II | Dadrix
Como fazer um jogo plataforma com Construct 2 – parte II
print055
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)
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
Ter concluído a parte I: Como fazer um jogo plataforma com Construct 2 – parte I
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.
No caso da animação Morrendo eu deixei o Image point no centro, já que quando morre a intenção é que fique mesmo desajeitado.
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.
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.
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.
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.
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.
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
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.
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.
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.
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).
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.
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.
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;
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
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.
Terceira parte do tutorial
Previsto para Março ou abril, criar uma segunda fase ao concluir a primeira. Efeitos de bala e geração dinâmica de instâncias de objetos. Se ainda não viu, acesse a primeira parte do tutorial clique aqui.