Iniciando com Construct2

Prévia do material em texto

Iniciando com Construct2
Lara Popov Zambiasi Bazzi Oberderfer
E-mail: lara.popov@ifsc.edu.br
URL: http://professores.chapeco.ifsc.edu.br/lara/
 
Técnicas para desenvolver Jogos
● https://msdn.microsoft.com/pt-br/library/dn189151
.aspx
●
 
HTML5 X Construct2
● O HTML5 é uma alternativa para desenvolvedores de 
games, principalmente para o mundo móbile, pois tem 
como enorme vantagem criar jogos multiplataforma, ou 
mais precisamente, sem plataforma. 
● Com ele você pode criar jogos de RPG, simulação, 
tabuleiro e por aí vai, quase que sem restrições. 
● Para os leigos em HTML5 e em linguagens de 
programação, o Construct 2 seria a solução dos 
problemas.
 
Construct2
 
Construct2
● A IDE foi desenvolvida pelo grupo Scirra e é recomendado para 
o desenvolvimento de jogos em 2D, porém, nada o impede de 
experimentar outros estilos de games.
● O Construct 2 possui como única desvantagem a sua execução 
somente no sistema operacional Windows.
● O programa atualmente possui as versões paga e free. 
● Na versão free é possível criar apenas quatro camadas (layers) 
no máximo, já na versão paga não há limites. É perceptível que 
a versão free não fica tão atrás da versão paga.
 
A IDE e seu funcionamento
● O manuseio do programa é algo muito simples. 
● Pessoas sem qualquer experiência em criação de jogos 
conseguem utilizar a IDE sem problemas. 
● É interessante que pessoas que desejam começar a 
desenvolver jogos e não gostam tanto da parte de 
programação utilizam este tipo de ferramenta, pois não 
exige tanto do desenvolvedor a programação e deixa-o 
bem próximo da realidade do processo de 
desenvolvimento de um game.
 
A IDE e seu funcionamento
● O primordial é ter em mãos as imagens, sons, efeitos sonoros, enfim, 
toda a parte visual e áudio do seu jogo. 
● Os eventos e iterações de teclado, mouse, touchscreen e outros fica 
por parte do Construt 2.
● O desenvolvedor do game adiciona os códigos, mas de uma maneira 
indireta, de forma que qualquer desenvolvedor com apenas a lógica 
da programação consiga desenvolver seus jogos sem dificuldades. 
● Para ser mais especifico os códigos que o desenvolvedor precisa 
entender é bem semelhante ao famoso pseudocódigo ou então 
"portugol".
 
Particularidades do programa
● Existe uma lista chamada Event Sheet e nela 
que você acrescenta seu código de maneira 
intuitiva e simples. 
● Com apenas alguns clicks é possível 
acrescentar um bloco de código inteiro, ou 
então, criar funções que manualmente 
demoraria o triplo ou quem sabe cinco vezes 
mais do que utilizando a Folha de Eventos.
 
Folhas de Eventos
 
Particularidades do Programa
● Existe um mini editor de imagens integrado, 
sem a necessidade de utilizar um plugin. No 
editor você pode cortar, girar, inverter a 
imagem, alterar a cor, criar uma animação 
com uma sequência de imagens.
 
Editor de Imagens
 
Particularidades do Programa
● Outra particularidade do programa que não pode 
ser isolada é o painel "Layers", onde é possível 
posicionar os objetos em camadas diferentes, 
semelhante ao Photoshop da Adobe. 
● A partir dessas camadas é possível atribuir 
comportamentos diferentes para cada uma, 
organizando bastante o trabalho do 
desenvolvedor.
 
Layers / Camadas
 
Particularidades do Programa
● O Contruct 2 também possui uma janela para exportar o projeto, 
em formato:
– para web, 
– Mobile,
– PC, 
– formato Scirra Arcade (site onde ficam os jogos criados por usuários 
do site), 
– Chrome Web Store, 
– Kongregate, 
– Windows 8 Metro app e outros.
 
