Tutorial Construct 2

Iniciando Agora que está configurado, inicie o Construct 2. Clique no botão  File (arquivo) e selecione  New (novo).

Construct 2 mantém todo o projeto em um único arquivo .capx pra gente. Você agora deve estar  vendo um layout vazio - que é a área de desenho onde você cria e posiciona os objetos. Pense no layout como um fase ou um menu de um jogo.

Inserindo objetos Plano de Fundo

(Tiled Background) A primeira coisa que queremos é um plano de fundo que se repita. O Tiled Background  pode fazer isso pra gente. Primeiro, aqui está a sua textura de background - clique com o botão direito do mouse e salve em algum lugar no seu computador:

Agora, clique duas vezes em um espaço dentro do layout para inserir um novo objeto. (Depois, se estiver cheio, você pode também clicar com o botão direito e selecionar   Insert new object  (inserir novo objeto). Uma vez que aparecer o diálogo do  Insert new object , clique duas vezes no objeto Tiled Background para inserí-lo. 1

Um ponteiro em forma de cruz aparecerá para indicar onde será inserido o objeto. Clique num local próximo ao meio do layout. O texture editor  (editor de texturas) abrirá para você inserir a textura. Vamos importar a imagem que você salvou anteriormente. Clique no ícone de arquivo  para carregar a textura textura do disco, encontre encontre e selecione selecione o arquivo que você baixou. baixou.

Feche o editor de texturas clicando no X no canto superior direito. Se você for questionado, certifique-se de salvar! Agora você deve visualizar o objeto tipo Tiled Background no layout - o nosso plano de fundo. Vamos redimensionar para cobrir todo o layout. Confirme que o objeto está selecionado, a  Properties Bar  (barra de propriedades) à esquerda deve mostrar todas as configurações configurações do objeto, incluindo seu tamanho e posição. Configure sua posição para 0,0 (canto superior esquerdo do layout), e seu tamanho para 1280,1024 (o tamanho do layout).

2

Vamos verificar nosso trabalho. Segure a tecla control e role para baixo a roda do mouse para afastar o zoom. Alternativamente, clique em view - zoom out  algumas vezes. É possível também segurar a tecla espaço ou o botão do meio do mouse para deslocar o layout. Simples, né? Seu  plano de fundo deve cobrir todo o layout agora:

Aperte control+0 ou clique em view - zoom to 100% para retornar à visão 1:1. (Se você é impaciente como eu, clique no pequeno ícone 'run' (executar) na barra de título da  janela - um navegador deverá ser aberto exibindo o seu layout com o plano de fundo! Uhu!)

Adicionando uma camada

(layer) Ok, agora vamos adicionar mais alguns objetos. Contudo, podemos acidentalmente selecionar o tiled background até travar  ele, tornando-o não selecionável. Vamos usar o sistema de camadas  pra fazer isso. Layouts podem consistir de múltiplas layers (múltiplas camadas), os quais você pode usar para agrupar objetos. Imagine as layers como vidros empilhados um em cima do outro e os objetos  pintados em cada um dos vidros. Isso permite a você facilmente organizar quais objetos devem aparecer sobre os outros, as layers podem ser ocultas, travadas, aplicar efeito parallax 3

(velocidade de movimento), e mais. Por exemplo, neste jogo nós queremos que tudo seja exibido na frente do plano de fundo, então podemos fazer outra layer sobre a anterior para adicionar  outros objetos. Para administrar as camadas, clique em Layers tab (aba de camadas), que normalmente fica  próxima do Project bar (barra do projeto):

Você deve ver a  Layer 0 na lista (a contagem do Construct 2 começa do zero, visto que funciona melhor, como é feito na programação). Clique no ícone de lápis e renomeie ela para  Background  já que é a nossa camada de plano de fundo. Agora clique no ícone verde 'add' para adicionar uma nova camada que receberá nossos outros quatro objetos. Vamos chamá-la de  Main (principal). Finalmente, se você clicar no ícone de cadeado próximo à camada  Background , ela ficará travada. Isso significa que você não poderá selecionar nada que estiver contido nela. É  bastante conveniente para o nosso plano de fundo, pois ele pode ser acidentalmente selecionado e não precisaremos mexer nele novamente. Contudo, se você precisar fazer mudanças, basta clicar novamente no cadeado para destravar. Os checkbox também permitem que você oculte as camadas no editor, mas não vamos querer  isso agora. Sua barra de camadas deve se parecer com isso agora:

Agora, certifique-se de que a camada 'Main' está selecionada na barra de camadas . Isto é importante - a camada selecionada é a camada ativa. Todos os novos objetos serão inseridos na camada ativa e se ela não estiver selecionada podemos acidentalmente inserir na 4

camada errada. A camada ativa é exibida na barra de status e também aparece em forma de dica ao lado do cursor quando inserindo um novo objeto - vale apena ficar de olho. Adicionando o objeto input

(entrada) Atente novamente para o layout . Dois cliques para inserir outro novo objeto. Desta vez,

selecione o objeto Mouse, pois vamos precisar das entradas de mouse. Faça a operação novamente para o objeto Keyboard (teclado).  Nota: Estes objetos não precisam ser colocados no layout. Eles são ocultos e servem para todo o  projeto. Agora todos os layouts do nosso projeto podem aceitar as entradas do mouse e do teclado. Os objetos do jogo

É hora de inserir os objetos do nosso jogo! Aqui estão suas texturas - salve-as no disco como foi feito anteriormente. Player (jogador):

Monster (monstro):

Bullet (bala): e Explosion (explosão):

Para cada um desses objetos nós vamos utilizar o objeto  sprite (objeto gráfico). Ele simplesmente exibe a textura, a qual você poderá mover, rotacionar e redimensionar. Geralmente 5

os jogos são compostos principalmente por objetos do tipo Sprite. Vamos inserir cada um dos quatro objetos acima como objetos sprite. O processo é similar ao de inserir o objeto Tiled Background (o nosso plano de fundo): 1. Duplo clique para inserir um novo objeto 2. Duplo clique no objeto 'Sprite' 3. Quando o mouse exibir o ponteiro em cruz clique em algum local do layout. A dica deverá exibir 'Main' (lembrando que esta é a camada ativa no layout) 4. O editor de texturas será aberto. Clique no ícone abrir e carregue uma de nossas quatro texturas

5. Feche o editor de texturas salvando suas alterações. Agora você deve visualizar o objeto no layout!  Nota: outra maneira rápida de inserir objetos sprite é de arrastar (drag and drop) o arquivo de imagem do Windows para a área do layout. Construct 2 criará um objeto Sprite com a textura  para você. Certifique-se apenas de arrastar uma imagem por vez - se você arrastar todas as quatro de uma vez só o Construct 2 irá criar um único sprite com quatro frames (quadros) de animação. Mova os sprites bullet  e explosion para fora do layout - nós não vamos querer enxergá-los quando o jogo iniciar. Esses objetos serão chamados de Sprite, Sprite2, Sprite3 and Sprite4. Isso não é muito útil - as coisas ficarão confusas assim. Renomeie-os para  Player ,  Monster ,  Bullet  and  Explosion conforme apropriado. Você pode fazer isso selecionando o objeto e depois mudando a  propriedade Name (nome) na barra de propriedades:

Adicionando comportamentos (behaviors) Os comportamentos são funcionalidades embarcadas no Construct 2. Por exemplo, você pode adicionar o comportamento  Plataforma a um objeto e o comportamento Sólido para o chão, assim você poderá instantaneamente pular por aí como em um jogo de plataforma. Você também  pode fazer isso através de eventos, mas toma mais tempo e de qualquer forma não faria sentido  já que o comportamento já é bom o suficiente! Então vamos dar uma olhada em quais comportamento vamos usar. Dentre outros, o Construct 2 tem os seguintes comportamentos (behaviors): - 8 Direction movement (movimento em 8 direções). Isto permite a você movimentar um objeto com as setas do teclado. Servirá bem para o movimento do jogador. - Bullet movement (movimento de bala). Esse simplesmente move um objeto para a frente no seu ângulo atual. Funcionará bem para os projéteis do jogador. Apesar do nome, ele também funciona bem para mover os monstros na tela - uma vez que tudo que o movimento faz é mover  os objetos pra frente a uma determinada velocidade. 6

- Scroll to (fixar). Esse faz com que a tela siga um objeto conforme ele se move - também conhecido como  scrolling (rolagem) - isso vai ser útil para o jogador. - Bound to layout (limitado ao layout). Isso irá parar um objeto que estiver indo além da área do layout. Também será útil para o jogador, para que ele não vá passear para fora da área do jogo! - Destroy outside layout (destruir quando fora do layout). Ao invés de parar os objetos que estiverem deixando a área do layout, esse comportamento destrói os objetos que fizerem isso. Será útil para nossos projéteis. Sem isso, as balas iriam voar eternamente fora da tela, sempre consumindo um pouco de memória e de processamento. Em vez disso, nós devemos destruir as  balas que deixarem o layout. - Fade. Esse faz um objeto desaparecer gradualmente, o qual estaremos usando nas explosões. Vamos adicionar esses comportamentos aos objetos que precisam deles. Como adicionar um comportamento

Vamos adicionar o comportamento 8 direction movement ao jogador. Clique no objeto Player   para selecioná-lo. Na barra de propriedades, note a categoria  Behaviors. Clique em  Add / Edit  (adicionar/editar). O diálogo dos comportamentos para o objeto Player será aberto.

Clique no ícone verde 'add behavior' (adicionar comportamento) dentro do diálogo de comportamentos. Duplo clique no 8 direction movement para adicioná-lo.

7

Faça o mesmo procedimento novamente e desta vez selecione o comportamento Scroll To para fazer a tela seguir o jogador e o comportamento Bound to layout, para mantê-lo dentro do layout. O seu diálogo de comportamento deve se parecer com isso:

Feche o diálogo de comportamentos. Clique em Run para testar o jogo!

Felizmente você tem instalado um navegador compatível com HTML5. Caso contrário, certifique-se de pegar a última versão do Fixefox ou Chrome, ou Internet Explorer 9 se você estiver no Vista ou superior. Uma vez que você tiver o jogo rodando, note que você já pode se mover através das teclas e a tela segue o jogador! Você também não poderá andar para fora da área do layout, graças ao comportamento Bound to Layout. É pra isso que servem os comportamentos - adicionar funcionalidades rapidamente. Em breve usaremos o sistema de eventos para adicionar funcionalidades personalizadas. Adicionando os outros comportamentos

8

Podemos adicionar comportamentos aos objetos pelo mesmo método - selecione o objeto, clique em  Add / Edit  para abrir o diálogo de comportamentos e adicione alguns comportamentos. Vamos adicionar os seguintes comportamentos: - Adicione o Bullet movement e Destroy outside layout para o objeto Bullet (sem surpresas até aqui) - Adicione o Bullet movement ao objeto Monster (porque ele também só se move para frente) - Adicione o comportamento Fade ao objeto Explosion (após aparecer ele irá desaparecer  gradualmente). Por padrão o comportamento Fade também destrói os objetos após desaparecerem, o que irá nos poupar de se preocupar com objetos de explosão invisíveis entupindo o jogo. Se você executar o jogo você deverá notar que a única coisa diferente é que os monstros que você pode ver de repente disparam velozmente. Vamos diminuir sua velocidade para um ritmo mais calmo. Selecione o objeto Monster. Note que a partir do momento que adicionamos os comportamentos algumas propriedades extras apareceram na barra de propriedades:

Isso nos permite ajustar como os comportamentos trabalham. Mude a velocidade de 400 para 80 (essa é a velocidade de viagem em pixels por segundo). Similarmente, altere a velocidade dos objetos Bullet para 600, e nos objetos Explosion altere a  propriedade  Fade out time (tempo de desaparecimento) do comportamento Fade para 0.5 (isso equivale a meio segundo). Criando mais alguns monstros

Segurando a tecla Control, clique e arraste o objeto Monster. Você irá notar que esse  procedimento irá criar outra instância. Isso é apenas outro objeto do tipo de objeto Monster. Os tipos de objeto são essencialmente as 'classes' dos objetos. No sistema de eventos, você irá lidar principalmente com tipos de objetos. Por exemplo, você deve querer criar um evento que diz "Balas colidem com Monstros". Isso realmente significa " Qualquer instância do tipo de objeto Bullet colidindo com qualquer instância do tipo de objeto Monster" - em detrimento a ter  que fazer um evento separado para cada monstro. Através dos Sprites, todas as instâncias de um mesmo tipo de objeto compartilham a mesma textura. Isso é bom pela eficiência - quanto as  pessoas forem jogar seu jogo online, ao invés de ter de baixar 8 texturas para 8 monstros, elas apenas precisarão baixar uma única textura e o Construct 2 irá repetí-la 8 vezes.

tipos de objetos vs. instâncias*. Por enquanto, um bom exemplo para se pensar é que diferentes tipos de inimigos são diferentes tipos de objetos, sendo que os próprios inimigos (pode ter vários deles) são instâncias daqueles tipos de objetos. Usando a tecla Control + Arrastar, Crie 7 ou 8 novos monstros . Não coloque eles perto demais do jogador, ou vão morrer logo! Para ajudar, você pode afastar o zoom com a tecla Control +

 Posteriormente iremos cobrir mais sobre

9

Roda do mouse, e assim espalhar os monstros por todo o layout. Você deve terminar com algo mais ou menos assim.

Agora é hora de adicionar nossas funcionalidades personalizadas pelo método visual de  programação do Construct 2 - o sistema de eventos.

Eventos Primeiramente clique na aba  Event sheet 1 (folha de eventos 1) que fica ao topo para mudar para o Editor de folha de eventos. Uma lista de eventos é chamado de  Event sheet (folha de eventos) e você pode ter diferentes folhas de eventos para diferentes partes do seu jogo ou para organização. As folhas de eventos podem também "incluir" outras folhas de eventos, permitindo que você reutilize eventos em múltiplos níveis por exemplo, mas não vamos precisar disso agora.

Sobre os eventos

Como indicado pelo texto exibido na folha vazia, o Construct 2 executa todos os eventos que estiverem na folha de eventos em um tick (instante). A maioria dos monitores atualiza o display 60 vezes por segundo, então o Construct 2 irá tentar igualar essa atualização para ter uma exibição mais suave. Isso significa que geralmente a folha de eventos é executada 60 vezes por  segundo, redesenhando a tela em cada instante. Essa é a definição de um Tick - uma unidade de tempo para "executar os eventos e em seguida redesenhar a tela". Os eventos são executados de cima para baixo, então os eventos no topo da folha de eventos são executados primeiro. Condições, ações e sub-eventos

Os eventos consistem de condições , que testam se alguns critérios foram satisfeitos, ex.: "A  barra de espaço está apertada?". Se todas as condições forem verdadeiras, as ações dos eventos serão executadas, ex.: "Criar um objeto bullet". Após executar as ações, quaisquer  sub-eventos também serão executados - estes por sua vez poderão testar mais condições e então executar  mais ações, e então mais sub-eventos, e assim por diante. Utilizando este sistema, podemos 10

construir funcionalidades sofisticadas para nossos jogos e apps. No entanto, não precisaremos de sub-eventos neste tutorial. Vamos passar de novo. Resumidamente, um evento roda desse jeito: Todas as condições foram satisfeitas?

---> Sim: executa todas as ações do evento. ---> Não: vai para o próximo evento (não incluindo nenhum sub-evento). Isso foi uma forma de simplificar. Construct 2 fornece uma grande quantidade de recursos de eventos para cobrir muitas coisas diferentes que você pode precisar fazer. Mas por enquanto, é uma boa forma de pensar nisso. Seu primeiro evento

 Nós queremos que o jogador sempre olhe para a direção do mouse. Vai se parecer com isso quando terminarmos:

Lembre-se que um Tick roda toda vez que a tela é desenhada, dessa forma queremos que o  jogador olhe para o mouse a cada Tick e assim ele vai parecer estar de frente para o mouse o tempo todo. Vamos começar a fazer este evento. Duplo clique em algum lugar na folha de eventos. Isso irá abrir um guia para adicionar uma condição para o novo evento.

Objetos diferentes têm condições e ações diferentes, dependendo do que podem fazer. Também há o System object (objeto de sistema), que representa uma funcionalidade embarcada no Construct 2. Duplo clique no objeto System como demonstrado. O diálogo irá então listar todas as condições do objeto sistema: 11

Duplo clique na condição  Every Tick para inserí-la. O guia será fechado e o evento é criado, sem

ações por enquanto. Deve se parecer com isso agora:

Agora nós queremos adicionar uma ação para fazer o jogador olhar para o mouse. Clique no link   Add action (adicionar ação) ao lado direito do evento. (Certifique-se de escolher o link   Add  action, e não o link  Add event  (adicionar evento) que está abaixo dele e que irá adicionar um novo evento novamente). O guia para adicionar uma ação irá aparecer:

Tal qual como quando adicionamos um evento, nós temos a mesma lista de objetos para selecionar, mas desta vez para adicionar uma ação. Tente não se confundir entre adicionar uma condição e adicionar uma ação! Como demonstrado, duplo clique no objeto  Player , pois é o  jogador que queremos que olhe para o mouse. A lista de ações disponíveis para o objeto Player  será exibida: 12

 Note que o comportamento 8-direction movement (movimento em 8 direções) tem as suas  próprias ações. Contudo, não precisamos nos preocupar com isso por enquanto. Em vez de ajustar o ângulo do jogador a um número de graus, é conveniente usar a ação Set angle towards position (ajustar o ângulo para a posição). Isso irá calcular automaticamente o ângulo do jogador para as coordenadas X e Y dadas, e assim ajusta o ângulo do objeto. Duplo clique na ação Set angle towards position . O Construct 2 agora precisa saber as coordenadas X e Y para apontar o jogador:

Esses são chamados parâmetros da ação. As condições também podem ter parâmetros, mas a condição  Every tick não precisa disso. Queremos ajustar o ângulo para a posição do mouse. O objeto Mouse pode prover isso. Digite Mouse.X para o  X  e Mouse.Y para o Y . Essas são chamadas expressões. Elas são como somas que são calculadas. Por exemplo, você poderia digitar  Mouse.X + 100 ou  sin(Mouse.Y) (seno da  posição Y do mouse) (Apesar de que esses exemplos em particular não devem ser muito úteis!). Desse jeito você pode usar qualquer informação ou qualquer cálculo de um objeto para trabalhar  os parâmetros nas ações e condições. É muito poderoso e uma espécie de fonte secreta da grande flexibilidade do Construct 2.

13

Ocorreu um erro que diz "Mouse is not an object name?" (Mouse não é o nome de um objeto?). Certifique-se que você adicionou o objeto Mouse! Volte para a página 2 e verifique o tópico "Adicionando o objeto input".

Você deve estar se perguntando como vou lembrar de todas as possibilidades de expressões  possíveis. Felizmente existe o "painel de objetos" que você deve ver flutuando acima dele. Por   padrão ele é um pouco transparente para não te distrair.

Passe o mouse sobre ele, ou clique sobre ele, e ele vai se tornar totalmente visível. Ele serve como um tipo de dicionário com todas as expressões que você pode usar, com descrições para te ajudar a lembrar. Se você der um duplo clique em um objeto, você verá uma lista com todas suas expressões. Se você der um duplo clique em uma expressão ela será inserida para você, te  poupando de ter que digitá-la. De qualquer forma, clique em Done (concluído) no diálogo dos parâmetros. A ação foi adicionada! Como você viu anteriormente, agora deve estar assim:

Aí está o seu primeiro evento! Tente execuar o jogo e o jogador deverá estar se movendo como antes, mas sempre de frente para o mouse. Esse é o nosso primeiro conjunto de funcionalidades  personalizadas.

Adicionando funcionalidades ao jogo Se cada evento for descrito no nível de detalhes que fizemos antes, este tutorial ficaria muito extenso. Vamos fazer uma descrição um pouco mais resumida para os próximos eventos. Lembre-se dos passos para adicionar uma condição ou ação: 1. Duplo clique para inserir um novo evento, ou clique no link  Add action para adicionar uma ação; 2. Duplo clique no objeto que contém a condição/ação; 3. Duplo clique na condição/ação que você deseja; 4. Insira os parâmetros, se necessários. De agora em diante, os eventos serão descritos pelo objeto, seguido pela condição/ação, seguido  pelos parâmetros. Por exemplo, o evento que acabamos de inserir poderia ser descrito da seguinte maneira: 14

Adicionar condição System -> Every tick  Adicionar ação  Player -> Set angle towards position -> X: Mouse.X , Y: Mouse.Y  Fazendo o jogador atirar

Quando o jogador clicar com o mouse, ele deverá atirar um projétil. Isto pode ser feito pela ação Spawn an object  (desovar um objeto) no objeto Player, o que irá criar uma nova instância de um objeto na mesma posição e ângulo. O  Bullet movement  que adicionamos mais cedo fará com que ele vôe para frente. Crie o seguinte evento: Condição: Mouse -> On click -> Left clicked (botão esquerdo)(é o padrão) Ação:  Player  -> Spawn another object  -> Para o Objeto selecione Bullet . Para a  Layer coloque 1 (A camada principal "Main" é a layer 1 - lembre-se que o Construct 2 faz a contagem do 0). Deixe 0 o campo  Image point (ponto da imagem). Seu evento de se parecer com isso:

Se você executar o jogo irá notar que as balas são atiradas do meio do jogador ao invés da ponta da arma. Vamos corrigir isso colocando um image point na ponta da arma. (um ponto da imagem é apenas uma posição na imagem de onde você pode lançar objetos). Clique com o botão direito no objeto Player na barra de projeto ou na barra de objetos e selecione Edit animations (editar animações).

O editor de imagens para o jogador reaparece. Clique nas ferramentas Origin (origem) e Image Points (pontos da imagem):

... e o diálogo de pontos da imagem é aberto:

15

 Note que a origem do objeto é exibida como um ponto vermelho. Esse é o "hotspot" ou "ponto  pivô" do objeto. Se você rotacionar o objeto, ele gira sobre a origem. Nós queremos adicionar  outro ponto de imagem para representar a arma, então clique no botão vermelho  Add (adicionar). Um ponto azul é exibido - este é nosso novo ponto da imagem (image point). Clique com o botão esquerdo na ponta da arma do jogador para colocar o ponto de imagem ali:

Feche o editor de imagens. Duplo clique na ação Spawn an object  (lançar um objeto) que criamos anteriormente e mude o  Image Point  para 1. (A origem será sempre o primeiro ponto da imagem e lembre-se que o Construct 2 faz a contagem do zero). O evento deve se parecer com o que você vê abaixo - note que ele diz  Image point 1 agora:

Execute o jogo. As balas agora são atiradas da ponta da nossa arma! Apesar disso, os projéteis ainda não fazem nada. Esperamos, no entanto, que você começa a perceber que uma vez que se familiarizar com o sistema de eventos você pode adicionar funcionalidades muito rapidamente. Vamos fazer as balas matarem os monstros. Adicione o seguinte evento: Condição: Bullet -> On collision with another object  (ao colidir com outro objeto) -> selecione o objeto Monster . Ação: Monster -> Destroy (destruir) Ação: Bullet -> Spawn another object  -> Explosion, layer  1 Ação: Bullet -> Destroy O efeito de explosão

Execute o jogo e tente atirar nos monstros. Oops, a explosão tem uma borda preta grande!

16

Você pode ter previsto isso desde o início e se perguntou se o seu jogo realmente ficaria desse  jeito! Não se preocupe, não vai.

Por que isso funciona? Sem entrar nos detalhes, as imagens comuns são coladas no topo da tela. Com o efeito aditivo cada pixel é adicionado (somado) com o pixel do plano de fundo por trás dele. A cor preta equivale a um valor de zero pixel, então nada é somado - você não vê o plano de fundo preto. Cores mais brilhantes adicionam mais valores, então aparecem com mais força. É ótimo para efeitos de explosão e de luz. Fazendo monstros mais espertos

Por enquanto os monstros apenas passeiam para a direita pra fora do layout. Vamos torná-los um  pouco mais interessantes. Primeiro de tudo, vamos iniciá-los com um ângulo aleatório. Condição: System -> On start of Layout (no início do layout) Ação: Monster -> Set angle (define o ângulo) -> random(360)

Eles ainda vão passear eternamente quando saem do layout e nunca mais serão vistos. Vamos mantê-los dentro do layout. O que vamos fazer é apontá-los de volta para o jogador quando deixarem o layout. Isto fará duas coisas: eles sempre vão ficar dentro do layout e se o jogador  ficar parado os monstros virão direto pra ele! Condição: Monster -> Is outside layout (está fora do layout) Ação: Monster -> Set angle toward position -> Para X, Player.X e para Y, Player.Y Rode o jogo. Se você esperar um tempo irá notar que os monstros também ficam em torno do layout e vão em todas as direções. Não chega a ser uma Inteligência Artificial - IA, mas vai servir! Agora vamos supor que queremos que o monstro morra após atirarmos cinco vezes nele, em vez de morrer instantaneamente como está acontecendo. Como fazemos isso? Se armazenarmos apenas um contador de "Health" (vida) então ao atingir o monstro cinco vezes todos os monstros 17

irão morrer. Dessa forma precisamos que cada monstro tenha sua própria vida. Podemos fazer  isso com instance variables (variáveis de instância).

Variáveis de instância Variáveis de instância permitem que cada monstro guarde seu próprio valor de vida. Uma variável 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 variáveis 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álogo 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 ).

18

Alterando os eventos

Volte para a folha de eventos. Neste momento, estamos destruindo os monstros assim que o  projétil os atinge. 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

19

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 destruirmos 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.

20

Agora a variável global aparece como uma linha na folha de eventos. Está dentro da folha de eventos, mas pode ser acessada por qualquer folha de eventos de qualquer layout. 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:

 Nota:

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).

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). 21

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

22

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.

23