Criando um Zombie Survivor no Construct 2 - The Game Makers Brasil
Criando um Zombie Survivor no Construct 2
Dom Nov 06, 2016 2:33 pm
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.
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:
WASD movimenta, e clique esquerdo atira.
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:
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:
Self.Y + 4
Self.X - 4
Self.X + 4
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:
- target -> SetY com o valor:
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:
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:
- 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:
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):
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:
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:
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:
- lifeBar -> Set Y com valor:
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:
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:
"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:
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
Editado pela última vez por Alex FC em Dom Nov 06, 2016 8:13 pm, em um total de 1 vez.
Dom Nov 06, 2016 4:40 pm
Excelente tutorial, ideal para iniciantes.
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!
Dom Nov 06, 2016 8:06 pm
@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.