Particularidades do Programa
● Tipos de Jogos:
– Plataforma
– Quiz
– Flap
–
– http://pt.slideshare.net/ThyagoMaia/androidos-ii
 
 
Criando um Jogo passo-a-passo
● https://www.scirra.com/tutorials/262/comeando
-com-o-construct-2-tutorial-in-portuguese
●
 
Nosso Jogo
 
Começando com o CONSTRUCT 2
● Inserindo Objetos
● Tiled Background
● Adicionando uma camada (Layer)
● Adicionando comportamentos (Behaviors)
● Como adicionar um comportamento
● Adicionando mais comportamentos
● Criando alguns monstros
● Eventos
● Sobre eventos
● Condições, ações e sub-eventos
● Seu primeiro evento
● Adicionando funcionalidade de jogo
● Colocando o jogador para atirar
● O efeito de explosão
● Fazendo os monstros um pouco mais 
inteligentes
● Variáveis de Instância
● Mudando os eventos
● Mantendo a pontuação
● Criando um heads-up display (HUD)
● Toques finais
● Conclusão
 
Links para objetos
● http://opengameart.org/content/platformersidescro
ller-tiles-and-backgrounds
http://opengameart.org/textures/all
● http://www.gameartguppy.com/
● http://www.mapeditor.org/
● http://subtlepatterns.com/
● http://bgrepeat.com/
● http://www.grsites.com/archive/textures/
 
Tiled Background
● http://opengameart.org/sites/default/files/gras
s_14.png
Dê um clique duplo na área de 
layout para inserir um novo 
objeto (outra forma é clicar com 
o botão direito e selecionar 
Insert new object). 
Quando a janela Insert new 
object aparecer, dê um clique 
duplo em Tiled Background 
object para inserí-lo.
 
Tiled Background
● Uma cruz aparecerá para você indicar onde 
colocar o objeto. Clique em algum lugar 
próximo ao centro do layout. 
● Vamos importar a imagem que salvamos 
antes. Clique no ícone da pasta, procure pelo 
arquivo de antes, e selecione-o.
 
Tiled Background
● Feche o editor de texturas. 
● Agora você pode ver o seu objeto tiled background no layout. 
● Vamos redimensioná-lo para cobri todo o layout.
● Certifique-se de selecionar o objeto, depois olhe nas opções à 
esquerda.
● Essa é a Properties Bar, que inclui várias 
características do objeto, inclusive, 
tamanho (size) e posição (position).
● Position: 0, 0 (o canto superior esquero)
● Size: 1280, 1024 (o tamanho do layout).
Importante: 
Sempre lembre de
 salvar seu projeto!
 
ZOOM + -
● Vamos ver como ficou. 
● Segure control e role a roda do mouse para trás 
para afastar o zoom. 
● Alternativamente, você pode clicar em view - 
zoom out algumas vezes. 
● Você também pode segurar o espaço, ou o botão 
do meio do mouse, para movimentar o layout.
 
Configurando Layout
● Layout size: 1280, 1024
● Igual a imagem do fundo carregado.
● Faça control+0 ou clique em view - zoom to 
100% para retornar à visão 1:1.
● Se você é impaciente, clique no ícone 'Run 
Layout', na parte de cima, e o navegador será 
aberto exibindo a sua textura de fundo!
 
 
Adicionando uma camada 
(Layer)
● Agora, nós queremos colocar mais objetos.
● Vamos usar o sistema de camadas (layering system) para fazer isso.
● Layouts podem conter várias camadas (layers), que você pode usar 
para agrupar objetos. Imagine as camadas como folhas 
transparentes, uma em cima das outras, com objetos pintados em 
cada uma. 
● Desta forma você organiza facilmente os objetos que aparecem, 
esconde ou tranca as camadas, aplica efeitos e muito mais. Por 
exemplo, neste jogo, queremos que tudo seja mostrado EM CIMA do 
tiled background. Então, façamos outra camada (layer) em cima dele 
para os outros objetos.
 
Adicionando Layer
● Vá em Layers
 
Adicionando Layer
● Clique no ícone do lápis e RENOMEIE para “Fundo”. 
● Este será a nossa camada de fundo (background layer). 
● Agora clique no ícone da cruz verde para adicionar outra 
camada. 
● Vamos chamá-la de Main. 
● Finalmente, se você clicar no pequeno cadeado ao lado 
de Background, ele estará travado. Isto significa que 
você não poderá selecionar nada que esteja nele.
 
