Construindo seu primeiro jogo parte final

Criando a interface de usuário - IU

(heads-up display - HUD)

A interface de usuário - IU ou do inglês heads-up display - HUD é a interface que mostra as informações do jogador, como a vida, o placar e outras informações do jogo. Vamos fazer um HUD bem simples através de um objeto Text (texto).

O HUD sempre fica no mesmo lugar da tela. Se tivermos alguns objetos na interface, não vamos querer que eles saiam da tela conforme o jogar se move - eles deverão permanecer na tela. Para mantê-los na tela, nós podemos usar a configuração Parallax da camada. O Parallax permite que diferentes camadas se movam (rolem) a diferentes taxas (velocidade) produzindo um tipo de efeito semi-3D. Se nós configurarmos o parallax para zero, então a camada não vai se mover - ideal para um HUD.

Volte para a barra de camadas (layers bar) que usamos previamente. Adicione uma nova camada chamada HUD. Certifique-se que ela esteja sobre as outras e selecionada (lembre-se que isso torna a layer ativa). Agora, a barra de propriedades deve estar mostrando as propriedades da camada. Configure a propriedade Parallax para 0,0 (significa configurar zero para ambos os eixos X e Y).

Duplo clique em algum lugar do layout para inserir outro objeto. Desta vez selecione o objeto Text. Coloque-o no canto superior esquerdo do layout. Será difícil visualizá-lo se estiver na cor preta, então na barra de propriedades, configure para bold (negrito), italic (itálico), yellow (amarelo) e escolha uma fonte um pouco maior. Redimensione ele com largura suficiente para caber uma quantidade razoável de texto. Deve estar mais ou menos assim:

Volte para a folha de eventos. Vamos manter o texto atualizado com o placar do jogador. No evento Every tick que adicionamos previamente, adicione a ação Text -> Set text (estabelecer texto).

Usando o operador & podemos converter um número para texto e uní-lo com outra frase de texto. Então, para o texto digite a seguinte expressão:

"Placar: " & Score

A primeira parte da expressão ("Placar: ") significa que o texto exibido começará sempre com a frase Placar: . A segunda parte da expressão é o valor atual da variável global Score. O & junta as duas partes de expressão em um único texto.

Execute o jogo e atire em alguns monstros. Seu placar é exibido e permanece no mesmo lugar da tela!

Toques finais

Estamos próximos de terminar. Vamos adicionar alguns toques finais.

Primeiramente, vamos ter alguns monstros sendo lançados regularmente, caso contrário uma vez que você matar todos os monstros não restará nada. Vamos criar um novo monstro a cada 3 segundos. Adicione um novo evento:

Condição: System -> Every X seconds (a cada X segundos) -> 3
Ação: System -> Create object (criar objeto) -> Monster, layer 1, 1400 (para X), random(1024) (para Y)

1400 é a coordenada X logo fora do limite layout ao lado direito, e random(1024) é a coordenada aleatória Y referente à altura do layout.

Finalmente, vamos ter fantasmas matando o jogador.

Condição: Monster -> On collision with another object -> Player
Ação: Player -> Destroy

Conclusão

Parabéns, você fez o seu primeiro jogo HTML5 com o Construc 2! Se você tiver um servidor de hospedagem e quiser mostrar seu trabalho, clique em Export (exportar) no menu de arquivo (File Menu). O Construct pode salvar todos os arquivos do projeto em uma pasta no seu computador, os quais você poderá fazer o upload ou integrar uma página web. Se você não tem um servidor próprio, você pode compartilhar seus jogos no Dropbox

Você aprendeu conceitos básicos e importantes sobre o Construct 2: inserir objetos, usar camadas, comportamentos, eventos dentre outros. Certamente este aprendizado deixará você bem preparado para aprender mais sobre o Construc 2! Tente explorar suas características e veja o que ele pode fazer por você.

O projeto terminado

Tente fazer o download do projeto terminado deste tutorial. Eu adicionei algumas particularidades extras como um texto de "Game over" (fim de jogo), e também monstros que vão gradualmente aumentando de velocidade. Sabendo o que você sabe agora, não será difícil descobrir como isso funciona. Também tem vários comentários descrevendo como funcionam.

Muito bem! Se você teve algum problema ou acha que qualquer parte deste tutorial pode ser melhorada, deixe um comentário ou mande uma mensagem no forum. Nós veremos o que podemos fazer!

Finalmente, se você gostou deste tutorial e saiba de alguém que também possa gostar do Construct 2, por que não enviar pra ele um link com este tutorial? Machucar não vai :)

Leia mais

