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 ●
Adicionando funcionalidade de jogo
●
Tiled Background ●
Colocando o jogador para atirar
●
Adicionando uma camada (Layer) ●
O efeito de explosão
●
Adicionando comportamentos (Behaviors) ●
Fazendo os monstros um pouco mais
●
Como adicionar um comportamento inteligentes
●
Adicionando mais comportamentos
●
Variáveis de Instância
●
Criando alguns monstros ●
Mudando os eventos
●
Eventos ●
Mantendo a pontuação
●
Sobre eventos ●
Criando um heads-up display (HUD)
●
Condições, ações e sub-eventos ●
Toques finais
●
Seu primeiro evento ●
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 Importante:
características do objeto, inclusive, Sempre lembre de
salvar seu projeto!
tamanho (size) e posição (position).
●
Position: 0, 0 (o canto superior esquero)
●
Size: 1280, 1024 (o tamanho do layout).
 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 que a 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.
 Add Objetos
●
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.
 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-clique para 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
●