Você está na página 1de 39

INSTALANDO O CONSTRUCT 2

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.

O mouse se transforma em uma cruz. Não importa onde você colocá-lo


inicialmente, por isso só clique com o botão esquerdo em algum lugar no
layout. O editor de imagem se abre para que você possa inserir a imagem
lado a lado. Vamos importar o arquivo Background Image\Background.png do
pacote de sprites. Clique no icone Open para importar a imagem.
Selecione o arquivo Background Image\Background.png, então feche o editor
de imagem. Você deve ver parte da imagem de fundo no layout.

Precisamos aumentar o tamanho do fundo para cobrir todo o layout. Verifique


se ele está selecionado (à esquerda clique no layout) e suas propriedades
devem aparecer na Properties Bar. Para cobrir todo o layout, defina
seu Position em 0, 0 e Size em 4000, 2048 (o mesmo tamanho do layout).

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:

Note que o contorno tracejado no topo esquerdo é o tamanho da tela em


comparação com o resto do layout. Pressione Ctrl 0 para voltar o zoom para
100%, ou View - Zoom to 100% na barra. Você provavelmente está ampliando
até o meio do layout agora. Use as barras de rolagem para navegar de volta
para o canto superior esquerdo do layout. Você também pode clicar e arrastar
no botão de rolagem do mouse para 'navegar' em todo o layout, ou mantenha
pressionado o botão de espaço para fazer o mesmo, se você não tiver um
botão de rolagem no mouse.

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.
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á .

Vamos importar a tira de sprite para a animação do jogador ocioso . Como


antes, clique com o botão direito do mouse na janela de Animation Frames e
selecione Import sprite strip....

Escolha o arquivo Player\Idle\Idle.png. Note que a faixa de sprite não


completa um dos quadros de animação. Você também pode importar a
seqüência de arquivos com a opção Import frames..., mas vamos nos ater a
este caminho por enquanto.

Como as imagens não formam um numero par, o construct 2 verifica o


número de quadros. Ele deve identificar corretamente que há 11 quadros .
Clique em OK e os quadros serão importados.
Nota que ainda temos o quadro padrão do início em branco. Clique com o
botão direito do mouse e exclua o quadro de novo. Agora você deve ter uma
seqüência de 11 quadros de animação para a animação do jogador ocioso.

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.

No entanto há uma maneira rápida de se livrar dele. segure shift e aperte no


botão cortar na barra de ferramentas de edição de imagens.
Se você não segurar shift, só o quadro selecionado é cortado, por isso
certifique-se de mantê-lo pressionado quando você clicar para cortar toda a
animação. A imagem do jogador agora deve ser muito bem cortado, sem
espaço desnecessário.

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.

Você deve observar um ponto vermelho aparecer no leitor. Essa é a origem.


Você pode clicar para mudar isso. No entanto, queremos que fique alinhado
na parte inferior. Nós podemos rapidamente atribuir isso pressionando 2 no
teclado numérico (se num lock estiver ligado). Se você não tem um teclado
numérico (por exemplo, alguns laptops), você pode clicar Origin na
janela Image points e escolha o Botão Quick assign - .
Seria uma trabalheira fazer isso para cada quadro, mas felizmente há um
outro atalho: na janela que aparece Image points , clique com o botão direito
do mouse, origem e Apply to whole animation* .

Bingo! A origem deve ser definida em cada quadro de animação.

LOOP DA ANIMAÇÃO
Clique em padrão na janela Animações . Mude o nome para ocioso .

Na barra de propiedades, mude a velocidade da animação para 9 e mude


o Loop para Yes.

Clique com o botão direito na animação Ocioso na janela Animações e


selecione preview . Você deverá ver o jogador subindo e descendo
suavemente. Tudo pronto! Feche a visualização da animação e do editor de
imagem. Você deverá ver seu jogador no layout.

Renomeie o objeto para Player na barra de propriedades, já que estamos


sendo organizados.

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!

O Platform behavior (ou comportamento da plataforma) pode cuidar das


