Iniciando

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

Construct 2 mantm 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 boto direito do mouse e salve em algum lugar no seu computador:

Agora, clique duas vezes em um espao dentro do layout para inserir um novo objeto. (Depois, se estiver cheio, voc pode tambm clicar com o boto direito e selecionar Insert new object (inserir novo objeto). Uma vez que aparecer o dilogo 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 prximo 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 do disco, encontre e selecione o arquivo que voc 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 configuraes do objeto, incluindo seu tamanho e posio. Configure sua posio para 0,0 (canto superior esquerdo do layout), e seu tamanho para 1280,1024 (o tamanho do layout).

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. possvel tambm segurar a tecla espao ou o boto 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 viso 1:1. (Se voc impaciente como eu, clique no pequeno cone 'run' (executar) na barra de ttulo 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 no selecionvel. Vamos usar o sistema de camadas pra fazer isso. Layouts podem consistir de mltiplas layers (mltiplas 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 ns queremos que tudo seja exibido na frente do plano de fundo, ento 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 prxima do Project bar (barra do projeto):

Voc deve ver a Layer 0 na lista (a contagem do Construct 2 comea do zero, visto que funciona melhor, como feito na programao). Clique no cone de lpis 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 prximo camada Background, ela ficar travada. Isso significa que voc no poder selecionar nada que estiver contido nela. bastante conveniente para o nosso plano de fundo, pois ele pode ser acidentalmente selecionado e no precisaremos mexer nele novamente. Contudo, se voc precisar fazer mudanas, basta clicar novamente no cadeado para destravar. Os checkbox tambm permitem que voc oculte as camadas no editor, mas no 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 sero inseridos na camada ativa e se ela no estiver selecionada podemos acidentalmente inserir na 4

camada errada. A camada ativa exibida na barra de status e tambm 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. Faa a operao novamente para o objeto Keyboard (teclado). Nota: Estes objetos no precisam ser colocados no layout. Eles so 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 esto suas texturas - salve-as no disco como foi feito anteriormente. Player (jogador):

Monster (monstro):

Bullet (bala): e Explosion (exploso):

Para cada um desses objetos ns vamos utilizar o objeto sprite (objeto grfico). Ele simplesmente exibe a textura, a qual voc poder mover, rotacionar e redimensionar. Geralmente 5

os jogos so 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 alteraes. Agora voc deve visualizar o objeto no layout! Nota: outra maneira rpida 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 animao. Mova os sprites bullet e explosion para fora do layout - ns no vamos querer enxerg-los quando o jogo iniciar. Esses objetos sero chamados de Sprite, Sprite2, Sprite3 and Sprite4. Isso no muito til - as coisas ficaro 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 so funcionalidades embarcadas no Construct 2. Por exemplo, voc pode adicionar o comportamento Plataforma a um objeto e o comportamento Slido para o cho, assim voc poder instantaneamente pular por a como em um jogo de plataforma. Voc tambm pode fazer isso atravs de eventos, mas toma mais tempo e de qualquer forma no faria sentido j que o comportamento j bom o suficiente! Ento 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 direes). 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 projteis do jogador. Apesar do nome, ele tambm 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 - tambm 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 alm da rea do layout. Tambm ser til para o jogador, para que ele no v passear para fora da rea do jogo! - Destroy outside layout (destruir quando fora do layout). Ao invs de parar os objetos que estiverem deixando a rea do layout, esse comportamento destri os objetos que fizerem isso. Ser til para nossos projteis. Sem isso, as balas iriam voar eternamente fora da tela, sempre consumindo um pouco de memria e de processamento. Em vez disso, ns devemos destruir as balas que deixarem o layout. - Fade. Esse faz um objeto desaparecer gradualmente, o qual estaremos usando nas exploses. 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 dilogo dos comportamentos para o objeto Player ser aberto.

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

Faa 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 dilogo de comportamento deve se parecer com isso:

Feche o dilogo de comportamentos. Clique em Run para testar o jogo!

Felizmente voc tem instalado um navegador compatvel com HTML5. Caso contrrio, certifique-se de pegar a ltima verso 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 atravs das teclas e a tela segue o jogador! Voc tambm no poder andar para fora da rea do layout, graas 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

Podemos adicionar comportamentos aos objetos pelo mesmo mtodo - selecione o objeto, clique em Add / Edit para abrir o dilogo 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 tambm s se move para frente) - Adicione o comportamento Fade ao objeto Explosion (aps aparecer ele ir desaparecer gradualmente). Por padro o comportamento Fade tambm destri os objetos aps desaparecerem, o que ir nos poupar de se preocupar com objetos de exploso invisveis 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 instncia. Isso apenas outro objeto do tipo de objeto Monster. Os tipos de objeto so 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 instncia do tipo de objeto Bullet colidindo com qualquer instncia do tipo de objeto Monster" - em detrimento a ter que fazer um evento separado para cada monstro. Atravs dos Sprites, todas as instncias de um mesmo tipo de objeto compartilham a mesma textura. Isso bom pela eficincia - quanto as pessoas forem jogar seu jogo online, ao invs de ter de baixar 8 texturas para 8 monstros, elas apenas precisaro baixar uma nica textura e o Construct 2 ir repet-la 8 vezes. Posteriormente iremos cobrir mais sobre tipos de objetos vs. instncias*. Por enquanto, um bom exemplo para se pensar que diferentes tipos de inimigos so diferentes tipos de objetos, sendo que os prprios inimigos (pode ter vrios deles) so instncias daqueles tipos de objetos. Usando a tecla Control + Arrastar, Crie 7 ou 8 novos monstros . No coloque eles perto demais do jogador, ou vo morrer logo! Para ajudar, voc pode afastar o zoom com a tecla Control +

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 mtodo visual de programao 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 organizao. As folhas de eventos podem tambm "incluir" outras folhas de eventos, permitindo que voc reutilize eventos em mltiplos nveis por exemplo, mas no 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, ento o Construct 2 ir tentar igualar essa atualizao para ter uma exibio mais suave. Isso significa que geralmente a folha de eventos executada 60 vezes por segundo, redesenhando a tela em cada instante. Essa a definio de um Tick - uma unidade de tempo para "executar os eventos e em seguida redesenhar a tela". Os eventos so executados de cima para baixo, ento os eventos no topo da folha de eventos so executados primeiro.

Condies, aes e sub-eventos

Os eventos consistem de condies, que testam se alguns critrios foram satisfeitos, ex.: "A barra de espao est apertada?". Se todas as condies forem verdadeiras, as aes dos eventos sero executadas, ex.: "Criar um objeto bullet". Aps executar as aes, quaisquer sub-eventos tambm sero executados - estes por sua vez podero testar mais condies e ento executar mais aes, e ento mais sub-eventos, e assim por diante. Utilizando este sistema, podemos 10

construir funcionalidades sofisticadas para nossos jogos e apps. No entanto, no precisaremos de sub-eventos neste tutorial. Vamos passar de novo. Resumidamente, um evento roda desse jeito: Todas as condies foram satisfeitas? ---> Sim: executa todas as aes do evento. ---> No: vai para o prximo evento (no 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

Ns queremos que o jogador sempre olhe para a direo 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 comear a fazer este evento. Duplo clique em algum lugar na folha de eventos. Isso ir abrir um guia para adicionar uma condio para o novo evento.

Objetos diferentes tm condies e aes diferentes, dependendo do que podem fazer. Tambm h o System object (objeto de sistema), que representa uma funcionalidade embarcada no Construct 2. Duplo clique no objeto System como demonstrado. O dilogo ir ento listar todas as condies do objeto sistema:

11

Duplo clique na condio Every Tick para inser-la. O guia ser fechado e o evento criado, sem aes por enquanto. Deve se parecer com isso agora:

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

Tal qual como quando adicionamos um evento, ns temos a mesma lista de objetos para selecionar, mas desta vez para adicionar uma ao. Tente no se confundir entre adicionar uma condio e adicionar uma ao! Como demonstrado, duplo clique no objeto Player, pois o jogador que queremos que olhe para o mouse. A lista de aes disponveis para o objeto Player ser exibida: 12

Note que o comportamento 8-direction movement (movimento em 8 direes) tem as suas prprias aes. Contudo, no precisamos nos preocupar com isso por enquanto. Em vez de ajustar o ngulo do jogador a um nmero de graus, conveniente usar a ao Set angle towards position (ajustar o ngulo para a posio). 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 ao Set angle towards position. O Construct 2 agora precisa saber as coordenadas X e Y para apontar o jogador:

Esses so chamados parmetros da ao. As condies tambm podem ter parmetros, mas a condio Every tick no precisa disso. Queremos ajustar o ngulo para a posio do mouse. O objeto Mouse pode prover isso. Digite Mouse.X para o X e Mouse.Y para o Y. Essas so chamadas expresses. Elas so como somas que so calculadas. Por exemplo, voc poderia digitar Mouse.X + 100 ou sin(Mouse.Y) (seno da posio Y do mouse) (Apesar de que esses exemplos em particular no devem ser muito teis!). Desse jeito voc pode usar qualquer informao ou qualquer clculo de um objeto para trabalhar os parmetros nas aes e condies. muito poderoso e uma espcie de fonte secreta da grande flexibilidade do Construct 2.

13

Ocorreu um erro que diz "Mouse is not an object name?" (Mouse no o nome de um objeto?). Certifique-se que voc adicionou o objeto Mouse! Volte para a pgina 2 e verifique o tpico "Adicionando o objeto input". Voc deve estar se perguntando como vou lembrar de todas as possibilidades de expresses possveis. Felizmente existe o "painel de objetos" que voc deve ver flutuando acima dele. Por padro ele um pouco transparente para no te distrair.

Passe o mouse sobre ele, ou clique sobre ele, e ele vai se tornar totalmente visvel. Ele serve como um tipo de dicionrio com todas as expresses que voc pode usar, com descries para te ajudar a lembrar. Se voc der um duplo clique em um objeto, voc ver uma lista com todas suas expresses. Se voc der um duplo clique em uma expresso ela ser inserida para voc, te poupando de ter que digit-la. De qualquer forma, clique em Done (concludo) no dilogo dos parmetros. A ao 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 nvel de detalhes que fizemos antes, este tutorial ficaria muito extenso. Vamos fazer uma descrio um pouco mais resumida para os prximos eventos. Lembre-se dos passos para adicionar uma condio ou ao: 1. Duplo clique para inserir um novo evento, ou clique no link Add action para adicionar uma ao; 2. Duplo clique no objeto que contm a condio/ao; 3. Duplo clique na condio/ao que voc deseja; 4. Insira os parmetros, se necessrios. De agora em diante, os eventos sero descritos pelo objeto, seguido pela condio/ao, seguido pelos parmetros. Por exemplo, o evento que acabamos de inserir poderia ser descrito da seguinte maneira: 14

Adicionar condio System -> Every tick Adicionar ao 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 projtil. Isto pode ser feito pela ao Spawn an object (desovar um objeto) no objeto Player, o que ir criar uma nova instncia de um objeto na mesma posio e ngulo. O Bullet movement que adicionamos mais cedo far com que ele ve para frente. Crie o seguinte evento: Condio: Mouse -> On click -> Left clicked (boto esquerdo)( o padro) Ao: 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 so atiradas do meio do jogador ao invs da ponta da arma. Vamos corrigir isso colocando um image point na ponta da arma. (um ponto da imagem apenas uma posio na imagem de onde voc pode lanar objetos). Clique com o boto direito no objeto Player na barra de projeto ou na barra de objetos e selecione Edit animations (editar animaes).

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

... e o dilogo 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. Ns queremos adicionar outro ponto de imagem para representar a arma, ento clique no boto vermelho Add (adicionar). Um ponto azul exibido - este nosso novo ponto da imagem (image point). Clique com o boto esquerdo na ponta da arma do jogador para colocar o ponto de imagem ali:

Feche o editor de imagens. Duplo clique na ao Spawn an object (lanar 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 so atiradas da ponta da nossa arma! Apesar disso, os projteis ainda no fazem nada. Esperamos, no entanto, que voc comea 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: Condio: Bullet -> On collision with another object (ao colidir com outro objeto) -> selecione o objeto Monster. Ao: Monster -> Destroy (destruir) Ao: Bullet -> Spawn another object -> Explosion, layer 1 Ao: Bullet -> Destroy

O efeito de exploso
Execute o jogo e tente atirar nos monstros. Oops, a exploso tem uma borda preta grande!

16

Voc pode ter previsto isso desde o incio e se perguntou se o seu jogo realmente ficaria desse jeito! No se preocupe, no vai.

Por que isso funciona? Sem entrar nos detalhes, as imagens comuns so coladas no topo da tela. Com o efeito aditivo cada pixel adicionado (somado) com o pixel do plano de fundo por trs dele. A cor preta equivale a um valor de zero pixel, ento nada somado - voc no v o plano de fundo preto. Cores mais brilhantes adicionam mais valores, ento aparecem com mais fora. timo para efeitos de exploso 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 aleatrio. Condio: System -> On start of Layout (no incio do layout) Ao: Monster -> Set angle (define o ngulo) -> random(360)

Eles ainda vo passear eternamente quando saem do layout e nunca mais sero 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 vo ficar dentro do layout e se o jogador ficar parado os monstros viro direto pra ele! Condio: Monster -> Is outside layout (est fora do layout) Ao: 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 tambm ficam em torno do layout e vo em todas as direes. No chega a ser uma Inteligncia Artificial - IA, mas vai servir! Agora vamos supor que queremos que o monstro morra aps atirarmos cinco vezes nele, em vez de morrer instantaneamente como est acontecendo. Como fazemos isso? Se armazenarmos apenas um contador de "Health" (vida) ento ao atingir o monstro cinco vezes todos os monstros 17

iro morrer. Dessa forma precisamos que cada monstro tenha sua prpria vida. Podemos fazer isso com instance variables (variveis de instncia).

Variveis de instncia
Variveis de instncia permitem que cada monstro guarde seu prprio valor de vida. Uma varivel simplesmente um valor que pode mudar (ou variar), e eles so armazenados separadamente para cada instncia, da o nome variveis de instncia. Vamos adicionar uma instncia 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 variveis.

O dilogo de variveis de instncia ser exibido. Ele similar ao dilogo de comportamentos que vimos anteriormente, mas permite que voc adicione ou altere as variveis de instncia para o objeto. Clique no boto verde Add para adicionar uma nova.

No dilogo que abrir digite health para o nome, deixe o campo Type (tipo) como Number (nmero) e para o campo Initial value (valor inicial) digite 5 (como demonstrado). Assim cada monstro comear com 5 de vida. Quando eles forem atingidos subtramos 1 da vida dele (da varivel health) e quando for zero vamos destruir o objeto. Uma vez que voc fez os procedimentos clique em OK. Note que a varivel agora aparece no dilogo de variveis de instncia (instance variables) e tambm aparece nas propriedades dos monstros. (Voc pode rapidamente mudar o valor inicial da varivel na barra de propriedades, mas para adicionar ou remover as variveis 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 projtil os atinge. Vamos mudar para subtrair 1 de suas vidas. Localize o evento que diz: Bullet - on collision with Monster (Bala - em coliso com Monstro). Note que ns colocamos uma ao "destroy monster" (destruir monstro). Vamos substituir isso com "subtrai 1 da vida". Clique com o boto direito na ao "destroy monster" e clique Replace (trocar).

O mesmo dilogo aparecer como se estivssemos inserindo uma nova ao, mas dessa vez ele substituir a ao que selecionamos. Escolha Monster - > Subtract from (Monstro - Subtrair de) (na categoria de Instance variables) -> varivel de instncia "health" e insira 1 para o Valor. Clique em Done (feito). A ao deve estar assim: Agora quando atiramos nos monstros eles perdem 1 de vida e a bala explode, mas ns no fizemos o evento para matar os monstros quando a vida atingir o valor 0. Adicione outro evento: Condio: Monster -> Compare instance variable (compara varivel de instncia) -> Health, Less or equal, 0 (menor ou igual a 0) Ao: Monster -> Spawn another object -> Explosion, layer 1 Ao: Monster -> Destroy

19

Por que "menor ou igual a 0" ao invs de "igual a 0"? Vamos supor que ns 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 prtica 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 no. Vamos precisar de outra varivel para isso. Voc deve pensar "vamos colocar a pontuao como uma varivel de instncia do objeto Player". Inicialmente no uma m idia, mas lembre-se que o valor armazenado "dentro" do objeto. Se no houver instncias, no haver variveis tambm! Dessa forma se destruirmos o jogador no poderemos mais dizer qual a pontuao que ele tinha porque a varivel foi destruda com o jogador. Por outro lado ns podemos usar uma global variable (varivel global). Da mesma forma que uma varivel de instncia, uma varivel global (ou apenas "global") pode armazenar textos ou nmeros. Cada varivel pode guardar um nico nmero ou um nico trecho de texto. Variveis globais tambm podem estar disponveis para todo o jogo atravs de todos os layouts conveniente se fssemos adicionar outros nveis (levels). Clique com o boto direito na parte de baixo da folha de eventos e selecione Add global variable (adicionar varivel global).

Digite Score (placar) para o nome. Os outros valores padro para os campos esto OK, ele criar a varivel como nmero (Number) comeando com valor 0.

20

Agora a varivel 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. Nota: tambm existem as variveis locais (local variables) que podem ser acessadas por uma menor quantidade de eventos, mas a gente no 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 ao) 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 no d pra ver o placar! Vamos exib-lo atravs de um objeto Text (texto).

Criando a interface de usurio - IU

(heads-up display - HUD) A interface de usurio - IU ou do ingls heads-up display - HUD a interface que mostra as informaes do jogador, como a vida, o placar e outras informaes do jogo. Vamos fazer um HUD bem simples atravs de um objeto Text (texto). O HUD sempre fica no mesmo lugar da tela. Se tivermos alguns objetos na interface, no vamos querer que eles saiam da tela conforme o jogar se move - eles devero permanecer na tela. Para mant-los na tela, ns podemos usar a configurao Parallax da camada. O Parallax permite que diferentes camadas se movam (rolem) a diferentes taxas (velocidade) produzindo um tipo de efeito semi-3D. Se ns configurarmos o parallax para zero, ento a camada no 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 difcil visualiz-lo se estiver na cor preta, ento na barra de propriedades, configure para bold (negrito), italic (itlico), yellow (amarelo) e escolha uma fonte um pouco maior. Redimensione ele com largura suficiente para caber uma quantidade razovel 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 ao Text -> Set text (estabelecer texto). Usando o operador & podemos converter um nmero para texto e un-lo com outra frase de texto. Ento, para o texto digite a seguinte expresso: "Placar: " & Score A primeira parte da expresso ("Placar: ") significa que o texto exibido comear sempre com a frase Placar: . A segunda parte da expresso o valor atual da varivel global Score. O & junta as duas partes de expresso 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 prximos de terminar. Vamos adicionar alguns toques finais. Primeiramente, vamos ter alguns monstros sendo lanados regularmente, caso contrrio uma vez que voc matar todos os monstros no restar nada. Vamos criar um novo monstro a cada 3 segundos. Adicione um novo evento: Condio: System -> Every X seconds (a cada X segundos) -> 3 Ao: 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 aleatria Y referente altura do layout. Finalmente, vamos ter fantasmas matando o jogador. Condio: Monster -> On collision with another object -> Player Ao: Player -> Destroy

22

Concluso
Parabns, 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 pgina web. Se voc no tem um servidor prprio, voc pode compartilhar seus jogos no Dropbox Voc aprendeu conceitos bsicos 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 caractersticas 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 tambm monstros que vo gradualmente aumentando de velocidade. Sabendo o que voc sabe agora, no ser difcil descobrir como isso funciona. Tambm tem vrios comentrios descrevendo como funcionam. Muito bem! Se voc teve algum problema ou acha que qualquer parte deste tutorial pode ser melhorada, deixe um comentrio ou mande uma mensagem no forum. Ns veremos o que podemos fazer! Finalmente, se voc gostou deste tutorial e saiba de algum que tambm possa gostar do Construct 2, por que no enviar pra ele um link com este tutorial? Machucar no vai :)

Leia mais
Quer adicionar msica e efeitos sonoros? Veja Sounds & Music dentro do manual para uma rpida viso 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 seo How Events Work no manual. altamente recomendvel a leitura para que voc possa comear rapidamente seus prprios projetos! E para maiores informaes, no se esquea de que tem a documentao completa no manual.

23