Escolar Documentos
Profissional Documentos
Cultura Documentos
Se você ainda não tiver, pegue uma cópia da última versão do Construct 2
aqui here. O editor Construct 2 é apenas para Windows, mas os jogos que
você faz pode ser executado em qualquer lugar, como Mac, Linux ou iPad. O
Construct 2 também pode ser instalado em contas de usuário limitadas.
Também é portátil, assim você pode instalar em um cartão de memória USB,
por exemplo, e levá-lo com você!
INTRODUÇÃO
Agora que você está pronto para iniciar, abra o Construct 2. Clique no
botão File, e selecione New.
Em New Project você não precisa mudar nada. Apenas clique em Create
project. O Construct 2 vai manter todo o projeto em um único
arquivo .capx para nós. Agora você deve estar olhando para um layout vazio -
onde você pode criar e posicionar os objetos. Pense em um layout como um
nível de jogo ou na tela de menu. Em outras ferramentas, isso poderia ter sido
chamado de room, scene ou frame.
TAMANHO DO LAYOUT
Primeiro de tudo, precisamos que o layout (nível) seja um pouco maior do que
o padrão. Clique com o botão esquerdo do mouse em algum espaço no layout
e na Properties Bar ira aparecer Layout Properties. Altere o tamanho do nível
de 4000 x 2048.
Vamos adicionar uma imagem de fundo em todo o layout. Clique duas
vezes em um espaço no layout. Isso fará com que apareça a opção Insert
Object . Dê um duplo clique no objeto Tiled Background para inseri-lo.
A imagem de fundo é muito grande, por isso é difícil de ver tudo de uma vez
no nível de zoom atual. Vamos tentar diminuir o zoom para visualizar todo o
layout. Segure o Control e role a roda do mouse para diminuir o zoom. Outra
alternativa é, clique em View - e algumas vezes em Zoom out na barra. Você
deve ser capaz de ver todo o layout, um pouco parecido com isto:
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.
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.
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.
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.
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.
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.
ADICIONANDO UM SPRITE DO JOGADOR
Vamos adicionar um sprite para o jogador. Como antes, de um duplo
clique em um espaço no layout para inserir um novo objeto, e escolha Sprite .
Quando a mira surgir, clique em algum lugar acima das imagens. O Editor de
Imagem aparecerá .
RECORTE
Você pode notar que o jogador tem um espaço transparente vazio ao seu
redor. Isso é comum depois de importar as imagens. No entanto, é uma
prática ruim deixar esse espaço sobrando - desperdiça memória e pode fazer
colisões menos confiáveis.
DEFININDO A ORIGEM
A origem é o centro, ou "hot spot", do objeto. Em plataformas, é melhor ter a
origem posicionada nos pés do jogador. Isto significa que se a animação
alterar a altura, será alterado só para cima e não para baixo também.
Para definir a origem, clique na ferramenta Set origin and image points no
editor de imagem.
LOOP DA ANIMAÇÃO
Clique em padrão na janela Animações . Mude o nome para ocioso .
ADIÇÃO DE COMPORTAMENTOS
O Construct 2 vem com um monte de comportamentos . Estes fazem seus
objetos funcionarem de formas pré-definidas, que muitas vezes salva um
monte de tempo. É possível voltar a fazer tudo o que os comportamentos
fazem no sistema de eventos, mas muitas vezes é difícil e demorado para
fazer isso. É por isso que os comportamentos são realmente úteis para obter
o seu jogo instalado e funcionando rapidamente!
Como antes, devemos ter a origem na parte inferior. Então clique em Set
origin and image points novamente e pressione 2 (ou use o menu quick
assign ) para posicionar a origem na parte inferior.
Como antes, devemos ter a origem na parte inferior. Então clique em Set
origin and image points novamente e pressione 2 (ou use o menu quick
assign ) para posicionar a origem na parte inferior.
Feche o editor de imagem. Agora você deve vê-lo no layout. Redimensione
para aproximadamente o mesmo tamanho que o corpo do jogador, como
mostrado abaixo - este tamanho é 53x107.
Nós também queremos dar movimento para o objeto PlayerBox para uma
detecção de colisão mais confiável. Ainda nas propriedades do PlayerBox,
clique Add / Edit na barra de propriedades para Editar comportamentos . Na
caixa de diálogo que aparece, clique no botão verde.
Queremos também que a tela a siga o jogador, então clique no botão verde
novamente e adicione o comportamento Scroll To .
PROBLEMAS
Se você jogar um pouco poderá perceber alguns problemas:
Em vez de criar uma animação totalmente nova com o jogador virado para a
esquerda, podemos simplesmente usar a ação do Construct 2, Set mirrored ,
que irá espelhar automaticamente o objeto para fazê-lo parecer estar voltado
para a esquerda em vez da direita.
Volte para a Folha de Eventos. Vamos fazer um novo evento com a condição
"On left arrow key pressed" e a ação "Set player mirrored".
Clique duas vezes em um espaço para criar um novo evento ou clique no link
Add Event. Clique duas vezes no objeto Keyboard, pois ele contém a
condição On .
Desta vez, passe pelo processo novamente, mas faça o evento On the right
arrow key e defina o player Not mirrored . Você deve terminar isso:
Para nos dar uma visão melhor, também vamos fazer o tamanho da janela um
pouco maior. Clique no nome do projeto na parte superior da Barra do
Projeto para exibir as propriedades do projeto. Altere o tamanho da
janela para 800, 600 **.
Agora que temos um lugar para saltar, com um tamanho de janela maior para
que possamos ver mais, vamos adicionar o resto das animações do jogador.
2. Run
2. Digite o nome da animação. Você pode querer usar um nome mais fácil de
lembrar como IdleToRun .
5. Localize o sprite strip. Note que no pacote do sprite Jungle cada frame
também está disponível como um arquivo PNG separado. Os quadros podem
ser importados dessa forma, mas geralmente é mais rápido usar a versão de
sprite strip (tira de sprites), então selecione a imagem com a tira completa.
Faça isso para cada animação, então finalmente há cinco animações para o
jogador.
Observe também que temos uma animação IdleToRun . Isto significa que
quando começamos a andar, as animações vão assim:
Parado: Idle
Começa a andar: IdleToRun
1. Selecione o objeto.
Observe que aqui sub-events têm de ser usados - eles aparecem recuados
sob o evento On jump . Os sub-eventos são verificados após o evento "pai"
ter sido executado. Isso implementa corretamente nossa lógica: quando o
comportamento de Plataforma saltar, se ele está se movendo, defina
para JumpFromRun ; Caso contrário, defina para JumpFromStand .
Para fazer um sub-evento, clique com o botão direito do mouse no evento pai
e selecione Add -> Add sub-event, ou selecione-o e pressione S .
ADICIONANDO UM INIMIGO
Espero que você esteja familiarizado com o processo de adição de sprites e
animações agora. Assim, para a concisão os passos na íntegra não serão
repetidos. Vamos adicionar um novo sprite para um inimigo.
Vamos fazer o inimigo do caracol se mover para frente e para trás através da
plataforma.
MOVENDO O INIMIGO
O principal problema com a movimentação do caracol é como detectar
quando ele atinge a borda de uma plataforma. A maneira mais fácil de fazer
isso é com marcadores invisíveis nas bordas. Estes são apenas sprites
invisíveis que irão mudar a direção do caracol quando ele colide com os
marcadores.
- ele vai cair das bordas se você quiser que ele caia.
- se você quiser fazer um inimigo saltar, você pode fazer o inimigo saltar
automaticamente também usando a ação "simulate control".
Adicione o comportamento Platform ao sprite SnailEnemy. Como não
estamos usando animações complicadas neste objeto, podemos usar o
comportamento da plataforma diretamente no objeto sem um objeto 'caixa'
invisível. Observe que, se você estiver fazendo um jogo de plataforma
diferente com inimigos com animações complicadas, você deve usar a
mesma técnica de caixa que usamos no player.
Evento: SnailEnemy -> Compare instance variable -> action equal to "right"
(use aspas duplas aqui para indicar o texto)
Deve ser simples fazer o mesmo para a esquerda. Também queremos que a
imagem espelha esquerda e direita como fizemos para o jogador. Então
adicione SnailEnemy -> Set mirrored no evento "left", e SnailEnemy -> Set not
mirrored no evento "right". Você deve terminar com isso:
Subevent: SnailEnemy -> Compare instance variable -> action equal to "right"
Subevent: Else
É importante usar Else aqui, pois os eventos são executados de cima para
baixo. Se em vez de 'else' dissemos 'action equal to "left'', observe que o
evento anterior teria apenas configurado para isso. Então, ele estaria apenas
se configurando novamente, sem efeito global. Usando 'else', evitamos que o
segundo evento seja executado se o primeiro for verdadeiro.
Tente criar uma plataforma com dois caracóis nela. Observe que eles se
controlam individualmente, já que cada um tem sua própria variável de
instância action mantendo seu estado atual. Esperamos que você possa
começar a ver como as variáveis de instância são importantes para controlar
instâncias de forma independente - eles não têm que fazer exatamente a
mesma coisa uns com os outros!
OBJETOS JUMP-THRU
Se você colocar algumas plataformas pela tela, vai notar que se você saltar
para uma plataforma por baixo dela, você irá bater a cabeça no fundo da
plataforma e cair de volta. E se você quiser fazer plataformas em que se pode
saltar e alcançar o nível superior atravessando a plataforma? Isto é o que o
behavior (comportamento) Jump-thru faz. Como no comportamento Solid,
você pode ficar sobre o nível da Plataforma, mas agora jogador pode saltar
através da plataforma.
Vamos fazer uma versão Jump-thru do nosso objeto Plataforma. Clique com o
botão direito do mouse no objeto Plataforma e selecione Clone object type .
Isso vai criar um tipo de objeto separado, Plataforma2 , que pode ter
comportamentos diferentes. Delete o comportamento Solid e adicione o
comportamento Jump-thru.
Execute o jogo. Observe como você pode saltar para ela por baixo.
Espero que agora você saiba o suficiente para projetar um nível inteiro! Aqui
está um projeto de nível em zoom criado rapidamente para escrever o tutorial.
Pode ajudar a mostrar algumas das possibilidades. Observe o uso de
marcadores em plataformas para manter os caracóis em suas plataformas.
PARALLAX
Tente adicionar um efeito de paralaxe para fazer o fundo parecer mais longe.
Selecione a layer Background na barra de layers. Na barra de propriedades,
defina a propriedade Parallax para 50, 50 (o que significa meia velocidade de
rolagem). Observe como o fundo se move mais lentamente, dando uma
sensação de distância. Usando várias camadas, todas com diferentes taxas
de paralaxe pode criar uma sensação quase 3D para um jogo 2D.
CONCLUSÃO
Este tutorial cobriu muita coisa. Você pode sempre revisá-lo no futuro. Aqui
estão alguns dos pontos-chave:
- A ação Set mirrored evita que você tenha que fazer cópias espelhadas de
todas as suas animações.
MAIS LEITURA
Você pode estar interessado num guia alternativo para novatos, que é um
tutoria para fazer um jogo de tiro top-down tutorial to make a top-down
shooter. Ele abrange alguns pontos diferentes, como fazer um display de
heads-up, e tem muitos outros detalhes sobre o uso de variáveis de instância.
Estas são ambas as coisas que podem ser aplicadas a jogos de plataforma,
por isso seria absolutamente útil dar uma olhada nele, além deste tutorial.