Variáveis de instância
Variáveis de instância permitem que cada monstro guarde seu próprio valor de vida. Uma varíavel simplesmente é um valor que pode mudar (ou variar), e eles são armazenados separadamente para cada instância, daí o nome variáveis de instância.
Vamos adicionar uma instância chamada health (vida) para nosso monstro. Clique no monstro pela barra de projeto ou barra de objetos. Alternativamente, você pode voltar ao layout e selecionar o objeto Monster. Isso irá exibir as propriedades do monstro na barra de propriedades. Clique em Add/edit perto do Edit variables para editar variáveis.
O diálogo de variáveis de instância será exibido. Ele é similar ao diálogo de comportamentos que vimos anteriormente, mas permite que você adicione ou altere as varíaveis de instância para o objeto. Clique no botão verde Add para adicionar uma nova.
No diálogo que abrir digite health para o nome, deixe o campo Type (tipo) como Number (número) e para o campo Initial value (valor inicial) digite 5 (como demonstrado). Assim cada monstro começará com 5 de vida. Quando eles forem atingidos subtraímos 1 da vida dele (da variável health) e quando for zero vamos destruir o objeto.
Uma vez que você fez os procedimentos clique em OK. Note que a variável agora aparece no diálodo de variáveis de instância (instance variables) e também aparece nas propriedades dos monstros. (Você pode rapidamente mudar o valor inicial da variável na barra de propriedades mas para adicionar ou remover as variáveis você terá de clicar no link Add / Edit).
Alterando os eventos
Volte para a folha de eventos. Neste momento, estamos destruindo os monstros assim que o projétil atinge eles. Vamos mudar para subtrair 1 de suas vidas.
Localize o evento que diz: Bullet - on collision with Monster (Bala - em colisão com Monstro). Note que nós colocamos uma ação "destroy monster" (destruir monstro). Vamos substituir isso com "subtrai 1 da vida". Clique com o botão direito na ação "destroy monster" e clique Replace (trocar).
O mesmo diálogo aparecerá como se estivéssemos inserindo uma nova ação, mas dessa vez ele substituirá a ação que selecionamos. Escolha Monster - > Subtract from (Monstro - Subtrair de) (na categoria de Instance variables) -> variável de instância "health" e insira 1 para o Valor. Clique em Done (feito). A ação deve estar assim:
Agora quando atiramos nos monstros eles perdem 1 de vida e a bala explode, mas nós não fizemos o evento para matar os monstros quando a vida atingir o valor 0. Adicione outro evento:
Condição: Monster -> Compare instance variable (compara variável de instância) -> Health, Less or equal, 0 (menor ou igual a 0)
Ação: Monster -> Spawn another object -> Explosion, layer 1
Ação: Monster -> Destroy
Por que "menor ou igual a 0" ao invés de "igual a 0"? Vamos supor que nós criamos uma arma mais poderosa que subtraia 2 da vida. Quando você atirar no monstro sua vida deve decrescer 5, 3, 1,-1,-3... note que em nenhum momento sua vida seria exatamente igual a zero, e aí ele nunca vai morrer! Portanto, é uma boa prática usar "menor ou igual" para testar se a vida dele se esgotou.
Execute o jogo. Agora você tem de atingir os monstros cinco vezes para matá-los!
Guardando o placar
Vamos ter um placar para que o jogador saiba se foi bem ou não. Vamos precisar de outra variável para isso. Você deve pensar "vamos colocar a pontuação como uma variável de instância do objeto Player". Inicialmente não é uma má idéia, mas lembre-se que o valor é armazenado "dentro" do objeto. Se não houver instâncias, não haverá variáveis também! Dessa forma se destruírmos o jogador não poderemos mais dizer qual a pontuação que ele tinha porque a variável foi destruída com o jogador.
Por outro lado nós podemos usar uma global variable (variável global). Da mesma forma que uma variável de instância, uma variável global (ou apenas "global") pode armazenar textos ou números. Cada variável pode guardar um único número ou um único trecho de texto. Variáveis globais também podem estar disponíveis para todo o jogo através de todos os layouts - conveniente se fôssemos adicionar outros níveis (levels).
Clique com o botão direito na parte de baixo da folha de eventos e selecione Add global variable (adicionar variável global).
Digite Score (placar) para o nome. Os outros valores padrão para os campos estão OK, ele criará a variável como número (Number) começando com valor 0.
Agora a variável global aparece como uma linha na folha de eventos. Está dentro da folha folha de eventos, mas pode ser acessada por qualquer folha de eventos de qualquer layout.
Nota: também existem as variáveis locais (local variables) que podem ser acessadas por uma menor quantidade de eventos, mas a gente não precisa se preocupar com isso agora.
Vamos fornecer ao jogador um ponto para matar os monstros. No nosso evento "Monster: health less or equal 0" (quando um monstro morre), clique em Add action (adicionar ação) e selecione System -> Add to (somar) (dentro de Global & Local Variables) -> Score, valor 1. Agora o evento deve se parecer com isso:
Agora o jogador tem um placar que aumenta em 1 pra cada monstro que ele matar - mas ainda não dá pra ver o placar! Vamos exibí-lo através de um objeto Text (texto).
[page="Criando a interface de usuário - IU
(heads-up display - HUD)"]
Criando a interface de usuário - IU
(heads-up display - HUD)
A interface de usuário - IU ou do inglês heads-up display - HUD é a interface que mostra as informações do jogador, como a vida, o placar e outras informações do jogo. Vamos fazer um HUD bem simples através de um objeto Text (texto).
O HUD sempre fica no mesmo lugar da tela. Se tivermos alguns objetos na interface, não vamos querer que eles saiam da tela conforme o jogar se move - eles deverão permanecer na tela. Para mantê-los na tela, nós podemos usar a configuração Parallax da camada. O Parallax permite que diferentes camadas se movam (rolem) a diferentes taxas (velocidade) produzindo um tipo de efeito semi-3D. Se nós configurarmos o parallax para zero, então a camada não vai se mover - ideal para um HUD.
Volte para a barra de camadas (layers bar) que usamos previamente. Adicione uma nova camada chamada HUD. Certifique-se que ela esteja sobre as outras e selecionada (lembre-se que isso torna a layer ativa). Agora, a barra de propriedades deve estar mostrando as propriedades da camada. Configure a propriedade Parallax para 0,0 (significa configurar zero para ambos os eixos X e Y).
Duplo clique em algum lugar do layout para inserir outro objeto. Desta vez selecione o objeto Text. Coloque-o no canto superior esquerdo do layout. Será difícil visualizá-lo se estiver na cor preta, então na barra de propriedades, configure para bold (negrito), italic (itálico), yellow (amarelo) e escolha uma fonte um pouco maior. Redimensione ele com largura suficiente para caber uma quantidade razoável de texto. Deve estar mais ou menos assim:
Volte para a folha de eventos. Vamos manter o texto atualizado com o placar do jogador. No evento Every tick que adicionamos previamente, adicione a ação Text -> Set text (estabelecer texto).
Usando o operador & podemos converter um número para texto e uní-lo com outra frase de texto. Então, para o texto digite a seguinte expressão:
"Placar: " & Score
A primeira parte da expressão ("Placar: ") significa que o texto exibido começará sempre com a frase Placar: . A segunda parte da expressão é o valor atual da variável global Score. O & junta as duas partes de expressão em um único texto.
Execute o jogo e atire em alguns monstros. Seu placar é exibido e permanece no mesmo lugar da tela!
Toques finais
Estamos próximos de terminar. Vamos adicionar alguns toques finais.
Primeiramente, vamos ter alguns monstros sendo lançados regularmente, caso contrário uma vez que você matar todos os monstros não restará nada. Vamos criar um novo monstro a cada 3 segundos. Adicione um novo evento:
Condição: System -> Every X seconds (a cada X segundos) -> 3
Ação: System -> Create object (criar objeto) -> Monster, layer 1, 1400 (para X), random(1024) (para Y)
1400 é a coordenada X logo fora do limite layout ao lado direito, e random(1024) é a coordenada aleatória Y referente à altura do layout.
Finalmente, vamos ter fantasmas matando o jogador.
Condição: Monster -> On collision with another object -> Player
Ação: Player -> Destroy
Conclusão
Parabéns, você fez o seu primeiro jogo HTML5 com o Construc 2! Se você tiver um servidor de hospedagem e quiser mostrar seu trabalho, clique em Export (exportar) no menu de arquivo (File Menu). O Construct pode salvar todos os arquivos do projeto em uma pasta no seu computador, os quais você poderá fazer o upload ou integrar uma página web. Se você não tem um servidor próprio, você pode compartilhar seus jogos no Dropbox
Você aprendeu conceitos básicos e importantes sobre o Construct 2: inserir objetos, usar camadas, comportamentos, eventos dentre outros. Certamente este aprendizado deixará você bem preparado para aprender mais sobre o Construc 2! Tente explorar suas características e veja o que ele pode fazer por você.
O projeto terminado
Tente fazer o download do projeto terminado deste tutorial. Eu adicionei algumas particularidades extras como um texto de "Game over" (fim de jogo), e também monstros que vão gradualmente aumentando de velocidade. Sabendo o que você sabe agora, não será difícil descobrir como isso funciona. Também tem vários comentários descrevendo como funcionam.
Muito bem! Se você teve algum problema ou acha que qualquer parte deste tutorial pode ser melhorada, deixe um comentário ou mande uma mensagem no forum. Nós veremos o que podemos fazer!
Finalmente, se você gostou deste tutorial e saiba de alguém que também possa gostar do Construct 2, por que não enviar pra ele um link com este tutorial? Machucar não vai :)
Leia mais
Quer adicionar música e efeitos sonoros? Veja Sounds & Music dentro do manual para uma rápida visão geral.
Você pode estar interessado no nosso tutorial alternativo para iniciantes que mostra como criar jogos do tipo plataforma. Como fazer um jogo de plataforma
Se quiser saber mais sobre como os eventos funcionam no Construct 2, veja a seção How Events Work no manual. É altamente recomendável a leitura para que você possa começar rapidamente seus próprios projetos! E para maiores informações, não se esqueça de que tem a documentação completa no manual.
Nota do tradutor: Qualquer dificuldade encontrada nesta tradução, por favor reportar-se ao tradutor. Ficarei satisfeito em ajudar.
Translator's note: Any difficulty encountered in this translation, please refer to the translator. I'll be glad to help.