• Apostila Construct 2

Traduzida para Português do Brasil

Conteúdo extra para Vídeo Aula
Curso de criação de Jogos em HTML5 – Engine Construct 2 / TV Guarapa

01
Fonte: http://www.scirra.com/tutorials/37/beginners-guide-to-construct-2/page-1

cursos.guarapa.com.br
 Guia introdutório para Construct 2
Vamos começar a fazer o seu jogo HTML5 primeiro. Nós estaremos fazendo o jogo
"Shooter Ghost 'demo. O jogo funciona da seguinte forma: um jogador que olha para o
mouse, move-se com as setas e dispara com o mouse contra monstros. Você vai aprender
tudo o que você precisa saber para fazer um jogo simples - a partir de camadas para o
sistema de eventos!

Requisitos:
• Nós estaremos utilizando uma Game Engine gratuita Construct 2.
• Sistema operacional: Windows XP, Vista & 7.
• Linux: Ainda não testamos. mas é possível executá-lo através do WINE. (Quem
testou e obteve bons resultados pode estar compartilhando conosco nos
comentários)
Navegador:
E necessário ter um navegador que esteja em constante desenvolvimento e que
tenha suporte para HTML5, estaremos apresentando os 4 principais
navegadores:

Firefox Internet Explorer Google Chrome Opera

O que é uma Game Engine?

É um Motor de Jogo, também conhecido pelo termo em
inglês, game engine, ou simplesmente engine, é um programa de
computador e/ou conjunto de bibliotecas, para simplificar e abstrair o
desenvolvimento de jogos eletrônicos ou outras aplicações com
gráficos em tempo real, para videogames e/ou computadores rodando sistemas
A funcionalidade tipicamente fornecida por
operacionais.
um motor de jogo inclui: um motor gráfico para renderizar gráficos 2D
e/ou 3D, um motor de física para simular a física ou simplesmente para fazer detecção de
colisão,suporte a animação, sons, inteligência artificial ,
networking, gerência de memória, gerência de arquivos, gerência de linha de execução,
suporte a grafos de cena e entidades e, suporte a uma linguagem de script.
Instalando Construct 2
Se você não tiver, pegue uma cópia da última versão do Construct 2. O editor 2 Construct
é apenas para Windows, mas os jogos que você fizer pode funcionar em qualquer lugar,
como Mac, Linux ou iPad. Construir 2 também pode ser instalado em contas de usuário
limitadas. Também é portátil, assim você pode instalar em um USB memory stick, por
exemplo, e levá-la com você!

Como instalar?

Baixe o arquivo de instalação e inicia a instalação

Siga os passos durante a instalação

Comece a fazer jogos!

Imagens que serão utilizadas na criação do seu jogo
em HTML5, essas imagens foram criadas pelo site Construct 2 onde no tutorial
básico ele indica elas para utilizarem na sua primeira criação.

* Você deve salvar todas essas imagens no seu computador pois utilizaremos ela na nossa
vídeo aula, para isso é só clicar o botão direito do mouse na imagem e clicar em (Salvar
imagem como)

Introdução
* Entendendo o documento, todo o nome de um arquivo que estiver em negrito quer dizer
que ele é um menu, opção que existe no programa e tem que clicar nele.
Agora você está pronto para cima, lançar Construct 2. Clique no Menu - File e
selecione New.
O botão de menu File 'New'.

Na caixa de diálogo New Project, você não precisa mudar nada. clicando em Store
Project in single file e depois clique em Create project(Criar projeto) Construir 2 vai
manter todo o projeto em um arquivo único capx(formato de arquivo de edição do
Construct 2).

Use a project folder (Use uma pasta de projeto ) Apenas a tradução da opção de baixo.

Para nós. Agora você deve estar olhando para um layout vazio - o modo de design onde
você pode criar e posicionar objetos. Pense em um layout como um nível de jogo ou tela
de menu. Em outras ferramentas, isso poderia ter sido chamado de sala de cena ou o
quadro.
Inserting objects(A introdução de objectos )
Tiled Background(fundo de azulejos)
A primeira coisa que queremos é um azulejo(tiled) de fundo repetitiva. O objeto de fundo
Tiled pode fazer isso por nós. Primeiro, aqui está sua textura de fundo - clique direito e
salve-o em seu computador em algum lugar:

É importante você esta criando uma pasta para organizar melhor seu projeto.