complexidades do movimento da plataforma para nós. No entanto, há uma
dica importante para usá-lo: o comportamento deve ser aplicada a um objeto
retângulo invisível , e o jogador posicionado no topo. O comportamento da
plataforma funciona muito melhor se o objeto com o comportamento não
animar, porque qualquer mudança no quadro de animação pode deixar o
objeto confuso. Além disso, ele evita situações de colisão tolas como, por
exemplo, o jogador ficar pendurado, fora de uma borda, pelo nariz ou algo
que esteja segurando.

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.

Renomeie esse objeto para PlayerBox já que é a caixa para o movimento e os


testes de colisão para o jogador. Além disso, na Barra de Propriedades,
defina a visibilidade inicial para Invisível, uma vez que não quer vê-lo.

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.

Clique duplo no comportamento Plataforma.


Você verá que algumas novas propriedades para o movimento plataforma
surgiram na barra de Propriedades . Você pode ajustar as configurações de
movimento, como velocidade e aceleração. Vamos fazer os saltos um pouco
mais ágil. Defina o Jump strength para 1100 e Gravidade para 2500 .

Queremos também que a tela a siga o jogador, então clique no botão verde
novamente e adicione o comportamento Scroll To .

Depois de adicionar os dois comportamentos, feche a caixa Player behaviors .

ADICIONANDO O COMPORTAMENTO SÓLIDO


O movimento de plataforma precisa saber quais objetos ele pode pousar. O
jogador vai cair de qualquer objeto que não tenha o comportamento Sólido .
Então, desta vez selecione o arquivo sprite Terreno e adicione um
comportamento para ele, desta vez escolhendo o comportamento Solid .

Agora, nós apenas precisamos posicionar o leitor acima do PlayerBox. Mude


para Event Sheet 1 . Este é o lugar onde nós definimos a lógica do jogo
usando o sistema de eventos do Construct 2.
CRIANDO EVENTOS
Os eventos testam se uma série de conditions (Condições) aconteceram.
Caso tenham acontecido, as ações ( actions ) são executadas.

Nesse caso, queremos que a posição do jogador esteja sempre em cima


do PlayerBox. Para isso teremos que atualizar sua posição a cada tick, ou
frame do jogo.

Dê um Clique-duplo na aba Event Sheet View para criar um nov evento.

Clique-duplo no objeto System , que contém a condição (A cada frame)Every


tick.
Agora temos um evento vazio que executará suas ações a cada leitura de
frame:

Clique em 'Add action'.

Queremos posicionar o objeto Player, então damo um Duplo-clique no


objeto Player'.

Duplo-clique Set position to another object. Para Object, clique em <click to


choose> e selecione PlayerBox. Deixe o Image point como 0 (Que significa a
origem). clique em Done. O evento ficará igual à imagem abaixo:
Espero que você entenda: Sempre posicionamos o jogador em cima do
objeto PlayerBox, que é o objeto que se movimenta

Execute o jogo clicando na seta verde 'play' posicionada no menu superior.

Mova-se e pule utilizando as setas do teclado. Você acaba de criar o seu


primeiro jogo de plataforma básico que corre e pula, parabéns !

PROBLEMAS
Se você jogar um pouco poderá perceber alguns problemas:

1. O jogador não olha para a esquerda.

2. Ainda não há nenhuma outra animação.

Vamos então resolvê-los! Começando pelo número 1: Vamos fazer o jogador


se virar para a esquerda e direita.

Primeiramente, volte ao Layout view usando as abas no top. Duplo-clique no


layout para inserir novamente um objeto, e insira o objeto Keyboard . Desde
que é apenas um objeto de entrada, você não precisar inserí-lo em lugar
algum - apenas ative entrada de Teclado para tod o projeto.

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 .

Uma lista de todas as condições do objeto Keyboard é exibida. Clique duas


vezes evento On Key .

O Construct 2 precisa saber qual tecla você deseja detectar. Clique no


