U. E.

Edgar Tito Construo de Jogos com Construct 2

INSTITUTO FEDERAL DO PIAU

CEEP PROF. EDGAR TITO
CENTRO DE EDUCAO PROFISSIONAL PROF. EDGAR TITO
Prog. Ins. de Bolsas de Iniciao Docncia (PIBID)
COOR: Dr. Stephenson Galvo (IFPI)
Prof. Ranildo Lopes (CEPPE)
Prof. da Oficina / Autor da Apostila: Charles J L Miranda

Apostila 01 da
oficina
CONSTRUO DE
JOGOS COM

Visite nosso stio

http://ueedgartito.wordpress.com

Sua contribuio ... a

Presena e dedicao !!!
Obrigado pela preferncia da nossa ESCOLA !
https://ueedgartito.wordpress.com/ CEEP PROF. EDGAR TITO
 Sumrio

AULA 01 - LGICA DIGITAL 10

O que lgica? 11
Por que aprender lgica no curso de games? 12
Algoritmos 12
Scratch 12
O fascinante mundo Scratch 13
Interface do Scratch 14
Personagem 15
Movimentao do personagem 16

AULA 02 - Objetivo de um game 20

Definio de objetivo 21
Criao de cenrios 21
Objetos de cenrio 22
Efeitos sonoros 22
Algoritmos do game 23

AULA 03 - Interatividade e eventos 26

Interao com a estria 27
Troca de Cenrio 28
Salvar seu projeto 28

AULA 04 - Produo de um RPG 30

Escolha da tecnologia 31
Incio do projeto 31
Mapas 31
Tilesets 33
Organizao sonora (msicas e efeitos) 33

AULA 05 - Refinamento do projeto 36

Ajustes nos mapas 37
Eventos 38
Criao de eventos 38
Eventos avanados 40

AULA 06 - Batalhas e aes 44

Criao de batalhas (definio de adversrios) 45
Regras das batalhas 47
Personagens no jogveis (NPCs) 47

AULA 07 - Personalizao do jogo 50

Gerenciar recursos (edio de elementos) 51
Utilizao de recursos (Banco de dados dos elementos) 53

AULA 08 - Finalizao do jogo 58

Viso geral 59
Testes de qualidade (Q&A) 59
Compresso de dados 59
Extrao do jogo 60

AULA 09 - Criao de games 62

Construct 2 63
Indicaes deste aplicativo 63
Baixar o Construct 2 63
Instalao do Construct 2 64
AULA 10 - Ambiente para desenvolvimento de game 68
Interface do Construct 2 69
Conhea suas possibilidades 70
Iniciar um projeto 70
Configurao da rea ativa do game 72
Trocar cor de fundo do palco 73
Inserir sprite no palco 74
Salvar o projeto 75

AULA 11 - Criao de game plataforma 78

Definio da estria 79
Escolha da engine 79
Criao de cenrio 79
Personagem principal 83

AULA 12 - Configurao de personagem e objetos 88

Configurao do personagem 89
Configuraes dos objetos de cenrio 93
Colises 94

AULA 13 - Pontuao no game 96

Pontuao no game 97
Painel de pontuao 97
Varivel 98

AULA 14 - Vidas do personagem e inimigos 102

Vidas do personagem 103
Definio de condies 103
Criao das vidas do personagem 104
Varivel global 104
Apresentao das vidas na tela 105
Reiniciar o game 105
Ao dos inimigos 106

AULA 15 - Finalizao do game 108

Finalizao do game 109
Mensagem ao perder 109

AULA 16 - Tela inicial e udio 112

Tela inicial do game 113
Inserir tela inicial 113
Criar novo layout 114
udio no game 116
Msicas 116
Efeitos sonoros 117

AULA 17 - Exportao do game 120

Exportao 121
Como exportar o game do Construct2 121
Parabns! 122
Mercado Nacional de games 123
Mercado mundial de games 123
Aula 9

Criao de games
Construct 2
Indicaes deste aplicativo
Baixar o Construct 2
Instalao do Construct 2
 Construct 2
O Construct 2, desenvolvido pela empresa Scirra, uma ferramenta
gratuita baseada na linguagem Java que permite a usurios com apenas
conhecimentos de lgica, desenvolvam seus prprios games 2D em HTML5.

Com interface totalmente intuitiva e grfica, no requer experincia em

programao do desenvolvedor. Assim, voc s precisar ter boa vontade,
dedicao e muita criatividade. Esteja sempre atento nas aulas!

O Construct 2 feito para Windows, entretanto, como os games feito

nele so baseados em Java, linguagem multiplataforma, voc poder roda-los
normalmente em sistemas Android, IOS, Linux Desktop, Mac Desktop, Facebook,
celulares e computadores.

Pelo fato de ser porttil, voc pode instal-lo em um pen drive e lev-lo com voc!

Indicaes deste aplicativo

