Apostila Construct 2
Traduzida para Português do Brasil
Conteúdo extra para Vídeo Aula
Curso de criação de Jogos em HTML5 – Engine Construct 2 / TV Guarapa

01
Fonte: http://www.scirra.com/tutorials/37/beginners-guide-to-construct-2/page-1

cursos.guarapa.com.br

Guia introdutório para Construct 2
Vamos começar a fazer o seu jogo HTML5 primeiro. Nós estaremos fazendo o jogo
"Shooter Ghost 'demo. O jogo funciona da seguinte forma: um jogador que olha para o
mouse, move-se com as setas e dispara com o mouse contra monstros. Você vai aprender
tudo o que você precisa saber para fazer um jogo simples - a partir de camadas para o
sistema de eventos!

Requisitos:
• Nós estaremos utilizando uma Game Engine gratuita Construct 2.
• Sistema operacional: Windows XP, Vista & 7.
• Linux: Ainda não testamos. mas é possível executá-lo através do WINE. (Quem

testou e obteve bons resultados pode estar compartilhando conosco nos
comentários)

gerência de arquivos. game engine. para simplificar e abstrair o desenvolvimento de jogos eletrônicos ou outras aplicações com É um Motor de Jogo.Navegador: E necessário ter um navegador que esteja em constante desenvolvimento e que tenha suporte para HTML5. ou simplesmente engine. estaremos apresentando os 4 principais navegadores: Firefox Internet Explorer Google Chrome Opera O que é uma Game Engine? também conhecido pelo termo em inglês. um motor de física para simular a física ou simplesmente para fazer detecção de suporte a animação. gráficos em tempo real. networking. e/ou 3D. gerência de memória. inteligência artificial colisão. gerência de linha de execução. para videogames e/ou computadores rodando sistemas A funcionalidade tipicamente fornecida por um motor de jogo inclui: um motor gráfico para renderizar gráficos 2D operacionais. sons. é um programa de computador e/ou conjunto de bibliotecas. suporte a uma linguagem de script. suporte a grafos de cena e entidades e. . .

Também é portátil. pegue uma cópia da última versão do Construct 2.Instalando Construct 2 Se você não tiver. O editor 2 Construct é apenas para Windows. mas os jogos que você fizer pode funcionar em qualquer lugar. assim você pode instalar em um USB memory stick. por exemplo. e levá-la com você! Como instalar? Baixe o arquivo de instalação e inicia a instalação Siga os passos durante a instalação Comece a fazer jogos! . Construir 2 também pode ser instalado em contas de usuário limitadas. Linux ou iPad. como Mac.

opção que existe no programa e tem que clicar nele. .Imagens que serão utilizadas na criação do seu jogo em HTML5. essas imagens foram criadas pelo site Construct 2 onde no tutorial básico ele indica elas para utilizarem na sua primeira criação. para isso é só clicar o botão direito do mouse na imagem e clicar em (Salvar imagem como) Introdução * Entendendo o documento. * Você deve salvar todas essas imagens no seu computador pois utilizaremos ela na nossa vídeo aula. todo o nome de um arquivo que estiver em negrito quer dizer que ele é um menu.

lançar Construct 2. clicando em Store Project in single file e depois clique em Create project(Criar projeto) Construir 2 vai manter todo o projeto em um arquivo único capx(formato de arquivo de edição do Construct 2). Use a project folder (Use uma pasta de projeto ) Apenas a tradução da opção de baixo.File e New. isso poderia ter sido chamado de sala de cena ou o quadro. Agora você deve estar olhando para um layout vazio . Em outras ferramentas.o modo de design onde você pode criar e posicionar objetos. você não precisa mudar nada. . Clique no selecione Menu . O botão de menu File 'New'. Pense em um layout como um nível de jogo ou tela de menu. Para nós. Na caixa de diálogo New Project.Agora você está pronto para cima.

O objeto de fundo Tiled pode fazer isso por nós. dê um duplo clique em um espaço no layout para inserir um novo objeto. se ele está cheio.clique direito e salve-o em seu computador em algum lugar: É importante você esta criando uma pasta para organizar melhor seu projeto. Agora. clique duas vezes o objeto de fundo lado a lado para inseri-lo. (Mais tarde. . Primeiro.) Uma vez que a caixa de diálogo Inserir novo objeto aparece. aqui está sua textura de fundo .Inserting objects(A introdução de objectos ) Tiled Background(fundo de azulejos) A primeira coisa que queremos é um azulejo(tiled) de fundo repetitiva. você também pode botão direito do mouse e selecione Inserir novo objeto.