botão button to choose , pressione a tecla de seta para a esquerda e, em
seguida, pressione OK . Clique em Done .
Agora queremos adicionar nossa ação: "Set the mirrored player". Como antes,
você primeiro escolhe o objeto, então você escolhe o tipo de condição ou
ação e, em seguida, digite qualquer parâmetro. Clique no link Add action à
direita do evento. (Certifique-se de não clicar acidentalmente Add event !)

Clique duas vezes em Player .

Clique duas vezes em Set Mirror .

Deixe o estado em Mirrored e clique em Done .

Agora você deve ter isso:

Agora adicione outro evento - clique duas vezes em um espaço, ou clique no


link Add event .

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:

Agora, quando pressionamos a esquerda, a imagem do jogador será


espelhada, e quando pressionamos para a direita, restaura a imagem para a
direita. execute o jogo e experimente!

ADICIONE MAIS ANIMAÇÕES


Vamos adicionar o resto das animações do jogador. Primeiro, vamos
adicionar mais algumas plataformas para o jogador saltar para que possamos
ver mais facilmente como funcionam as animações.
Volte para o Layout View onde você pode ver o jogador e as
plataformas. Clique e arraste para selecionar todas as três peças. Em
seguida, segure Control e arraste as plataformas para cloná-las. Faça isso
algumas vezes para que haja algumas plataformas para saltar ao redor. Você
pode diminuir o zoom para ver 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.

Lembre-se de que estamos usando a ação Set Mirror para inverter


automaticamente o player para a esquerda e para a direita. Então, só
precisamos importar animações para o jogador que está olhando a direita.
Clique duas vezes no player no para abrir o editor de animação. Existem
quatro animações que queremos importar:

1. Idle to run (tween)

2. Run

3. Jump from run

4. Jump from stand

Para cada uma dessas animações, o processo para adicioná-las é o seguinte:

1. Clique com o botão direito do mouse na barra de Animações (por padrão,


flutuando para a direita e listando a animação Idle ) e selecione Add
animation**.

2. Digite o nome da animação. Você pode querer usar um nome mais fácil de
lembrar como IdleToRun .

3. Clique com o botão esquerdo do mouse na animação para selecioná-la. Ela


deve ter um único quadro vazio.

4. Clique com o botão direito do mouse na barra de quadros de animação (por


padrão, na parte inferior, listando os quadros de animação) e selecione Import
sprite strip....

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.

6. Verifique o número de células e clique em OK.

7. Exclua o primeiro quadro vazio do qual não precisamos mais.

8. No primeiro quadro, coloque a origem nos pés do jogador. Tente fazê-lo


coincidir com a posição na animação Idle . Aplique a origem a toda a
animação como fizemos com a animação Idle (clique com o botão direito do
mouse em Origin na caixa de diálogo Image Points Origem e selecione Apply
to whole animation).

8. Mantenha a tecla shift pressionada e clique em Crop para recortar todos os


quadros importados de uma vez, removendo as áreas transparentes
desnecessárias.

9. Na Barra de propriedades, certifique-se de que cada animação tem as


seguintes propriedades:

Speed: 22 for JumpFromStand, 15 para todo o resto

Loop: Yes for Run, No para todo o resto

Faça isso para cada animação, então finalmente há cinco animações para o
jogador.

Feche o editor de animação. Agora precisamos dizer ao jogador para mudar


para a animação apropriada no momento apropriado. Para fazer isso, o
comportamento de plataforma fornece animation triggers (gatilhos de
animação) - eventos que são executados quando o jogador deve mudar a
animação. Então nós apenas usamos a ação Set animation do player.
Lembre-se que o comportamento Platform (com os gatilhos de animação)
está no objeto PlayerBox e, em seguida, queremos definir a animação do
objeto visível Player .

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

Quando IdleToRun terminar: Run

Isso também é fácil de configurar com eventos.

CONFIGURANDO OS EVENTOS DE ANIMAÇÃO


Esperemos que até agora você esteja familiarizado com o processo de
criação de um evento:

1. Selecione o objeto.

2. Selecione a condição ou ação.

3. Opcional: digite os parâmetros se a condição ou ação tiver algum.