Jovens desenvolvedores que esto comeando a criar seus prprios games, mas no conhecem
ainda linguagens de programao;
Desenvolvedores que desejam criar games 2D com alta qualidade de produo;
Pessoas que desejam criar de maneira rpida, prottipos de novos games;
Estudantes que desejam melhorar sua qualidade tcnica em desenvolvimento de games para
conquistar melhores colocaes profissionais.

Baixar o Construct 2
Para fazer download do aplicativo,
entre no site da Scirra, e escolha a
opo download da verso gratuita.

Neste site voc ter um download

mais atualizado e confivel do aplicativo,
alm de poder conhecer alguns games
feitos com o Construct 2, manuais e
tutoriais, a loja da Scirra com diversos
games e complementos para os
aplicativos disponveis para compra.

63
 O mais interessante, que voc poder disponibilizar o game desenvolvido por voc para
download, alm de conhecer em quais sistemas sua aplicao rodar.

Instalao do Construct 2

Para realizar a instalao do Construct 2,

necessrio que o computador tenha pr instalado o
Microsoft Visual Studio, plataforma da Microsoft utilizada
por desenvolvedores de softwares.

Aps realizar o download do Construct 2 em sua verso gratuita, d um duplo clique sobre
ele para iniciar a instalao.

Agora siga os passos para configurar sua instalao.

Na caixa de dilogo apresentada, clique em Next para prosseguir a instalao.

64
 Na caixa de dilogo a seguir, voc aceitar ou no os termos de licena do aplicativo. Lembrando
que se no aceitar, o aplicativo no ser instalado.

Aps concordar, prossiga clicando em Next.

Escolha agora o local onde ser instalado o aplicativo e sero armazenados seus arquivos,
bibliotecas e afins.

Nesta opo, poder deixar na pasta padro ou definir outra.

O processo de instalao do Construct 2 ir perguntar se o seu sistema computacional de

32 ou 64 bits.

Caso no tenha certeza, deixe no modo padro de deteco automtica.

Agora, na simples instalao do Construct 2, a caixa de dilogo perguntar para voc se

desejas criar um cone em sua rea de trabalho e far a instalao dos arquivos do aplicativo.

65
 Para concluir a instalao, a prxima caixa de dilogo recomendar que voc atualize os
drivers grficos de seu computador para utilizar o aplicativo de maneira plena, a atualizao poder
ser feita de maneira automtica pela prpria instalao.

Outra opo que dever escolher ser sobre qual browser deseja utilizar para rodar suas
primeiras aplicaes. A Scirra recomenta o Google Chrome ou Mozilla Firefox, neste caso foi escolhido
o navegador Google Chrome.

Pronto!

O Construct 2 j est instalado em seu equipamento e pronto para lhe ajudar a desenvolver
games incrveis. Esse o cone que foi criado em sua rea de trabalho.

Aproveite, comparea s aulas e estude bastante.

66
 Atividades
1 Faa download da verso gratuita da engine Construct 2 e instale em seu computador.

2 Abra o software e conhea sua interface. Discuta com seus amigos o que acharam.

3 Monte um relatrio sobre suas primeiras impresses sobre a engine Construct 2 e envie por
e-mail ao seu professor.

Anotaes

67
Aula 10

Ambiente para
desenvolvimento de game
Interface do Construct 2
conhea suas possibilidades
Iniciar um projeto
Configurao da rea ativa do game
Trocar cor de fundo do palco
Inserir Sprite no palco
Salvar o projeto
 Interface do Construct 2
Quando abrir o Construct 2 pela primeira vez em seu computador, ele apresentar uma caixa
de dilogo para que voc defina se quer que sejam feitas atualizaes automticas no aplicativo.

Esta a interface do Construct 2, e neste ambiente que voc vai desenvolver games incrveis
de acordo com sua criatividade e empenho nos estudos. Na interface inicial, ser apresentada uma
tela de boas vindas.

69
 Conhea suas possibilidades

Nestas opes, voc poder criar um novo projeto, ou seu

projeto inicial e tambm abrir projetos j existentes.

Aqui encontrar na biblioteca do aplicativo, exemplos variados

de games desenvolvidos com o Construct 2, inclusive poder abri-los
para ver como foram feitos.

Seus projetos desenvolvidos recentemente sero listados nesta opo.

Manual, tutoriais, fruns de troca de informaes sobre o

aplicativo e a famosa loja, onde encontrar games e complementos
para comprar e agregar mais funcionalidades em sua plataforma.

Redes e mdias sociais da Scirra, com as ltimas novidades

sobre seus produtos.

Informaes para novos

usurios e sobre atualizaes de
upgrade do aplicativo.

Iniciar um projeto
Quando for iniciar um novo projeto, dever escolher um template para desenvolver seu game,
neste caso usaremos o padro.

O Construct 2 oferece dezenas de templates com configuraes especficas para que seu
game possa rodar em diferentes equipamentos.

70
 Abas para Botes para
desenvolvimento execuo e
do game na parte teste do game
visual e em aes
programadas

Configuraes
Apresentao do
gerais do layout rea, palco de contedo de arquivos
e outros objetos desenvolvimento e pastas do projeto
do game do game ou camadas

Informaes importantes

