Iniciando com Construct2

Lara Popov Zambiasi Bazzi Oberderfer

E-mail: lara.popov@ifsc.edu.brURL: 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/platformersidescroller-tiles-and-backgroundshttp://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/grass_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 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.

● 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-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●