Quer adicionar música e efeitos sonoros? Veja Sounds & Music dentro do manual para uma rápida visão geral.

Você pode estar interessado no nosso tutorial alternativo para iniciantes que mostra como criar jogos do tipo plataforma. Como fazer um jogo de plataforma

Se quiser saber mais sobre como os eventos funcionam no Construct 2, veja a seção How Events Work no manual. É altamente recomendável a leitura para que você possa começar rapidamente seus próprios projetos! E para maiores informações, não se esqueça de que tem a documentação completa no manual.

Nota do tradutor: Qualquer dificuldade encontrada nesta tradução, por favor reportar-se ao tradutor. Ficarei satisfeito em ajudar.
Translator's note: Any difficulty encountered in this translation, please refer to the translator. I'll be glad to help.

Criando seu primeiro jogo parte 6

Variáveis de instância

Variáveis de instância permitem que cada monstro guarde seu próprio valor de vida. Uma variável simplesmente é um valor que pode mudar (ou variar), e eles são armazenados separadamente para cada instância, daí o nome variáveis de instância.

Vamos adicionar uma instância chamada health (vida) para nosso monstro. Clique no monstro pela barra de projeto ou barra de objetos. Alternativamente, você pode voltar ao layout e selecionar o objeto Monster. Isso irá exibir as propriedades do monstro na barra de propriedades. Clique em Add/edit perto do Edit variables para editar variáveis.

O diálogo de variáveis de instância será exibido. Ele é similar ao diálogo de comportamentos que vimos anteriormente, mas permite que você adicione ou altere as varíaveis de instância para o objeto. Clique no botão verde Add para adicionar uma nova.


No diálogo que abrir digite health para o nome, deixe o campo Type (tipo) como Number (número) e para o campo Initial value (valor inicial) digite 5 (como demonstrado). Assim cada monstro começará com 5 de vida. Quando eles forem atingidos subtraímos 1 da vida dele (da variável health) e quando for zero vamos destruir o objeto.

Uma vez que você fez os procedimentos clique em OK. Note que a variável agora aparece no diálodo de variáveis de instância (instance variables) e também aparece nas propriedades dos monstros. (Você pode rapidamente mudar o valor inicial da variável na barra de propriedades mas para adicionar ou remover as variáveis você terá de clicar no link Add / Edit).

Alterando os eventos

Volte para a folha de eventos. Neste momento, estamos destruindo os monstros assim que o projétil atinge eles. Vamos mudar para subtrair 1 de suas vidas.

Localize o evento que diz: Bullet - on collision with Monster (Bala - em colisão com Monstro). Note que nós colocamos uma ação "destroy monster" (destruir monstro). Vamos substituir isso com "subtrai 1 da vida". Clique com o botão direito na ação "destroy monster" e clique Replace (trocar).

O mesmo diálogo aparecerá como se estivéssemos inserindo uma nova ação, mas dessa vez ele substituirá a ação que selecionamos. Escolha Monster - > Subtract from (Monstro - Subtrair de) (na categoria de Instance variables) -> variável de instância "health" e insira 1 para o Valor. Clique em Done (feito). A ação deve estar assim:

Agora quando atiramos nos monstros eles perdem 1 de vida e a bala explode, mas nós não fizemos o evento para matar os monstros quando a vida atingir o valor 0. Adicione outro evento:

Condição: Monster -> Compare instance variable (compara variável de instância) -> Health, Less or equal, 0 (menor ou igual a 0)
Ação: Monster -> Spawn another object -> Explosion, layer 1
Ação: Monster -> Destroy

Por que "menor ou igual a 0" ao invés de "igual a 0"? Vamos supor que nós criamos uma arma mais poderosa que subtraia 2 da vida. Quando você atirar no monstro sua vida deve decrescer 5, 3, 1,-1,-3... note que em nenhum momento sua vida seria exatamente igual a zero, e aí ele nunca vai morrer! Portanto, é uma boa prática usar "menor ou igual" para testar se a vida dele se esgotou.

Execute o jogo. Agora você tem de atingir os monstros cinco vezes para matá-los!

Guardando o placar

Vamos ter um placar para que o jogador saiba se foi bem ou não. Vamos precisar de outra variável para isso. Você deve pensar "vamos colocar a pontuação como uma variável de instância do objeto Player". Inicialmente não é uma má idéia, mas lembre-se que o valor é armazenado "dentro" do objeto. Se não houver instâncias, não haverá variáveis também! Dessa forma se destruírmos o jogador não poderemos mais dizer qual a pontuação que ele tinha porque a variável foi destruída com o jogador.