S aparecer na tela para o usurio do game, a

rea marcada pela linha tracejada.

71
 reas que sero utilizadas o tempo todo. A aba Layout
representa a parte visual do game que est sendo desenvolvido,
j a Event Sheet far toda a programao do game.

O controle de zoom do palco pode ser

realizado atravs das teclas + | - ou segurando a
tecla CTRL+ rotao do scroll do mouse.

O browser padro para apresentar o game,

pode ser configurado normalmente.

Configurao da rea ativa do game

O Construct 2 apresenta uma rea de palco extensa, porm s ser apresentado no game o
contedo que estiver dentro da rea pontilhada, portanto, mais interessante configurar e trabalhar
apenas com a rea que ser mostrada no game.

Foi escolhida a medida de

800 x 600 para apresentao
do game.

A mesma medida foi

definida no tamanho da janela.

72
 Pronto! Agora seu game ser apresentado dentro do tamanho definido e nesta tela que voc
apresentar seu game.
800 px

600 px

Trocar cor de fundo do palco

Um procedimento muito comum e simples o desenvolvedor querer trocar a cor de fundo do
palco utilizado no game. Para isso vamos alterar as configuraes de nossa layer principal.

Conseguir trocar a cor de fundo do palco, escolhendo a layer e na rea de configuraes,

alterar a opo de Background color.

As layers so camadas utilizadas pelo Construct 2 para dar uma melhor organizao e facilitar
a configurao dos sprites e objetos que sero utilizados no game.

o mesmo conceito utilizado pelos softwares de edio de imagem como o Photoshop, Photo
Paint e similares.

73
 Inserir Sprite no palco
Como j explicado, sprites so os objetos que daro vida ao game. No Contruct 2 simples
de inserir sprites:

Com o boto direito do mouse, clicar no palco; escolher a opo para inserir um novo objeto.

Escolha entre as opes apresentadas, a opo sprite.

Assim que a opo for escolhida, defina a rea que receber o sprite, e busque em seu
computador ou mdia removvel o sprite que quer utilizar.

74
 Salvar o projeto
Seu projeto dever ser salvo a cada etapa lgica concluda, para que nenhuma interrupo
involuntria faa seu projeto perder contedo e configuraes j definidas.

75
 A forma de salvar os projetos no Construct 2 semelhante a todos os outros aplicativos que
voc j conhece.

Nomeie seu projeto e escolha um local para que seja armazenado.

Seguindo esses passos seu projeto estar salvo com segurana.

76
 Atividades
1 Encontre na internet e faa download de personagens sprites para serem utilizados em
seus projetos.

2 Faa download na internet, se imagens em alta resoluo para servirem de fundo de palco
em seus projetos.

3 Inicie um projeto pelo Construct2, salve em seu pen drive ou disco virtual. Converse com seu
instrutor e defina medidas para Layout Size e Windows Size.

4 Insira um sprite de fundo de palco. Defina como fundo.

5 Insira dois sprites dos personagens que escolher. Defina nome para cada um deles.

Anotaes

77
Aula 11

Criao de game plataforma

Definio da estria
Escolha da engine
Criao de cenrio
personagem principal
 Definio da estria
Ser feito o desenvolvimento de um game estilo plataforma onde o personagem ser um
Smurf.

Esse personagem estar em uma floresta em busca de cogumelos mgicos. Cada cogumelo
que encontrar, ganhar 10 pontos.

O personagem estar sobre um piso formado por grama, e saltar por plataformas de grama
e troncos de rvore para alcanar os cogumelos.

Cada vez que o personagem cair das plataformas ou dos troncos, perder 10 pontos. Caso sua
pontuao chegue a 0, perder uma de suas 3 vidas iniciais.

Escolha da engine
Para nosso game estilo plataforma, ser utilizada a engine Construct2
em sua verso gratuita. As engines so motores, aplicativos utilizados para o
desenvolvimento de games digitais.

A escolha do Construct pelo fato de facilmente ser possvel exportar

nosso aplicativo para celulares, tablets e computadores.

Criao de cenrio
O cenrio para nosso game ser com Windows Size 800,600 (rea que ir aparecer de incio
na tela do computador ou celular) e Layout Size 1500, 680 para que nosso personagem percorra
toda rea do Layout com sensao de movimento do fundo do palco.

Ser utilizada uma imagem de fundo,

entretanto, possvel colorir a rea.

79
 600 px
680 px

600 px

1500 px

Ser neste ambiente j configurado que nosso game ir acontecer.

Escolhemos uma imagem em alta resoluo para ficar de fundo em nosso palco (frame). A
imagem um sprite que foi inserido normalmente como apresentado em aulas anteriores.

Dois passos importantes agora. Para no se atrapalhar mais pra frente, fundamental nomear
os sprites e layers. Ainda sobre a layer do fundo, para que possa manipular com tranquilidade os
outros sprites, vamos temporariamente bloque-lo para edio, para bloquear, basta um clique em
cima do cadeado.

Agora, outros sprites para completar o cenrio que so inseridos na mesma layer (fundo):

