Como fazer um jogo de plataforma

12

Index

Tagged

Contributors

Stats

150,648 visits, 191,820 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 30 Apr, 2017. Last updated 25 Feb, 2019

Adicionando um novo Layout

Ok, agora nós queremos adicionar mais alguns objetos. No entanto, vamos acidentalmente selecionar o fundo, a menos que o tranquemos, tornando-o não selecionável. Vamos usar o sistema de camadas para fazer isso.

Layouts podem consistir de múltiplos layers, que você pode usar para agrupar objetos. Imaginem camadas como folhas de vidro empilhados em cima uns dos outros, com objetos pintados em cada folha. Ele permite que você organize facilmente os objetos que aparecem em cima dos outros, e as camadas podem ser escondidas, trancadas, ter efeitos de paralaxe aplicada, e muito mais. Por exemplo, neste jogo, queremos que tudo apareça acima do background, para isso precisamos fazer uma outra camada em cima para colocar outros objetos.

Para gerenciar as camadas, clique em Layers tab, que geralmente fica ao lado do Project bar:

Você deve ver Layer 0 na lista (Construct 2 faz contagens a partir de zero, uma vez que funciona melhor assim na programação). Clique no ícone do lápis e renomeie para Fundo, já que é o layer de fundo . Agora clique no botão (ícone) verde "adicionar" para adicionar uma nova camada para os nossos outros objetos. Vamos chamar de Main. Finalmente, se você clicar no pequeno ícone de cadeado ao lado de Fundo, ele se tornará fechado. Isso significa que você não será capaz de selecionar qualquer coisa sobre ele. Isso é bastante conveniente para que o nosso background não seja selecionado acidentalmente. No entanto, se você precisar fazer alterações, você pode simplesmente clicar no cadeado novamente para desbloquear.

As caixas de verificação também permitem ocultar camadas no editor, mas nós não precisamos disso agora. Sua barra de camadas deve ficar assim:

Agora, certifique-se que a camada 'Main' esteja selecionado na barra de camadas. Isso é importante - a camada selecionada é a camada ativa . Todos os novos objetos inseridos são inseridos para a camada ativa , de modo que, se não for selecionado, estaremos inserindo acidentalmente na camada errada. A camada ativa é mostrada na barra de status, e também aparece uma dica de ferramenta quando colocar um novo objeto - vale a pena se manter atento.

Adicionando animação

A plataforma Selva tem uma animação definida no arquivo Tiles\Tiles.png. Vamos importar estas animações a um objeto Sprite e usá-lo como um objeto estático.

Como você fez para o Tiled Background, de um duplo clique em um espaço vazio no layout para inserir um novo objeto. Desta vez, escolha Sprite . O mouse se transforma em uma cruz de novo. Clique em algum lugar no meio da tela.

O Editor de Imagem abre mais com algumas janelas extras, pois os Sprites podem ser animados. No entanto, nós não vamos ter uma animação no jogo - a sua velocidade será 0. Nós vamos ter uma figura em cada quadro da animação. Então, nós podemos mudar o que está mostrando na sequencia, alterando o quadro de animação.

Clique com o Botão direito do mouse no painel Animation Frames na parte inferior, e escolha Import sprite strip... . Isso nos permite cortar grades de imagens para as animações. Também dá pra trabalha com mapas e vários quadros.

Aparece uma caixa de opções para abrir o arquivo. Escolha o arquivo Tiles\Tiles.png do pacote de sprites. O Construct 2 precisa saber quantas peças estão na imagem. Você notará que Tiles.png é uma sequencia de quadros 12x12. Digite 12 e 12 e clique em OK.

Dê ao Construct 2 um momento para cortar os objetos. Agora você deve ter todos os 144 objetos importados como quadros de animação! Nós não precisamos mais do primeiro quadro em branco, porém, assim clique com o botão direito do mouse e selecione delete.

Você pode querer redimensionar a janela dos frames de animação para melhor visualizar seus quadros. Além disso, você pode clicar com o botão direito do mouse em um espaço e alterar o tamanho da miniatura se preferir miniaturas grandes.

Por padrão, a velocidade da animação é 5, o que significa que as imagens vão ficar mudando. Queremos que a imagem fique em seu quadro atual, então vamos garantir que a velocidade da animação seja 0. Selecione a animação Default na janela Animations .

Agora a Barra de Propriedades mostra as propriedades para a animação. Defina sua propriedade Velocidade para 0 .

Agora, os quadros não vão ficar mudando a sua imagem - pois vai ficar no mesmo quadro. Feche o editor de imagem, clicando no X em uma das três janelas flutuantes. Seu Sprite agora deve estar no layout!

Com ela selecionada, mude o nome de Sprite para Quadros na Barra de propriedades. É sempre uma boa ideia dar aos objetos um nome apropriado.

Criando cenário de quadros

Observe que o objeto Sprite tem uma propriedade chamada Initial frame . Podemos usar isso para mudar o quadro atual. Selecione o objeto do quadro e mude sua estrutura inicial para 1:

Observe que a imagem muda por causa do quadro de animação 1. É assim que pode configurar diferentes quadros em todo o nível.

Segure Control e clique e arraste a imagem. Você vai criar um outro objeto imagem. Faça isso de novo para que possamos ter 3 imagens em uma fileira. Selecione o do meio e defina sua estrutura inicial para 10 . Faça o mesmo para o outro à direita, mas mude o seu quadro inicial para 13 . Agora você deve ter algo parecido com isto:

Se você está querendo saber como checar qual número de quadros corresponde a qual imagem, basta clicar duas vezes no objeto. O editor de imagem vem de novo com as janelas de animação, onde você pode verificar. Lembre-se que você pode arrastar e controlar uma imagem e fazer mais uma imagem do mesmo tipo, de modo que você não precisa ficar digitando nos quadros iniciais.

Ativando o snap to grid

Vai ser uma dor de cabeça se tiver que alinhar estas imagens com a mão! Você pode ativar uma grade para tornar isso mais fácil. Na faixa de opções, clique em View e habilitar Snap to Grid . O tamanho da grade padrão de 32x32 está bom. Nossas imagens são 128x128, o que é um múltiplo de 32. Isto torna mais fácil para deixar as imagens alinhadas enquanto ainda temos alguma liberdade no posicionamento.

Tente arrastar em torno das imagens agora. Você deve notar que elas se ajustam a uma grade de 32x32. Agora deve ser fácil alinhar as três peças juntas.

  • 0 Comments

Want to leave a comment? Login or Register an account!