•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) sons. e/ou 3D.Navegador: E necessário ter um navegador que esteja em constante desenvolvimento e que tenha suporte para HTML5. 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. suporte a uma linguagem de script. gerência de arquivos. . . game engine. é um programa de computador e/ou conjunto de bibliotecas. networking. ou simplesmente engine. para simplificar e abstrair o desenvolvimento de jogos eletrônicos ou outras aplicações com É um Motor de Jogo. gerência de memória. 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. inteligência artificial colisão. gráficos em tempo real. suporte a grafos de cena e entidades e. Instalando Construct 2 Se você não tiver. assim você pode instalar em um USB memory stick. Construir 2 também pode ser instalado em contas de usuário limitadas. por exemplo. pegue uma cópia da última versão do Construct 2. Também é portátil. Linux ou iPad. O editor 2 Construct é apenas para Windows. mas os jogos que você fizer pode funcionar em qualquer lugar. como Mac. 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! . todo o nome de um arquivo que estiver em negrito quer dizer que ele é um menu. . para isso é só clicar o botão direito do mouse na imagem e clicar em (Salvar imagem como) Introdução * Entendendo o documento.Imagens que serão utilizadas na criação do seu jogo em HTML5. * Você deve salvar todas essas imagens no seu computador pois utilizaremos ela na nossa vídeo aula. opção que existe no programa e tem que clicar nele. essas imagens foram criadas pelo site Construct 2 onde no tutorial básico ele indica elas para utilizarem na sua primeira criação. Em outras ferramentas. Clique no selecione Menu . Para nós. Agora você deve estar olhando para um layout vazio .File e New. Pense em um layout como um nível de jogo ou tela de menu. Na caixa de diálogo New Project.Agora você está pronto para cima. você não precisa mudar nada. lançar Construct 2. O botão de menu File 'New'. Use a project folder (Use uma pasta de projeto ) Apenas a tradução da opção de baixo. 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). isso poderia ter sido chamado de sala de cena ou o quadro.o modo de design onde você pode criar e posicionar objetos. . dê um duplo clique em um espaço no layout para inserir um novo objeto. se ele está cheio.Inserting objects(A introdução de objectos ) Tiled Background(fundo de azulejos) A primeira coisa que queremos é um azulejo(tiled) de fundo repetitiva. aqui está sua textura de fundo . O objeto de fundo Tiled pode fazer isso por nós. Primeiro. clique duas vezes o objeto de fundo lado a lado para inseri-lo. (Mais tarde. Agora. .) Uma vez que a caixa de diálogo Inserir novo objeto aparece. você também pode botão direito do mouse e selecione Inserir novo objeto.clique direito e salve-o em seu computador em algum lugar: É importante você esta criando uma pasta para organizar melhor seu projeto. eo seu tamanho(size) de 1280. O editor de textura agora se abre. Clique em algum lugar perto do meio do layout. Se você for solicitado.Pressione Control(crt) do teclado Rotacione o Scroll(rodana) do mouse para reduzir o Zoom. 1024 (o tamanho do esquema). Seu fundo de azulejos devem cobrir todo o layout agora: . Vamos importar a imagem tiled que você salvou anteriormente. Definir a sua posição( ) de 0.A mira irá aparecer para você indicar onde colocar o objeto. 0 (na parte superior esquerda da disposição). então o Properties Bar à esquerda deve mostrar todas as definições para o objeto. Vamos redimensioná-la para cobrir todo o layout. Feche o editor de textura clicando no X no canto superior direito. para que você digite a textura de azulejo. Certifique-se que está selecionado. Clique no ícone da pasta para carregar uma textura do seu computador. position incluindo o seu tamanho e posição. certifique-se salvar! Agora você deve ver seu objeto de fundo lado a lado no layout. Vamos examinar o nosso trabalho. procure a pasta onde você baixou a imagem de fundo e selecione-o. Para gerenciar as camadas. clique no ícone 'run' pouco na barra de título da janela . ter efeitos de paralaxe aplicado. e objetos pintados em cada folha.um navegador deve aparecer mostrando seu layout lado a lado Woo!) Adding a layer(Adicionando uma camada) adicionar mais alguns objetos Ok. 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).(Se você está impaciente como eu. Imagine-camadas como folhas de vidro empilhadas em cima uns dos outros. para que possamos fazer uma outra camada em cima de nossos outros objetos. neste jogo. Vamos usar o sistema de camadas(layes) para fazer isso. tornando-selecionável. agora nós queremos . vamos manter acidentalmente selecionando o fundo de azulejos. que você pode usar para agrupar objetos. Layouts podem consistir de múltiplas camadas(layer). a menos que bloqueá-lo. que normalmente fica ao lado do bar do projeto (fica no no lado direito da tela) . muito mais. trancado. No entanto. Por exemplo. queremos tudo para exibir acima do fundo de azulejos(tiled). se você clicar no ícone de cadeado pequeno ao lado de fundo. você pode simplesmente clicar no cadeado novamente para desbloquear. Isso é bastante conveniente para o nosso fundo de azulejos. Clique no ícone do lápis e renomeá-lo para segundo plano(Background).Você deverá ver Camada(layer) 0 na lista (2 contagens Construct a partir de zero. Agora clique no ícone 'add' para adicionar uma nova camada(layer) para os nossos outros objetos. já que é a nossa camada de fundo. As caixas de seleção(checkboxes) também permitem ocultar camadas(layers) no editor. Sua barra de camadas(layers) deve agora olhar como este: . que é fácil de selecionar acidentalmente e não precisa ser tocado novamente. Vamos chamar isso de um principal(main). mas nós não precisamos disso agora. será bloqueado. se você precisar fazer alterações. No entanto. uma vez que funciona melhor assim na programação). Isso significa que você não será capaz de selecionar qualquer coisa sobre ele. Finalmente. Dê um duplo clique para inserir outro novo objeto.vale a pena manter um olho. Ele simplesmente exibe uma textura. se não estiver selecionada. A camada ativa é mostrado na barra de status. verifique se a camada "principal"(main) é selecionado na barra de camadas(layers). e também aparece em uma dica quando colocar um novo objeto . pois vamos precisar de entrada do mouse. Nota: estes objetos não precisam colocar em um layout. Jogos geralmente são compostas de objetos sprite. O processo é semelhante ao inserir o fundo tiled: . Adicione os objetos de entrada (Add the input objects) Vire a sua atenção de volta para o layout. todos as (camadas)layouts em nosso projeto pode aceitar mouse e teclado. Faça o mesmo novamente para o objeto do teclado(keyboard). estaremos inserindo acidentalmente para a camada de errado. girar e redimensionar. Eles estão escondidos e. Agora. selecione o objeto Mouse. Todos os novos objetos inseridos estão inseridos na camada ativa.Agora. projeto de trabalho como um todo. Desta vez. automaticamente. * Você deve salvar todas essas imagens no seu computador pois utilizaremos ela na nossa vídeo aula.a camada selecionada é a camada ativa. Isso é importante . essas imagens foram criadas pelo site Construct 2 onde no tutorial básico ele indica elas para utilizarem na sua primeira criação. estaremos usando um objeto sprite. Imagens que serão utilizadas na criação do seu jogo em HTML5. Vamos inserir cada uma destas quatro objetos como objetos sprite. que você pode se mover. assim. para isso é só clicar o botão direito do mouse na imagem e clicar em (Salvar imagem como) Para cada um destes objetos. eo comportamento sólido para o chão. Isso não é muito útil . Você pode fazer o mesmo em eventos. clique em algum lugar no layout. Sprite3 e Sprite4. Bullet e explosão. construir 2 tem estes comportamentos. em seguida. Esses Renomeie-os para Jogador.) 4. Entre outras coisas. Você pode alterando a propriedade Name na barra de propriedades: fazer isso selecionando o objeto. e instantaneamente você pode saltar ao redor como um jogo de plataformas. Adição de comportamentos (Adding behaviors) Por exemplo.1. mas leva mais tempo. Construir 2 vai criar um Sprite com que textura para você. Clique no ícone aberto. Dê um duplo clique no botão 'Sprite' objeto. . O editor de textura aparece. A dica deve ser 'principal'. salvar suas alterações. os sprites de bala e explosão para algum lugar fora da borda do layout . 5. Quando o mouse se transforma em uma cruz. 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. Feche o editor de textura. 3. você pode adicionar um comportamento de plataforma para um objeto.não queremos vê-los quando o jogo começa. Monster. (Lembre-se este é o layout ativo. 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. Sprite2. Comportamentos são funcionalidade em Construct 2. conforme apropriado.as coisas vão rapidamente ficar confuso como este. Dê um duplo clique para inserir um novo objeto 2. Mova objetos serão chamados Sprite. e carregar um dos quatro texturas. Vai funcionar muito bem para balas do jogador. Sem ele.Limite de layout(Bound to layout). Isto irá parar um objeto deixando a área de layout. uma vez que deixei o layout. Ele vai fazer muito bem para o movimento do jogador. Clique no player para selecioná-lo. Isso também será útil no jogador. observe a categoria Comportamentos(behaviors). Em vez de parar um objeto deixando a área de layout.Fade.– 8 Direções de movimento(8 Direction movement). Isto permite-lhe mover um objeto com as teclas de seta.Movimento da bala(Bullet movement). devemos destruir as balas. Apesar do nome. Vamos adicionar estes comportamentos para os objetos que precisam deles. Isto faz com que a tela seguir um objecto que se move em torno de (também conhecido como rolagem). . isso destrói-lo se ele faz. Como adicionar um comportamento Vamos adicioná-lo 8 comportamento movimento(8 direction movement ) direção ao jogador. . . o que vamos usar nas explosões. então eles não podem andar lado de fora da área de jogo! . . Clique em Adicionar / Editar lá(add / edit).uma vez que todo o movimento não é objetos avançar em um pouco de velocidade.Destrua fora da camada(Destroy outside layout). Isso simplesmente se move para a frente um objeto em seu ângulo atual. ele também vai funcionar muito bem para mover os monstros ao redor . É útil para as nossas balas. Este gradualmente torna um objeto desaparecer. Na barra de propriedades. . Isso será útil no jogador. Em vez disso. sempre levando um pouco de memória e poder de processamento.Vá até(Scroll to). balas voariam para fora da tela para sempre. O diálogo de Comportamentos para o jogador irá abrir. para fazer a tela seguir o jogador. Clique duas vezes 8 Direction movement.Clique no ícone "comportamento add". Clique em Run para experimentar o jogo! . e também o limite de comportamento(Bound to layout). para mantê-los dentro do layout. O diálogo de comportamentos deve agora olhar como este: Feche o diálogo comportamentos. adicioná-lo. Faça o mesmo novamente e desta vez adicione o Scroll Para comportamento. essencialmente. 'classes' de objetos. Você notará que ele gera outra instância. Tipos de objetos são. Vamos adicionar os outros comportamentos: . Selecione o objeto Monster.Adicionar o movimento Bullet para o objeto Monster (porque ele só se move para frente também) . em pixels percorrida por segundo).5 (isso é meio segundo). Observe como desde que adicionamos um comportamento.Adicione o comportamento desvanece-se(Fade) ao objeto de explosão (por isso desaparece gradualmente depois de aparecer). de repente disparar rapidamente. clique em Adicionar / Editar(add / edit) para abrir a janela de comportamentos. clique e arraste o objeto Monster.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. você pode fazer um evento que . Criar mais alguns monstros (Create some more monsters) Segurando o control(crt) do teclado. Por padrão o comportamento desvanece-se também destrói o objeto depois que ele desapareceu. lidar com tipos de objeto. você pode notar a única coisa diferente é os monstros que você pode ver. você principalmente. e adicionar alguns comportamentos. Vamos atrasá-los a um ritmo vagaroso. o que também poupa-nos a ter de se preocupar com objetos invisíveis Explosão entupimento do jogo. mudar a velocidade do objeto bala a 600. No sistema de eventos. Isto é simplesmente um outro objeto do tipo de objeto Monster. Por exemplo. Da mesma forma. algumas propriedades extras surgiram na barra de propriedades: Isso nos permite ajustar comportamentos como trabalhar.Adicionar o movimento da bala Bullet movement e destruir layout fora do objeto(Destroy outside layout) . Se você executar o jogo. Alterar a velocidade de 400-80 (isto é. um bom exemplo para se pensar sobre os diferentes tipos de inimigos são diferentes tipos de objetos. Você deve ter terminado algo semalhente a isto: Eventos / Events Primeiro. permitindo que você reutilize eventos em vários níveis.quando os jogadores jogam o seu jogo online. parte superior para alternar para o editor de folha de evento. criar 7 ou 8 novos monstros. eles só precisam baixar uma textura Monster e construct 2 repete-la 8 vezes. Nós vamos cobrir mais sobre tipos de objetos contra instâncias mais tarde. em seguida. Não coloque nenhum muito perto do jogador. Folhas evento também pode "incluir" folhas de outros eventos. ou ele pode morrer imediatamente! Você pode diminuir o zoom com controle + scroll do mouse para baixo. Por enquanto. Isso é ótimo para a eficiência . e espalhá-los sobre todo o layout. Com Sprites. e você pode ter folhas de eventos diferentes para diferentes partes do seu jogo. ou para a organização. os inimigos propriamente ditas (que pode haver vários) são exemplos desses tipos de objeto.diz que "colide com bala monstro". Isso realmente significa "Qualquer instância de objeto de bala colide com qualquer tipo de exemplo do objeto Monster" . A lista de eventos é chamado de uma folha de evento. todas as instâncias de um tipo de objeto também compartilham a mesma textura. Usando o control(crt) do teclado + arrastar. . clique em Event sheet 1(Folha de evento) na guia.em oposição a ter que fazer um evento separado para cada monstro. ao invés de ter que baixar 8 texturas monstro por 8 monstros. se isso ajuda. podemos construir uma funcionalidade sofisticada para os nossos jogos e aplicativos. seguido por redesenhar a tela.Como o texto na folha vazia indica. actions and sub-events (Condições. . Em suma. Isso é um pouco de uma simplificação exagerada. em seguida mais sub-eventos(sub-events).os quais poderão testar mais condições(conditions). ---> Não: vá para próximo evento (não incluindo sub-eventos). para construir 2 vai tentar igualar o que para o mais suave de exibição. Lembre-se de um tick é executado toda vez que a tela é desenhada. Seu primeiro evento: Queremos fazer o jogador sempre quando olhar para o mouse ele será direcionado para o ele. Nós não precisamos de sub-eventos neste tutorial. Isto significa que a folha de evento é normalmente executado 60 vezes por segundo. se fizermos o jogador enfrentar o mouse a cada tick. ações e sub-eventos) Os eventos consistem de condições(conditions). essa é uma boa maneira de pensar sobre isso. executar mais ações(actions) e. no entanto. por exemplo. "Criar um objeto de bala(bullet)". Conditions.. eles sempre parecem estar de frente para o mouse. Depois que as ações tenham executado. e assim por diante. Usando este sistema. em seguida. por agora. um evento basicamente funciona assim: São todas as condições cumpridas? ---> Sim: executar todas as ações do evento. Por exemplo. Vamos passar por cima de novo. No entanto. Construct 2 fornece um monte de recursos de eventos para cobrir um monte de coisas diferentes que você pode precisar fazer. A maioria dos monitores atualizar sua tela 60 vezes por segundo. de cada vez. eventos(events) sub-também são executados . por isso. desenhe na tela". Isso é o que um tick é .uma unidade de "executar os eventos em seguida. construir 2 Tudo corre na folha de evento uma vez por tick. que o teste se determinados critérios forem atendidos. Isto levar-nos a adicionar uma condição(conditions) para o novo evento. Objetos diferentes têm diferentes condições e ações dependendo do que eles podem fazer.Vamos começar a fazer este evento. Clique duas vezes em um espaço na folha de evento. A caixa de diálogo irá listar todas as condições do objeto do Sistema: . conforme mostrado. Há também o objeto do sistema. o que representa Construct 2 funcionalidade built-in. Dê duplo clique um no objeto de sistema. dê um duplo clique no objeto Player. (Certifique-se de obter o link Add ação(action) não.Clique duas vezes na condição de tick Toda a inseri-lo. ação. 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. A lista de ações disponíveis no objeto mostrado. O diálogo será fechada eo evento é criado. Deve ficar assim: Agora queremos adicionar uma ação para tornar o jogador no mouse. Player é exibida: . mas desta vez para a adição de uma Tal como acontece com a adição de um evento. 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. Clique no link Add ação(action) à direita do evento. com nenhuma ação. é conveniente utilizar o ângulo definido para a acção de posição. Construct 2 agora precisa saber o X e Y e a apontar o jogador: Estes são chamados os parâmetros da ação. ajustar o ângulo do objeto. mas cada tick não precisa de nenhum. em seguida.Observe como o comportamento do jogador movimento 8 direções tem suas próprias ações. no entanto. Condições podem ter muitos parâmetros. Nós não precisamos nos preocupar com isso agora. Em vez de ajustar o ângulo do jogador para um número de graus. . Isto irá automaticamente calcular o ângulo do jogador para o dado X e Y coordenadas. Clique duas vezes Set angle towards position. calculadas. Felizmente. . Desta forma. ele está escondido para não distraí-lo.O objeto do mouse pode proporcionar isso.Y Estes são chamados de expressões. você também pode entrar Mouse. É muito poderoso. Digite Mouse.X + 100 ou (Mouse. para elaborar parâmetros em ações e condições.X para X e Y. que você deve ver flutuando sobre ele. Você pode estar se perguntando como você pode lembrar de todas as expressões possíveis que você poderia entrar. você pode usar qualquer dado de qualquer objeto. e uma espécie de fonte secreta de grande parte da flexibilidade de Construct 2. Eles são como somas que são Queremos definir o ângulo para a posição do mouse. Por padrão. Por exemplo. ou qualquer cálculo. há o "painel de objeto"(object panel ). para Mouse. 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".Y) (embora esses exemplos particulares não pode ser muito útil!).
Report "Curso de Criacao de Jogos Em Html5 Engine Construct 2"