Por outro lado nós podemos usar uma global variable (variável global). Da mesma forma que uma variável de instância, uma variável global (ou apenas "global") pode armazenar textos ou números. Cada variável pode guardar um único número ou um único trecho de texto. Variáveis globais também podem estar disponíveis para todo o jogo através de todos os layouts - conveniente se fôssemos adicionar outros níveis (levels).

Clique com o botão direito na parte de baixo da folha de eventos e selecione Add global variable (adicionar variável global).

Digite Score (placar) para o nome. Os outros valores padrão para os campos estão OK, ele criará a variável como número (Number) começando com valor 0.

Agora a variável global aparece como uma linha na folha de eventos. Está dentro da folha folha de eventos, mas pode ser acessada por qualquer folha de eventos de qualquer layout.

Nota: também existem as variáveis locais (local variables) que podem ser acessadas por uma menor quantidade de eventos, mas a gente não precisa se preocupar com isso agora.

Vamos fornecer ao jogador um ponto para matar os monstros. No nosso evento "Monster: health less or equal 0" (quando um monstro morre), clique em Add action (adicionar ação) e selecione System -> Add to (somar) (dentro de Global & Local Variables) -> Score, valor 1. Agora o evento deve se parecer com isso:

Agora o jogador tem um placar que aumenta em 1 pra cada monstro que ele matar - mas ainda não dá pra ver o placar! Vamos exibí-lo através de um objeto Text (texto).

Criando seu primeiro jogo parte 5

Adicionando funcionalidades ao jogo

Se cada evento for descrito no nível de detalhes que fizemos antes, este tutorial ficaria muito extenso. Vamos fazer uma descrição um pouco mais resumida para os próximos eventos. Lembre-se dos passos para adicionar uma condição ou ação:

1. Duplo clique para inserir um novo evento, ou clique no link Add action para adicionar uma ação;
2. Duplo clique no objeto que contém a condição/ação;
3. Duplo clique na condição/ação que você deseja;
4. Insira os parâmetros, se necessários.

De agora em diante, os eventos serão descritos pelo objeto, seguido pela condição/ação, seguido pelos parâmetros. Por exemplo, o evento que acabamos de inserir poderia ser descrito da seguinte maneira:

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

Fazendo o jogador atirar

Quando o jogador clicar com o mouse, ele deverá atirar um projétil. Isto pode ser feito pela ação Spawn an object (desovar um objeto) no objeto Player, o que irá criar uma nova instância de um objeto na mesma posição e ângulo. O Bullet movement que adicionamos mais cedo fará com que ele vôe para frente.

Crie o seguinte evento:

Condição: Mouse -> On click -> Left clicked (botão esquerdo)(é o padrão)
Ação: Player -> Spawn another object -> Para o Objeto selecione Bullet. Para a Layer coloque 1 (A camada principal "Main" é a layer 1 - lembre-se que o Construct 2 faz a contagem do 0). Deixe 0 o campo Image point (ponto da imagem).

Seu evento de se parecer com isso:

Se você executar o jogo irá notar que as balas são atiradas do meio do jogador ao invés da ponta da arma. Vamos corrigir isso colocando um image point na ponta da arma. (um ponto da imagem é apenas uma posição na imagem de onde você pode lançar objetos).

Clique com o botão direito no objeto Player na barra de projeto ou na barra de objetos e selecione Edit animations (editar animações).

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

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

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

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

Execute o jogo. As balas agora são atiradas da ponta da nossa arma! Apesar disso, os projéteis ainda não fazem nada. Esperamos, no entanto, que você começe 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 um 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. Clique no objeto Explosion na Object bar (barra de objetos) (que fica no canto inferior direito) ou na Project bar (barra de projeto) (que está tabulado com a barra de camadas). Suas propriedades aparecem na Properties bar (barra de propriedades) no lado esquerdo. Na parte inferior, configure a propriedade Blend mode (modo de mistura) para Additive (aditivo). Agora teste o jogo novamente.

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

Construindo seu primeiro jogo parte 4

Eventos

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

Sobre os eventos

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

Os eventos são executados de cima para baixo, então os eventos no topo da folha de eventos são executados primeiro.

Condições, ações e sub-eventos

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

Vamos passar de novo. Resumidamente, um evento roda desse jeito:

Todas as condições foram satisfeitas?
---> Sim: executa todas as ações do evento.
---> Não: vai para o próximo evento (não incluindo nenhum sub-evento).

Isso foi uma forma de simplificar. Construct 2 fornece uma grande quantidade de recursos de eventos para cobrir muitas coisas diferentes que você pode precisar fazer. Mas por enquanto, é uma boa forma de pensar nisso.