Agora, dê um duplo clique em um espaço no layout para inserir um novo objeto. (Mais
tarde, se ele está cheio, você também pode botão direito do mouse e selecione Inserir novo
objeto.) Uma vez que a caixa de diálogo Inserir novo objeto aparece, clique duas vezes o
objeto de fundo lado a lado para inseri-lo.
A mira irá aparecer para você indicar onde colocar o objeto. Clique em algum lugar perto
do meio do layout. O editor de textura agora se abre, para que você digite a textura de
azulejo. Vamos importar a imagem tiled que você salvou anteriormente. Clique no ícone
da pasta para carregar uma textura do seu computador, procure a pasta onde você baixou a
imagem de fundo e selecione-o.

Feche o editor de textura clicando no X no canto superior direito. Se você for solicitado,
certifique-se salvar! Agora você deve ver seu objeto de fundo lado a lado no layout.
Vamos redimensioná-la para cobrir todo o layout. Certifique-se que está selecionado,
então o Properties Bar à esquerda deve mostrar todas as definições para o objeto,
incluindo o seu tamanho e posição. Definir a sua posição( position ) de 0, 0 (na parte
superior esquerda da disposição), eo seu tamanho(size) de 1280, 1024 (o tamanho do
esquema).

Vamos examinar o nosso trabalho.Pressione Control(crt) do teclado Rotacione o

Scroll(rodana) do mouse para reduzir o Zoom. Seu fundo de azulejos devem cobrir todo o
layout agora:
(Se você está impaciente como eu, clique no ícone 'run' pouco na barra de título da janela
- um navegador deve aparecer mostrando seu layout lado a lado Woo!)

Adding a layer(Adicionando uma camada)

Ok, agora nós queremos adicionar mais alguns objetos . No entanto,
vamos manter acidentalmente selecionando o fundo de azulejos, a menos que bloqueá-lo,
tornando-selecionável. Vamos usar o sistema de camadas(layes) para fazer isso.

Layouts podem consistir de múltiplas camadas(layer), que você pode usar para agrupar
objetos. Imagine-camadas como folhas de vidro empilhadas em cima uns dos outros, com
Ele permite que você facilmente
objetos pintados em cada folha.
organizar os objetos que aparecem em cima dos
outros, e as camadas pode ser escondido, trancado, ter efeitos de paralaxe aplicado, e
muito mais. Por exemplo, neste jogo, queremos tudo para exibir acima do fundo de
azulejos(tiled), para que possamos fazer uma outra camada em cima de nossos outros
objetos.

Para gerenciar as camadas, clique na Layers(camadas) guia(tab), que normalmente fica

ao lado do bar do projeto (fica no no lado direito da tela)
Você deverá ver Camada(layer) 0 na lista (2 contagens Construct a partir de zero, uma vez
que funciona melhor assim na programação). Clique no ícone do lápis e renomeá-lo para
segundo plano(Background), já que é a nossa camada de fundo. Agora clique no ícone
'add' para adicionar uma nova camada(layer) para os nossos outros objetos. Vamos
chamar isso de um principal(main). Finalmente, se você clicar no ícone de cadeado
pequeno ao lado de fundo, será bloqueado. Isso significa que você não será capaz de
selecionar qualquer coisa sobre ele. Isso é bastante conveniente para o nosso fundo de
azulejos, que é fácil de selecionar acidentalmente e não precisa ser tocado novamente. No
entanto, se você precisar fazer alterações, você pode simplesmente clicar no cadeado
novamente para desbloquear.

As caixas de seleção(checkboxes) também permitem ocultar camadas(layers) no editor,

mas nós não precisamos disso agora. Sua barra de camadas(layers) deve agora olhar como
este:
Agora, verifique se a camada "principal"(main) é selecionado na barra de
camadas(layers). Isso é importante - a camada selecionada é a camada ativa. Todos os
novos objetos inseridos estão inseridos na camada ativa, assim, se não estiver selecionada,
estaremos inserindo acidentalmente para a camada de errado. A camada ativa é mostrado
na barra de status, e também aparece em uma dica quando colocar um novo objeto - vale a
pena manter um olho.

Adicione os objetos de entrada (Add the input objects)

Vire a sua atenção de volta para o layout. Dê um duplo clique para inserir outro novo
objeto. Desta vez, selecione o objeto Mouse, pois vamos precisar de entrada do mouse.
Faça o mesmo novamente para o objeto do teclado(keyboard).

