Construct 2 Tutoriais: Como fazer um jogo plataforma com Construct 2 – parte I

Mostrando postagens com marcador Como fazer um jogo plataforma com Construct 2 – parte I. Mostrar todas as postagens

Mostrando postagens com marcador Como fazer um jogo plataforma com Construct 2 – parte I. Mostrar todas as postagens

sábado, 28 de janeiro de 2017

Como fazer um jogo plataforma com Construct 2 – parte I

Como fazer um jogo plataforma com Construct 2 – parte I

Você aprenderá aqui

Elementos necessários

Requisitos

Plano de fundo (background)

Crie um projeto novo, neste caso como o projeto é pequeno é indiferente criar um arquivo simples único, mas se fosse um projeto maior seria recomendado criar um projeto de pasta. O novo projeto vai conter um conjunto de pastas internas com um layout, uma planilha de eventos e um layer inicial como pode ser visto na aba Layers. Como só existe um layer, você pode clicar na área de desenho útil chamado de canvas, então vá em Properties (propriedades) e dê o nome para o layer (Layout 1) de Fase1, coloque o tamanho (Layout Size) em 4000 x 432, coloque as margens (Margins) em 500 x 500 (print0000).

print001

Vá para aba layers e nomeie o Layer 0 de Background caso prefira assim.

print002

Clique com o botão direito no canvas e aparecerá o menu de opções, então clique em inserir novo objeto (insert new object), aparecerá um conjunto de objetos que podem ser inseridos no layer (print0003), clique em TiledBackground, posicione o cursor em cruz que aparecerá dentro do canvas e clique com o esquerdo.

print003

Ao criar o TiledBackground no canvas ele o criará dentro do layer que eu nomei de Background, pois ele está selecionado. O editor de imagem será exibido, então utilize a opção para carregar uma imagem (print004), em seguida abra o arquivo de imagem que deseja colocar no fundo, para este exemplo utilizei um cenário, mas você pode escolher outro, então feche o editor de imagem.

print004

Com o objeto TiledBackground selecionado, mude o Position para 0 x 0 e o Size para 4000 x 432, assim a imagem será posicionada no canto esquerdo superior e ficará com o tamanho do canvas. Para evitar que fique manipulando o layer do plano de fundo sem querer tranque-o (print 005).

print005

No caso deste tutorial utilizei uma imagem tiled que é verticalmente completa e repetida horizontalmente criando a sensação de continuidade do cenário. Você pode desenhar o cenário inteiro ou utilizar vários Sprites ou Tileds no layer do Background para criar o efeito de fundo que deseja. Contudo lembre-se que isso pode aumentar o tempo de carregamento para quem não possui uma internet de alta velocidade, como é o caso de grande parte dos telefones portáteis. Você pode adicionar outros planos de fundo com colocando-os com o Paralax.Y = 50 para que pareça 50% mais lento ao mover para esquerda e direita, dando a impressão de estar mais distante.

Sólidos (solid)

Uma técnica interessante para fazer a plataforma com objetos com o comportamento Solid é utilizar o objeto Sprite, pois você pode importar um conjunto de sprites para dentro dele, formando um conjunto, então existirá apenas um objeto do tipo Solid e você só tem que indicar qual das imagens deve ser exibida, diminui a quantidade de objetos para se preocupar. Clique com o botão direito em Layers e utilize a opção Add layer at top ou apenas clique no botão +, em seguida clique com o botão direito dentro do canvas e clique em insert new object, selecione Sprite, coloque o nome Plataforma, clique no botão insert e posicione a cruz em qualquer lugar dentro do canvas para confirmar a criação. Verifique abaixo do editor de Sprites a janela Animation frames, clique na área livre dele e utilize a opção import sprite strip (print006), abra o arquivo “plataforma basica.png” (do exemplo), aparecerá uma janela para informar a quantidade de células na vertical e na horizontal, neste caso 10 x 8, sobrará o sprite 0 e alguns sprites vazios, pois um Sprite precisa ter pelo menos um deles, então, delete este sprite vazio. Adicione um ponto de origem da animação (print010), para este caso coloquei o origem point em Top e em seguida Apply to whole animation, assim o ponto de origem ficará no top das imagens, assim os pés do meu personagem poderão andar sobre os objetos e não em suas bases, mas se for necessário pode ajustar manualmente depois.

Feche o editor de Sprite, selecione o Sprite que está no canvas e em seguida posicione-o em um lugar onde haverá uma parte da plataforma onde o player poderá andar, poise se você excluí-lo do canvas ele continuará no projeto, mas só aparecerá na estrutura de pastas e sumirá da lista de objetos do layout atual (fase1).