tronco cogumelo piso

80
Piso

Sobre o piso, alm de nome-lo, outra configurao a

ser feita em seus comportamentos (behaviors). Deve ser
definido como slido.

Para definir o piso como slido, escolher a opo behaviors. Em seguida, adicionar o
comportamento desejado. No caso do piso, o comportamento que ser escolhido slid.

81
 Tronco

Os troncos so sprites que sero inseridos no palco e nomeados, com o mesmo comportamento
do piso (slido) para que o personagem possa andar sobre ele. Para que no seja necessrio inserir
novamente o sprite tronco e piso, pois isso deixaria seu game mais pesado, utilizamos o processo
de copiar e colar o objeto Ser sobre os troncos e piso que nosso personagem ir se movimentar.

Para que tenha vrios pisos e troncos para o personagem se movimentar, basta usar o

comando CTRL+C | CTRL+V em cada objeto. Tudo na mesma layer, haja vista que a verso gratuita
permite a utilizao de apenas 4 layers.

Sequncia lgica de empilhamento de layers (camadas)

que pode ser alterada

82
Cogumelos

Tambm sprites, sero inseridos, copiados e colados da mesma maneira que

os troncos e pisos.

A ideia ser definir que ao tocar no cogumelo, o personagem ganhe pontuao e o cogumelo
seja destrudo.

Personagem principal
Agora, que voc j criou o cenrio inicial, est na hora de inserir o personagem
que ir interagir com este cenrio e dar vida ao game.

Use o personagem que preferir, aqui usaremos um Smurf.

Para que o personagem d a noo de

movimentao, baixamos da internet um quadro com vrios
sprites do Smurf.

O personagem ser inserido da mesma maneira, porm

com algumas observaes.

1) Ser criada uma nova layer exclusiva para personagem;

A layer fundo dever ser trancada.

83
 2) No momento de procurar o sprite, escolheremos a opo import image strip, que adicionar
o quadro todo de sprites que foi baixado da internet.

Aps escolher o quadro de sprites, informamos

quantas clulas horizontais e verticais iremos
utilizar deste quadro. Neste caso, utilizaremos estes
valores, porm dependendo do quadro os valores
podero variar.

Em seguida, todos os sprites do quadro

sero inseridos no Animation Frames. Dentro deste
quadro, o frame 0 por estar vazio deve ser excludo.

Ainda no personagem, importante utilizar a ferramenta Crop para centralizar o personagem

dentro do frame. necessrio fazer em cada quadro.

84
 Para testar a animao quadro a quadro, clique na opo Preview. A animao foi nomeada
de Andar.

Agora necessrio criar uma animao, com apenas um quadro para representar o estado de
Parado. importante escolher um quadro que esteja de acordo com a idia da animao.

Pronto! Agora temos duas situaes de animao: Andar e Parar.

3) Agora necessrio configurar a animao para que o movimento seja mais rpido ou mais
lento e que prossiga ou no.

Essa configurao realizada no quadro:

85
 A partir de agora, o personagem est dentro do cenrio. Realize o teste no navegador com o
boto

86
 Atividades
1 Defina a estria para um game estilo plataforma, onde o personagem principal dever
interagir com objetos ou outros sprites ganhando e perdendo pontos. Elabore qual ser
o personagem e quais sero os outros objetos do game, nvel e resultado da interao
entre eles, o ambiente que acontecer a estria (se em uma cidade, floresta, deserto) e
onde personagem ir de movimentar. Faa um rascunho da estria no papel e assim que
terminar, digite em um documento do Microsoft Word com o nome roteiro.

2 Monte uma pasta em seu pen drive ou disco virtual e faa download dos sprites e
imagens que sero utilizados em seu game (imagens para o fundo, piso, plataformas,
objetos e personagens).

3 Desenvolva o cenrio do game com medidas definidas por voc ou sua equipe. Crie uma
layer definida como fundo e insira sprites para o plano de fundo, piso, plataformas e
demais objetos do game. Deixe a camada travada.

4 Atribua comportamento para os objetos da camada fundo.

5 Faa uma nova layer, nomeando como personagem. Insira o personagem ou personagens
do game, j definindo suas animaes de parado, andando e demais animaes que
deseje que ele faa.

Anotaes

87
Aula 12

Configurao de
personagem e objetos
Configuraes do personagem
Configuraes dos objetos de cenrio
Colises
 Configurao do personagem
Agora sero definidas as configuraes para deixar o personagem com comportamentos
adequados para game de plataforma. Desta maneira ele se movimentar para a direita, para esquerda,
e poder saltar entre os objetos de cenrio.

Quando a opo Behaviors selecionada, podemos incluir comportamentos ao nosso

personagem ou objeto selecionado. Segue a sequncia lgica que a engine apresentar para definio
do comportamento plataforma.

Agora preciso atribuir programao lgica ao personagem. Esse

trabalho realizado na aba folha de eventos (Event Sheet).

A primeira configurao lgica: Quando o personagem sair do layout do game, volte

posio inicial.

