Apostila Construct 2

Traduzida para Portugus do Brasil

Contedo extra para Vdeo Aula
Curso de criao 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 introdutrio para Construct 2

Vamos comear a fazer o seu jogo HTML5 primeiro. Ns 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:
Ns estaremos utilizando uma Game Engine gratuita Construct 2.
Sistema operacional: Windows XP, Vista & 7.
Linux: Ainda no testamos. mas possvel execut-lo atravs do WINE. (Quem

testou e obteve bons resultados pode estar compartilhando conosco nos

comentrios)

Navegador:
E necessrio 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?

tambm conhecido pelo termo em

ingls, game engine, ou simplesmente engine, um programa de
computador e/ou conjunto de bibliotecas, para simplificar e abstrair o
desenvolvimento de jogos eletrnicos ou outras aplicaes com
um Motor de Jogo,

grficos em tempo real, para videogames e/ou computadores rodando sistemas

A funcionalidade tipicamente fornecida por

um motor de jogo inclui: um motor grfico para renderizar grficos 2D
operacionais.

e/ou 3D, um motor de fsica para simular a fsica ou simplesmente para fazer deteco de

suporte a animao, sons, inteligncia artificial

coliso,
,
networking, gerncia de memria, gerncia de arquivos, gerncia de linha de execuo,
suporte a grafos de cena e entidades e, suporte a uma linguagem de script.

Instalando Construct 2
Se voc no tiver, pegue uma cpia da ltima verso 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 tambm pode ser instalado em contas de usurio
limitadas. Tambm porttil, assim voc pode instalar em um USB memory stick, por
exemplo, e lev-la com voc!

Como instalar?

Baixe o arquivo de instalao e inicia a instalao

Siga os passos durante a instalao

Comece a fazer jogos!

Imagens que sero utilizadas na criao do seu jogo

em HTML5, essas imagens foram criadas pelo site Construct 2 onde no tutorial
bsico ele indica elas para utilizarem na sua primeira criao.
* Voc deve salvar todas essas imagens no seu computador pois utilizaremos ela na nossa
vdeo aula, para isso s clicar o boto direito do mouse na imagem e clicar em (Salvar
imagem como)

Introduo
* Entendendo o documento, todo o nome de um arquivo que estiver em negrito quer dizer
que ele um menu, opo que existe no programa e tem que clicar nele.

Agora voc est pronto para cima, lanar Construct 2. Clique no

selecione

Menu - File e

New.
O boto de menu File 'New'.

Na caixa de dilogo New Project, voc no 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 edio do
Construct 2).

Use a project folder (Use uma pasta de projeto ) Apenas a traduo da opo de baixo.
Para ns. 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 nvel de jogo ou tela
de menu. Em outras ferramentas, isso poderia ter sido chamado de sala de cena ou o
quadro.

Inserting objects(A introduo 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 ns. 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 espao no layout para inserir um novo objeto. (Mais
tarde, se ele est cheio, voc tambm pode boto direito do mouse e selecione Inserir novo
objeto.) Uma vez que a caixa de dilogo 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,
ento o Properties Bar esquerda deve mostrar todas as definies para o objeto,

position

incluindo o seu tamanho e posio. Definir a sua posio(

) de 0, 0 (na parte
superior esquerda da disposio), 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 ttulo da janela
- um navegador deve aparecer mostrando seu layout lado a lado Woo!)

Adding a layer(Adicionando uma camada)

adicionar mais alguns objetos

Ok, agora ns queremos

. No entanto,
vamos manter acidentalmente selecionando o fundo de azulejos, a menos que bloque-lo,
tornando-selecionvel. Vamos usar o sistema de camadas(layes) para fazer isso.
Layouts podem consistir de mltiplas 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

