Parte 4: Criando seu jogador

No Parte 3, você aprendeu como criar seu primeiro nível. Neste tutorial, vamos começar a transformar nosso nível vazio em um jogo.

Um Platformer é um jogo como o Mario. Normalmente, os platformers têm um personagem que pode ser controlado por um joystick e pode pular para resolver vários quebra-cabeças.

Esta parte do guia se baseia na Parte 3, e pressupõe que você já tenha criado seu nível usando os recursos do Pacote Inicial de Platformer, que você pode baixar na Loja de Recursos.

Adicionando o Jogador:

Você precisa primeiro adicionar o gráfico do seu jogador ao dock de objetos. Comece navegando até a pasta Downloads na Biblioteca de Recursos e localize o personagem animado Green Space Man.

Tocar no personagem animado na Biblioteca de Recursos mostrará todos os ciclos de animação disponíveis.

Como não queremos que o jogador pareça que está andando mesmo estando parado, vamos usar o ciclo de animação "Stand". Toque no ciclo de animação "Stand" para adicioná-lo ao dock.

Nota: Se o gráfico animado que você está usando não tiver um ciclo de parada ou ocioso, você pode sempre selecionar um único quadro de uma animação segurando o dedo no ciclo de animação e selecionando "Ver Quadros" no Menu de Recursos.

Agora que você tem seu personagem no Dock de Objetos, você pode simplesmente arrastá-lo para fora do dock e para a sua cena.

Movendo o Jogador:

Agora precisamos dar vida ao personagem e torná-lo movível com um joystick. O hyperPad torna este processo realmente simples com os comportamentos incluídos.

Primeiro, abra as Propriedades do Objeto tocando no personagem que você acabou de arrastar para a tela.

Na aba "Physics" das Propriedades do Objeto, torne seu personagem um "Tipo de Física" tocando no ícone do objeto físico ( ) logo abaixo do botão "Comportamentos".

Nota: objetos físicos obedecerão às leis da gravidade e reagirão a outros objetos e forças.

Em seguida, toque no botão Comportamentos para abrir o editor de comportamento e iniciar o processo de tornar seu personagem jogável.

O editor de comportamento possui diferentes categorias exibidas na barra superior e comportamentos à esquerda.

Como você adicionou um Ciclo de Animação, um comportamento de "Reproduzir Animação" já está adicionado na tela de comportamento.

Na categoria "interação", arraste o comportamento "Controlado por Joystick" para a sua tela.

Assim que esse comportamento é adicionado, ele também criará automaticamente e adicionará um joystick na sua Camada de UI GLOBAL. Se você já tivesse um joystick adicionado à sua camada de UI, o comportamento usará automaticamente esse em vez de adicionar um para você.

Neste ponto, você pode pressionar play e rodar seu jogo! Você pode, no entanto, notar que o jogador apenas desliza pela tela...

Animações:

Vamos melhorar a aparência do jogo adicionando algumas animações ao nosso jogador.

Começaremos fazendo com que o personagem ande quando mover o joystick para a esquerda ou direita.

Para fazer isso, você precisa visualizar os comportamentos de interação "avançados". Enquanto estiver na categoria "Interação", toque na opção "Avançado" na parte inferior da lista de comportamentos.

Na lista "avançada", adicione "Joystick Left" e "Joystick Right" à tela.

Em seguida, na categoria "FX", adicione o comportamento "Reproduzir Animação" e conecte ambos, o Joystick Left e Right a esse novo Reproduzir Animação adicionado.

Agora, toque no comportamento "Reproduzir Animação" para visualizar as Propriedades do Comportamento.

A primeira caixa na parte superior é o objeto ao qual você deseja aplicar a animação. O hyperPad seleciona automaticamente o objeto atual.

Nota: Você pode tocar aqui e selecionar qualquer outro objeto em sua cena se quiser. Não queremos fazer isso agora, então deixaremos como está.

A próxima caixa abaixo representa a animação que você deseja reproduzir. Como não há animação para reproduzir, ela está em branco.

Toque na caixa vazia para selecionar uma animação.

Observe que uma tira de filme aparece na parte inferior da tela. Toque no Ícone da Biblioteca de Recursos para adicionar um ciclo de animação à tira de filme.

Navegue até o personagem animado "Green Spaceman" e selecione o ciclo "Walk". Observe que cada quadro da animação foi automaticamente adicionado à tira de filme. Toque em qualquer lugar para fechar a tira de filme e retornar às propriedades.

Nota: Você também pode adicionar imagens ou quadros de animação individuais à tira de filme da animação. Você não está apenas limitado a ciclos de animação predefinidos.

Em seguida, nas propriedades do comportamento da animação de caminhada, desative a alternância para "Loop Animation". Queremos que essa alternância fique desligada porque o Joystick Left e Right, basicamente, fazem a animação loopar para nós, uma vez que a animação só acontecerá enquanto o joystick estiver à esquerda ou à direita.

Finalmente, vamos renomear esse comportamento para que seja mais fácil encontrá-lo mais tarde. Nas propriedades do comportamento, toque no nome do comportamento na parte superior. Isso abrirá um teclado e permitirá que você digite um novo nome para o comportamento. Vamos chamá-lo de "Animação de Caminhada".

Se você pressionar play agora, seu personagem deve se mover com o joystick e ser animado!

Pulando:

Você não pode ter um jogo de plataforma sem pular! Fazer o jogador pular é muito fácil no hyperPad.