Para que esta lgica acontea: 1 Add event 2 escolher o personagem 3 definir a
condio 4 atribuir uma ao.

89
 1 2

3 4

Aps as configuraes acima, informaremos posio que o personagem dever assumir aps
sair do layout do game. Aps concluir, importante executar o teste do game.

Outro comportamento (Behaviors) interessante sobre o personagem, o ScrollTo.

Este comportamento centraliza a viso sobre ele, dando a sensao de movimento no cenrio,
pois para onde ele se mover a tela o acompanhar.

90
Relacionar movimentao com o teclado

Tendo o personagem com comportamento definido para plataforma,

necessrio agora relacionar sua movimentao com as teclas direcionais
do teclado.

De incio preciso inserir o teclado no projeto, que da mesma maneira que inserimos os
outros objetos.

Agora com o teclado fazendo parte do

projeto, possvel utiliz-lo na folha de eventos
(Event sheet).

O novo evento ser sobre o objeto

teclado (keyboard).

A primeira condio que ser definida ser

enquanto a tecla for pressionada

91
 Em seguida, necessrio definir qual a
tecla que ser pressionada.

Para escolher uma tecla, basta pression-la. Neste caso foi pressionada a tecla seta para a
direita. Em seguida basta confirmar.

Agora que a condio foi

proposta, a tecla foi escolhida,
preciso definir qual ao, atravs
do Add action.

A animao (ao) ser no objeto Smurf

O espelhamento horizontal definido para que o personagem possa virar para a esquerda
e direita. Onde direita definido Not mirrored (sem espelhamento) e esquerda, Mirrored
(espelhado).

92
 O evento Plataform On landed foi definido com a animao parar para que o personagem
fique na posio parado assim que o game iniciar.

Veja agora a folha de estilo e lembre-se de inserir comportamentos de acordo com o que
pretende que o personagem faa:

Configuraes dos objetos de cenrio

Temos alguns objetos no cenrio que devem receber programao de eventos e aes.

tronco cogumelo piso plataforma

Plataforma e tronco: Para que o personagem possa pular sobre a plataforma, estando embaixo
da mesma, devemos atribuir ela um comportamento de Jumpthru.

Piso: O piso dever manter um comportamento padro slido para que o personagem possa
se manter sobre ele.

93
 Colises
As colises so muito importantes para a concluso da maioria dos games e em nosso projeto,
ser fundamental.

So os momentos que o personagem encosta nos objetos determinados. Os envolvidos na

coliso sero: o personagem e os cogumelos;

Definiremos na folha de eventos a seguinte lgica: Quando o personagem colidir com o

objeto cogumelo, este objeto dever desaparecer.

Segue a programao feita na folha de eventos. Aps configurar, realize os testes.

94
 Atividades
1 Configure o comportamento do personagem como plataforma e Scroll To.

2 Defina na folha de eventos que ao sair do layout, o personagem dever voltara posio
inicial do game.

3 Relacione a movimentao do personagem com as setas direcionais do teclado.

4 Defina as colises entre personagem e objetos.

Anotaes

95
Aula 13

Pontuao no game
Pontuao no game
Painel de pontuao
Varivel
 Pontuao no game
Para que o game de plataforma se torne completo, vamos inserir pontuao a cada coliso que
o personagem fizer com os objetos determinados.

Quais objetos?

Cogumelos

Cada cogumelo coletado por nosso personagem ser atribudo a

ele o valor de 10 pontos.

Para que a pontuao seja exibida ao jogador, necessrio criar

um painel de pontuao.

Painel de pontuao
Para criar o painel de pontuao, indicado
inserir uma nova layer (camada) no projeto.

Essa layer ser renomeada de pontos.

Em todo nome de objeto, layer, projeto importante evitar a utilizao de acentos ortogrficos
e variaes entre caixa alta e caixa baixa.

Na layer criada, inserido o objeto texto.

O objeto inserido da mesma forma realizada nos outros objetos.

97
 Ao escolher o objeto Texto, uma caixa de texto ser apresentada na layer.

Veja a seguir edies feitas:

Contedo da caixa
de texto, fonte,
tamanho e cor

Outra configurao que precisa ser feita na layer pontos, onde os valores da propriedade
Parallax sero alterados para 0,0.

A propriedade Parallax foi alterada para que o painel de pontuao possa acompanhar o
personagem pelo cenrio do game. Escolha um bom local no cenrio para inserir o painel, ateno
ao contraste de cores e boa sorte. Realize os testes!

Varivel
Para que a pontuao seja armazenada e atualizada automaticamente aps cada coliso, uma
varivel precisa ser criada.

Uma varivel (muito conhecida na rea de desenvolvimento em programao) um espao

definido que receber valores que podero ser atualizados, aumentando ou diminuindo.

98
Criao de varivel

Como nossa varivel estar diretamente ligada ao painel de pontuao, dentro de suas
propriedades que a varivel ser criada.

Ao escolher a propriedade Instance variables, uma nova janela se abrir que a varivel seja
configurada e nomeada.

Conhea as configuraes da varivel:

Name: nome que ser dado varivel;

