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.
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.
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.
Carregue para o Tiled, o arquivo fundo.jpg.
Na aba Properties altere o name para fundo, Size troque por 600X400 e Position para 0, 0.
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.
Agora ajuste o Sprite criado, conforme mostra a imagem abaixo.
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.
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.
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.
Adicione o componente Sine, presente na guia Movements.
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.
Com o personagem inserido, adicione o Behavior Platform.
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.
Adicione o BehaviorSolid ao novo Sprite criado.
De Play no jogo e veja que agora o personagem não cai.
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.
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.
Agora vamos começar adicionar os eventos e condições.
De um duplo clique na cena e adicione o Input Keyboard.
Adicione os seguintes eventos e condições, no Event Sheet.
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.
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.
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.