Nota: estes objetos não precisam colocar em um layout. Eles estão escondidos e,
automaticamente, projeto de trabalho como um todo. Agora, todos as (camadas)layouts
em nosso projeto pode aceitar mouse e teclado.

Imagens que serão utilizadas na criação do seu jogo

em HTML5, essas imagens foram criadas pelo site Construct 2 onde no tutorial
básico ele indica elas para utilizarem na sua primeira criação.

* Você deve salvar todas essas imagens no seu computador pois utilizaremos ela na nossa
vídeo aula, para isso é só clicar o botão direito do mouse na imagem e clicar em (Salvar
imagem como)

Para cada um destes objetos, estaremos usando um objeto sprite. Ele simplesmente exibe
uma textura, que você pode se mover, girar e redimensionar. Jogos geralmente são
compostas de objetos sprite. Vamos inserir cada uma destas quatro objetos como objetos
sprite. O processo é semelhante ao inserir o fundo tiled:
1. Dê um duplo clique para inserir um novo objeto
2. Dê um duplo clique no botão 'Sprite' objeto.
3. Quando o mouse se transforma em uma cruz, clique em algum lugar no layout. A dica
deve ser 'principal'. (Lembre-se este é o layout ativo.)
4. O editor de textura aparece. Clique no ícone aberto, e carregar um dos quatro texturas.
5. Feche o editor de textura, salvar suas alterações. Agora você deve ver o objeto no
layout!

Nota: outra maneira rápida de inserir objetos Sprite é arrastar e soltar o arquivo de
imagem do Windows para a área de layout. Construir 2 vai criar um Sprite com que
textura para você.

Movaos sprites de bala e explosão para algum lugar

fora da borda do layout - não queremos vê-los quando o jogo começa.
objetos serão chamados Sprite, Sprite2, Sprite3 e
Esses
Sprite4. Isso não é muito útil - as coisas vão rapidamente ficar confuso como este.
Renomeie-os para Jogador, Monster, Bullet e explosão, conforme apropriado. Você pode
alterando a propriedade
fazer isso selecionando o objeto, em seguida,
Name na barra de propriedades:

Adição de comportamentos (Adding behaviors)

Por exemplo, você

Comportamentos são funcionalidade em Construct 2.
pode adicionar um comportamento de plataforma para um objeto,
eo comportamento sólido para o chão, e instantaneamente você pode saltar ao redor como
um jogo de plataformas. Você pode fazer o mesmo em eventos, mas leva mais tempo, e
não há nenhum ponto de qualquer maneira se o comportamento já está
bom o suficiente! Então vamos dar uma olhada no que os comportamentos
que podemos usar. Entre outras coisas, construir 2 tem estes comportamentos;
 – 8 Direções de movimento(8 Direction movement). Isto permite-lhe mover um
objeto com as teclas de seta. Ele vai fazer muito bem para o movimento do jogador.

- Movimento da bala(Bullet movement). Isso simplesmente se move para a frente

um objeto em seu ângulo atual. Vai funcionar muito bem para balas do jogador.
Apesar do nome, ele também vai funcionar muito bem para mover os monstros ao
redor - uma vez que todo o movimento não é objetos avançar em um pouco de
velocidade.

- Vá até(Scroll to). Isto faz com que a tela seguir um objecto que se move em torno
de (também conhecido como rolagem). Isso será útil no jogador.

- Limite de layout(Bound to layout). Isto irá parar um objeto deixando a área de

layout. Isso também será útil no jogador, então eles não podem andar lado de fora
da área de jogo!

- Destrua fora da camada(Destroy outside layout). Em vez de parar um objeto

deixando a área de layout, isso destrói-lo se ele faz. É útil para as nossas balas. Sem
ele, balas voariam para fora da tela para sempre, sempre levando um pouco de
memória e poder de processamento. Em vez disso, devemos destruir as balas, uma
vez que deixei o layout.

- Fade. Este gradualmente torna um objeto desaparecer, o que vamos usar nas
explosões.

Vamos adicionar estes comportamentos para os objetos que precisam deles.

Como adicionar um comportamento

Vamos adicioná-lo 8 comportamento movimento(8 direction movement ) direção ao jogador.

Clique no player para selecioná-lo. Na barra de propriedades, observe a categoria
Comportamentos(behaviors). Clique em Adicionar / Editar lá(add / edit). O diálogo de
Comportamentos para o jogador irá abrir.
Clique no ícone "comportamento add". Clique duas vezes 8 Direction movement,
adicioná-lo.