Volte para a Folha de Eventos. Em primeiro lugar, vamos definir a animação


para IdleToRun quando começarmos a andar, usando o gatilho On moved do
comportamento (behavior) Platform do objeto PlayerBox :

Quando a animação IdleToRun termina, então queremos mudar para a


animação Run . Podemos fazer isso usando o gatilho On animation
finished no objeto Player :

Se o player estiver andando/correndo, e então ele para, precisamos mudar de


volta para a animação Idle . Podemos fazer isso com o gatilho de
animação On stopped no objeto PlayerBox :

Execute o jogo. O jogador deve agora ser capaz de mudar de


correndo/andando para parado, com a animação IdleToRun trocando entre
elas. No entanto, as animações de pulo ainda não são reproduzidas. Uma vez
que temos duas animações Jump, também precisamos definir uma animação
diferente dependendo de se o jogador está se movendo ou não quando ele
saltar. Isso pode ser feito com o seguinte evento:

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 .

Para fazer o evento acima você também precisará da


condição invert (inverter), (aparecendo como a cruz vermelha). Condições
invertidas significam o oposto do que afirmam. Neste caso, a condição
"Platform is moving" invertida significa que "Plataforma NÃO está em
movimento". Para inverter uma condição, adicione-a normalmente, então
clique com o botão direito do mouse nela e selecione Invert .
Alternativamente, selecione-o e pressione I .

Há apenas mais uma coisa que precisamos fazer: o jogador permanecerá em


sua animação Jump depois de saltar, mesmo depois de aterrissar, a menos
que definamos a animação de volta para Idle ou Run quando aterrissem. Isto
é muito semelhante ao evento anterior: no gatilho de animação On land , se
estiverem em movimento, defina "Run"; Caso contrário, defina "Idle".
Depois de configurar tudo isso, execute o jogo. Parabéns - você já fez um
personagem totalmente animado! Observe como as animações diferentes
executam se você saltar parado, ou saltar de correndo. Veja também como
quando você aterrissar de um salto, você irá voltar para Idle ou Running
dependendo se você está se movendo ou não.

Agora, hora de fazer um inimigo!

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.

1. Adicione um novo objeto Sprite no layout.

2. Importe a faixa de sprite Enemies \ Snail .

3. Elimine o primeiro quadro de animação vazio.

4. Defina a animação para looping, velocidade 15.

5. Defina a origem para a base da imagem do caracol e aplique-a a toda a


animação.

6. Cortar todos os quadros (shift + crop).

7. Feche o editor de animação e mude o nome do objecto para 'SnailEnemy'.

8. Coloque-o sobre uma placa de terra como mostrado.


Agora, queremos implementar a seguinte lógica:

- Se o jogador bater de frente como caracol de lado, eles piscam e se


machucam.

- Se o jogador saltar sobre o caracol, o caracol será morto.

Para fazer o jogador piscar, seleccione o player e adicione o comportamento


(behavior) Flash. Lembre-se de selecionar o jogador real, não o objeto
PlayerBox (já que é o jogador visível que queremos piscar). Vamos usar a
ação 'Flash' deste comportamento em um momento.

Alterne para a folha de eventos e adicione um novo evento:

PlayerBox -> On collision with another object -> SnailEnemy

Este evento é executado quando nós colidimos com o SnailEnemy de


qualquer ângulo. Podemos então usar sub-eventos para testar se o jogador
está pulando em cima ou a colisão é de algum dos lados. Vamos primeiro
testar se o jogador está acima.

Adicione um sub evento ao evento de colisão:

PlayerBox -> Is falling

Devemos também testar o jogador está realmente em cima do inimigo. Isso


pode evitar que o caracol seja acidentalmente morto se caímos por uma
borda. Clique com o botão direito do mouse a condição "Is falling" e selecione
"Add another condition". Lembre-se de que todas as condições devem ser
atendidas para que o evento seja executado. Adicione a condição:
PlayerBox -> Compare Y -> Less than, SnailEnemy.Y

O eixo Y aumenta de cima para baixo, portanto, se a coordenada Y do