Adicionando Layer
● Certifique-se quea camada 'Main' está 
selecionada. A camada selecionada é 
a que vai estar ativa. 
● Todas as novas inserções de objetos, 
serão na camada ativa. Se ele não 
estiver selecionada, vamos colocar 
objetos na camada errada. 
● A camada ativa é mostrada na barra de 
propriedades (Properties bar), no lado 
esquerdo da tela. Basta ver o campo 
Active Layer e ver se o nome que 
aparece ao lado é da camada correta.
 
● No layout, dê um clique duplo para inserir um 
novo objeto.
● Desta vez, selecione Mouse object, pois vamos 
precisar de uma entrada de mouse. Faça o 
mesmo para Keyboard object.
● 
Add Objetos
 
Adicionando objeto
● Dê um clique duplo para inserir um novo objeto. Desta 
vez, selecione Mouse object, pois vamos precisar de 
uma entrada de mouse. Faça o mesmo para Keyboard 
object.
● http://opengameart.org/content/spaceship-fighter
● http://opengameart.org/content/spike-ball
● http://opengameart.org/sites/default/files/Start%20Explo
sion.png
● http://opengameart.org/content/candy-pack-1
 
Adicionando objeto
 
Adicionando objeto
● Para cada um deles, vamos utilizar um sprite 
object. Ele simplesmente exibe uma textura, 
que você pode mover, rotacionar e 
redimensionar. 
● Os jogos são compostos, geralmente, por 
vários sprite objects. 
 
Adicionando objeto
● Vamos inserir cada um dos quatro objetos como sprite objects.
1) Clique duplo para inserir um novo objeto.
2) Clique duplo em 'Sprite'.
3) Quando o mouse virar uma cruz, clique em algum lugar do layout. Junto com 
ela, uma mensagem aparecerá mostrando o nome da camada ativa. No nosso 
caso, estará a 'Main'.
4) O editor de texturas aparece. Clique no icone abrir (o da pasta), e carregue 
uma das texturas.
5) Feche o editor, salve suas mudanças. Você deve estar vendo o objeto no 
layout!
● Adicione as demais texturas. 
● Mova a bala e a explosao sprites para algum lugar fora da área do layout. Não 
queremos vê-los quando o jogo começar.
 
Adicionando objeto
● Renomeie os sprites
 
Adicionando objeto
● Limpando o sprite e dimensionando
● Nave: 205 x 150
● Bola: 100 x 100
 
Adicionando objeto
 
BEHAVIORS
 
Adicionando comporamentos
(behaviors)
● Comportamentos (behaviors) já estão, funcionalmente, pré-
definidos no Construct 2. 
● Por exemplo, você pode adicionar um Platform behavior à 
qualquer objeto, e o Solid behavior para o chão, e você pode, 
instantaneamente sai pulando como em um jogo de 
plataforma. 
● Você pode fazer o mesmo nos eventos, mas isso leva mais 
tempo, e não é necessário caso o comportamento esteja bom 
o suficiente! Então vamos dar uma olhada nos 
comportamentos que podemos usar.
 
Behaviors
● 8 Direction movement (movimento de 8 direção): Permite movimentar 
o objetos através das setas do teclado. É perfeito para os 
movimentos do jogador.
● Bullet movement (movimento de bala): Simplesmente move um 
objeto para frente, seguinte seu ângulo atual. Funciona muito bem 
com as balas da arma do jogador. Apesar do nome, também funciona 
muito bem para mover os montros pelo cenário. Uma vez que, tudo 
que este movimento faz é mover um objeto para frente com certa 
velocidade.
● Scroll to (Deslocar para): Faz a tela seguir um objeto enquanto ele se 
move (também chamado de scrolling). É muito usado no jogador.
 