Type: tipo da varivel, podendo ser Text, Boolean e Number.
Initial value: valor inicial que a varivel receber.

Como em nosso game o trabalho de pontuao ser numrico, o tipo da varivel ser number.

Atribuir varivel ao evento

Como a pontuao ser efetivada atravs do evento coliso entre personagem e objeto, essa
configurao precisa ser feita na folha de eventos.

No primeiro momento necessrio ir at o evento de coliso entre personagem e objeto,

atribuir uma nova ao (Add action) relacionada ao painel que foi criado.

99
 A ao ser atribuir o valor 10 na varivel criada, que o Construct2 apresenta automaticamente.

Portando, a cada coliso a varivel criada receber o valor 10.

Agora preciso criar uma ao para que os valores da varivel sejam apresentados no painel.

1
4

Lembre-se que livre para explorar novos eventos e nossas aes.

Realize os testes e divirta-se!

100
 Atividades
1 Cria e nomeie uma nova layer para receber e apresentar a pontuao do personagem.

2 Defina e programe na folha de eventos, pontuaes relacionadas com as colises entre

personagem e objetos.

3 Apresente a pontuao na layer criada na atividade 1.

Anotaes

101
Aula 14

Vidas do personagem
e inimigos
Vidas do personagem
Definio de condies
Criao das vidas do personagem
Varivel global
Apresentao das vidas na tela
Reiniciar o game
Ao dos inimigos
 Vidas do personagem
Todo game de plataforma para fazer
sentido, alm de pontuao ele precisa
ter includo um nvel de risco para que o
personagem perca o jogo, na linguagem dos
games para que o personagem morra.

Dentro do roteiro do game, precisam

existir eventos que causem perda de pontos ou
de energia, vidas, etc. A quantidade de vidas
j precisa estar previamente definida.

Definio de condies
Para que o personagem possa perder vidas ou pontos, necessrio criar condies para que
esses eventos ocorram.

Entretanto, at mesmo antes das condies necessrio definir regras para a programao de
eventos e aes do game.

Seguiremos a regra:

Personagem iniciar o game com pontuao 0 e total de 3 vidas. A pontuao no

poder ser negativa.

Agora que temos a regra, partiremos para as condies:

a) Quando o personagem sair do layout do game, perder 10 pontos e 1 vida, e ainda

voltar a posio inicial do game;
b) Sempre que o personagem colidir com o inimigo (flecha), perder tambm 1 vida;
c) Quando a pontuao for menor que 0, o painel de animao ir manter 0;
d) Caso as vidas cheguem a 0, o personagem ser destrudo e termina o game.

103
 Criao das vidas do personagem
Para definir vidas ao personagem, tambm ser necessrio criar uma nova varivel, dessa vez
na folha de eventos.

Conseguir chegar nesta janela, ao clicar com o boto direito do mouse na folha de eventos.
Foi dado o nome vidas para a varivel com valor inicial 3.

A varivel continuar sendo numrica, sendo desnecessrio inserir informaes de descrio.

A opo Constant dever se manter desabilitada.

Varivel global
Como a pontuao e as vidas devem acompanhar o personagem
e funcionar em demais fases que eventualmente o game possua,
necessrio que a varivel seja global, para que funcione em todo o projeto.

Definida a varivel vidas, e necessrio definir as condies e aes

na folha de eventos (Event sheet).

104
 Apresentao das vidas na tela
Aps criar a varivel vidas, ela precisa ser mostrada na tela juntamente com a varivel
pontos em todo decorrer do game. Estas definies na folha de eventos:

Aplicao das regras na folha de eventos:

Quando o personagem sair do layout do game, o sistema subtrair 10 pontos e 1 vida:

Sempre que o personagem colidir com o inimigo (flecha), perder tambm 1 vida:

Quando a pontuao for menor que 0, o painel de animao ir manter 0:

Caso as vidas cheguem a 0, o personagem destrudo e termina o game:

Reiniciar o game
Aps o personagem perder todas as suas vidas, o game ser concludo.

Para que o usurio continue a jogar, necessrio reiniciar o game.

A programao para o reinicio bastante simples, deve ser feita tambm

na folha de eventos.

Na folha de ventos, foi programado que ao acionar a tecla R game ser recarregado e as
variveis reinicializadas. Pode-se usar outra tecla qualquer.

105
 Ao dos inimigos
Para que o game fique mais emocionante e criativo, importante que existam inimigos e que
estes tenham movimentao dinmica para subtrair vidas, energia ou pontos do personagem
aps cada coliso.

O inimigo pode ser um sprite semelhante ao personagem ou um objeto criado no prprio

Construct 2.

Trabalhe na propriedade Behaviors do objeto definido como inimigo e conhea o que faz
cada possibilidade. Uma das mais utilizadas a Sine. Alm de alterar o comportamento necessrio
programar a coliso na folha de eventos.

106
 Atividades
1 Defina regras e condies para seu game e mostre ao seu instrutor.

2 Crie em seu projeto game, uma nova layer que receber o painel de vidas e pontuao,
portanto, defina:

