ACHEI QUE SABIA JOGAR: CONSTRUCT 2 3 — COMO MOVIMENTAR UM PERSONAGEM EM 8 DIREÇÕES COM TROCA DE ANIMAÇÃO EM TOUCH

CONSTRUCT 2 3 — COMO MOVIMENTAR UM PERSONAGEM EM 8 DIREÇÕES COM TROCA DE ANIMAÇÃO EM TOUCH

9, setembro, 2019
 Mexer com direcionais no Construct pode ser complicado, quando a programação é para mobile(envolvendo touch). Neste post você aprenderá a como configurar um objeto com o bihavior 8-direction para mobile.




 Primeiramente quero agradecer o Marcos, do canal Marcos Game Dev, por mostrar um sistema simples para movimentar um personagem em 8-direções com as teclas do teclado, neste post usaremos parte do código ensinado por ele, acrescentaremos e alteraremos uns itens, adequando ao touch/mobile.

  *adento* Diferente do personagem usado no vídeo do Marcos( o personagem só tem animação para 4 direções) no tutorial a seguir, o personagem tem as animações para as diagonais. 

LINK DA  ANIMAÇÃO USADA NO FINAL DO POST

idle=parado
diagdown=diagonal para baixo
diagup=diagonal para cima
up=para cima
side=para do lado
down=para baixo

 Nos diagonais, e no side, usaremos o mirror para espelhar a animação do personagem.




 Abrindo um novo projeto no Construct, seja ele na versão mais atual, o C3 ou na versão mais antiga, o C2, crie um projeto New Retro Style Project e acerte todos os parâmetros da propriedade. Feito isso, você precisará criar um analógico, sendo um circulo vazio, e um analógico de touch, como é mostrado no vídeo abaixo.

 *o circulo transparente tem o nome de gamepad*
 *o circulo menor tem o nome de gamepad_middle*


o vídeo tem 1min e 7seg
lembre-se se olhar o ponto de origem, precisa esta no meio

 Criado os sprites, podemos ir para folha de eventos, na folha de eventos, é preciso criar um evento do sistema onde ao iniciar o layout, nosso gamepad_middle, fique no centro do sprite, gamepad.


 Em seguida, precisaremos criar um grupo chamado gamepad, e dentro dele adicionar o primeiro sub-evento, que, Is in touch, nosso gamepad possa se orientar junto a movimentação do touch, comparando o X,Y dos mesmos entre o ângulo e a distância.


 Finalizado! Com o sistema do analógico pronto, precisamos conectar a movimentação do personagem 8-direções, as 8 possíveis direções do analógico. Neste ponto é preciso que você já tenha organizado as animações do personagem, e também colocado uma variável de instância tipo texto nele. 

 Feito isso o próximo passo é cuidar de conectar a movimentação do personagem ao analógico. Como no vídeo do Marcos, criaremos dois eventos, um para o sistema analisar se o behavior 8-direction esta em movimento fazendo a animação rodar os frames, e um Else(senão) para quando não estiver em movimento fazendo, aqui, a troca de animação para Idle.


 Neste exemplo, existe um sprite de colisão conectado ao sprite de animação, a variável de instância tipo texto e o behavior 8-direction foi adicionada no sprite de colisão com o nome de character.

 Como não usaremos o teclado, precisaremos comparar o X,Y do gamepad_middle enquanto se movimenta com a ação do touch, para poder adicionar a ação da movimentação correta ao personagem. Cima, baixo, deita e esquerda, usaremos a ação da variável para setar a animação, colocando a simulação de controle do behavior; na direita colocaremos o Not Mirror,  e na esquerda colocaremos o Mirror, para que a animação fique espelhada quando necessário, evitando assim a criação de uma nova página de animações.

para conseguir comparar o X,Y(ou qualquer outro dado que queira saber), você precisará usar o sistema Debug Layout.

  O sistema de movimentação esta pronto, aqui conseguimos evitar o deslisamento do personagem quando ele estiver se movimentando para alguma das diagonais, porem ainda ele só esta com quatro animações. Para que possamos usar as animações diagonais do nosso personagem, é preciso fazer um sistema(respeitando a ordem de precedência) onde compararemos um valor X,Y até um outro valor X,Y,.

 Esse valor X,Y será as diagonais que o gamepad_middle chega, limitando assim um espaço para que a animação diagonal aconteça e fazendo com que as outras quatro animações iniciais também funcione. Siga o fluxograma abaixo.



 Usando o sistema de Debug Layout para descobrir onde seria o X,Y inicial e final que é necessário para que a animação diagonal up(diagonal direita) rode, chegamos nestes valores. O X do gamepad_middle deve iniciar quando for igual ou maior que 60, tendo um sub evento onde esse valor X encontrado é igual ou menor que 90, limitamos o espaço direcional esquerda e direita, para que a animação cima e lado também possa acontecer quando o analógico chegar na devida posição dos mesmo, agora precisamos limitar o Y para que a ação baixo também possa acontecer, usando novamente o Debug Layout, o Y deve iniciar sendo, menor ou igual a 141 e maior ou igual a 104. Temos por fim um angulo delimitado de mais ou menos 43º, para que a animação "diagup" rode. Precisamos fazer o a mesma analise para descobrir as outras posições, e teremos...



 *OBSERVAÇÃO* O código das direções onde é comparado o valor X,Y do gamepad_middle depende da posição do seu sprite gamepad, caso você copie o esse código, para que funcione no seu projeto, seu layout precisa ter o tamanho de 320,180 e o seu sprite gamepad, precisa estar na posição, X=46.666, Y=146.865 tendo ele o size de 64x64 com o imagepoint no centro.

Você pode baixar os sprites neste link

 Chegamos ao fim, caso surja alguma duvida ou tenha algum pedido, basta deixar nos comentários, peço também que considere dar uma olhada no meu canal do youtube, Builder Luca e na página do apoia-se, em breve estarei postando Assets para jogos, no estilo da imagem abaixo.

youtube: Builder Luca

Não sou o melhor desenhista em pixel-art mas estou empenhado em aprender e melhorar!


Adblock Detectado

DESABILITE O ADBLOCK, OS ANÚNCIOS NÃO SÃO INVASIVOS

PERMITA QUE O SITE TENHA COMO SE MANTER COM ELES!

MUITO OBRIGADO PELA ATENÇÃO!

COPYRIGHT 2019 - ACHEI QUE SABIA JOGAR, TODOS OS DIREITOS RESERVADOS