COMEÇANDO COM O CONSTRUCT 2
Abra o Construct 2. Clique em File, e depois em New.
Na janela New Project, você não precisa mudar nada. Apenas clique em Create project. Construct 2 manterá todo o projeto em um simples arquivo .capx para você. Agora você está olhando para uma ab vazia, chamada Layout 1. Nela é onde vamos colocar imagens e objetos. Pense no layout como um nível do jogo ou uma tela de menu. Em outras ferramentas, ele pode ser chamado de room, scene ou frame.
Inserindo Objetos
Tiled Background
A primeira coisa que queremos é um fundo para o layout. E esse fundo deve se repetir. É o que chamamos de Tiled Background. Algo como, fundo de azulejos. A reptição desejada será feita por esse tipo de objeto. Primeiro, copie a imagem abaixo e salve em algum lugar do seu computador. Vamos usá-la como fundo.
Agora, dê um clique duplo na área de layout para inserir um novo objeto (outra forma é clicar com o botão direito e selecionar Insert new object). Quando a janela Insert new object aparecer, dê um clique duplo em Tiled Background object para inserí-lo.
Uma cruz aparecerá para você indicar onde colocar o objeto. Clique em algum lugar próximo ao centro do layout. O editor de texturas abrirá, para que você coloque a sua textura. Vamos importar a imagem que salvamos antes. Clique no ícone da pasta, procure pelo arquivo de antes, e selecione-o.
Feche o editor de texturas. Importante: Sempre lembre de salvar seu projeto! Agora você pode ver o seu objeto tiled background no layout. Vamos redimensioná-lo para cobri todo o layout. Certifique-se de selecionar o objeto, depois olhe nas opções à esquerda. Essa é a Properties Bar, que inclui várias características do objeto, inclusive, tamanho (size) e posição (position). Coloque a posição para 0, 0 (o canto superior esquero), e mude o tamanho para 1280, 1024 (o tamanho do layout).
Vamos ver como ficou. Segure control e role a roda do mouse para trás para afastar o zoom. Alternativamente, você pode clicar em view - zoom out algumas vezes. Você também pode segurar o espaço, ou o botão do meio do mouse, para movimentar o layout.
Faça control+0 ou clique em view - zoom to 100% para retornar à
visão 1:1.
(Se você é impaciente, clique no ícone 'Run Layout', na parte de cima, e o navegador será aberto exibindo a sua textura de fundo!)
Adicionando uma camada (Layer)
Agora, nós queremos colocar mais objetos. Contudo, vamos acabar selecionando o tiled background acidentalmente, a menos que o travamos. Tornando-o não-selecionável. Vamos usar o sistema de camadas (layering system) para fazer isso.
Layouts podem conter várias camadas (layers), que você pode usar para agrupar objetos. Imagine as camadas como folhas transparentes, uma em cima das outras, com objetos pintados em cada uma. Desta forma você organiza facilmente os objetos que aparecem, esconde ou tranca as camadas, aplica efeitos e muito mais. Por exemplo, neste jogo, queremos que tudo seja mostrado EM CIMA do tiled background. Então, façamos outra camada (layer) em cima dele para os outros objetos.
Para mexer com as camadas (layers), click na aba Layers, que se encotra próxima a barra de Projetos (Projects Bar) no lado direito da tela:
Você deve ver a camada Layer 0 na lista (Construct 2 conta a partir do zero, uma vez que assim funciona melhor na programação). Clique no ícone do lápis e RENOMEIE para Background. Este será a nossa camada de fundo (background layer). Agora clique no ícone da cruz verde para adicionar outra camada. Vamos chamá-la de Main. Finalmente, se você clicar no pequeno cadeado ao lado de Background, ele estará travado. Isto significa que você não poderá selecionar nada que esteja nele. Fato que é muito conveniente para o tiled background, pois o selecionaríamos por acidente caso estivesse destravado. Entretanto, se você precisa fazer mudanças nele, apenas clique no pequeno cadeado e volte a mexer no tiled background.
As caixas de marcação (checkboxes), próximas ao pequeno cadeado, permitem esconder as camadas no editor, mas não precisaremos disso agora. Sua barra de camadas (layers bar) deve se parecer com isso:
Agora, certifique-se que a camada 'Main' está selecionada. Isso é importante! A camada selecionada é a que vai estar ativa. Todas as novas inserções de objetos, serão na camada ativa. Se ele não estiver selecionada, vamos colocar objetos na camada errada. A camada ativa é mostrada na barra de propriedades (Properties bar), no lado esquerdo da tela. Basta ver o campo Active Layer e ver se o nome que aparece ao lado é da camada correta.
Adicionando objetos de entrada
Volte a sua atenção para o layout. Dê um clique duplo para inserir um novo objeto. Desta vez, selecione Mouse object, pois vamos precisar de uma entrada de mouse. Faça o mesmo para Keyboard object.
Nota: estes objetos não precisam ser colocados no layout. Eles ficam escondidos, e funcionam automaticamente. Agora todos os layouts em seu projeto aceitam entradas de mouse e teclado.
Os objetos do jogo
É hora de colocar os objetos do jogo! Aqui temos algumas texturas. Salve-as no seu PC.
Player:
Monster:
Bullet:
e Explosion:
Para cada um deles, vamos utilizar um sprite object. Ele simplesmente exibe uma textura, que você pode mover, rotacionar e redimensionar. Os jogos são compostos, geralmente, por vários sprite objects. Vamos inserir cada um dos quatro objetos acima como sprite objects. O processo é parecido com o do Tiled Background:
1. Clique duplo para inserir um novo objeto.
2. Clique duplo em 'Sprite'.
3. Quando o mouse virar uma cruz, clique em algum lugar do layout. Junto com ela, uma mensagem aparecerá mostrando o nome da camda ativa. No nosso caso, estará a 'Main'.
4. O editor de texturas aparece. Clique no icone abrir (o da pasta), e carregue uma das texturas.
5. Feche o editor, salve suas mudanças. Você deve estar vendo o objeto no layout!
Nota: outra forma de inserir sprite objects é clicar, segurar e arrastar o arquivo da imagem da pasta onde está, para dentro do layout. Construct 2 criará um Sprite com esta imagem para você.
Adicione as demais texturas. Mova a bullet e explosion sprites para algum lugar fora da área do layout. Não queremos vê-los quando o jogo começar.
Eles estarão com os nome de Sprite, Sprite2, Sprite3 and Sprite4. Não fica muito funcioal desta maneira. Mude-os para Player, Monster, Bullet e Explosion. Você pode fazer isso, selecionando o objeto e e mudando a propriedade Name na barra de propriedades (Properties bar):
Adicionando comportamentos (Behaviors)
Comportamentos (behaviors) já estão, funcionalmente, pré-definidos no Construct 2. Por exemplo, você pode adicionar um Platform behavior à qualquer objeto, e o Solid behavior para o chão, e você pode, instaneamente sai pulando como em um jogo de plataforma. Você pode fazer o mesmo nos eventos, mas isso leva mais tempo, e não é necessário caso o comportamento esteja bom o suficiente! Então vamos dar uma olhada nos comportamentos que podemos usar. Entre outros, Construct 2 possui os seguintes;
- 8 Direction movement (movimento de 8 direção): Permite movimentar o objetos através das setas do teclado. É perfeito para os movimentos do jogador.
- Bullet movement (movimento de bala): Simplesmente move um objeto para frente, seguinte seu ângulo atual. Funciona muito bem com as balas da arma do jogador. Apesar do nome, também funciona muito bem para mover os montros pelo cenário. Uma vez que, tudo que este movimento faz é mover um objeto para frente com certa velocidade.
- Scroll to (Deslocar para): Faz a tela seguir um objeto enquanto ele se move (também chamado de scrolling). É muito usado no jogador.
- Bound to layout (Limite para o Layout): Para qualquer objeto que tente deixr a área do layout. Também é usado no jogador. Ele não poder sair da área de jogo!
- Destroy outside layout (Destruir o que está fora do layout): Em vez de parar o objeto que deixa a área do layout, ele o destrói. É bom para as nossas balas. Sem isso, elas voaram pela através da tela para sempre, tomando muita memória e processamento. Logo, nós devemos destruir as balas quando elas saem do layout.
- Fade (Sumir): Faz um objeto sumir gradativamente. Usaremos nas explosões.
Vamos adicionar estes comportamentos nos objetos que precisam deles.
Como adicionar um comportamento
Vamos colocar o 8 direction movement no jogador. Clique nele para selecioná-lo. Na properties bar, veja a categoria Behaviors. Clique em Add / Edit. A janela de comportamentos para o jogador irá abrir.
Clique na cruz verde 'add behavior'. Dê um clique dulpo em 8 direction movement para adicioná-lo.
Faça o mesmo com Scroll To, para fazer a tela seguir o jogador, e também com o Bound to layout, para mantê-lo dentro da área do layout. A janela de comportamentos deve estar assim:
Feche a janela. Clique Run para testar o jogo!
Você precisa ter um navegador que suporte HTML5 instaldado. Se não, tenha a últiam versão do Firefo, Chrome ou Internet Explorer 9. Com o jogo aberto, você pode mover o jogador com as setas do teclado e a tela o segue! Você não pode deixar a área do jogo, graças ao Bound to Layout. O monstro não faz ainda, mas não se preocupe. Já vamos mexer nele. Então, é para isso que os comportamentos servem: adições rápidas de fuincionalidade. Você se pergunta: ‘posso fazers os MEUS comportamentos?’. Sim, pode. Mas, isso vamos ver mais para frente no sistema de eventos.
Adicionando mais comportamentos
Vamos adicionar comportamentos aos objetos que faltam. O processo de adição é o mesmo:
Clique no objeto, vá na Properties Bar, na categoria Behaviors, e clique em Add/Edit
- Coloque o Bullet movement e o Destroy outside layout no objeto Bullet
- Coloque o Bullet movement no objeto Monster (porque ele apenas se moverá para frente)
- Coloque o Fade no objeto Explosion (para desaparecer gradativamente). Por padrão, o Fade também destrói o objeto após ele sumir por completo, fato que nos tira o trabalho de nos preocupar com estes objetos.
Se você rodar o jogo, você notará que a única coisa diferente é o monstro se movimentar sozinho. Vamos colocá-lo um pouco mais devagar. Selecione o objeto Monster. Obeserve que, como você adicionou um comportamento, algumas opções extras apareceram na Properties Bar:
Isto nos permite ajustar o seu funcionamento. Mude a velocidade (Speed) de 400 para 80 (isso corresponde à pixels por segundo).
Da mesma forma, mude a velocidade do objeto Bullet para 600, e o Fade out time do objeto Explosion para 0.5 (isto é meio segundo).
Criando alguns monstros
Segure control, clique e arraste o objeto Monster. Você nota´ra que será criada outro instância do objeto Monster.
Tipos de obejto são, essencialmente, 'classes' de objetos. No sistema de eventos, você lidará com eles por várias vezes. Por exemplo, você quer criar um evento que diz:
"Bullet colide com Monster"
Isso, realmente, significa que, "QUALQUER instância do objeto do tipo Bullet colide com QUALQUER instância do objeto do tipo Monster”.
Isso tira o trabalho de ter que se fazer um evento separado para cada monstro. Com os Sprites, todas as instâncias de um tipo de objeto também compartilham a mesma textura. Isto é ótimo para a eficiência! Quando jogadores jogam se jogo online, ao invés de baixarem 8 textures para cada um dos monstros, eles só precisam baixar UMA textura e o Construct 2 a repete 8 vezes. Vamos falar sobre tipos de objeto e instâncias mais a frente. Por enquanto, um bom exemplo para se pensar sobre isso é imaginar diferentes tipos de inimigos. Cada um deles é um tipo de objeto. A quantidade de cada um desses tipos, são as instâncias destes objetos.
Usando control + arrastar, crie 7 ou 8 novos mostros. Não coloque nenhum muito próxim ao jogador, ou ele morrerá rapidamente! Você pode afastar o zoom usando control + roda do mouse wheel para trás, se desejar, para ajudá-lo a colocar os mosntros por todo o layout. Você deve terminar com algo mais ou menos assim.
Agora é hora de adicionar NOSSA funcionalidade através do Método Visual de Programação do Construct 2 (Construct 2's visual method of programming) – o sistema de eventos (event system).
Eventos
Primeiro, clique na aba Event sheet 1 na parte de cima para abrir o Event sheet editor. Uma lista de eventos é cahamado de Event sheet, e você pode ter vários event sheets para diferentes partes do seu jogo, ou para organização. Event sheets também podem conter outros envets sheets, permitindo reusar eventos em múltiplos níveis por exemplo, mas não precisamos disto agora.
Sobre eventos
Como o texto no empty sheet vazio indica, o Construct 2 roda tudo que está nele. Sendo que é um evento a cada ‘tick’. A maioria dos monitores atualiza sua tela 60 vezes por segundo, então o Construct 2 tentará se ajustar à isso para uma exibição mais suave. Isto signifca a folha de eventos (event sheet) é normalmente executada 60 vezes por segundo, cada tempo é seguido pelo redesenhamento da tela. Isto é um tick – uma unidade de "rodar os eventos e depois desenhar a tela”.
Eventos rodam de cima para baixo, então aquels que estão no topo da event sheet rodam primeiro.
Condições, ações e sub-eventos
Eventos consistem de condições, que testam se certos critérios. Por exemplo, "A barra de espaço está pressionada?". Se está, as ações do evento resultarão em "Crir um objeto bullet". Depois das ações serem executadas, qualquer sub-eventos também rodarão – eles podem testar mais condições, executar mais ações, entrar em mais sub-eventos, e assim por dainte. Usando este sistema, podemos construir funcionalidades sofisticadas para nossos games e aplicativos. Embora, não precisemos de sub-eventos neste tutorial.
Resumidamente, um evento básico funciona da seguinte maneira:
As condições são cumpridas?
---> Sim: executa todas as açõs do evento.
---> Não: vá para o próximo evento (não inclui qualquer sub-evento).
Essa é a forma mais simplificada de se ver os eventos. Só que o Construct 2 fornece vários recursos de eventos para cobrir diferentes coisas que você querira fazer. Porém, por enquanto, esta´é uma boa forma de pensar sobre isso.
Seu primeiro evento
Queremos fazer que o jogador sempre olha na direção do mouse. Quando estiver pronto, você vai ter algo assim:
Lembre-se, um tick é executado toda vez que a tela é desenhada, então se fazemos o jogador olhar o mouse a cada tick, ele sempre aparecerá olhando o mouse.
Vamos fazer este evento. Clique duplo em qualquer espaço da event sheet. Isto nos deixará prontos para colocar uma condição para o novo evento.
Diferentes objetos possuem diferentes condições e ações que dependem do que eles podem fazer. Há também o System object, que representa a funcionalidade built-in do Construct 2. Clique duplo no System object e a janela com uma lista de todas as condições do System object aparecerá:
Clique duplo no Every tick para inserí-lo. A janela fecha e o evento está criado, só que sem ações. Você deve ter algo assim:
Agora, queremos colocar uma ação para fazer o jogador olhar o mouse. Clique em Add action, à direita do evento. Uma nova janela surgirá:
Assim como adicionamos um evento, nós timos uma lista com os objetos para escolher, mas desta vez vamos adicionar uma ação. Não se confuda com adicionar condições e adicionar ações! Clique duas vezes no objeto Player, nós queremos que ele olhe para o mouse. A lista com as ações disponíveis no objeto Player aparecem:
Perceba que como o 8-direction movement possuem suas próprias ações, nós não precisamos nos preocupar com ele aqui.
Em vez de ajustar o ângulo do jogador, é conveniente usar a ação Set angle towards position. Ela calcula automaticamente o ânulgo do jogador para as coordenadas X e Y informadas, e ajuda o ângulo do objeto para elas. Dê um clique duplo em Set angle towards position.
O Construct 2 lhe pede as coordenadas para onde irá apontar o jogador:
Também são chamadas de parâmetros da ação. Condições também podem tê-los, mas Every tick não precisa de nenhum.
Nós queremos ajustar de acordo com o mouse. O Mouse object, que colocamos antes, fornce isso. Digite Mouse.X no campo X, e Mouse.Y no Y. Elas são chamadas de expressões. São como somas que são calculadas. Por exemplo, você poderia colocar Mouse.X + 100 ou sin(Mouse.Y) (só para avisar que estes exemplos não são muito úteis!). Desta forma você pode usar qualquer dado de qualquer objeto, ou qualquer cálcuco, para trabalhar parâmetros em ações e condições. É um recurso muito poderoso, e uma fonte secreta da flexibilidade do Construct 2.
Se você recebeu o erro "Mouse is not an object name"? Certifique-se de ter adicionado o Mouse object! Volte a parte "Adicionando objetos de entrada".
Você pode estar se perguntando, ‘como vou lembrar das espressões que digitei?”. Felizmente, temos o "object panel" (painel de objeto) que você deve vê-lo flutuando acima da janela onde você coloca as coordenadas X e Y. Por padrão, ele está escondido para não distraí-lo.
Passe o mouse sobre ele, ou clique, e se tornará visível. Ele funciona como um pequeno dicionário com todas as expressões que você pode usar, com descrições, para ajudá-lo a dr lembrar. Se você der um duplo-clique em um objeto, você verá todas as expressões dele listadas. Se der um dpulo-clique em uma expressão, ela será inserida para você, fazendo com que não seja preciso digitá-la.
De qualquer forma, clique em Done na caixa de parâmetros. A ação está adicionada! Como você viu antes, está assim:
Este é o nosso primeiro evento! Rode o jogo, e veja que o jogador sempre estará olhando para o mouse, enquanto você anda pelo cenário. Esta é a nossa primeira funcionalidade customizada.
Adicionando funcionalidade de jogo
Se cada evento for bem detalhado como antes, esse tutorial ficará enorme. Vamos ser um pouco mais breves, com os próximos eventos. Lembre-se, os passos para adicionar uma condição ou ação são:
1. Duplo-clique para inserir um novo evento (dentro da event sheet), ou clicar em Add action.
2. Duplo-clique no objeto que vai colocar a condição/ação.
3. Duplo-clique na condição/ação que você que.
4. Entre com os parâmetros, se eles forem necessários.
De agora em diante, enventos serão descritos como o objeto, seguidos por suas condições/ações, seguidas por seus parâmetros. Por exemplo, o evento que colocamos está descrito como:
“Add Condition”, System -> Every tick
“Add action”, Player -> Set angle towards position -> X: Mouse.X, Y: Mouse.Y
Colocando o jogador para atirar
Quando o jogardor clica, ele deve atirar. Isto pode ser feito com a ação Spawn an object no Player, que cria uma nova instância de um objeto na mesma posição e mesmo ângulo. O Bullet movement, que adicionamos antes, o fará se mover para frente. Faça o seguinte evento:
Clique em Add Condition: Mouse -> On click -> Left clicked (padrão)
Clique em Add Action: Player -> Spawn another object -> Para Object, escolha Bullet. Para Layer, coloque 1 (o número da camada "Main"). Deixe Image point como 0.
Você deve ter algo como:
Se você rodar o jogo, você perceberá que as balas saem do meio do jogador, ao invés da ponta da arma. Vamos consertar isso colocando um image point na ponta da arma (um image point é a posição de onde os objetos criados surgirão).
Botão-direito no player na barra projeto (project bar) ou na barra de objeto (object bar) e selecione Edit animations.
O editor de imagem para ele aparece. Clique na ferramenta Set origin and image points.
A janela image points aparece:
Percebe que o objeto origin aparece como um ponto vermelho. Este é o "hotspot" ou "pivot point" do objeto. Se você rotacioná-lo, ele gira ao redor do origin. Nós queremos adicionar outro image point para reprensentar a arma, então clique na cruz verde para adicionar. Um ponto azul aparece – é o nosso novo image point. Clique com o botão esquerdo no fim da arma, para colocar o image point lá:
Feche o image editor. Clique-duplo na ação Spawn an object que colocamos antes, e mude o Image point para 1. (O origin é sempre o primeiro image point e o Construct 2 conta a partir do zero.) Você terá o seguinte:
Execute o jogo. As balas agora saem do local correto! Só que elas não fazem nada ainda. Espero que, conforme você se familiariza com o sistema de eventos, você possa colocar outras funcionalidades rapidamente.
Vamos fazer as balas matarem os monstros. Adicione o seguinte evento:
Add condition: Bullet -> On collision with another object -> em Object, escolha Monster.
Add action: Monster -> Destroy
Add action: Bullet -> Spawn another object -> Explosion, em layer, coloque 1
Add action: Bullet -> Destroy
O efeito de explosão
Execute o jogo e atire em um mosntro. Oops, a explosão tem um grande borda preta!
Você deve ter previsto que isso aconteceria desde o início, e deve ter ficado preocupado se no jogo, terminaria assim! Não se preocupe, não vai. Clique no objeto Explosio na Object bar, embaixo à direta, ou na Project bar (dentro da aba Objects types). Suas propriedades aparecerão na properties bar na esquerda. Na parte debaixo, ajusta a propriedade Effect para Additive. Agora, teste o jogo de novo.
Agora, ficou bom! Sem entrar em detalhes, as imagens comuns são colocadas por cima de outras. Com o efeito additive, cada pixel é adicionando junto com o pixel da imagem de fundo. Como o preto é um pixel de valor zero, entaõ nada é adicionado e vcê não vê mais a borda preta. Cores mais clara aparecem com mais força. Isso é perfeito para efeitos de luz e explosão.
Fazendo os monstros um pouco mais inteligentes
Do jeito que está, os monstros andam de um lado até o outro e nada mais. Vamos deixar isso um pouco mais interessante. Primeiro de tudo, vamos fazer os monstros inciarem com um ângulo diferente.
Add condition: System -> On start of Layout
Add action: Monster -> Set angle -> random(360)
Desta forma, eles ainda continuarão a navegar para fora do layout. Vamos mantê-los dentro dele. O que faremos é dizer um ponto para ele voltarem quando saírem do layout. Isso faz duas coisas: eles sempre estão dentro do layout, e enquanto o jogador estiver vivo, os monstros virão atrás deles!
Add condition: Monster -> Is outside layout
Add action: Monster -> Set angle toward position -> Para X, digite Player.X - para Y, digite Player.Y.
Execute o jogo. Se você esperar um pouco, verá que os montros estão andando ao redor do layout, e estão indo em todas as direções. É uma IA bruta, mas funciona!
Agora, suponha que devemos atirar 5 vezes em um montro até ele morrer, ao invés de ser um tiro só como está agora. Como fazer isso? Se colocarmos só um contador de sáude , então quando acertamos um monstro 5 vezes, todos os outros irão morrer. Logicamente, precisamo que cada monstro relembre sua própria saúde. Podemos fazer isso com as variáveis de intância.
Variáveis de Instância
Elas permitem que acada monstro guarde seu valor de saúde. Uma variável é um simples valor que pode ser mudado (ou variar), e ele é guardado separadamente em cada instância, daí o nome variável de instância.
Vamos adicionar uma variável de instância, chamada health, ao nosso monstro. Clique no monstro na project bar ou object bar. Alternativamente, você pode selecionar um objeto monster no layout. Isso mostrará as propriedades do monster na properties bar. Clique em Add/edit em Edit variables.
Uma janela aparecerá. Ela é bem parecida com a de Behaviors que vimos antes, mas aqui você colocará e mudará variáveis de instância. Clique na cruz verde Add para colocar uma nova.
Na janela que abrir, digite health para o nome, deixe o Type como Number, e para Initial value entre com 5 (como na foto acima). Isso inicia cada monstro com 5 de saúde. Quando um tiro o acertar, a sua saúde será diminuída de 1, e quando chegar a 0, ele é destruído.
Clique em OK. Percebe que a variável aparece na janela instance variables e, também, nas propriedades do monstro. (Você pode mudar, de forma rápida, o seu valor inicial, através da properties bar, mas para adicionar ou remover variáveis, você precia clicar em Add / Edit .)
Mudando os eventos
Volte para o event sheet. Do jeito que está, nós estamos destruindo os monstroscom um tiro. Vamos mudar isso, para que cada bala tire 1 de sua saúde.
Ache o seguinte evento: Bullet - on collision with Monster. Perceba que temos um ícone "destroy monster". Vamos substituí-lo com um "subtract 1 from health". Botão direito na ação "destroy monster" e clique em Replace.
A mesma janela para se inserir uma nova ação aparece, mas desta vez vamos substituir uma ação que já colocamos.
Escolha Monster -> na categoria Instance variables, escolha Subtract from -> em Instance variable, escolha "health", e digite 1 para Value. Clique em Done. A ação aparecerá como:
Agora quando acertamos um monstro, ele perde 1 de saúde e a bala explode. Só que não fizemos uma evento para que quando a saúde do monstro chegar a 0, ele seja destruído. Adicione outro evento:
Add condition: Monster -> Compare instance variable -> Health, Less or equal, 0
Add action: Monster -> Spawn another object -> Explosion, layer 1
Add action: Monster -> Destroy
Por quê "less or equal 0" (menor ou igual a 0) ao invés de "equals 0" (igual à 0)? Suponha que coloquem uma arma mais forte que tire 2 de health. Quando atirar em um mosntro, sua saúde se comportará assim 5, 3, 1, -1, -3... note que em nenhum ponto a saúde fica IGUAL a 0. Desta forma, ele nunca morrerá! Assim, ´e uma boa prática usar "less or equal" para testar se a saúde já acabou.
Execute o jogo. Você terá que acertar 5 vezes para matar um monstro!
Mantendo a pontuação
Vamos colocar um placar, para o jogar saber como ele foi. Precisaremos de outrs variável para isso. Você deve pensar "vamos colocar o placar como uma variável do jogador!". Até que não é má idéia, mas lembre-se, desta forma o valor fica armazenado DENTRO do objeto. Se não temos instâncias, não temos variáveis também! Se o jogador for destruído, não podermos dizer qual foi o placar, porque ele foi destruído junto.
Ao invés disso, vamos utilizar uma variável global. Como uma variável de instância, uma global pode guadar um texto ou número. Entretanto, nela só existe um valor que está disponível para todo o jogo, através de todos os layouts – algo conveniente se formos adicionar outros níveis.
Botão direito no espaço na parte debaixo do event sheet, e selecione Add global variable.
Digite Score como nome. Os outros campos, por padrão, estão OK. Isto nos dará um número começando de 0.
Agora a variável globo aparece na event sheet 1, mas pode ser acessada por qualquer outra event sheet que seja criada.
Nota: também existem variáveis locais que só podem ser acessadas por uma pequena quantidade de eventos, mas não precisamos nos preocupar com isso agora.
Vamos dar ao jogador 1 ponto por matar um montro. Em nosso evento "Monster: health less or equal 0" (quando um monstro morre), clique em Add action, e selecione System -> em Global & local variables, clique em Add to -> Score, value 1. O evento ficará assim:
Agora o jogador tem um placar, que aumenta em 1 a cada monstro que mata – mas ele não pode vê-lo! Vamos mostrá-lo como um objeto de texto.
Criando um heads-up display (HUD)
Um heads-up display (HUD) é a interface que mostra a saúde do jogador, sua pontuação e outras informações do jogo. Vamos fazer um simples HUD que informe um texto.
O HUD sempre ficará no mesmo lugar da tela. Se tivermos vários objetos de interface, não queremos que eles mudem de lugar conforme o jogador se movimenta pela tela – eles devem ficar fixos. Por padrão, as camadas (layers) se deslocam. Para mantê-las na tela, podemos usar a configurção de camada, Parallax. Ela permite que diferentes camadas se movimentem para se criar um efeito semi-3D. Se ajustarmos o parallax para zero, as camas não se mexerão –o que é ideal para um HUD.
Volte para a barra de camadas usada antes. Adicione uma nova, chamada HUD. Certigfique-se que ela está no topo da lista e selecione-a. A Properties bar mostra agora, as suas propriedades. Ajuste o Parallax para 0, 0 (0 para as duas coordenadas, X e Y).
Duplo-clique no layout para colocar um novo objeto. Desta vez selecione Text. Quando o mouse trocar para uma cruz, clique no canto superior esquerdo do layout. O texto será difícil de ver, se estiver preto. Então, na properties bar, com o objeto text selecionado, clique na propriedade FONT e escolha a letra que quer, defina seu tamanho e coloque em negrito ou itálico. Na opção COLOR, mude sua cor para uma mais clara para contrastar com o fundo. Redimensione o tamanho da áreado objeto de texto para que o que for exibido fica de forma adequada. Segue um exemplo abaixo:
Volte para o event sheet. Vamos deixar o texto atualizado com o placar do jogador. No evento Every tick, que colocamos antes, adicione a ação Text -> Set text.
Usando o operador &, podemos converter um número em uma string (cadeia de caracteres) e colocá-lo na caixa de texto. Na janela que aparece, digite:
"Score: " & Score
A primeira parte ("Score: ") é a frase que será exibida (Score: ) A outra (&Score) é o valro atual da variável globol Score. O & junta as udas em uma só.
Execute o jogo e atire nos monstros. Seu placar será mostrado e estará no mesmo lugar na tela!
Toques finais
Estamos quase acabando. Vamos adicionar alguns toques finais.
Primeiro, vamos ter monstros surgindo regullarmente, senão você matará todos os monstros e ficará sem nada para fazer. Vamos ajustar para que crie um monstro a cada 3 minutos. Adicione um novo evento:
Add condition: System -> Every X seconds -> 3
Add action: System -> Create object -> clique no primeiro botão e selecione Monster, no layer digite 1; para X coloque 1400, e para Y coloque random(1024).
1400 é uma coordenada de X posicionada à direta, fora do layout. random(1024) é uma coordenada de Y gerada aleatóriamente, com o valor máximo igual à altura do layout.
Finalmente, falta o monstro matar o jogador.
Add condition: Monster -> On collision with another object -> Player
Add action: Player -> Destroy
Conclusão
Parabéns, você fez o seu primeiro jogo em HTML5 no Construct 2! Se você tem um servidor e quer exibir seu trabalho, clique em Export no Menu File. Construct pode salvar todo o seu projeto em uma pasta do seu pc, que você pode fazer upload ou integrar com um site. Se você não possui um seridor, você pode você pode compartilhar seus jogos no Dropbox.
Você aprendeu noções básicas importantes do Construct2: inserindo objetos, usando camadas, comportamentos, eventos e mais. Esperamos que isto te deixe preparado para aprender mais do Construct 2! Tente explorar seus recursos e ver o que pode conseguir com eles.
Uma última coisa
Baixe a versão final do tutorial project. Ela possui recursos adicionais como a tela de "Game over" e monstros que ficam mais rápidos gradativamente. Com o que você sabe agora, não deve ser difícil entender o funcionamento de outras coisas. Lá existem vários comentários de como funcionam.
Então, é isso! Se você teve algum problema ou se acha que alguma parte deste tutorial pode ser melhorada, nos deixe uma mensagem no forum. Veremos o que podemos fazer!
Por fim, se você gostou deste tutorial econhece alguém que também irá gostar do Construct 2, por quê não mandar o link daqui? Com certeza, não dói :)
Leitura completmentar
Quer adicionar música e efeitos sonoros? Veja Sounds & Music para uma visão geral.
Se que saber mais sobre como os eventos funcionam no Construct 2, veja a seção How Events Work no manual. É altamente recomendado para que você desenvolva os seus projetos!
Desculpem qualquer erro de digitação ou concordância. :)
Espero ter ajudado.
Glauber Holanda
glauberholanda10dwe@gmail.com