Escolar Documentos
Profissional Documentos
Cultura Documentos
Apostila 01 da
oficina
CONSTRUO DE
JOGOS COM
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.
Pelo fato de ser porttil, voc pode instal-lo em um pen drive e lev-lo com voc!
Baixar o Construct 2
Para fazer download do aplicativo,
entre no site da Scirra, e escolha a
opo download da verso gratuita.
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
Aps realizar o download do Construct 2 em sua verso gratuita, d um duplo clique sobre
ele para iniciar 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.
Escolha agora o local onde ser instalado o aplicativo e sero armazenados seus arquivos,
bibliotecas e afins.
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.
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
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
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.
72
Pronto! Agora seu game ser apresentado dentro do tamanho definido e nesta tela que voc
apresentar seu game.
800 px
600 px
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.
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.
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.
5 Insira dois sprites dos personagens que escolher. Defina nome para cada um deles.
Anotaes
77
Aula 11
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.
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.
79
600 px
680 px
600 px
1500 px
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):
80
Piso
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.
82
Cogumelos
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.
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.
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.
3) Agora necessrio configurar a animao para que o movimento seja mais rpido ou mais
lento e que prossiga ou no.
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.
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.
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.
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
De incio preciso inserir o teclado no projeto, que da mesma maneira que inserimos os
outros objetos.
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.
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:
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.
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.
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
Painel de pontuao
Para criar o painel de pontuao, indicado
inserir uma nova layer (camada) no projeto.
Em todo nome de objeto, layer, projeto importante evitar a utilizao de acentos ortogrficos
e variaes entre caixa alta e caixa baixa.
97
Ao escolher o objeto Texto, uma caixa de texto ser apresentada na layer.
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.
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.
Como em nosso game o trabalho de pontuao ser numrico, o tipo da varivel ser number.
Como a pontuao ser efetivada atravs do evento coliso entre personagem e objeto, essa
configurao precisa ser feita na folha de eventos.
99
A ao ser atribuir o valor 10 na varivel criada, que o Construct2 apresenta automaticamente.
Agora preciso criar uma ao para que os valores da varivel sejam apresentados no painel.
1
4
100
Atividades
1 Cria e nomeie uma nova layer para receber e apresentar a pontuao do personagem.
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.
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:
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.
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.
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:
Sempre que o personagem colidir com o inimigo (flecha), perder tambm 1 vida:
Reiniciar o game
Aps o personagem perder todas as suas vidas, o game ser concludo.
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.
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:
d) Morte do personagem;
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.
109
e como deve proceder para reinicializar o game.
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:
Quando a varivel vidas for igual a 0, o personagem ser destrudo e a imagem ficar visvel.
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
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.
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.
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.
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:
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.
116
Quando o sistema carragar o layout, toque a msica.
Onde:
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.
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.
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).
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.
121
Nesta caixa de dilogo, o Construct2 pedir para voc escolher a plataforma para a exportao
do game.
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!
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