Faça o mesmo novamente e desta vez adicione o Scroll Para comportamento, para fazer a
tela seguir o jogador, e também o limite de comportamento(Bound to layout), para
mantê-los dentro do layout. O diálogo de comportamentos deve agora olhar como este:

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

Adicionando os outros comportamentos
Podemos adicionar comportamentos para os outros objetos pelo mesmo método -
selecioná-lo, clique em Adicionar / Editar(add / edit) para abrir a janela de
comportamentos, e adicionar alguns comportamentos. Vamos adicionar os outros
comportamentos:

- Adicionar o movimento da bala Bullet movement e destruir layout fora do

objeto(Destroy outside layout)
- Adicionar o movimento Bullet para o objeto Monster (porque ele só se move para frente
também)
- Adicione o comportamento desvanece-se(Fade) ao objeto de explosão (por isso
desaparece gradualmente depois de aparecer). Por padrão o comportamento desvanece-se
também destrói o objeto depois que ele desapareceu, o que também poupa-nos a ter de se
preocupar com objetos invisíveis Explosão entupimento do jogo.

Se você executar o jogo, você pode notar a única coisa diferente é os monstros que você
pode ver, de repente disparar rapidamente. Vamos atrasá-los a um ritmo vagaroso.
Selecione o objeto Monster. Observe como desde que adicionamos um comportamento,
algumas propriedades extras surgiram na barra de propriedades:

Isso nos permite ajustar comportamentos como trabalhar. Alterar a velocidade de 400-80
(isto é, em pixels percorrida por segundo).

Da mesma forma, mudar a velocidade do objeto bala a 600, e Fade comportamento

desvanece-se o objeto da explosão de um tempo para 0,5 (isso é meio segundo).

Criar mais alguns monstros (Create some more

monsters)
Segurando o control(crt) do teclado, clique e arraste o objeto Monster. Você notará que
ele gera outra instância. Isto é simplesmente um outro objeto do tipo de objeto Monster.

Tipos de objetos são, essencialmente, 'classes' de objetos. No sistema de eventos, você

principalmente, lidar com tipos de objeto. Por exemplo, você pode fazer um evento que
diz que "colide com bala monstro". Isso realmente significa "Qualquer instância de objeto
de bala colide com qualquer tipo de exemplo do objeto Monster" - em oposição a ter que
fazer um evento separado para cada monstro.

Com Sprites, todas as instâncias de um tipo de objeto também compartilham a mesma

textura. Isso é ótimo para a eficiência - quando os jogadores jogam o seu jogo online, ao
invés de ter que baixar 8 texturas monstro por 8 monstros, eles só precisam baixar uma
textura Monster e construct 2 repete-la 8 vezes. Nós vamos cobrir mais sobre tipos de
objetos contra instâncias mais tarde. Por enquanto, um bom exemplo para se pensar sobre
os diferentes tipos de inimigos são diferentes tipos de objetos, em seguida, os inimigos
propriamente ditas (que pode haver vários) são exemplos desses tipos de objeto.

Usando o control(crt) do teclado + arrastar, criar 7 ou 8 novos monstros. Não coloque

nenhum muito perto do jogador, ou ele pode morrer imediatamente! Você pode diminuir o
zoom com controle + scroll do mouse para baixo, se isso ajuda, e espalhá-los sobre todo o
layout. Você deve ter terminado algo semalhente a isto:

Eventos / Events
Primeiro, clique em Event sheet 1(Folha de evento) na guia, parte superior para alternar
para o editor de folha de evento. A lista de eventos é chamado de uma folha de evento, e
você pode ter folhas de eventos diferentes para diferentes partes do seu jogo, ou para a
organização. Folhas evento também pode "incluir" folhas de outros eventos, permitindo
que você reutilize eventos em vários níveis.
Como o texto na folha vazia indica, construir 2 Tudo corre na folha de evento uma vez por
tick. A maioria dos monitores atualizar sua tela 60 vezes por segundo, para construir 2 vai
tentar igualar o que para o mais suave de exibição. Isto significa que a folha de evento é
normalmente executado 60 vezes por segundo, de cada vez, seguido por redesenhar a tela.
Isso é o que um tick é - uma unidade de "executar os eventos em seguida, desenhe na
tela".

