Criando um Zombie Survivor no Construct 2

[All-x]

Olá Makers!!

Hoje trazendo meu primeiro tutorial de Construct 2, isso mesmo, você não leu errado. Também irei fazer o mesmo para Unity, Godot e GM:S, o mesmo jogo em diferentes engines. Neste tutorial usei a versão Free.

Confira as outras versões:

Godot.
Unity 3D.

Hoje Irei ensinar a criar um game estilo survival, no qual você deve matar o máximo de zumbis que conseguir. Você pode jogar o game online clicando no botão abaixo:

Clique aqui para Jogar Online

WASD movimenta, e clique esquerdo atira.

Bom, mãos a obra!

Você vai precisar fazer o download do pack abaixo com as imagens e sons usados.

Baixar pack com recursos

Se quiser ir apenas acompanhando, baixe o arquivo CAPX no final deste tópico.

1 - Configurando o cenário


Primeiramente crie um novo Projeto vazio:



Defina o tamanho da janela em 640 x 480:



Crie um Tiled Background e importe o arquivo tileGrass.png e estique-o por todo layout. Aproveite e renomeie o Layout 1 para gameRoom 



Agora antes de prosseguir temos que criar 3 layers (Uma para o fundo, um para o player e os inimigos e o último para elementos da HUD):



Coloque o Tiled Background no layer background  Conforme a gente for criando os demais itens vamos colocando-os nos layers certos.

Renomeie o Event shett 1 para gameEvents (Lembrando que ele já está selecionado como sheet do layout gameRoom). Dessa forma já podemos adicionar nossos elementos mais importantes.


2 - Adicionando nosso player e fazendo-o se mover:


Importe a Sprite player.png e posicione-a no centro do layout. Defina o tamanho como 60 x 46  Já aproveite para colocá-la no layer player and enemies  Com ela ainda aberta, defina um novo Image Point para a ponta da arma (De onde os tiros saem, DUHH):



Como somos seres organizados (Pode pah :D) e não queremos um mar de eventos em nosso sheet, faça o seguinte: crie um Event sheet chamado playerEvents  Agora vá até sheet gameEvents e ao clicar com o botão direito do mouse selecione a opção Include Event sheet e selecione a que acabamos de criar para o player.

Sacou a ideia? Vamos criar um sheet para cada elemento que tenha vários eventos, como player e inimigos e depois os chamamos em um sheet principal. Questão de organização.

Volte ao playerEvents e clique com o direito selecionando a opção Add Global variable crie duas variáveis:

- health: 100 (Vida do player)
- zKilled: 0 (Total de zumbis mortos[redundante por serem zumbis])

Como vamos usar o teclado para movimentar é necessário adicioná-lo, clicar com o direito sobre a pasta Object types e adicionar um novo objeto Keyboard 

Novamente por questão de organização (É, tem que ser assim kkkkk) vamos criar um grupo chamado Movimento e Tiro (Botão direito -> Add Group).

Clique com direito no grupo e selecione a opção Add - > Sub-event depois selecione Keyboard e em seguida Key is down  Clique na caixa em frente a Key pressione W e em seguida Ok.

Esse evento vai ocorrer sempre que pressionar W, agora precisamos adicionar uma ação para esse evento. Clique em Add Action, selecione player e depois SetY  Na caixa coloque:

Código: Selecionar todos

Self.Y - 4

Isso significa que a nova posição é a posição atual menos 4. Vai mover-se para cima. Teste e veja se está Ok. Agora temos que fazer isso para as 3 teclas restantes, basta seguir a relação da letra e a expressão a ser usada abaixo:

S: 

Código: Selecionar todos

Self.Y + 4

A:

Código: Selecionar todos

Self.X - 4

D: 

Código: Selecionar todos

Self.X + 4

Vai ficar assim:



Agora que ele se move, vamos faze-lo olhar para o mouse. Para isso adicione o objeto Mouse, assim como fez com Keyboard 

