E-Book - Desenvolvimento de Jogos 2D

DESENVOLVIMENTO
DE GAMES
CONSTRUCT 2
Desenvolvimento de games – construct 2
Introdução
Nenhuma parte desta publicação poderá ser reproduzida ou

transmitida, sejam quais forem os meios empregados: eletrônicos,
mecânicos, fotográficos, gravações ou quaisquer outros.
Todos os direitos reservados para CDP CENTRO DE 2

DESENVOLVIMENTO PROFISSIONAL LTDA.
Lei 9.610/98 e atualizações
Autor: Rubens Junior
CDPCONNECT
www.cdpconnect.com.br
e-mail: diretoria@cdponline.com.br
sumário
introdução 05
links úteis 08
exercício de fixação 09
a interface do construct 2 10
c1.1 – a interface
10
c1.2 - barra de propriedades
11
c1.3 - barra de status 11
c1.4 - barra de camadas 12
c1.5 - barra de projetos 12
c1.6 - barra de objetos 13
c1.7 – menu view (visão) 13
criando seu primeiro jogo (cenário) 15
cp2.1 - criando um projeto 15 3
cp2.2 - construindo o cenário 18
inserindo objetos 18
tiled background (plano de fundo) 18
adicionando uma camada 22
adicionando o objeto input (entrada) 26
outros objetos do jogo 26
mais muros para o seu labirinto 29
criando seu primeiro jogo (comportamentos) 31
c3.1 - como adicionar um comportamento 32
c3.2 - comportamentos para adicionar aos objetos de nosso jogo 33
c3.3 - visualizando seu jogo 34
c3.4 – melhorando a aparência do jogo 36
Exercício de fixação 38
sumário (continuação)
criando seu primeiro jogo (eventos) 39
c4.1 - sobre os eventos 40
c4.2 - condições, ações e sub-eventos 41
c4.3 - seu primeiro evento 42
criando seu primeiro jogo (aprimorando) 48
c5.1 - limitando as jogadas (global variable) 48
c5.2 - subtraindo valores da variável 49
c5.3 - comparando variáveis 50
c5.4 – inserindo o placar 51
c5.5 - exibindo o placar com o valor da variável global 53
c6.1 - salvando seu jogo e publicando na scirra arcade 55
c6.2 - exportando seu jogo para a scirra arcade 56 4
criando um jogo de plataforma 62
descrição do seu jogo 63
objetos e comportamentos 64
criando a tela inicial, mudança de fases e execução de sons 66
programando a passagem de layout (fase) 69
executando sons 70
criando o evento para a execução do som 70
jogo de plataforma com animação 73
inserindo animação 75
programando as animações 79
Introdução
O Construct 2 é um software, Game Portanto, o Construct 2 não exige do usuário
Engine, que permite a criação de jogos o conhecimento de programação, apenas
digitais em 2D, especificamente, baseados lógica e, devido a enorme variedade de
em HTML5. Uma Game Engine é uma navegadores web e dispositivos móveis que
biblioteca, ou pacote de funcionalidades, suportam o HTML5, permitirá exportar para
feita para facilitar o desenvolvimento, diversas plataformas o jogo criado.
fazendo que nem tudo no jogo precise ser
feito totalmente do zero.
Ao criarmos um jogo no Construct 2, sua programação é

feita de modo visual utilizando o conceito de evento e
ações, onde para cada evento temos uma ou mais ações.
Exemplo: Você já usou o Chrome quando houve falha de
conexão?
Se sua resposta for sim, então você já se divertiu com o
dinossauro que precisa desviar-se dos obstáculos que
surgem pelo caminho. O evento, nesse caso, seria a
colisão do dinossauro com o obstáculo, onde a ação para
esse evento é o reinício do jogo.
5
Introdução
Uma das suas principais características é o Digamos que você deseja criar um jogo de
desenvolvimento extremamente rápido de plataforma como o famoso Super Mario,
um jogo, pois ele vem nativamente por essa facilidade, o Construct 2 dispõe
preparado com componentes e dos mesmos movimentos de plataforma
comportamentos prontos para uso. Basta executados pelo Mario, em seu jogo.
você criar um objeto, adicionar um
comportamento para ele e programar seus
eventos e ações e tudo de forma visual
O Construct 2 é disponível em três versões: Free,