organizar os objetos que aparecem em cima dos
outros, e as camadas pode ser escondido, trancado, ter efeitos de paralaxe aplicado, e
objetos pintados em cada folha.

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 programao). Clique no cone do lpis 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 no ser capaz de
selecionar qualquer coisa sobre ele. Isso bastante conveniente para o nosso fundo de
azulejos, que fcil de selecionar acidentalmente e no precisa ser tocado novamente. No
entanto, se voc precisar fazer alteraes, voc pode simplesmente clicar no cadeado
novamente para desbloquear.
As caixas de seleo(checkboxes) tambm permitem ocultar camadas(layers) no editor,
mas ns no 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 esto inseridos na camada ativa, assim, se no estiver selecionada,
estaremos inserindo acidentalmente para a camada de errado. A camada ativa mostrado
na barra de status, e tambm 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 ateno 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.
Faa o mesmo novamente para o objeto do teclado(keyboard).
Nota: estes objetos no precisam colocar em um layout. Eles esto escondidos e,
automaticamente, projeto de trabalho como um todo. Agora, todos as (camadas)layouts
em nosso projeto pode aceitar mouse e teclado.

Imagens que sero utilizadas na criao do seu jogo

em HTML5, essas imagens foram criadas pelo site Construct 2 onde no tutorial
bsico ele indica elas para utilizarem na sua primeira criao.
* Voc deve salvar todas essas imagens no seu computador pois utilizaremos ela na nossa
vdeo aula, para isso s clicar o boto 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 so
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 boto '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 alteraes. Agora voc deve ver o objeto no
layout!

Nota: outra maneira rpida 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.

os sprites de bala e exploso para algum lugar

fora da borda do layout - no queremos v-los quando o jogo comea.
Mova

objetos sero chamados Sprite, Sprite2, Sprite3 e

Sprite4. Isso no muito til - as coisas vo rapidamente ficar confuso como este.
Esses

Renomeie-os para Jogador, Monster, Bullet e exploso, conforme apropriado. Voc pode

alterando a propriedade
Name na barra de propriedades:
fazer isso selecionando o objeto, em seguida,

Adio de comportamentos (Adding behaviors)

Por exemplo, voc
pode adicionar um comportamento de plataforma para um objeto,
Comportamentos so funcionalidade em Construct 2.

eo comportamento slido para o cho, e instantaneamente voc pode saltar ao redor como
um jogo de plataformas. Voc pode fazer o mesmo em eventos, mas leva mais tempo, e
no h nenhum ponto de qualquer maneira

se o comportamento j est

bom o suficiente! Ento vamos dar uma olhada no que os comportamentos

que podemos usar. Entre outras coisas, construir 2 tem estes comportamentos;

 8 Direes 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 tambm vai funcionar muito bem para mover os monstros ao