jogador é menor que a do caracol, eles está acima dele.

Neste evento, adicione a ação:

SnailEnemy -> Destroy

Podemos também fazer o jogador quicar sobre o caracol, adicionando uma


outra ação:

PlayerBox -> Set vector Y -> -700

'Set vector Y' basicamente define a velocidade vertical do movimento da


plataforma; Configurando-o para um valor negativo define-o para cima
(novamente, o eixo Y aumenta para baixo), e 700 é um pouco menor do que a
força de salto de 1100. Então isso fará o jogador saltar como se ele desse um
salto fraco.

Não terminamos: clique com o botão direito do mouse na margem do evento


"Is falling" (o espaço logo à esquerda do ícone PlayerBox) e selecione Add ->
Else. 'Else' é uma condição especial que é executada se o evento anterior
não foi executado. Então, este evento será executado se colidimos com o
caracol, mas nós NÃO pulamos em cima dele - foi uma colisão lateral. Neste
evento, queremos que o jogador se machuque. Adicionar a ação

Player -> Flash -> (deixe valores padrão e clique em Done)

Lembre-se de que o comportamento Flash está no objeto Player, não no


PlayerBox.
OK, então o jogador nunca vai morrer, ele vai apenas piscar. Mas temos a
detecção de se eles pulou em ou bateu em algum lado. Este tutorial não irá
cobrir todos os sinos e assobios, mas espero que você possa criar efeitos de
morte (tente criar um sprite 'poof' para SnailEnemy quando ele é destruído,
usando a ação SnailEnemy 'Spawn objeto') e como tirar a saúde (no evento
de piscar do jogador - você pode aprender sobre a saúde usando variáveis de
instância no tutorial top-down shooter tutorial que você pode querer dar uma
olhada depois).

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.

Podemos novamente usar o comportamento de Plataforma para o caracol.


Isto é conveniente porque:

- pode movê-lo para a esquerda e para a direita.

- ele vai subir e descer encostas assim como o jogador pode.

- 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.

Não queremos que o jogador controle o SnailEnemy - queremos controlá-lo


automaticamente. Podemos fazer isso definindo a propriedade Default
controls para No , usando a ação Simulate control . Como os caramujos
também são muito lentos, defina Max
speed para 50 e Acceleration e Deceleration para 100!

Também precisamos dos marcadores 'Edge'. Adicione um novo objeto Sprite


e basta criar em um retângulo opaco. De o nome de EdgeMarker . O tamanho
do objeto para 40 x 40 e definir a sua Initial visibility para Invisible, para deixar
o objeto invisível no jogo. Coloque um em cada extremidade da plataforma do
caracol: (não se esqueça que você pode criar uma nova instância segurando
control + arrastando o objeto)

O caracol também precisa saber em que direção está se movendo - seja à


esquerda ou à direita. Podemos fazer isso com instance variables do objeto.
Se temos vários caracóis, eles armazenam suas variáveis de instância
separadamente. Isso lhes permite ter valores únicos para sua saúde, direção
atual, e assim por diante. Uma técnica simples para controlar inimigos
automaticamente é criar uma variável de instância "action" que mantém seu
estado atual. Por exemplo, poderia ser "run away", "chase player" ou "idle".
Neste caso, só precisamos de "esquerda" e "direita", mas é útil configurá-lo
da mesma maneira.
Selecione o objeto SnailEnemy. Na barra de propriedades, clique em Add /
Edit em "Instance variables".

É exibida uma caixa de diálogo que lista todas as variáveis de instância do


objeto. Clique no ícone 'Add' para adicionar um novo. Defina o nome
como action, o tipo para text e o valor inicial para right (para se mover para a
direita).

Clique em OK e feche a caixa de diálogo das variáveis de instância. Mude


para a folha de eventos.

Queremos implementar a seguinte lógica:

- se action for "right", simule o movimento da plataforma segurando a tecla


'direita' para mover o caracol para a direita.

- se action for "left", simule o movimento da plataforma segurando a tecla de