Personal e Business. A versão Free (gratuita) é uma Na versão gratuita é permitido apenas
versão que você pode baixar sem custos para que exportar para HTML 5, possibilitando que seu
possa aprender, conhecer e criar seus jogos. jogo seja executado em navegadores como o
Entretanto, esta versão possui algumas limitações Chrome, Firefox, Internet Explorer, entre
tais como: outros. Após seu jogo ser exportado para
HTML 5 e rodando em algum navegador, você
A impossibilidade de você vender jogo que criou. pode publicá-lo no Facebook, desde que
Recursos limitados de usos de camadas, eventos e possua uma conta de desenvolvedor e
efeitos especiais. também que seu jogo esteja hospedado em
Bloqueio de exportação do seu jogo para rodar em um domínio HTTPS.
multiplataformas como Adroid, iOS, PC ou Wii U.
6
Introdução
As versões pagas Personal e Business possuem
os mesmos recursos, mas o que difere é o uso Existem dois locais onde você pode baixar a
comercial. Você pode utilizar a versão Personal versão gratuita ou comprar as versões pagas.
até obter uma receita máxima de US$ 5.000,00 Um deles é no próprio site da Scirra
(cinco mil dólares). Este é um valor total, não é
mensal nem anual. Uma vez atingido esse limite
(https://www.scirra.com/) ou, Pela Steam
você teria que migrar para a versão Business (http://store.steampowered.com/).
para continuar a gerar receita com seus jogos.
Existe uma pequena diferença de valor entre a elas, portanto, caso deseje
comprar uma das duas versões é bom fazer uma pesquisa de preços.
O programa Construct 2 é para ser operado apenas no sistema operacional
Windows, mas o resultado do trabalho, ou seja, os jogos prontos podem ser
executados em qualquer lugar, como Mac, Linux ou iPad. Além disso, o
programa Construct 2 também pode ser instalado em contas de usuário
limitadas ou em um Pen Drive.
7
Links úteis ( pressionar tecla Ctrl + botão esquerdo do

mouse)
Construct 2
Scirra Arcade (Jogos produzidos no Construct 2)
Download Construct 2 (versão Free)

Scirra Store 8
Super Mario Bros 3
Exemplo de jogos
criados no Construct 2. Perspectiva 3D – test (nave criada em Blender)
Ufo Attack 3D
EXERCÍCIO DE FIXAÇÃO
(Copie as perguntas no seu caderno ou em folha de papel A4 e responda)
1. O que é o Construct 2?
2. O que é uma Game Engine?

9
3. O que você entende por eventos e ações?
4. Quais são as versões do Construct 2 e suas diferenças?

C1.1 – A INTERFACE
Tela Inicial
Barra de Projetos
Barra de
Propriedades Barra de Camadas
Versão Utilizada
Novo Projeto
Barra de Objetos
Abrir Projeto
Barra de Status
10
C1.2 - BARRA DE PROPRIEDADES
Na barra de propriedades, definimos para o Projeto, por

exemplo, informações como: nome, versão, descrição, tamanho
da janela, preview no navegador. Nela, também podemos editar
informações para objetos, alterando por exemplo, propriedades
sobre os comportamentos adicionados aos objetos (que
veremos posteriormente).
Na barra de status podemos visualizar informações como:

tamanho do projeto, número de eventos, memória utilizada,
camada ativa, posição do mouse e porcentagem de zoom.
C1.3 - BARRA DE STATUS
11
C1.4 - BARRA DE CAMADAS
Na barra de camadas visualizamos e editamos informações como por

exemplo: quantidade de camadas do projeto, camada ativa, ativar ou
desativar camadas, bloquear ou não camadas, mover para cima ou para
baixo determinadas camadas, renomear camadas, excluir e adicionar
camadas.
C1.5 - BARRA DE PROJETOS
A barra de projetos permite ao usuário editar informações em seu

projeto, como por exemplo: inserir ou remover novos cenários e/ou
folhas de eventos, adicionar e remover novos objetos.
12
C1.6 - BARRA DE OBJETOS
A barra de objetos permite ao usuário, editar objetos de seu

projeto. Podendo, por exemplo, adicionar comportamentos,
renomear, excluir do cenário.
Não se preocupe caso feche sem querer qualquer uma das

C1.7 – MENU VIEW (visão) barras acimas. Para adicionar ou remover tais barras, vá ao
Menu View e habilite apenas as que você irá utilizar.
13
Defina:
1. Barra de Propriedades:
2. Barra de Projetos:
3. Barra de Objetos:
4. Barra de Camadas:
5. Barra de Status:
6. Menu View:
14
CRIANDO SEU PRIMEIRO JOGO - cenário
Para que tenha uma base de como deve ser nosso primeiro jogo, acesse o link abaixo:
- Meu primeiro Jogo
CP2.1 – CRIANDO UM PROJETO
Para criar um novo jogo, clicar em:
• New Project (na página inicial) ou

através do menu File/Arquivo.
• Das opções disponíveis, selecione
New Empty Project (novo projeto
vazio).
15
Ao criar um novo projeto vazio, você terá basicamente o Layout e a Event Sheet. No Layout, iremos
construir a apresentaçã visual de nosso jogo; podendo inserir botões, caixas de textos, o cenário do jogo, etc.
Na Event Sheet, ou folha de eventos, iremos programar os eventos e ações que teremos em nosso jogo.
Barra de Propriedades
Barra de Projetos
Na Barra de Propriedades, nomeie seu projeto como Meu Primeiro Jogo. Se preferir complete os
campos Description, Author, Email e Website.
Na Barra de Projetos, renomeie o Layout 1 para Cenário 1. Basta clicar com o botão direito sobre o
mesmo e selecionar Rename ou simplesmente clique no Layout 1 e na barra de propriedades
defina seu novo nome.
16
Ao criar um novo projeto vazio,

você terá basicamente o Layout e
a Event Sheet. No Layout, iremos
construir a apresentaçã visual de Barra de
Propriedades
nosso jogo; podendo inserir botões,
caixas de textos, o cenário do jogo,
etc.
Na Event Sheet, ou folha de Barra de Projetos
eventos, iremos programar os
eventos e ações que teremos em
nosso jogo.
Na Barra de Propriedades, nomeie seu

projeto como Meu Primeiro Jogo. Se preferir
complete os campos Description, Author,
Email e Website.
Na Barra de Projetos, renomeie o Layout 1

para Cenário 1. Basta clicar com o botão
direito sobre o mesmo e selecionar Rename
ou simplesmente clique no Layout 1 e na
barra de propriedades defina seu novo
nome.
17
CP2.2 – CONSTRUINDO O CENÁRIO
INSERINDO OBJETOS
TILED BACKGROUND (PLANO DE FUNDO)
A primeira coisa que queremos é uma

imagem de fundo que se repita
(background). O objeto Tiled Background
pode fazer isso por nós. A imagem a ser
utilizada você encontra ao lado.
Agora, clique duas vezes em um espaço no

layout para inserir um novo objeto ou você
também pode clicar com o botão direito do
mouse e selecionar Insert new object
(Inserir novo objeto). Uma vez que a caixa
de diálogo aparecer, inserir novo objeto. Textura Background
Clique duas
vezes, para selecionar o Tiled Background.
18
CP2.2 – CONSTRUINDO O CENÁRIO
O cursor de seu mouse apresentará o formato de imagem que você salvou anteriormente. Clique no
uma cruz para indicar onde colocar o objeto. ícone da pasta para carregar a imagem a ser
Clique em algum lugar perto do meio do layout. O utilizada e selecione-a. Feche o editor de imagem
editor de imagem abrirá, para que você selecione o clicando no X no canto superior direito. Agora você
arquivo que servirá como o background de seu deve ver o seu objeto de fundo.
jogo. Vamos importar a
Editor de Imagem - Carregar Imagem Editor de Imagem após o arquivo que servirá de
background ser selecionado
19
Precisamos agora definir o tamanho do nosso

objeto Tiled Background que servirá de fundo
do nosso jogo.
Clique sobre o Cenário 1 e defina as
dimensões do tamanho do cenário para o
objeto adicionado acima; essas dimensões
você visualiza e define na barra de
propriedades.
E na posição do background, defina-o 0, 0
(topo esquerdo do layout).
Renomeie cada objeto adicionado ao seu
projeto, para que tenha uma melhor
organização.
20
Vamos examinar o nosso trabalho. Como alternativa, clique no Menu View e

Mantenha o Control + Scroll do mouse selecione Zoom out para aumentar o
para baixo para diminui o zoom e CTRL + zoom e Zoom in para diminuí-lo. Você
Scroll do mouse para cima para também pode manter o espaço, ou o botão
aumentar o zoom. do meio do mouse, para mover-se. Seu
projeto deve estar como na imagem abaixo:
21
ADICIONANDO UMA CAMADA
Precisamos inserir mais objetos em nosso jogo. Contudo,

podemos acidentalmente selecionar o Tiled Background
(bg_labirinto); para que isso não ocorra, sua camada deve
ser bloqueada, tornando-a não selecionável. Vamos usar
o sistema de camadas para 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 na barra de

camadas, que normalmente fica próxima da barra de
projetos.
22
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 para Background já que é a
nossa camada de plano de fundo. Depois
clique no ícone do sinal de adição (add)
para adicionar uma nova camada que
receberá nossos outros objetos. Vamos
chamá-la de 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, caso precise fazer mudanças,
23
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 para
Background já que é a nossa camada de plano de
fundo.
Depois clique no ícone do sinal de adição (add)
para adicionar uma nova camada que receberá
nossos outros objetos. Vamos chamá-la de 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, caso precise 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 a imagem ao lado.
24
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 para
Background já que é a nossa camada de plano
de fundo.
Depois clique no ícone do sinal de adição (add)
para adicionar uma nova camada que receberá
nossos outros objetos. Vamos chamá-la de 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, caso precise 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 a
imagem ao lado.
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 para Background já que é a nossa camada de plano de fundo.
25
ADICIONANDO O OBJETO IMPUT (ENTRADA)

Atente novamente para o layout. Dois cliques para inserir outro novo objeto. Desta
vez, selecione o objeto Keyboard, pois iremos precisar das entradas do 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.
OUTROS OBJETOS DO JOGO

É hora de inserir os objetos do nosso jogo! Abaixo temos as imagens que iremos
utilizar.
JOGADORES MURO DIAMANTE
26
Talvez você se pergunte: é sério isso?

Meu jogador é um quadrado? Sim!
Embora pareça simples, você que
define o grau de dificuldade de seu
jogo. Já jogou Geometry Dash? Se já,
você sabe do que estou falando. 1. Duplo clique para inserir um novo objeto;
Para cada um desses objetos, iremos 2. Duplo clique no objeto 'Sprite';
utilizar o objeto sprite (objeto gráfico). 3. Quando o mouse exibir o ponteiro em formato de
Ele simplesmente exibe a imagem, a cruz, clique em algum local do layout. A dica deverá
qual você poderá mover, rotacionar e exibir “Principal” (lembrando que esta deve ser a
redimensionar. Geralmente os jogos são camada ativa no layout);
4. O editor de imagem será aberto. Clique no ícone
compostos principalmente por objetos
abrir e carregue uma de nossas três imagens para ser
do tipo Sprite. Dos objetos acima,
utilizada como jogador e o nosso diamante;
apenas o jogador e o diamante serão do 5. Feche o editor de texturas salvando suas alterações.
tipo sprite. O processo é similar ao de Agora você deve visualizar o objeto no layout;
inserir o objeto Tiled Background (o 6. Adicione a imagem Muro como tipo de objeto Tiled
nosso plano de fundo): Background
27
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 Jogador e Diamante para locais de

sua escolha
28
MAIS MUROS PARA O SEU LABIRINTO
Segurando a tecla Control, clique e arraste o objeto Muro.

Você irá notar que esse procedimento irá criar outra instância.
Isso é apenas outro objeto do tipo de objeto Monster.
Seu jogo deve ficar parecido com o modelo da imagem abaixo.
Mantenha a organização!
O grau de dificuldade é definido por você.

29
1. Como iniciar um novo jogo?
2. Qual a diferença de Tiled background para Sprite?
3. Como duplicar objetos?
4. Qual a importância do conceito de camadas?
30
CRIANDO SEU PRIMEIRO JOGO (comportamentos)
Os comportamentos são Você também pode fazer isso através de

funcionalidades embarcadas no eventos, mas toma mais tempo e de
Construct 2. Por exemplo, você pode qualquer forma não faria sentido já que o
adicionar o comportamento Plataforma comportamento já é bom o suficiente!
a um objeto e o comportamento Sólido Então vamos dar uma olhada em quais
para o chão, assim você poderá comportamento vamos usar. Dentre
instantaneamente pular por aí como outros, o Construct 2 tem os seguintes
em um jogo de plataforma. comportamentos:
8 DIRECTION MOVEMENT Isto permite a você movimentar um objeto com as setas do teclado. Servirá bem
(MOVIMENTO EM 8 DIREÇÕES) para o movimento do jogador.
Esse faz com que a tela siga um objeto conforme ele se move - também conhecido
SCROLL TO (FIXAR)
como scrolling (rolagem) - isso vai ser útil para o jogador.
BOUND TO LAYOUT (LIMITADO AO Isso irá parar um objeto que estiver indo além da área do layout. Também será útil
LAYOUT) para o jogador, para que ele não vá passear para fora da área do jogo!
O comportamento rotacionar simplesmente faz um giro objeto(!). Mas é claro que

ROTATE (ROTACIONAR)
podemos configurar tal rotação.
31
C3.1 – COMO ADICIONAR UM COMPORTAMENTO
Clique no objeto Jogador para selecioná-lo. Na barra de propriedades, note a categoria Behaviors.
Clique em Add / Edit (adicionar/editar). Ou simplesmente clique sobre o objeto jogador com o botão
direito do mouse e selecione behaviors. O diálogo dos comportamentos para o objeto Player será
aberto.
Adicionar
comportamento.
Renomear comportamento.
Remover comportamento.
Comportamentos
disponíveis.
Comportamentos
adicionados ao objeto
Jogador.
Descrição dos
comportamentos. 32
C3.2 –COMPORTAMENTOS PARA ADICIONAR AOS OBJETOS DO JOGO
33
C3.3 –VISUALIZANDO O JOGO
Clique em Run Layout para

visualizar seu jogo direto no
navegador (browser) de seu
computador.
Jogo visualizado no navegador Google Chrome 34

Ao visualizar seu jogo no navegador, já é

possível movimentar o objeto Jogador através
das setas de navegação. Como adicionamos o
comportamento solid ao objeto Muro, o
Jogador é impossibilitado de atravessá-lo. Se
conseguiu chegar ao objeto Diamante, é
possível vê-lo girando, isso por conta do
comportamento rotate.
A câmera segue o jogador devido o

comportamento Scroll to. Talvez você pense:
esse jogo está muito fácil! Calma! Ainda iremos
colocar mais objetos em nosso jogo e os
“famosos” eventos.
35
C3.4 –MELHORANDO A APARÊNCIA DO JOGO
Clique em seu projeto, e na barra de propriedades procure a categoria Configuration

Settings. Altere, em Fullscreen in browser, de Letterbox scale para Off.
Fullscreen in browser Off
36
LINKS ÚTEIS
- Behavior Reference
37
1. Em desenvolvimento de jogos, o que você entende por

comportamento?
2.
3. Quais as funcionalidades dos comportamentos descritos neste
capítulo?
4.
5. Com base no link Behavior Reference, quais dos comportamentos
você já viu em algum jogo? (Fora os já citados)
38
CRIANDO SEU PRIMEIRO JOGO (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 é chamada 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
39
C4.1 SOBRE OS EVENTOS
Como indicado pelo texto exibido na folha vazia, Isso significa que geralmente a folha de eventos é
o Construct 2 executa todos os eventos que executada 60 vezes por segundo, redesenhando a
estiverem na folha de eventos em um tick tela em cada instante. Essa é a definição de um
(instante). A maioria dos monitores atualiza o Tick - uma unidade de tempo para "executar os
display 60 vezes por segundo, então o Construct eventos e em seguida redesenhar a tela“.
2 irá tentar igualar essa atualização para ter uma
exibição mais suave.
Os eventos são executados de cima para baixo, então os eventos no topo

da folha de eventos são executados primeiro.
40
C4.2 - CONDIÇÕES, AÇÕES E SUB-EVENTOS
Os eventos consistem de condições, que testam se alguns critérios foram satisfeitos, ex.: "A barra de espaço está
apertada?". Se todas as condições forem verdadeiras, as ações dos eventos serão executadas, ex.: "Criar um objeto
bullet". Após executar as ações, quaisquer sub-eventos também serão executados - estes por sua vez poderão testar
mais condições e então executar mais ações, e então mais sub-eventos, e assim por diante. Utilizando este sistema,
podemos construir funcionalidades sofisticadas para nossos jogos e aplicativos. No entanto, não precisaremos de
sub-eventos para este primeiro jogo.
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. O 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.
41
C4.3 – SEU PRIMEIRO EVENTO
Nós queremos que o jogador morra e que a fase se reinicie toda vez que ele colidir com determinado objeto.
Evento.
Ações.
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.
42
C4.3 – SEU PRIMEIRO 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 Jogador como demonstrado. O
diálogo irá então listar todas as condições do objeto
Jogador.
Duplo clique na condição

On collision with another object para inserí-la.
Uma outra janela será aberta para definirmos
o objeto, no caso o muro.
43
Selecione o objeto Muro.
Seu evento deve ficar como na imagem ao lado.

Se fôssemos ler seria:
• Jogador em colisão com o muro fazer; ou

• Quando o objeto Jogador colidir-se com o
objeto Muro faça.
44
Precisamos agora adicionar uma ação para fazer o jogador ser destruído ao se colidir com o muro e a
fase ser reiniciada. Para isso, clique no link Add action (adicionar ação) ao lado direito do evento. O
guia para adicionar uma ação irá aparecer:
Ação: Jogador > Destroy (Destruir)
45
Ação: System > Restart Layout
46
Em desenvolvimento de jogos, o que são eventos?
Descreva três eventos e uma ação do cotidiano.
Existe diferença entre evento e sub-evento? Justifique sua resposta

exemplificando.
47
CRIANDO SEU PRIMEIRO JOGO (aprimorando)
Nosso jogo está fácil demais. Temos que dificultá-lo para que se torne um sucesso! Como diz um ditado: “Sonhar
grande e sonhar pequeno dá o mesmo trabalho, por isso eu prefiro sonhar grande”. Para dificultar nosso jogo, é
preciso limitar os movimentos do objeto Jogador. Para isso, criaremos uma variável global.
C5.1 – LIMITANDO AS JOGADAS (global variable)
Para criar uma variável

global, clique com o botão
direito do mouse em sua
folha de eventos e selecione
Add global variable.
Nomeie a variável
como jogadas, com
o tipo numérico e
o valor inicial de
2150.
48
Folha de eventos após a

criação da variável global
Jogadas.
C5.2 - SUBTRAINDO VALORES DA VARIÁVEL

Sempre que o objeto Jogador movimentar-se pelo cenário, será subtraído 1 por cada pixel percorrido
por ele. Para isso precisamos criar tal evento.
Evento do objeto Jogador.

E Ação do sistema.
49
C5.3 - COMPARANDO VARIÁVEIS
Precisamos criar o evento: Quando o valor da variável global jogadas for menor ou igual a
zero, o objeto Jogador será destruído e o sistema irá reiniciar o layout.
Evento do sistema onde ele irá

comparar o valor inicial e o valor
final da variável global jogadas.
50
Folha de Eventos
até o presente
momento.
C5.4 - INSERINDO PLACAR

Na barra de camadas, como não
utilizaremos mais a camada principal,
vamos bloquear. Crie uma nova camada
e nomeie como placar. Sabendo que a
camada ativa é a ‘Placar’, insira um
objeto do tipo texto e posicione no
canto superior esquerdo de seu
cenário. 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).
51
Ajuste as propriedades do texto

conforme suas escolhas, como:
Tipo da fonte, tamanho, cor,
alinhamento, etc.
52
C5.5 - EXIBINDO O PLACAR COM O VALOR DA VARIÁVEL GLOBAL
Isso significa que geralmente a folha

A maioria dos monitores atualiza o de eventos é executada 60 vezes por
display 60 vezes por segundo, então segundo, redesenhando a tela em
o Construct 2 irá tentar igualar essa cada instante. Essa é a definição de
atualização para ter uma exibição um Tick - uma unidade de tempo
mais suave. para "executar os eventos e em
seguida redesenhar a tela".
Evento do sistema, Every Tick.

Ação do evento: objeto Placar,
parâmetro Set text.
53
Com base nos seus

conhecimentos até
o presente
momento,
complemente os
eventos restantes.
54
SALVANDO E PUBLICANDO NA SCIRRA ARCADE
C6.1 - SALVANDO SEU JOGO
1º Passo: Acesse o menu File (Arquivo).
2º Passo: Serão apresentadas algumas

opções, dentre elas: Save As Project
(Salvar como projeto, os arquivos ficam
separados) e Save As Single File (Salvar
como arquivo único). Após selecionada
a opção, salve seu jogo.
55
C6.2 - EXPORTANDO SEU JOGO PARA A SCIRRA ARCADE
1º Passo: Acesse o menu File

(Arquivo).
2º Passo: Selecione a opção Export

Project (Exportar Projeto).
56
3º Passo: Selecionar a plataforma.

No nosso caso, Scirra Arcade.
Obs.: A Scirra pede que os jogos

exportados para sua plataforma de
jogos estejam com a opção
Fullscreen in browser definida
como Letterbox Scale.
4º Passo: Selecionar o local de

exportação do jogo.
57
5º Passo: Acessar a Scirra Arcade. E criar

uma conta de desenvolvedor. Após criar
sua conta clique em Upload a Game.
6º Passo: Selecione o local onde salvou o

arquivo que você exportou. Após
escolhido, clique em Upload.
58
7º Passo: Preencher um simples

formulário com detalhes de seu jogo,
como por exemplo: nome do jogo,
descrição, instruções, categoria, entre
outros
8º Passo: Imagem publicitária do jogo. As

dimensões devem possuir 450px de
largura e 300px de altura. Clique em
upload para finalizar.
59
9º Passo: Confirme os termos para

publicação do game e em seguida clique
em Publish My Game.
Agora é só compartilhar o link entre seus

amigos.
60
Em sua próxima versão, aumente a dificuldade do

seu jogo diminuindo a variável global Jogadas e
inserindo objetos ao longo do labirinto (deverá ser
mais complexo); onde ao invés de subtrair, adicione
valores (de sua escolha) para tal variável.
61
CRIANDO UM JOGO DE PLATAFORMA
Jogo eletrônico de plataforma é o nome dado

a um gênero de jogos de videogame em que o
jogador corre e pula entre plataformas e
obstáculos, enfrentando inimigos e coletando
objetos bônus. Alguns dos mais conhecidos
são Super Mario Bros. e Sonic the Hedgehog
- Behavior Reference
62
DESCRIÇÃO DO SEU JOGO
Para ganhar o jogo, o personagem que deve Caso o jogador esbarre em tal objeto, é
coletar, ao longo de uma fase, 87 moedas e subtraída uma vida do total disponível pelo
encontrar o diamante. Durante o percurso, jogador; chegando a uma quantidade menor
canos giratórios são os obstáculos a serem ou igual zero o jogo será reiniciado.
vencidos.
63
OS OBJETOS
OS COMPORTAMENTOS
BLOCOS DIAMANTE CANO VERDE CHÃO JOGADOR
- Bound to layout;
- Solid. - Rotate. - Rotate. - Solid. - Scroll to;
- Platform.
64
Escreva os eventos e suas

respectivas ações:
65
CRIANDO A TELA INICIAL, MUDANÇA DE FASES E EXECUÇÃO DE SONS
Para uma melhor apresentação de seu jogo, tornando mais profissional, iremos
desenvolver uma tela inicial. Com o conhecimento deste capítulo, você também estará
apto a criar novas fases para seu jogo.
1º Passo: Na barra de projetos,

clique com o botão direito do
mouse sobre a pasta Layouts, em
seu projeto; e selecione Add
Layout.
66
2º Passo: Uma janela será

apresentada para que você
escolha entre Adicionar uma
folha de eventos para o
layout que está criando ou
criar um layout sem precisar
inserir uma nova folha de
eventos.
67
3º Passo: Seu novo layout foi criado e para que tenha uma melhor
organização de seu projeto, renomeie seus layouts e suas respectivas folhas
de eventos. Após renomear, clique e arraste o layout Tela Inicial para o topo,
para que o mesmo seja o primeiro a ser executado.
4º Passo: Utilizando a barra de projetos, apenas clique e arraste, para a tela Inicial o
objeto que deseja inserir. Insira um objeto do tipo botão para exemplificar um dos
tipos de mudança de layout (que você também pode chamar de fase).
68
PROGRAMANDO A PASSAGEM DE LAYOUT (FASE)
Na folha de eventos da tela inicial, crie um evento para quando botão for clicado o
sistema o direcione para o próximo layout.
Obs.: Você também pode escolher

um layout específico ou em uma
única folha para vários layouts
utilizar Go to next/previous layout
(dependendo do jogo, economiza
tempo).
69
EXECUTANDO SONS
1º Passo: Na barra de projetos, clique sobre a pasta

sounds e selecione import sounds. O Construct 2
recomenda o formato de áudio .WAV.
CRIANDO EVENTO PARA

EXECUÇÃO DE SONS
Quando o botão for clicado, além de

ser direcionado a um outro layout,
também deverá executar um áudio. A
ação será do objeto Audio com o
parâmetro Play.
70
Seu evento deve ficar

como na imagem ao
lado.
71
Utilizando os conceitos até o presente momento, crie

novas fases para os jogos criados e adicione sons para
respectivos eventos.
72
JOGO DE PLATAFORMA COM ANIMAÇÃO
Achou seu personagem parado demais? Então Para este exemplo, o jogo será composto por um
aprenderemos a inserir animações para os personagem que tem o comportamento
movimentos que seu personagem deverá executar. Plataforma. Não esqueça de inserir o objeto
Primeiramente, com base nos seus conhecimentos Keyboard.
até o momento, crie o cenário abaixo
73
COMPORTAMENTOS
MANIPULADOR BLOCO
- Platform;
- Bound to layout; - Solid.
- Scroll to.
Crie o seguinte evento:

Quando o objeto jogador colidir com o objeto pontas, a fase/layout deverá ser
reiniciado.
74
INSERINDO AS ANIMAÇÕES
Clique duas vezes sobre o objeto

para abrir o editor de imagens.
Uma janela de animações será
aberta. Se o seu Sprite possuir
áreas livres, utilize a ferramenta de
corte para excluí-las.
75
Para criar mais animações clique

com o botão direito do mouse na
área branca da janela de animações
e selecione add animation. Quando
criamos uma animação, é aberta
uma janela dos frames de sua
animação.
76
Para uma melhor organização,

renomeie as animações criadas para
que você não se confundo quando for
utilizá-las posteriormente. Para
inserir os frames de sua animação,
clique com o botão direito do mouse
na janela de frames de sua animação e
importe os arquivos desejados.
77
Após criar sua animação, remova as

áreas livres e delete o frame vazio.
Configure, na barra de
propriedades, a velocidade de sua
animação e o loop (repetição
contínua) conforme suas escolhas.
78
PROGRAMANDO AS ANIMAÇÕES
Fazendo o objeto jogador seguir o objeto manipulador e ocultar tal objeto.
Defina os pontos de origem para

uma melhor jogabilidade e
apresentação de seu jogo.
Quando o sistema iniciar o layout e quando

nenhuma tecla for pressionada, o jogador
permacerá com a animação parado. Quando o
jogador se movimentar para o lado esquerdo e
para o lado direito, deverá executar as
animações voltando e frente, respectivamente.
79
Todos os eventos desta simples prática.
80
Utilizando os conceitos até o presente momento, crie novos

jogos utilizando todos os conhecimentos aprendidos
durante este módulo.
81
www.cdpconnect.com.br

E-Book - Desenvolvimento de Jogos 2D

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

E-Book - Desenvolvimento de Jogos 2D

Enviado por

Direitos autorais:

Formatos disponíveis

DESENVOLVIMENTO

Nenhuma parte desta publicação poderá ser reproduzida ou

Todos os direitos reservados para CDP CENTRO DE 2

Autor: Rubens Junior

Ao criarmos um jogo no Construct 2, sua programação é

O Construct 2 é disponível em três versões: Free,

Links úteis ( pressionar tecla Ctrl + botão esquerdo do

Download Construct 2 (versão Free)

Super Mario Bros 3

2. O que é uma Game Engine?

4. Quais são as versões do Construct 2 e suas diferenças?

C1.2 - BARRA DE PROPRIEDADES

Na barra de propriedades, definimos para o Projeto, por

Na barra de status podemos visualizar informações como:

C1.3 - BARRA DE STATUS

C1.4 - BARRA DE CAMADAS

Na barra de camadas visualizamos e editamos informações como por

C1.5 - BARRA DE PROJETOS

A barra de projetos permite ao usuário editar informações em seu

C1.6 - BARRA DE OBJETOS

A barra de objetos permite ao usuário, editar objetos de seu

Não se preocupe caso feche sem querer qualquer uma das

CRIANDO SEU PRIMEIRO JOGO - cenário

- Meu primeiro Jogo

CP2.1 – CRIANDO UM PROJETO

Para criar um novo jogo, clicar em:

• New Project (na página inicial) ou

Ao criar um novo projeto vazio,

Na Barra de Propriedades, nomeie seu

Na Barra de Projetos, renomeie o Layout 1

CP2.2 – CONSTRUINDO O CENÁRIO

TILED BACKGROUND (PLANO DE FUNDO)

A primeira coisa que queremos é uma

Agora, clique duas vezes em um espaço no

CP2.2 – CONSTRUINDO O CENÁRIO

Precisamos agora definir o tamanho do nosso

Vamos examinar o nosso trabalho. Como alternativa, clique no Menu View e

ADICIONANDO UMA CAMADA

Precisamos inserir mais objetos em nosso jogo. Contudo,

Layouts podem consistir de múltiplas layers (múltiplas

Isso permite a você facilmente organizar quais objetos

Para administrar as camadas, clique na barra de

Você deve ver a Layer 0 na lista (a

Você deve ver a Layer 0 na lista (a contagem do

Isso significa que você não poderá selecionar

Você deve ver a Layer 0 na lista (a contagem do

Isso significa que você não poderá selecionar

ADICIONANDO O OBJETO IMPUT (ENTRADA)

Nota: Estes objetos não precisam ser colocados no layout. Eles

OUTROS OBJETOS DO JOGO

JOGADORES MURO DIAMANTE

Talvez você se pergunte: é sério isso?

Nota: outra maneira rápida de inserir objetos sprite é

Mova os sprites Jogador e Diamante para locais de

MAIS MUROS PARA O SEU LABIRINTO

Segurando a tecla Control, clique e arraste o objeto Muro.

O grau de dificuldade é definido por você.

1. Como iniciar um novo jogo?

2. Qual a diferença de Tiled background para Sprite?

3. Como duplicar objetos?

4. Qual a importância do conceito de camadas?

CRIANDO SEU PRIMEIRO JOGO (comportamentos)

Os comportamentos são Você também pode fazer isso através de