redor - uma vez que todo o movimento no objetos avanar em um pouco de
velocidade.
- V at(Scroll to). Isto faz com que a tela seguir um objecto que se move em torno
de (tambm 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 tambm ser til no jogador, ento eles no 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 destri-lo se ele faz. til para as nossas balas. Sem
ele, balas voariam para fora da tela para sempre, sempre levando um pouco de
memria 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
exploses.

Vamos adicionar estes comportamentos para os objetos que precisam deles.

Como adicionar um comportamento
Vamos adicion-lo 8 comportamento movimento(8 direction movement ) direo 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 dilogo de
Comportamentos para o jogador ir abrir.

Clique no cone "comportamento add". Clique duas vezes 8 Direction movement,

adicion-lo.

Faa o mesmo novamente e desta vez adicione o Scroll Para comportamento, para fazer a
tela seguir o jogador, e tambm o limite de comportamento(Bound to layout), para
mant-los dentro do layout. O dilogo de comportamentos deve agora olhar como este:

Feche o dilogo comportamentos. Clique em Run para experimentar o jogo!

Adicionando os outros comportamentos

Podemos adicionar comportamentos para os outros objetos pelo mesmo mtodo 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
tambm)
- Adicione o comportamento desvanece-se(Fade) ao objeto de exploso (por isso
desaparece gradualmente depois de aparecer). Por padro o comportamento desvanece-se
tambm destri o objeto depois que ele desapareceu, o que tambm poupa-nos a ter de se
preocupar com objetos invisveis Exploso 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 exploso 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 instncia. Isto simplesmente um outro objeto do tipo de objeto Monster.
Tipos de objetos so, 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 instncia de objeto
de bala colide com qualquer tipo de exemplo do objeto Monster" - em oposio a ter que
fazer um evento separado para cada monstro.
Com Sprites, todas as instncias de um tipo de objeto tambm compartilham a mesma
textura. Isso timo para a eficincia - quando os jogadores jogam o seu jogo online, ao
invs de ter que baixar 8 texturas monstro por 8 monstros, eles s precisam baixar uma
textura Monster e construct 2 repete-la 8 vezes. Ns vamos cobrir mais sobre tipos de
objetos contra instncias mais tarde. Por enquanto, um bom exemplo para se pensar sobre
os diferentes tipos de inimigos so diferentes tipos de objetos, em seguida, os inimigos
propriamente ditas (que pode haver vrios) so exemplos desses tipos de objeto.
Usando o control(crt) do teclado + arrastar, criar 7 ou 8 novos monstros. No 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
organizao. Folhas evento tambm pode "incluir" folhas de outros eventos, permitindo
que voc reutilize eventos em vrios nveis.

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 exibio. 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 (Condies,

aes e sub-eventos)
Os eventos consistem de condies(conditions), que o teste se determinados critrios
forem atendidos, por exemplo, Por exemplo, "Criar um objeto de bala(bullet)". Depois
que as aes tenham executado, eventos(events) sub-tambm so executados - os quais
podero testar mais condies(conditions), em seguida, executar mais aes(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. Ns
no precisamos de sub-eventos neste tutorial, no entanto.
Vamos passar por cima de novo. Em suma, um evento basicamente funciona assim:
So todas as condies cumpridas?
---> Sim: executar todas as aes do evento.
---> No: v para prximo evento (no incluindo sub-eventos).
Isso um pouco de uma simplificao 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 comear a fazer este evento. Clique duas vezes em um espao na folha de evento.
Isto levar-nos a adicionar uma condio(conditions) para o novo evento.

Objetos diferentes tm diferentes condies e aes dependendo do que eles podem fazer.
H tambm o objeto do sistema, o que representa Construct 2 funcionalidade built-in. D

duplo clique

um
no objeto de sistema, conforme mostrado. A caixa de dilogo ir
listar todas as condies do objeto do Sistema:

Clique duas vezes na condio de tick Toda a inseri-lo. O dilogo ser fechada eo evento
criado, com nenhuma ao. Deve ficar assim:

Agora queremos adicionar uma ao para tornar o jogador no mouse. Clique no link Add
ao(action) direita do evento. (Certifique-se de obter o link Add ao(action) no, o
link Adicionar evento debaixo dela que vai adicionar um evento totalmente diferente de
novo) A caixa de dilogo adicionar Ao ser exibida:

temos a nossa mesma

lista de objetos para escolher, mas desta vez para a adio de uma
Tal como acontece com a adio de um evento,

ao. Tente no se confundem entre a adio de condies e adicionando aes! Como

pois o jogador que ns

queremos olhar para o mouse. A lista de aes disponveis no objeto
mostrado, d um duplo clique no objeto Player,
Player exibida:

Observe como o comportamento do jogador movimento 8 direes tem suas prprias

aes. Ns no precisamos nos preocupar com isso agora, no entanto.
Em vez de ajustar o ngulo do jogador para um nmero de graus, conveniente utilizar o
ngulo definido para a aco de posio. 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 so chamados os parmetros da ao. Condies podem ter muitos parmetros, mas
cada tick no precisa de nenhum.

O objeto do mouse
pode proporcionar isso. Digite Mouse.X para X e Y.
para Mouse.Y Estes so chamados de expresses. Eles so como somas que so
Queremos definir o ngulo para a posio do mouse.

calculadas.
Por exemplo, voc tambm pode entrar Mouse.X + 100 ou (Mouse.Y) (embora esses
exemplos particulares no pode ser muito til!). Desta forma, voc pode usar qualquer
dado de qualquer objeto, ou qualquer clculo, para elaborar parmetros em aes e
condies. muito poderoso, e uma espcie de fonte secreta de grande parte da
flexibilidade de Construct 2.
Se voc receber um erro que dizia "O mouse no um nome de objeto"? Certifique-se de
que voc adicionou o objeto do mouse! Volte para a pgina 2 e marque em "Adicionar os
objetos de entrada".
Voc pode estar se perguntando como voc pode lembrar de todas as expresses possveis
que voc poderia entrar. Felizmente, h o "painel de objeto"(object panel ), que voc
deve ver flutuando sobre ele. Por padro, ele est escondido para no distra-lo.