Clique em algum lugar perto do meio do layout.Pressione Control(crt) do teclado Rotacione o Scroll(rodana) do mouse para reduzir o Zoom. Se você for solicitado.A mira irá aparecer para você indicar onde colocar o objeto. O editor de textura agora se abre. position incluindo o seu tamanho e posição. para que você digite a textura de azulejo. 0 (na parte superior esquerda da disposição). certifique-se salvar! Agora você deve ver seu objeto de fundo lado a lado no layout. Vamos redimensioná-la para cobrir todo o layout. 1024 (o tamanho do esquema). Clique no ícone da pasta para carregar uma textura do seu computador. Vamos examinar o nosso trabalho. Seu fundo de azulejos devem cobrir todo o layout agora: . procure a pasta onde você baixou a imagem de fundo e selecione-o. Vamos importar a imagem tiled que você salvou anteriormente. Feche o editor de textura clicando no X no canto superior direito. Certifique-se que está selecionado. Definir a sua posição( ) de 0. eo seu tamanho(size) de 1280. então o Properties Bar à esquerda deve mostrar todas as definições para o objeto.

neste jogo. agora nós queremos . queremos tudo para exibir acima do fundo de azulejos(tiled). No entanto. Vamos usar o sistema de camadas(layes) para fazer isso. e as camadas pode ser escondido. com Ele permite que você facilmente organizar os objetos que aparecem em cima dos outros. clique na Layers(camadas) guia(tab). Imagine-camadas como folhas de vidro empilhadas em cima uns dos outros.um navegador deve aparecer mostrando seu layout lado a lado Woo!) Adding a layer(Adicionando uma camada) adicionar mais alguns objetos Ok. vamos manter acidentalmente selecionando o fundo de azulejos. Layouts podem consistir de múltiplas camadas(layer). que você pode usar para agrupar objetos. Para gerenciar as camadas. Por exemplo.(Se você está impaciente como eu. muito mais. que normalmente fica ao lado do bar do projeto (fica no no lado direito da tela) . ter efeitos de paralaxe aplicado. e objetos pintados em cada folha. para que possamos fazer uma outra camada em cima de nossos outros objetos. clique no ícone 'run' pouco na barra de título da janela . tornando-selecionável. trancado. a menos que bloqueá-lo.

já que é a nossa camada de fundo. se você precisar fazer alterações. Isso significa que você não será capaz de selecionar qualquer coisa sobre ele. que é fácil de selecionar acidentalmente e não precisa ser tocado novamente. será bloqueado. As caixas de seleção(checkboxes) também permitem ocultar camadas(layers) no editor. Clique no ícone do lápis e renomeá-lo para segundo plano(Background). Finalmente. Agora clique no ícone 'add' para adicionar uma nova camada(layer) para os nossos outros objetos.Você deverá ver Camada(layer) 0 na lista (2 contagens Construct a partir de zero. Sua barra de camadas(layers) deve agora olhar como este: . uma vez que funciona melhor assim na programação). Vamos chamar isso de um principal(main). Isso é bastante conveniente para o nosso fundo de azulejos. mas nós não precisamos disso agora. No entanto. se você clicar no ícone de cadeado pequeno ao lado de fundo. você pode simplesmente clicar no cadeado novamente para desbloquear.

verifique se a camada "principal"(main) é selecionado na barra de camadas(layers).Agora. Ele simplesmente exibe uma textura. assim.a camada selecionada é a camada ativa. todos as (camadas)layouts em nosso projeto pode aceitar mouse e teclado. e também aparece em uma dica quando colocar um novo objeto . Desta vez. pois vamos precisar de entrada do mouse. estaremos inserindo acidentalmente para a camada de errado. que você pode se mover. Dê um duplo clique para inserir outro novo objeto. girar e redimensionar. Eles estão escondidos e. Adicione os objetos de entrada (Add the input objects) Vire a sua atenção de volta para o layout. estaremos usando um objeto sprite.vale a pena manter um olho. Jogos geralmente são compostas de objetos sprite. Faça o mesmo novamente para o objeto do teclado(keyboard). essas imagens foram criadas pelo site Construct 2 onde no tutorial básico ele indica elas para utilizarem na sua primeira criação. Isso é importante . O processo é semelhante ao inserir o fundo tiled: . selecione o objeto Mouse. * Você deve salvar todas essas imagens no seu computador pois utilizaremos ela na nossa vídeo aula. automaticamente. para isso é só clicar o botão direito do mouse na imagem e clicar em (Salvar imagem como) Para cada um destes objetos. A camada ativa é mostrado na barra de status. projeto de trabalho como um todo. Vamos inserir cada uma destas quatro objetos como objetos sprite. Agora. Imagens que serão utilizadas na criação do seu jogo em HTML5. Nota: estes objetos não precisam colocar em um layout. Todos os novos objetos inseridos estão inseridos na camada ativa. se não estiver selecionada.

Quando o mouse se transforma em uma cruz. Mova objetos serão chamados Sprite. Dê um duplo clique no botão 'Sprite' objeto. e instantaneamente você pode saltar ao redor como um jogo de plataformas. eo comportamento sólido para o chão. mas leva mais tempo. Comportamentos são funcionalidade em Construct 2. construir 2 tem estes comportamentos. 5. e não há nenhum ponto de qualquer maneira se o comportamento já está bom o suficiente! Então vamos dar uma olhada no que os comportamentos que podemos usar. os sprites de bala e explosão para algum lugar fora da borda do layout . Feche o editor de textura. conforme apropriado. .1. salvar suas alterações. Construir 2 vai criar um Sprite com que textura para você. clique em algum lugar no layout. Você pode alterando a propriedade Name na barra de propriedades: fazer isso selecionando o objeto. Clique no ícone aberto. Entre outras coisas.) 4. Monster. Sprite2. 3.as coisas vão rapidamente ficar confuso como este. você pode adicionar um comportamento de plataforma para um objeto. Você pode fazer o mesmo em eventos. (Lembre-se este é o layout ativo. Sprite3 e Sprite4. Bullet e explosão. e carregar um dos quatro texturas. Adição de comportamentos (Adding behaviors) Por exemplo. Agora você deve ver o objeto no layout! Nota: outra maneira rápida de inserir objetos Sprite é arrastar e soltar o arquivo de imagem do Windows para a área de layout. A dica deve ser 'principal'.não queremos vê-los quando o jogo começa. Esses Renomeie-os para Jogador. em seguida. O editor de textura aparece. Dê um duplo clique para inserir um novo objeto 2. Isso não é muito útil .

Vá até(Scroll to). Em vez de parar um objeto deixando a área de layout.– 8 Direções de movimento(8 Direction movement). Apesar do nome. o que vamos usar nas explosões. ele também vai funcionar muito bem para mover os monstros ao redor . Clique em Adicionar / Editar lá(add / edit). . uma vez que deixei o layout. então eles não podem andar lado de fora da área de jogo! . Em vez disso. Como adicionar um comportamento Vamos adicioná-lo 8 comportamento movimento(8 direction movement ) direção ao jogador. . .Movimento da bala(Bullet movement). Ele vai fazer muito bem para o movimento do jogador. Na barra de propriedades. Isto permite-lhe mover um objeto com as teclas de seta. É útil para as nossas balas. sempre levando um pouco de memória e poder de processamento. . O diálogo de Comportamentos para o jogador irá abrir. Isso também será útil no jogador. isso destrói-lo se ele faz. Isso será útil no jogador. Isto irá parar um objeto deixando a área de layout.Fade. Este gradualmente torna um objeto desaparecer. observe a categoria Comportamentos(behaviors). Isso simplesmente se move para a frente um objeto em seu ângulo atual. Sem ele. Isto faz com que a tela seguir um objecto que se move em torno de (também conhecido como rolagem). balas voariam para fora da tela para sempre. Vai funcionar muito bem para balas do jogador. .uma vez que todo o movimento não é objetos avançar em um pouco de velocidade.Limite de layout(Bound to layout). Vamos adicionar estes comportamentos para os objetos que precisam deles. devemos destruir as balas.Destrua fora da camada(Destroy outside layout). Clique no player para selecioná-lo.

e também o limite de comportamento(Bound to layout). Clique duas vezes 8 Direction movement. para fazer a tela seguir o jogador. Faça o mesmo novamente e desta vez adicione o Scroll Para comportamento. O diálogo de comportamentos deve agora olhar como este: Feche o diálogo comportamentos. Clique em Run para experimentar o jogo! .Clique no ícone "comportamento add". adicioná-lo. para mantê-los dentro do layout.

Adicionando os outros comportamentos Podemos adicionar comportamentos para os outros objetos pelo mesmo método selecioná-lo. e Fade comportamento desvanece-se o objeto da explosão de um tempo para 0. Vamos atrasá-los a um ritmo vagaroso.Adicione o comportamento desvanece-se(Fade) ao objeto de explosão (por isso desaparece gradualmente depois de aparecer). você pode fazer um evento que . clique em Adicionar / Editar(add / edit) para abrir a janela de comportamentos. você principalmente. Selecione o objeto Monster. lidar com tipos de objeto. Por padrão o comportamento desvanece-se também destrói o objeto depois que ele desapareceu. No sistema de eventos. você pode notar a única coisa diferente é os monstros que você pode ver. o que também poupa-nos a ter de se preocupar com objetos invisíveis Explosão entupimento do jogo. algumas propriedades extras surgiram na barra de propriedades: Isso nos permite ajustar comportamentos como trabalhar. Observe como desde que adicionamos um comportamento. essencialmente. clique e arraste o objeto Monster. Por exemplo. Isto é simplesmente um outro objeto do tipo de objeto Monster.Adicionar o movimento Bullet para o objeto Monster (porque ele só se move para frente também) . Vamos adicionar os outros comportamentos: . 'classes' de objetos. Criar mais alguns monstros (Create some more monsters) Segurando o control(crt) do teclado. mudar a velocidade do objeto bala a 600. Alterar a velocidade de 400-80 (isto é.5 (isso é meio segundo). e adicionar alguns comportamentos.Adicionar o movimento da bala Bullet movement e destruir layout fora do objeto(Destroy outside layout) . Tipos de objetos são. Da mesma forma. de repente disparar rapidamente. em pixels percorrida por segundo). Se você executar o jogo. Você notará que ele gera outra instância.

Não coloque nenhum muito perto do jogador. eles só precisam baixar uma textura Monster e construct 2 repete-la 8 vezes. e espalhá-los sobre todo o layout.quando os jogadores jogam o seu jogo online. Por enquanto. Usando o control(crt) do teclado + arrastar. . um bom exemplo para se pensar sobre os diferentes tipos de inimigos são diferentes tipos de objetos. ou para a organização. todas as instâncias de um tipo de objeto também compartilham a mesma textura. Você deve ter terminado algo semalhente a isto: Eventos / Events Primeiro. os inimigos propriamente ditas (que pode haver vários) são exemplos desses tipos de objeto. clique em Event sheet 1(Folha de evento) na guia. se isso ajuda. criar 7 ou 8 novos monstros. Nós vamos cobrir mais sobre tipos de objetos contra instâncias mais tarde.em oposição a ter que fazer um evento separado para cada monstro. permitindo que você reutilize eventos em vários níveis. A lista de eventos é chamado de uma folha de evento. Folhas evento também pode "incluir" folhas de outros eventos. Isso realmente significa "Qualquer instância de objeto de bala colide com qualquer tipo de exemplo do objeto Monster" . parte superior para alternar para o editor de folha de evento. Isso é ótimo para a eficiência . e você pode ter folhas de eventos diferentes para diferentes partes do seu jogo.diz que "colide com bala monstro". em seguida. Com Sprites. ou ele pode morrer imediatamente! Você pode diminuir o zoom com controle + scroll do mouse para baixo. ao invés de ter que baixar 8 texturas monstro por 8 monstros.

no entanto. eventos(events) sub-também são executados . construir 2 Tudo corre na folha de evento uma vez por tick. .os quais poderão testar mais condições(conditions). eles sempre parecem estar de frente para o mouse. Usando este sistema. se fizermos o jogador enfrentar o mouse a cada tick. um evento basicamente funciona assim: São todas as condições cumpridas? ---> Sim: executar todas as ações do evento. por agora. Conditions.. por isso. em seguida. por exemplo. actions and sub-events (Condições.uma unidade de "executar os eventos em seguida. executar mais ações(actions) e. em seguida mais sub-eventos(sub-events). Isso é o que um tick é . No entanto. e assim por diante. Seu primeiro evento: Queremos fazer o jogador sempre quando olhar para o mouse ele será direcionado para o ele. que o teste se determinados critérios forem atendidos. Nós não precisamos de sub-eventos neste tutorial. Lembre-se de um tick é executado toda vez que a tela é desenhada. ações e sub-eventos) Os eventos consistem de condições(conditions). Vamos passar por cima de novo. essa é uma boa maneira de pensar sobre isso. de cada vez. "Criar um objeto de bala(bullet)". podemos construir uma funcionalidade sofisticada para os nossos jogos e aplicativos. desenhe na tela". seguido por redesenhar a tela. Por exemplo.Como o texto na folha vazia indica. ---> Não: vá para próximo evento (não incluindo sub-eventos). Isso é um pouco de uma simplificação exagerada. A maioria dos monitores atualizar sua tela 60 vezes por segundo. Construct 2 fornece um monte de recursos de eventos para cobrir um monte de coisas diferentes que você pode precisar fazer. Em suma. Depois que as ações tenham executado. para construir 2 vai tentar igualar o que para o mais suave de exibição. Isto significa que a folha de evento é normalmente executado 60 vezes por segundo.

Dê duplo clique um no objeto de sistema.Vamos começar a fazer este evento. Clique duas vezes em um espaço na folha de evento. conforme mostrado. Isto levar-nos a adicionar uma condição(conditions) para o novo evento. A caixa de diálogo irá listar todas as condições do objeto do Sistema: . o que representa Construct 2 funcionalidade built-in. Objetos diferentes têm diferentes condições e ações dependendo do que eles podem fazer. Há também o objeto do sistema.

Clique duas vezes na condição de tick Toda a inseri-lo. com nenhuma ação. Deve ficar assim: Agora queremos adicionar uma ação para tornar o jogador no mouse. mas desta vez para a adição de uma Tal como acontece com a adição de um evento. O diálogo será fechada eo evento é criado. (Certifique-se de obter o link Add ação(action) não. Tente não se confundem entre a adição de condições e adicionando ações! Como pois é o jogador que nós queremos olhar para o mouse. ação. Player é exibida: . Clique no link Add ação(action) à direita do evento. o link Adicionar evento debaixo dela que vai adicionar um evento totalmente diferente de novo) A caixa de diálogo adicionar Ação será exibida: temos a nossa mesma lista de objetos para escolher. dê um duplo clique no objeto Player. A lista de ações disponíveis no objeto mostrado.

Condições podem ter muitos parâmetros. Em vez de ajustar o ângulo do jogador para um número de graus. ajustar o ângulo do objeto. Isto irá automaticamente calcular o ângulo do jogador para o dado X e Y coordenadas. Nós não precisamos nos preocupar com isso agora. Clique duas vezes Set angle towards position.Observe como o comportamento do jogador movimento 8 direções tem suas próprias ações. é conveniente utilizar o ângulo definido para a acção de posição. em seguida. no entanto. . Construct 2 agora precisa saber o X e Y e a apontar o jogador: Estes são chamados os parâmetros da ação. mas cada tick não precisa de nenhum.

É muito poderoso. para Mouse. Você pode estar se perguntando como você pode lembrar de todas as expressões possíveis que você poderia entrar.X para X e Y.Y) (embora esses exemplos particulares não pode ser muito útil!). Digite Mouse. você pode usar qualquer dado de qualquer objeto. ele está escondido para não distraí-lo. para elaborar parâmetros em ações e condições. e uma espécie de fonte secreta de grande parte da flexibilidade de Construct 2. ou qualquer cálculo. Por exemplo. calculadas. Eles são como somas que são Queremos definir o ângulo para a posição do mouse. Desta forma. você também pode entrar Mouse.X + 100 ou (Mouse. Felizmente. que você deve ver flutuando sobre ele.Y Estes são chamados de expressões. há o "painel de objeto"(object panel ). .O objeto do mouse pode proporcionar isso. Por padrão. Se você receber um erro que dizia "O mouse não é um nome de objeto"? Certifique-se de que você adicionou o objeto do mouse! Volte para a página 2 e marque em "Adicionar os objetos de entrada".