Behaviors
● Bound to layout (Limite para o Layout): Para qualquer objeto que 
tente deixr a área do layout. Também é usado no jogador. Ele não 
poder sair da área de jogo!
● Destroy outside layout (Destruir o que está fora do layout): Em vez 
de parar o objeto que deixa a área do layout, ele o destrói. É bom 
para as nossas balas. Sem isso, elas voaram pela através da tela 
para sempre, tomando muita memória e processamento. Logo, 
nós devemos destruir as balas quando elas saem do layout.
● Fade (Sumir): Faz um objeto sumir gradativamente. Usaremos nas 
explosões.
 
Adicionando um comportamento
● Vamos colocar o 8 direction 
movement no jogador. 
● Clique nele para selecioná-lo. 
● Na properties bar, veja a categoria 
Behaviors. 
● Clique em Add / Edit. 
● A janela de comportamentos para o 
jogador irá abrir.
● Clique em +
● Selecione em Moviments 8 Directions
 
Behaviors
● Faça o mesmo com 
Scroll To, para fazer a 
tela seguir o jogador.
● E também com o 
Bound to layout, para 
mantê-lo dentro da 
área do layout. 
 
Mais Behaviors
● Clique no objeto, vá na Properties Bar, na categoria Behaviors, e 
clique em Add/Edit
● Sprite TIRO: Coloque o Bullet movement e o Destroy outside layout
● Sprite BOLA: Coloque o Bullet movement (porque ele apenas se 
moverá para frente)
● Sprite EXPLOSAO: Coloque o Fade (para desaparecer 
gradativamente). Por padrão, o Fade também destrói o objeto após 
ele sumir por completo, fato que nos tira o trabalho de nos 
preocupar com estes objetos.
 
Mais Behaviors
● Se você rodar o jogo, você notará que a única coisa 
diferente é a bola se movimentar sozinha. 
● Vamos colocá-la descendo: Angle 90
● Vamos colocá-la um pouco mais devagar: Speed 80 
(corresponde à pixels por segundo).
● Tiro: Speed 600
● Explosion: Fade out time 0.5
 
Duplicando objetos
● Criando mais bolas
– Segure control, clique e arraste o objeto Bola.
● Tipos de objetos são como classes de objetos em 
que todos os objetos herdam as propriedades dos 
outros.
● Agora duplique várias bolas...
 
EVENTOS
 
Eventos
● Clique na aba Event sheet 1 na parte de cima para 
abrir o Event sheet editor. 
● Uma lista de eventos é chaamado de Event sheet, e 
você pode ter vários event sheets para diferentes 
partes do seu jogo, ou para organização. 
● Event sheets também podem conter outros envets 
sheets, permitindo reusar eventos em múltiplos níveis 
por exemplo, mas não precisamos disto agora.
 
Eventos
● Como o texto no empty sheet vazio indica, o Construct 2 roda tudo que está 
nele. 
● Sendo que é um evento a cada ‘tick’. 
● A maioria dos monitores atualiza sua tela 60 vezes por segundo, então o 
Construct 2 tentará se ajustar à isso para uma exibição mais suave. Isto 
signifca a folha de eventos (event sheet) é normalmente executada 60 
vezes por segundo, cada tempo é seguido pelo redesenhamento da tela. 
Isto é um tick – uma unidade de "rodar os eventos e depois desenhar a 
tela”.
● Eventos rodam de cima para baixo, então aqueles que estão no topo da 
event sheet rodam primeiro
 
Condições, ações e sub-eventos
● Eventos consistem de condições, que testam se certos 
critérios. 
● Por exemplo, "A barra de espaço está pressionada?". Se está, 
as ações do evento resultarão em "Criar um objeto bullet". 
● Depois das ações serem executadas, qualquer sub-eventos 
também rodarão – eles podem testar mais condições, executar 
mais ações, entrar em mais sub-eventos, e assim por diante. 
● Usando este sistema, podemos construir funcionalidades 
sofisticadas para nossos games e aplicativos.
 
Eventos
● Resumidamente, um evento básico funciona da 
seguinte maneira:
● As condições são cumpridas?
– Sim: executa todas as açõs do evento.
– Não: vá para o próximo evento (não inclui qualquer 
sub-evento).
 