a) Ganho e perda de pontos baseado em colises;

b) Programar 3 vidas para o personagem;

c) Definio de perda de vidas baseada em colises;

d) Morte do personagem;

e) Reinicio do jogo com reinicializao variveis atravs de tecla.

Anotaes

107
Aula 14

Finalizao do game
Finalizao do game
Mensagem ao perder e vencer
 Finalizao do game
Aps todo o desenvolvimento do projeto do game, necessrio que seja encerrado com
vitria ou derrota do personagem.

A definio se vai fechar uma fase ou o game completo depender do planejamento que foi
feito no inicio do projeto.

Mensagem ao perder e vencer

Quando o personagem perder a quantidade de
vidas definida para ele completamente lgico que
este seja destrudo.

Para que o game fique mais profissional e interativo

com o usurio, interessante apresentar uma mensagem
na tela.

indicado apresentar a mensagem com o resultado

109
 e como deve proceder para reinicializar o game.

Para a destruio do personagem,

possvel inserir uma imagem e seguida com as
informaes: VOC PERDEU....

Esta foi montada com um editor de

imagens simples. Pode ser o Photoshop, Gimp,
Corel Photo Paint ou at mesmo o Power Point.

A imagem foi inserida como sprite na camada pontos.

Aps isso, foi alterada a propriedade de visibilidade da imagem. Com esta alterao a imagem
estar exatamente nesta posio, entretanto ficar invisvel durante o game:

Feito isso, a seguinte lgica foi aplicada:

Quando a varivel vidas for igual a 0, o personagem ser destrudo e a imagem ficar visvel.

Veja a programao feita na folha de eventos:

A imagem foi nomeada como perdeu.

Foi criada outra imagem para representar

a vitria no game e a mesma lgica aplicada. A
imagem foi nomeada como venceu.

Quando a varivel pontos for igual a 200,

a imagem venceu estar visivel.

Veja a folha de eventos, segue a mesma programao anterior:

110
 Atividades
1 Utilize o editor de imagem que preferir e crie uma arte para informar resultados de vitria
e derrota em seu game.

2 Faa a programao das finalizaes de vitria e derrota em seu game de acordo com a
lgica adotada no incio do projeto.

Anotaes

111
Aula 16

Tela inicial e udio

Tela inicial do game
Inserir tela inicial
Criar novo layout
udio no game
Msicas
Efeitos sonoros
 Tela inicial do game

Por padro, todo projeto possui telas

iniciais como logo da empresa desenvolvedora,
patrocinadores e para o usurio escolher se
quer iniciar o game entre outras opes.

Para que seja criada a tela inicial,

ou mesmo uma nova fase para o game
necessrio inserir um novo layout ao projeto.

Inserir tela inicial

Para criar a tela inicial, voc pode
utilizar um editor de imagens como
Photoshop, Corel Draw, Photo Paint e
desenvolver a imagem de fundo.

Alm de criar a imagem, tambm

poder utilizar imagens da internet que
estejam em alta resoluo.

Lembre que na tela inicial poder

inserir o logo de sua empresa ou mesmo de

113
 patrocinadores do projeto.

Aps a escolha da imagem que ficar no fundo da tela inicial, fundamental inserir um boto
para que o usurio inicie o game.

Este boto pode ser baixado da internet ou tambm criado em

editor de imagens.

Seja criativo, utilize todo o potencial de Designer Grfico para deixar sua tela inicial bem
atrativa.

Lembre sempre de utilizar imagens com extenso .png, pois o fundo transparente ajuda muito
no desenvolvimento grfico do projeto.

Criar novo layout

Para criar um novo layout no projeto, habilite a barra de projeto Project Bar.

Agora clicar com o boto esquerdo do mouse sobre a opo Layouts e adicionar um
novo layout.
Nomeie o novo layout adicionado para que fique fcil entender e manipular ele e os demais
objetos e programao que sero inseridos dentro dele.

O Construct 2 apresenta em seguida uma caixa de dilogo para que o desenvolvedor adicione
tambm uma nova folha de eventos.

A folha de ventos importante que seja adicionada para que no decorrer do desenvolvimento
do projeto, fique fcil localizar a programao de um ou outro layout.

114
 Alm dos layouts, fundamental para sua organizao, nomear as folhas de evento (Event
sheets).

Com o novo layou criado, inserir os sprites que sero o fundo e sobre ele outro sprite que ser
o boto, cada um dentro de uma layer especfica.

Pronto! Agora existem dois layouts no projeto.

Dentro da folha de eventos do layout abertura,

deve ser feita a programao para que a cada clique no
boto, o aplicativo v ara o layout do game.

Mas para que isso acontea, necessrio adicionar

no layout abertura, o objeto mouse, que ser responsvel
pelo clique que o usurio far no boto.

Veja como fica a folha de eventos:

115
 udio no game
Arquivos de udio, como efeitos sonoros e msicas de fundo so importantes para dar mais
vida ao game. Dentro da engine Construct 2 h duas pastas para arquivos de udio:

Music reservada para msicas;