Após isso, importe a Sprite target.png e a coloque no layer HUD.  Essa vai ser nossa mira, defina o tamanho como 45 x 45 e posicione em algum lugar do layout, renomeie como target Lembre também de marcar a propriedade Collisions como Disabled 

Temos que fazer essa mira acompanhar o mouse. Para tanto, vá até o gameEvents e coloque System - > Every Tick que é um evento que ocorre o tempo todo. Depois adicione as seguintes ações:

- target -> SetX com o valor:

Código: Selecionar todos

Mouse.X

- target -> SetY com o valor:

Código: Selecionar todos

Mouse.Y

Dessa forma a mira ficará na posição do mouse. Agora devemos fazer o player olhar para a mira. Volte ao playerEvents e adicione o evento System -> Every Tick e inclua a ação player -> Set angle com o seguinte valor:

Código: Selecionar todos

angle(Self.X, Self.Y, Mouse.X, Mouse.Y)

A função angle recebe 4 parâmetros, que são dois pontos. Os dois primeiros colocamos a posição do próprio player e por fim nos últimos dois a posição do mouse (Poderia ser a da mira também).

Note que o player pode sair da tela, então temos que fazer com que ele não saia. Para isso adicionamos o evento 'System -> Compare Two value', onde colocamos a posição do player e o limite, em seguida colocamos uma ação player -> Set X ou player -> Set Y, coloque para os quatro cantos como na imagem:




3 - Fazendo o player Atirar


Temos um player andando com mira, pronto para atirar. Que tal fazer isso agora?

Importe a sprite bullet.png, posicione-a fora do layout e marque a propriedade Initial Visibility como Invisible  Coloque a propriedade Collisions como Disabled e dê o nome de bullet  Como o objeto tem que estar obrigatoriamente no layout nós o deixamos invisível e sem colisão, dessa forma essa primeira instância não irá fazer nada. Assim que atiramos tornamos ela visível e ativamos a colisão novamente.

Balas são elementos especiais, pois elas têm uma velocidade muito alta, então temos que adicionar um behavior com comportamento Bullet para ela. Clique para adicionar um, e troque a propriedade Speed por 1280 

Voltemos ao playerEvents e no grupo Movimento e Tiro adicione um sub-evento Mouse -> On Click selecione o botão esquerdo. Adicione a ação player -> Spawn another object, selecione o objeto bullet no layer Layer 1, e no Image Point 1 (Ponta da arma).

Como iremos usar áudio daqui para frente, aproveite adicione o objeto Audio  Aproveite e importe todos os áudios da pasta sons  Basta ir na árvore de projetos, clicar com o direito em Sounds -> Import Sounds:



Ainda no mesmo evento adicione as seguintes ações:

- bullet -> Set Visible (Torna a bala visível)

- bullet -> Set Collisions enabled com valor Enabled (Liga a colisão da bala)

- bullet -> Set angle com o valor:

Código: Selecionar todos

angle(Self.X, Self.Y, Mouse.X, Mouse.Y)

- Audio -> Play selecione shot e dê Ok.

Temos que verificar também se a bala saiu do layout, se não o fizermos todas as balas vão existir para sempre. Isso é ruim para o desempenho. Volte ao gameEvents e adicione bullet -> Is outside layout e na ação bullet -> Destroy 

Agora nosso player anda e atira mirando no mouse. Com isso podemos adicionar nosso inimigo, que é um zumbi. Ele vai seguir o player mantendo uma distância minima de 16.


4 - Criando um inimigo que te segue


Importe a sprite zumbie.png, dê o nome de zumbie e deixe o tamanho como 50 x 41  Posicione ele fora do layout colocando-o no layer player and enemies 

Ainda no zumbi, clique em Instance Variables e adicione 2 com os seguintes valores iniciais:

- life: 100 (Vida do zumbi)
- distanceToPlayer: 0 (Distância do player)

Aproveite para criar um Event sheet chamado zumbieEvents  E  NÃO ESQUEÇA: COLOQUE INCLUA ESSE SHEET NO gameEvents 