Você pode criar outros layers, pois para melhorar a aparência é possível posicionar alguns layers acima ou abaixo do layer que conterá o player, criando a ilusão de que o personagem está entre os objetos do cenário, um efeito de 2.1d. Clique com o botão direito no objeto Sprite que nomeamos de Plataforma, clique na opção behaviors (comportamentos) e aparecerá uma janela de comportamentos , clique no botão + (add new), aparecerá uma lista de opções de comportamentos, seleciona o comportamento de atributo sólido (Solid). Este comportamento vai conferir ao objeto a capacidade de interagir com um objeto que utilize o comportamento Plataform, dessa maneira o objeto com comportamento Plataform pode mover-se no cenário, tendo o Solid como limitador de movimento.

print006

Organizando o cenário básico

Em View você pode aumentar e diminuir o zoom para facilitar a visualização. Você pode também habilitar o Snape to grid, assim fica mais fácil posicionar os objetos. Selecione o Sprite de sólido que criamos e faça cópias dele, posicionando conforme queira criar fazer o caminho para o player. Modifique o Initial frame para variar as imagens. Pode até selecionar vários objetos de uma vez, copiá-los e posicioná-los. Seria interessante deixar esse layer trancado também (depois de montar o cenário) e destrancá-lo apenas quando for realizar alguma mudança nos seus objetos. Não se esqueça de colocar o Speed 0 (zero), senão os sprites ficarão mudando de frame.

Para facilitar faça um print dos frames do sprite com comportamento Solid que servirá de caminho (print007). Outra dica é utilizar o comando Ctrl + Arrastar objeto para copiar e criar uma nova instância do objeto.

print007

Veja uma prévia de como pode ser (print008).

print008

Player de plataforma

Vamos criar dois objetos que compõem o player, um do tipo Sprite que vai conter as imagens para simular a animação do personagem e um outro Sprite que servirá para receber os comandos e conter os comportamentos de Player de plataforma, ou seja, que é capaz de se mover sobre objetos sólidos, pular e cair, além do Scroll To que faz o cenário acompanhar o movimento do personagem. É muito interessante utilizar um objeto limpo para servir de interface de interação com o usuário porque ele não estará processando imagem alguma, enquanto que o objeto que processa as imagens apenas acompanha o movimento sem atrapalhar a agilidade de interação. Crie um layer para o player. Adicione um objeto Sprite no canvas com dentro do layer do player, renomeie a animação Default para Parado, em sua com o import frames as imagens com o nome “Mario Parado.png”, em seguida exclua o frame 0 vazio. Utilize o crop transparent edges, caso for importar várias imagens para formar a animação Parado utilize o crop transparent edges com o Shift selecionado para remover os espaços vazios ao redor dos frames ao mesmo tempo.

print009

Adicione um ponto de origem da animação (print010), para este caso coloquei o origem point em Botton e em seguida utilizei o Apply to whole animation, assim o ponto de origem ficará nos pés do meu personagem em todas as imagens do frame (isso é interessante para quando são várias imagens para a animação), mas se for necessário pode ajustar manualmente.

print010

Para um exemplo com movimento, vou criar um segundo objeto Sprite e importar um arquivo com vários sprites, vai ficar bem estranho, pois é apenas para demonstração de movimento, posteriormente vamos importar sprites para as várias situações: Parado, Andando, Correndo, Pulando, Caindo, Morrendo, etc.

Primeiro crie um novo Sprite, importe o arquivo “Mario básico teste.png”, utilize o crop com Shift pressionado, adicione um ponto Botton e Apply to whole animation. Renomeie a animação Default para Teste se desejar. Com a animação Teste selecionada, mude o Speed para 22 e o Loop para Yes, assim a imagem ficará em movimento no jogo (print011).

print011

Adicione um objeto Sprite no mesmo canvas do Sprite de imagens do player, no editor de imagem do Sprite, pinte o canvas (o frame em branco que já foi criado automático ao criar o Sprite novo) do Sprite de uma cor (no meu exemplo azul) (print012) e coloque um image point em Booton nele também.

print012

Clique sobre ele com o botão direito e adicione os behaviors ScrollTo e Plataform (print13). Redimencione o Sprite azul para 17,34, assim ele terá formar compatíveis com os sprites do Mario (Parado, Teste, e os outros que faremos).

print013

Posicione o novo objeto em cima do objeto de imagens do player – para facilitar vamos chamar o objeto (pode escolher o Parado ou o Teste) de PlayerImage (o que conterá as animações) e PlayerBox (o que conterá os comportamentos) – mude sua Opacity para 20 e sua Initial visibility para invisible, então redimencione-o para ficar com o mesmo tamanho do personagem. Vá na guia Event sheet 1 que você pode renomear para Fase1Eventos.

Adicione um evento com o Add event, selecione System (print14) clique em Next.

print014

Selecione Every tick (print015) clique em Done.

print015

Clique em Add action selecione PlayerImage (print016) clique em Next.

print016

Selecione set position to another object (print017).

print017

Clique em para selecionar o PlayerBox e clique em ok (print018). Como vamos utilizar o image point 0 (zero) não é necessário modificar.

print018

Primeiro teste

Assinar: Postagens (Atom)