seta 'esquerda' para mover o caracol para a esquerda.
Também:

- se o caracol atinge o EdgeMarker , mude sua action (se "esquerda" defina-a


para "direita", se "direita" defina para "esquerda").

Podemos configurar o movimento com os dois eventos a seguir:

Evento: SnailEnemy -> Compare instance variable -> action equal to "right"
(use aspas duplas aqui para indicar o texto)

Ação: SnailEnemy -> Simulate control -> Right

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:

Agora para virar a direção do caracol nos cantos:

Evento: SnailEnemy -> On collision with another object -> EdgeMarker

Subevent: SnailEnemy -> Compare instance variable -> action equal to "right"

Ação: SnailEnemy -> Set value -> action to "left"

Subevent: Else

Ação: SnailEnemy -> Set value -> action to "right"

É 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.

Executar o projeto. Observe que o caracol está se movendo para a frente e


para trás em sua plataforma. Isso torna um pouco mais difícil saltar sobre!
Este é um sistema de "IA" muito rudimentar, mas espero que você possa
imaginar que você poderia criar inimigos mais inteligentes, controlando o
movimento com mais eventos, possivelmente até mesmo permitindo que eles
caíam das bordas, ou usando outros marcadores para disparar um salto para
fazer parecer que o inimigo saiba pular para uma plataforma.

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.

Use as plataformas 134 e 135 para fazer um jump-thru como este:

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:

- Para o comportamento Platform do jogador, adicione sempre o movimento a


uma caixa invisível sem animações. Posicione o sprite animado do jogador
animado sobre a caixa invisível. Isso evitará que as animações causem falhas
no movimento da plataforma.

- Os níveis podem ser construídos a partir de tiles (telhas).

- A ação Set mirrored evita que você tenha que fazer cópias espelhadas de
todas as suas animações.

- Às vezes, as animações precisam de algum trabalho para serem


importadas, configuradas com a velocidade certa e as propriedades de loop,
com o conjunto de origem correto e todos os quadros cortados. Você também
pode querer alterar as máscaras de colisão, embora isso não tenha sido
coberto neste tutorial.

- Os inimigos também podem ser controlados com o comportamento da


plataforma. Defina Default Controls para No e use a ação Simulate
control para controlar automaticamente o movimento.

- Você pode detectar se o jogador está caindo sobre um inimigo ao invés de


colindo com algum dos lados dele, testando se ele está vindo por cima do
inimigo no eixo Y quando colide. Caso contrário (usando 'Else'), ele deve
estar batendo nos lados do inimigo, e ele deve se machucar.

- As variáveis de instância podem armazenar números ou texto exclusivo para


cada instância de um objeto. Isso ajuda a controlar objetos individualmente, o
que é útil para "IA".

- Marcadores de borda (Edge) são uma maneira rápida e fácil de fazer


inimigos ir para a frente e para trás em uma plataforma.

- Jump-thru são plataformas que podem ser saltadas a partir debaixo.

- Parallax é um efeito fácil e intrigante para adicionar a jogos de plataforma.

Obviamente nós não fizemos um jogo de plataforma completo! No entanto,


este tutorial cobriu os pontos mais difíceis, e os fundamentos importantes que
cada criador de jogos de plataforma deve saber com antecedência. A partir
daqui, espero que você tenha uma idéia de como o resto de um jogo de
plataforma deve ser. Leva tempo para se familiarizar com uma ferramenta de
desenvolvimento complexa com o Construct 2. No entanto, experimentar pode
ser divertido e ensina muito! Então, passe um tempo brincando, quebrando
coisas, experimentando coisas, e veja o que você pode criar. Feliz
Plataforma!

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.

Deseja adicionar música e efeitos sonoros? Consulte Sounds & Music no


manual.

Se você quiser saber mais sobre como os eventos funcionam no Construct 2,


consulte a seção How Events Work no manual. É altamente recomendado
para que você possa começar rapidamente com seus próprios projetos! Em
seguida, para obter ainda mais informações, não se esqueça que há complete
documentation in the manual.

Você também pode gostar