Vamos calcular primeiramente a distância que ele está do player. Adicione o evento System -> Every Tick e coloque a ação zumbie -> Set Value para trocar o valor da variável distanceToPlayer:

Código: Selecionar todos

distance(Self.X, self.Y, player.X, player.Y)

A função distance calcula a distância entre dois pontos. Nos primeiros dois argumentos colocamos a própria posição do zumbie e nos dois últimos a posição do player 

Sabendo a distância podemos fazer o zumbi andar em direção ao player  Adicione o evento zumbie -> Compare instance Variable, escolha a variável distanceToPlayer selecionando a comparação > Greater than e o valor 16. Nas ações coloque:

- zumbie -> Set angle com o valor (Aponta para o player):

Código: Selecionar todos

angle(Self.X, self.Y, player.X, player.Y)

- zumbie - > Move foward com valor 1 

Com isso o zumbi segue o player e mantém uma distância de 16. Agora vamos adicionar o dano causado pelas balas. Adicione o evento zumbie -> On collision with another object, selecione bullet e adicione as ações:

- zumbie -> Subtract from com valor 15 (Retira vida do zumbi)

- bullet -> Destroy (Destrói bala que colidiu com zumbi)

Certo, o zumbi está levando tiros, mas está imortal. Como a gente está tirando vida dele temos que checar se ela está abaixo ou igual a 0  Adicione o evento zumbie - > Compare instance variable, selecione life, <= Less or equal com valor 0  Adicione as seguintes ações:

- zumbie -> Destroy (Elimina zumbi)

- System -> Add To, selecione zKilled com valor 1 (Aumenta contador de zumbis mortos)

- Audio -> Play, selecione zdeath e dê Ok (Som do zumbi morrendo)

Por fim colocamos um som para quando o zumbi for criado. Adicione o evento zumbie -> On Created com a ação:

- Audio -> Play, selecione zombie e dê Ok (Som do spawn do zumbi)

O sheet do zumbi vai ficar assim:



Temos agora um zumbi que morre depois de 7 tiros. Mas só isso fica sem graça, então vamos criar um gerador de zumbis. Crie um Event sheet chamado generatorEvents e não esqueça de inclui-lo no gameEvents  Aproveite e adicione o objeto Functions, pois iremos usar.


5 - Fazendo um gerador de zumbis


Em generatorEvents adicione a variável global interval com valor 3  Esse valor é  o tempo de intervalo de criação dos zumbis, serão 3 segundos que vão diminuindo.

Vamos criar uma função para gerar os zumbis, então adicione o evento System -> Every X seconds e em valor coloque a variável interval  Na ação coloque:

- Functions -> Call function, dê o nome de "CreateZumbies", clique em Add parameter e dê o valor de:

Código: Selecionar todos

random(360)

O que fizemos foi chamar a função CreateZumbies com o primeiro parâmetro com um valor entre 0 e 360. Isso é uma direção onde o zumbi será criado fora da tela.

Ainda nesse evento clique com direito Add - SubEvent, coloque System -> Compare variable, selecione interval, Greater than e o valor 1  Na ação:

- System -> Subtract from, selecione Interval e o valor 0.05 

Ou seja, a toda checagem de intervalo será decrementado 0.05 desde que seja maior que 1 

Ainda em generatorEvents adicione o evento Functions -> On function, digite "CreateZumbies" e coloque a seguinte ação:

- System -> Create object:



Aqui usamos um vetor 2D para posicionar o zumbi a uma distância de 640, a partir do centro da tela (320,240), onde seno e cosseno receberem a direção aleatória do primeiro parâmetro. Veja a imagem abaixo para entender:



Veja essa matéria sobre vetores para dar uma clareada: O uso de vetores nos jogos

Agora, nosso player mata zumbis e eles não param de aparecer, porém o player é invencível. Vamos adicionar uma colisão para ocorrer um dano.

