Iniciando com Construct2

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) Como adicionar um comportamento Adicionando mais comportamentos Fazendo os monstros um pouco mais inteligentes 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 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.

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