Jogo de Plataforma com Construct 2

Aprenda a criar um jogo simples de plataforma com Scirra Construct 2.

Publicado em

Os jogos de plataforma podem ser criados facilmente com qualquer ferramenta, até mesmo para os mais corajosos, com Javascript puro ou com um framework para jogos.

O fato é que este modelo de jogos existe desde a época do Atari e vem sempre nos surpreendendo com as mais variadas histórias, gráficos e Jogabilidade.

Scirra Construct 2, é uma ótima ferramenta para construção de jogos 2D, a ferramenta não exige que o desenvolvedor saiba programar, pois todas as ações são adicionadas por cliques de condições.

Faça download do pacote de imagens que serão utilizadas. Estas imagens foram retiradas do site Freepik.com.

Abra o Construct e crie um projeto vazio.

Imagem sem descrição.
Imagem sem descrição.

Assim que o projeto for criado, clique em uma parte branca, na aba Properties, mude o Layout Size para 600X400. Na aba Projects clique sobre o nome do seu projeto, volte a aba Properties e mude o Window Size para 600X400.

Imagem sem descrição.
Imagem sem descrição.

Renomeie a primeira camada para fundo, ela será responsável por conter o Background e as plataformas.

De um duplo clique no palco e insira um Tiled Background.

Imagem sem descrição.
Imagem sem descrição.

Carregue para o Tiled, o arquivo fundo.jpg.

Imagem sem descrição.
Imagem sem descrição.

Na aba Properties altere o name para fundo, Size troque por 600X400 e Position para 0, 0.

Imagem sem descrição.
Imagem sem descrição.

Clique em uma parte vazia da tela, e insira um Sprite, carregue o arquivo plataformas.png, antes de fechar a janela Edit, clique na opção Crop, ela deve remover todo espaço vazio após o término das curvas.

Após inserir a imagem na cena, altere o name na aba Properties para plataformas.

Imagem sem descrição.
Imagem sem descrição.

Agora ajuste o Sprite criado, conforme mostra a imagem abaixo.

Imagem sem descrição.
Imagem sem descrição.

Crie uma nova Layer e atribua o nome de colisores, tranque a Layer fundo e não se esqueça de clicar em cima da Layer colisores, para selecioná-la.

Imagem sem descrição.
Imagem sem descrição.

Com a Layer colisões selecionada, insira um novo Sprite, carregue o arquivo barra.png, use a ferramenta Crop para remover os espaços vazios e renomeie na aba Properties para barra.

Com a barra selecionada, pressione CTRL+C e CTRL+V para copiar e colar, adicione uma nova cópia e ajuste as duas barras, como mostra a imagem abaixo.

Imagem sem descrição.
Imagem sem descrição.

Agora será adicionado um comportamento Sine, para as barras com ciclo na vertical, as duas barras fazem parte de um único objeto, clique em qualquer uma delas, vá até a aba Properties e clique sobre a opção Behaviors.

Imagem sem descrição.
Imagem sem descrição.

 

Adicione o componente Sine, presente na guia Movements.

Imagem sem descrição.
Imagem sem descrição.

Agora na aba Properties, na guia Behaviors, contém opções referente ao componente Sine, mude a opção Movement para Vertical, isto nas duas barras, pois a outra contém o componente, mas não é aplicada a mesma configuração.

Com a barra inserida e configurada, adicione agora um novo Sprite, carregue o arquivo fanstasma.png, altere o name para fantasma e configure seu tamanho como apresentado abaixo.

Imagem sem descrição.
Imagem sem descrição.

Com o personagem inserido, adicione o Behavior Platform.

Imagem sem descrição.
Imagem sem descrição.

De Play no jogo e veja que nosso personagem caiu, saindo da cena. Isto ocorre porque não esta ocorrendo colisão, então deve inserir um Sprite vazio ajusta-lo onde terá colisão e adicionar um BehaviorSolid.

Insira um Sprite, porém não carregue nenhum arquivo, apenas feche a janela Edit, assim que for inserido, ajuste seu tamanho para ocupar o espaço da plataforma de baixo, como mostra a imagem abaixo.

Imagem sem descrição.
Imagem sem descrição.

Adicione o BehaviorSolid ao novo Sprite criado.

Imagem sem descrição.
Imagem sem descrição.

De Play no jogo e veja que agora o personagem não cai.

Imagem sem descrição.
Imagem sem descrição.

Faça o mesmo processo, para adicionar novos blocos de colisão, você pode duplicar o Sprite colisores e apenas a justar o tamanho, mas se preferir adicione novos Sprite e utilize o BehaviorSolid, os novos colisores devem estar no tamanho e posição como mostrado na imagem abaixo destacado em vermelho.

Imagem sem descrição.
Imagem sem descrição.

Adicione o BehaviorSolid para os Sprite barra, o mesmo que adicionamos o Sine.

Com os blocos de colisões adicionados, fazendo as plataformas ter colisão, agora vamos adicionar a chave, para isto adicione um novo Sprite e carregue o arquivo chave.png, e adicione no canto superior direito da cena, atribua o nome de chave.

Imagem sem descrição.
Imagem sem descrição.

Agora vamos começar adicionar os eventos e condições.

De um duplo clique na cena e adicione o Input Keyboard.

Imagem sem descrição.
Imagem sem descrição.

Adicione os seguintes eventos e condições, no Event Sheet.

Imagem sem descrição.
Imagem sem descrição.

Para finalizarmos, crie uma nova Layer chamada de final, e carregue o arquivo final.png, altere seu nome para final.

Esta imagem só deverá aparecer após o Player tocar na chave, então na aba Properties, altere a opção Initialvisibility para Invisible e oculte a Layer final.

Adicione os eventos e condições apresentada na imagem abaixo.

Imagem sem descrição.
Imagem sem descrição.

Com isto de Play no jogo e encoste na chave e verá o final, não deixe de assistir o vídeo abaixo, ele apresenta como criar este mesmo jogo, porém de forma muito mais detalhada e com novos recursos, como Som e coleta de Moedas.

Exporte o jogo para HTML 5 e passe para seus amigos e familiares se divertir.

Imagem sem descrição.
Imagem sem descrição.

Se você não conferiu a criação do jogo SpaceInaders, acesse a categoria Construct 2 e tente reproduzir o jogo, será de suma importância para o seu aprendizado.

Até a próxima.

Gunnar Correa
Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. Fundador da SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.

Todos os nossos cursos em promoção
Todos os nossos cursos em promoção

Webstories

Todos os nossos cursos em promoção


Deixe um comentário
Aguarde...
Todos os nossos cursos em promoção