IniciandoAgora 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 objetosPlano 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 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

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

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

5

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.

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

6

- 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

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:

8

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.

Posteriormente iremos cobrir mais sobre 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 +

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.

9

EventosPrimeiramente 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

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:

10

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.

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

13

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 jogoSe 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:

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:

14

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:

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:

15

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!

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.

16

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

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ânciaVariá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.

17

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

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.

18

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 placarVamos 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

19

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.

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.

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:

20

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

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

21

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 finaisEstamos 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ãoParabé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