Eventos
● Adicionando eventos ao nosso jogo.
● Lembre-se, um tick é executado toda vez que a tela é 
desenhada, então se fazemos o jogador olhar o mouse 
a cada tick, ele sempre aparecerá olhando o mouse.
● Vamos fazer este evento:
– Clique duplo em qualquer espaço da event sheet.
– System >> Every tick
 
Eventos
● Evento para o Jogador Nave
– Add action
– Nave
– Set angle toward position (Mouse.X, Mouse.Y)
 
Eventos
● Lembre-se, os passos para adicionar uma condição ou ação são:
1) Duplo-cliquepara inserir um novo evento (dentro da event sheet), ou clicar em Add 
action.
2) Duplo-clique no objeto que vai colocar a condição/ação.
3) Duplo-clique na condição/ação que você que.
4) Entre com os parâmetros, se eles forem necessários.
● De agora em diante, enventos serão descritos como o objeto, seguidos por suas 
condições/ações, seguidas por seus parâmetros. Por exemplo, o evento que 
colocamos está descrito como:
● “Add Condition”, System > Every tick
● “Add action”, Player > Set angle towards position > X: Mouse.X, Y: Mouse.Y
 
Eventos
● Colocando o jogador para atirar:
● Clique em Add Condition: Mouse -> On click -> 
Left clicked (padrão)
● Clique em Add Action: Nave -> Spawn another 
object -> Para Object, escolha Tiro. Para Layer, 
coloque 1 (o número da camada "Main"). Deixe 
Image point como 0.
 
Eventos
● Se você rodar o jogo, você perceberá que as balas saem do 
meio do jogador, ao invés da ponta da arma. 
● Vamos consertar isso colocando um image point na ponta da 
arma (um image point é a posição de onde os objetos criados 
surgirão).
● Botão-direito no player na barra projeto (project bar) ou na 
barra de objeto (object bar) e selecione Edit animations.
● O editor de imagem para ele aparece. Clique na ferramenta 
Set origin and image points.
 
Eventos
● Percebe que o objeto origin aparece como um ponto 
vermelho. Este é o "hotspot" ou "pivot point" do 
objeto. Se você rotacioná-lo, ele gira ao redor do 
origin. Nós queremos adicionar outro image point 
para reprensentar a arma, então clique na cruz verde 
para adicionar. Um ponto azul aparece – é o nosso 
novo image point. Clique com o botão esquerdo no 
fim da arma, para colocar o image point lá.
 
Eventos
 
Eventos
● Feche o image editor. Clique-duplo na ação 
Spawn an object que colocamos antes, e mude o 
Image point para 1. (O origin é sempre o primeiro 
image point e o Construct 2 conta a partir do zero.
 
Eventos
● Vamos fazer as balas matarem os monstros. Adicione 
o seguinte evento:
● Add action: Tiro -> On collision with another object -> 
em Object, escolha Bola.
– Add action: Bola -> Destroy
– Add action: Tiro -> Spawn another object -> Explosion, em 
layer, coloque 1
– Add action: Tiro -> Destroy
 
Referências
● https://www.scirra.com
● http://www.devmedia.com.br/jogos-em-html5-cria
ndo-um-jogo-passo-a-passo-com-construct2/29910
● https://www.scirra.com/tutorials/262/comeando-com
-o-construct-2-tutorial-in-portuguese
●
	Slide 1
	Slide 2
	Slide 3
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Slide 12
	Slide 13
	Slide 14
	Slide 15
	Slide 16
	Slide 17
	Slide 18
	Slide 19
	Slide 20
	Slide 21
	Slide 22
	Slide 23
	Slide 24
	Slide 25
	Slide 26
	Slide 27
	Slide 28
	Slide 29
	Slide 30
	Slide 31
	Slide 32
	Slide 33
	Slide 34
	Slide 35
	Slide 36
	Slide 37
	Slide 38
	Slide 39
	Slide 40
	Slide 41
	Slide 42
	Slide 43
	Slide 44
	Slide 45
	Slide 46
	Slide 47
	Slide 48
	Slide 49
	Slide 50
	Slide 51
	Slide 52
	Slide 53
	Slide 54
	Slide 55
	Slide 56
	Slide 57
	Slide 58
	Slide 59
	Slide 60
	Slide 61
	Slide 62