Sound efeitos sonoros mais curtos.

Msicas
Seguindo o que foi feito com os objetos teclado e mouse, inserir o objeto udio dentro do projeto.

Feito isso, necessrio importar a msica escolhida para a pasta Music que est dentro do projeto.

A engine converter o arquivo para que seja reconhecido por todos os browsers e
sistemas operacionais.

Na folha de eventos foi feita a seguinte programao:

116
 Quando o sistema carragar o layout, toque a msica.

Onde:

Audio file arquivo de udio;

Loop a msica pode terminar e reiniciar;

Volume atenuao em decibis (dB) onde

0 o volume original.

Efeitos sonoros

Para que o projeto fique organizado e com facilidades de correo, os efeitos sonoros devem
ser adicionados dentro da pasta sounds.

Seguiu a mesma lgica que a msica, neste caso o som tocar em cada coliso do
personagem com o objeto cogumelo.

Segue a dica de um site que possui um acervo bem legal de efeitos sonoros que podem ser
utilizados gratuitamente.

117
 Realize os testes em seu projeto e veja como ficou seu game!

118
 Atividades
1 Faa download de imagens em alta resoluo da internet e utilizando um editor de
imagens de sua preferncia, desenvolva uma imagem para tela inicial de seu game.

2 Inserir a imagem criada em um novo layou de seu game.

3 Desenvolva um boto Jogar e insira sobre a imagem que ficar na tela inicial.

4 Programe o boto na folha de eventos, para que ao ser pressionado, carregue o game.

5 Adicione msica de fundo e efeitos sonoros nas colises de seu game.

Anotaes

119
Aula 17

Exportao do game
Exportao
Como exportar o game do Construct2
Parabns!
Mercado nacional de games
Mercado mundial de games
 Exportao
Para que o game possa ser utilizado, necessrio exportar para que
funcione em algum tipo de plataforma (celular, Xbox, pc...). Antes de exportar
verifique se o aplicativo JAVA est instalado corretamente em seu computador,
caso no esteja, faa o download de acordo com a plataforma de seu sistema
(32 ou 64 bits).

Exportar deixar o game pronto para ser utilizado por um usurio.

Alguns tipos de exportaes so restritas s verses pagas da engine.

Para que voc desenvolva games e publique com total liberdade na internet, alm de ter muito
mais funcionalidade para utilizar, indicado estar com a verso paga do Construct 2.

Como exportar o game do Construct2

Veja como exportar o game:

121
 Nesta caixa de dilogo, o Construct2 pedir para voc escolher a plataforma para a exportao
do game.

Nesta janela, informados alguns parmetros da exportao, s avanar.

Pronto! Seu game j foi exportado como HTML5 e pode rodar normalmente no browser ou
ser linkado em um site.

Parabns!
Se voc chegou at o final da apostila, voc se tornou um Desenvolvedor de Games.

Continue seus estudos, se aperfeioe cada vez mais que sua profisso pode ser esta.

Com certeza notou que desenvolver um projeto de game exige criatividade, lgica, conceitos
de designer grfico e uma boa condio de criar e interpretar textos, alm de conhecer as
tendncias em entretenimento das pessoas.

122
 Mercado Nacional de games
Apesar de algumas pessoas ainda pensarem
que games so inocentes brincadeiras, eles so
algo muito srio inclusive na realidade econmica
mundial. O mercado brasileiro de games online
deve atingir US$ 2 bi em 2014 e no para de
crescer!

O desenvolvimento de software uma rea

definitivamente ilimitada, em franca expanso,
onde praticamente no h falta de emprego alm
de oferecer altos salrios e condies de trabalho
excelentes.

Nos prximos anos o mercado nacional de

games tende a crescer dobro do esperado para
a mdia mundial, de acordo com a pesquisa da
consultoria holandesa Newszoo.

O nosso mercado, mercado brasileiro de games est entre os

maiores do mundo, ficando atrs apenas de pases como Estados
Unidos, Rssia e Alemanha. Com aproximadamente 40 milhes de
jogadores apaixonados, destaque tambm em desenvolvimento.

Enquanto no Brasil alguns ainda acreditam que apenas o

pas do futebol, existem jovens e adultos ficando milionrios com o
desenvolvimento de games e aplicativos digitais.

Mercado mundial de games

Ao lado das indstrias literrias, fonogrficas e
do cinema, o mercado de games configurado como
um dos mais importantes no segmento entretenimento,
portanto se voc for um desenvolvedor alm de ter
possibilidades reais de alta lucratividade, poder
trabalhar em qualquer lugar do mundo.

Em 2010, com um movimento de

aproximadamente US$ 59 bilhes o mercado
mundial de games faturou mais que o cinema com
aproximadamente US$31,8 bilhes. Pesquisas
mostram que a venda de games devero ultrapassar
US$ 82 bilhes em 2015;

A regio sia Pacfico at 2014 lidera como maior mercado mundial de games, com 40%
de participao.

123
 Atividade FINAL
1 Revise seu projeto, exporte seu game e divirta-se!

Anotaes

124