Volte ao playerEvents e lembre-se que criamos a variável global health para vida do player 

Adicione o evento player -> Is overlapping another object e selecione zumbi  Esse evento é diferente do On collision, pois não ocorre apenas na entrada da colisão, mas sim enquanto estiver colidindo. Agora adicione a ação:

- System -> Subtract from, selecione health e o valor 1 

Dessa forma o player perderá vida. Vamos aproveitar para colocar o som de dano, clique com direito sobre o evento de colisão e Add - Sub-Event, depois adicione Audio -> Is tag playing e selecione o valor "damage"  

Clique com o direito sobre este evento e selecione Invert  Isso significa que em vez de checar se está tocando, vai checar se não está tocando. Adicione a ação seguinte:

- Audio -> Play, selecione damage e a tag "damage" 

Assim o som vai repetir apenas se já não estiver tocando.

Tiramos a vida do player, agora temos que destruí-lo, caso ela acabar. Adicione o evento System - > Compare Variable, <= Less or equal, com valor 0 e coloque essa ação:

- player - > Destroy (Mata o player)

Dessa forma, o game está completo, basta agora informar a vida do player, a quantidade de zumbies mortos e uma tela de Game Over.


6 - Acabamento: Mostrar informações e tela de Game Over


Primeiro vamos criar uma barra de vida para o player  Importe a Sprite lifeBar.png com tamanho 50 x 5, dê o nome de lifeBar, posicione acima do player e coloque-a no layer HUD 

Para calcular o tamanho da barra vá no gameEvents adicione o evento System -> Every tick e adicione a ação:

- lifeBAR -> Set width com o valor:

Código: Selecionar todos

health*0.5

Ou seja a largura da barra vai ser o valor de health pela metade.

Agora temos que fazer a barra seguir o player. Ainda no mesmo evento Adicione as ações:

- lifeBar -> Set X com valor:

Código: Selecionar todos

player.X

- lifeBar -> Set Y com valor:

Código: Selecionar todos

player.Y

Pronto, agora vamos adicionar o contador de zumbis mortos. Adicione um objeto Text, chame de score, posicione-o no topo da tela e coloque no layer HUD  Segue uma print das configurações:

imagem

No gameEvents vamos atualizar o texto que acabamos de colocar no layout. Adicione o evento System -> Every Tick e adicione a ação:

- score -> Set Text com o valor:

Código: Selecionar todos

"Mortes: " & str(zKilled)

Aqui concatenamos a string "Mortes: " com a variável global zKilled 

Agora falta apenas a tela de Game Over. Crie um novo layout e chame de goScreen, não precisa adicionar um event sheet  Crie dois layers background e HUD  Crie também uma sprite e pinte o fundo de preto esticando por toda tela e jogue no layer background  Adicione um novo Text e chame-o de goText  Segue uma print das configurações:

imagem

Agora lá no playerEvents onde o player é destruído adicione a seguinte ação:

- System -> Go to layout, e selecione goScreen 


UFFFA! TERMINAMOS! kkkkkkkk

Segue o arquivo CAPX, caso tenha saído algo errado ou para você acompanhar a construção do mesmo.

Baixar - Zombie Survivor

FLWS!

[guimaraf]

Excelente tutorial, ideal para iniciantes.

[Mr.Rafael]

Tutorial bem explicado e com imagens. O Construct 2 possui um exemplo de sobrevivência, mas nesse caso você foi mostrando o passo-a-passo de forma bem didática. Muito bom, cara!
Só sugiro que você deixe o exemplo jogável no próprio tópico mesmo, usando a tag para inserir jogos HTML5 nas postagens. De resto, achei um ótimo material de aprendizado. Parabéns, Alex!

o/

[All-x]

Obrigado pelos comentários.

@MrRafael, acredita que acabou passando batido? Talvez pela falta movimento de exemplos e projetos em HTML5, vou pedir ao Markito para incorporar este botão aqui no editor pra ficar fácil localizar, pois o tópico poucos veem.

FLWS!