Enquanto você ainda está no editor de comportamentos do Green Spaceman, toque na categoria "Interação" e, na lista de comportamentos à esquerda, arraste o comportamento "Pular com Botão". Assim como o comportamento Controlado por Joystick, o pular com botão também lidará com muitos dos seus movimentos de objetos para você e adicionará automaticamente um botão à Camada de UI Global.

Você pode tocar no comportamento de pulo para visualizar suas propriedades. Nas propriedades do comportamento de pulo, você pode alterar configurações como o som a tocar, a potência dos pulos e mais. Para este tutorial, vamos deixar tudo igual, exceto que mudaremos a potência.

Eu tive que definir a potência como 18, para conseguir pular sobre todos os obstáculos no nível criado para a Parte 3. Se você projetou seu próprio nível, pode precisar brincar com o valor do pulo até que funcione para você.

Se você pressionar play agora, poderá ver seu jogador correr e pular. No entanto, você pode ter notado que o personagem continua andando enquanto pula no ar... Vamos consertar isso!

Vamos começar reproduzindo uma animação enquanto você pula.

Na categoria "Interação", adicione um comportamento "Começou a Tocar", então toque no comportamento que você acabou de adicionar para visualizar as propriedades.

Agora precisamos mudar o comportamento para funcionar apenas quando você começar a tocar o botão de pulo. Nas propriedades do comportamento "Começou a Tocar", toque no gráfico do spaceman na caixa superior.

Isso leva você à tela de "Selector de Objetos". A partir daqui, você pode selecionar qualquer objeto ou elemento de UI em sua cena. Você provavelmente não pode selecionar o botão. Isso ocorre porque o Green Spaceman estava na Camada Principal, e o botão está na Camada de UI Global. Na barra de camadas no lado direito da tela, basta tocar na camada "Global UI". Agora você pode selecionar o botão.

Com o botão selecionado, toque no ícone de aceitação na parte inferior.

Em seguida, adicione outro comportamento "Reproduzir Animação" e conecte-o ao comportamento "Começou a Tocar" que adicionamos anteriormente.

Assim como você fez anteriormente, você pode renomear o comportamento e selecionar uma animação a partir das Propriedades do Comportamento.

Para renomear, toque no título do comportamento nas propriedades do objeto e insira um novo nome. Eu usei "Animação de Pulo".

Como você fez para a animação de caminhada, você precisará selecionar um ciclo para o pulo. Toque na segunda caixa vazia nas propriedades do comportamento e selecione o ciclo de animação de Pulo entre as animações disponíveis do Green Spaceman.

Você também precisará desativar a alternância "Loop Animation" e a alternância "Restore Frame".

Se você pressionar play agora, você poderá ver quando pula o personagem parece que está pulando! No entanto, ainda há 2 pequenos problemas.

1. O personagem não retorna à sua animação de parada quando ele aterrissa

2. Se você mover o personagem enquanto ele estiver no ar, ele reprodizi a animação de caminhada no ar.

Para o primeiro problema, altere para a categoria de comportamento "Transformar" e toque no botão avançado para visualizar os comportamentos avançados.

Agora arraste o comportamento "Parou de Cair" e também arraste outro comportamento "Reproduzir Animação" da categoria FX e conecte-o ao "Parou de Cair".

Nas propriedades do "Reproduzir Animação" que você acabou de adicionar, selecione o ciclo de animação de "Stand" do Green Spaceman, desative as alternâncias "Restore Frame" e "Loop Animation", e mude o nome do comportamento "Reproduzir Animação" para "Parado".

O Green Spaceman agora deve conseguir pular e parecer que está parado quando aterrissa.

Para o segundo problema, precisamos parar a animação de rodar enquanto o personagem salta.

Troque para a categoria de comportamento "Personalizado" e arraste para "Comportamento Desligado" e conecte-o ao comportamento "Começou a Tocar" que adicionamos anteriormente para a Animação de Pulo.

Agora toque em "Comportamento Desligado" e toque na caixa vazia para selecionar um comportamento na lista. Na lista, localize o comportamento "Reproduzir Animação" (Animação de Caminhada) que está conectado aos comportamentos Joystick Left e Right.

Em seguida, adicione um "Comportamento Ligado" e conecte-o ao comportamento "Parou de Cair" que adicionamos anteriormente.

Novamente, toque na caixa vazia e selecione o comportamento "Reproduzir Animação" (Animação de Caminhada) que reproduz a animação de caminhada.

Se você pressionar play agora, seu personagem deve conseguir se mover e pular perfeitamente!

Movendo a Tela:

Como você provavelmente notou, se você se mover muito para longe, o personagem sai da tela. Em jogos de plataforma tradicionais, a tela normalmente se move com o seu jogador. Pegue o Mario como exemplo, Mario sempre permanece no meio da tela (com uma pequena variação).

Vamos fazer a tela se mover com o Green Spaceman, para que ele nunca possa sair da tela.

Enquanto ainda está nos comportamentos do Green Spaceman, troque para a categoria "Tela" e adicione o comportamento "Seguir Tela". O comportamento "Seguir Tela" moverá a tela com o objeto que você selecionou.

Em seguida, abra as propriedades do comportamento para Seguir Tela e desative a alternância para "Segue Y". Isso fará com que a tela siga seu jogador para a esquerda ou direita, mas não para cima ou para baixo.

Neste ponto, se você pressionar play, deverá conseguir correr pelo seu nível com um personagem animado e ter a tela se movendo junto com você.

Você pode baixar a versão finalizada da Parte 4 do Hub e ver tudo em ação.

Na Parte 5, começaremos a adicionar um pouco mais de elementos de Jogo adicionando moedas para coletar e uma pontuação.