Conditions, actions and sub-events (Condições,

ações e sub-eventos)
Os eventos consistem de condições(conditions), que o teste se determinados critérios
forem atendidos, por exemplo, Por exemplo, "Criar um objeto de bala(bullet)". Depois
que as ações tenham executado, eventos(events) sub-também são executados - os quais
poderão testar mais condições(conditions), em seguida, executar mais ações(actions) e,
em seguida mais sub-eventos(sub-events), e assim por diante. Usando este sistema,
podemos construir uma funcionalidade sofisticada para os nossos jogos e aplicativos. Nós
não precisamos de sub-eventos neste tutorial, no entanto.

Vamos passar por cima de novo. Em suma, um evento basicamente funciona assim:

São todas as condições cumpridas?

---> Sim: executar todas as ações do evento.
---> Não: vá para próximo evento (não incluindo sub-eventos).

Isso é um pouco de uma simplificação exagerada. Construct 2 fornece um monte de

recursos de eventos para cobrir um monte de coisas diferentes que você pode precisar
fazer. No entanto, por agora, essa é uma boa maneira de pensar sobre isso.

Seu primeiro evento:

Queremos fazer o jogador sempre quando olhar para o mouse ele será direcionado para o
ele..

Lembre-se de um tick é executado toda vez que a tela é desenhada, por isso, se fizermos o
jogador enfrentar o mouse a cada tick, eles sempre parecem estar de frente para o mouse.
Vamos começar a fazer este evento. Clique duas vezes em um espaço na folha de evento.
Isto levar-nos a adicionar uma condição(conditions) para o novo evento.

Objetos diferentes têm diferentes condições e ações dependendo do que eles podem fazer.
Há também o objeto do sistema, o que representa Construct 2 funcionalidade built-in. Dê
um duplo clique no objeto de sistema, conforme mostrado. A caixa de diálogo irá
listar todas as condições do objeto do Sistema:
Clique duas vezes na condição de tick Toda a inseri-lo. O diálogo será fechada eo evento
é criado, com nenhuma ação. Deve ficar assim:

Agora queremos adicionar uma ação para tornar o jogador no mouse. Clique no link Add
ação(action) à direita do evento. (Certifique-se de obter o link Add ação(action) não, o
link Adicionar evento debaixo dela que vai adicionar um evento totalmente diferente de
novo) A caixa de diálogo adicionar Ação será exibida:

temos a nossa mesma

Tal como acontece com a adição de um evento,
lista de objetos para escolher, mas desta vez para a adição de uma
ação. Tente não se confundem entre a adição de condições e adicionando ações! Como
pois é o jogador que nós
mostrado, dê um duplo clique no objeto Player,
queremos olhar para o mouse. A lista de ações disponíveis no objeto
Player é exibida:
Observe como o comportamento do jogador movimento 8 direções tem suas próprias
ações. Nós não precisamos nos preocupar com isso agora, no entanto.

Em vez de ajustar o ângulo do jogador para um número de graus, é conveniente utilizar o

ângulo definido para a acção de posição. Isto irá automaticamente calcular o ângulo do
jogador para o dado X e Y coordenadas, em seguida, ajustar o ângulo do objeto.

Clique duas vezes Set angle towards position.

Construct 2 agora precisa saber o X e Y e a apontar o jogador:

Estes são chamados os parâmetros da ação. Condições podem ter muitos parâmetros, mas
cada tick não precisa de nenhum.
 O objeto do mouse
Queremos definir o ângulo para a posição do mouse.
pode proporcionar isso. Digite Mouse.X para X e Y.
para Mouse.Y Estes são chamados de expressões. Eles são como somas que são
calculadas.

Por exemplo, você também pode entrar Mouse.X + 100 ou (Mouse.Y) (embora esses
exemplos particulares não pode ser muito útil!). Desta forma, você pode usar qualquer
dado de qualquer objeto, ou qualquer cálculo, para elaborar parâmetros em ações e
condições. É muito poderoso, e uma espécie de fonte secreta de grande parte da
flexibilidade de Construct 2.

Se você receber um erro que dizia "O mouse não é um nome de objeto"? Certifique-se de
que você adicionou o objeto do mouse! Volte para a página 2 e marque em "Adicionar os
objetos de entrada".

Você pode estar se perguntando como você pode lembrar de todas as expressões possíveis
que você poderia entrar. Felizmente, há o "painel de objeto"(object panel ), que você
deve ver flutuando sobre ele. Por padrão, ele está escondido para não distraí-lo.