Seu primeiro evento

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

Lembre-se que um Tick roda toda vez que a tela é desenhada, dessa forma queremos que o jogador olhe para o mouse a cada Tick e assim ele vai parecer estar de frente para o mouse o tempo todo.

Vamos começar a fazer este evento. Duplo clique em algum lugar na folha de eventos. Isso irá abrir um guia para adicionar uma condição para o novo evento.

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

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:

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 flutuanto acima dele. Por padrão ele é um pouco transparente para não te distrair.

Passe o mouse sobre ele, ou clique sobre ele, e ele vai se tornar totalmente visível. Ele serve como um tipo de dicionário com todas as expressões que você pode usar, com descrições para te ajudar a lembrar. Se você der um duplo clique em um objeto, você verá uma lista com todas suas expressões. Se você der um duplo clique em uma expressão ela será inserida para você, te poupando de ter que digitá-la.

De qualquer forma, clique em Done (concluído) no diálogo dos parâmetros. A ação foi adicionada! Como você viu anteriormente, agora deve estar assim:

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

Construindo seu primeiro jogo parte 3

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

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 a frente)
- Adicione o comportamento Fade ao objeto Explosion (após aparecer ele irá desaparecer gradualmente). Por padrão o comportamento Fade também destrói os objetos após desaparecerem, o que irá nos poupar de se preocupar com objetos de explosão invisíveis entupindo o jogo.

Se você executar o jogo você deverá notar que a única coisa diferente é que os monstros que você pode ver de repente disparam velozmente. Vamos diminuir sua velocidade para um ritmo mais calmo. Selecione o objeto Monster. Note que a partir do momento que adicionamos os comportamentos algumas propriedades extras apareceram na barra de propriedades:

Isso nos permite ajustar como os comportamentos trabalham. Mude a velocidade de 400 para 80 (essa é a velocidade de viagem em pixels por segundo).

Similarmente, altere a velocidade dos objetos Bullet para 600, e nos objetos Explosion altere a propriedade Fade out time (tempo de desaparecimento) do comportamento Fade para 0.5 (isso equivale a meio segundo).

Criando mais alguns monstros

Segurando a tecla Control, clique e arraste o objeto Monster. Você irá notar que esse procedimento irá criar outra instância. Isso é apenas outro objeto do tipo de objeto Monster.

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

Criando seu primeiro jogo parte 2

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 (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á nosssos 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 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):

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:

Criando seu primeiro jogo

Criando seu primeiro jogo "parte 1"

Parabéns por escolher o Construct 2! Vamos começar fazendo seu primeiro jogo em HTML5. Vamos fazer o demo do jogo 'Ghost Shooter'. Teste ele aqui Primeiramente para que você saiba os nossos objetivos: um jogador que olha para o mouse, se move com as setas do teclado e atira nos monstros com o mouse. Você aprenderá tudo o que precisa para fazer um jogo simples - de camadas (layers) a eventos de sistema (event system)!
Nota: por favor não peça ajuda nos comentários deste tutorial! Ao invés disso, visite nosso forum para ter as melhores respostas possíveis para os seus questionamentos.

Tutoriais alternativos

Há um guia alternativo para iniciantes: Como fazer um jogo de plataforma, com foco na construção de um jogo plataforma do tipo "corre e pula" (jump-and-run) em vez de um jogo de tiro com visão de cima (top down shooter). Você pode iniciar com qualquer um deles, mas nós recomendamos fortemente que você complete ambos para ter uma boa ideia de como construir ambos os tipos de jogos!

Também tem o Como fazer um clone do Asteroids com menos de 100 eventos do Kyatric que é um pouco mais avançado mas também é bem detalhado.

Link para o Curso do Construct2 em Português

Instalando o Construct 2

Se você ainda não tem, pegue uma cópia da última versão do Construct 2 aqui. O Construct 2 é apenas para Windows, mas os jogos que você fizer podem rodar em qualquer lugar, como em Mac, Linux ou iPad. Construct 2 também pode ser instalado em contas de usuário limitadas. Ele também é portátil, então você pode, por exemplo, instalar em um cartão de memória USB e levá-lo com você!

Iniciando

Agora que está configurado, inicie o Construct 2. Clique no botão File (arquivo) e selecione New (novo).
No diálogo New Project (novo projeto), você não precisa alterar nada. Apenas clique em Create Project (criar projeto). 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. Em outras ferramentas, isso pode ser nomeado como room (ambiente), scene (cena) ou frame (moldura).

Inserindo objetos

Plano de Fundo

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

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

Open full size image

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

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:

Open full size image

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

Fonte: Scirra