Godot - Parte 4

Trabalhando com AnimationPlayer

Sejam bem vindos uma nova postagem, dando sequência às anteriores, onde vimos uma introdução sobre a godot, depois aprendemos como configurar o jogo para dispositivos mobile, na terceira postagem demos início a criação do jogo, e nessa quarta postagem continuaremos, criando agora um node do tipo AnimationPlayer.

Com esse node, que é muito poderoso e responsável por criar animações no game, vamos fazer o efeito do carro está se movimentando no sentindo vertical ascendente.

Então vamos lá, abra sua Godot, clique no seu projeto dangerous race. Após abrimos, vá na tela dos recursos, como abaixo

Clique na pasta scenes e depois em jogo.tscn, dessa forma estaremos abrindo a scene criada anteriormente no post antecedente a esse, onde estão os recursos e praticamente o início do nosso jogo.

Voltando agora a atenção a tela dos nodes, vamos selecionar o node Pista que está dentro do node Layer2. Na tela abaixo você localiza, caso ainda esteja confuso nas partes da godot.

Com esse node selecionado, clique no seu teclado ctrl + D, você perceberá que criou uma cópia do node Pista. Essa é a maneira mais rápida quando queremos criar cópias de imagens ou outros recursos da godot, perceba que o node gerado está com o nome de Pista2,deixe com esse nome mesmo. Embora tenhamos criado uma cópia, olhando para a área do jogo você não percebe diferença alguma, isso pq ao criarmos a cópia, a imagem fica em cima da imagem copiada, então como uma imagem está sobreposta a outra, a visibilidade é como se fosse apenas uma. Então vá com o mouse em cima da imagem que está selecionada na área do jogo, segure alt e arraste para cima, até que fique da forma como está na imagem abaixo

Se tiver dificuldades em operar com o mouse, você pode modificar a posição, alterando position que fica dentro de transform, como na tela abaixo, onde já especifico as medidas, que estão aqui na minha godot.

Você pode está sempre usando essa maneira de posicionar seus elementos na tela, a vantagem é a precisão que é bem exata. Então primeiramente você pode arrastar com o mouse e depois apurar o posicionamento com alteração na própria propriedade position.

Agora com o node Layer2 selecionado, adicione um node do tipo AnimationPlayer, você já aprendeu a adicionar nodes filhos, então não vamos mais repetir passos anteriores.Após adicionar, renomeie para AnimePista. Ficando como a figura abaixo:



Agora repare nessa região nova que apareceu, após criarmos o AnimationPlayer. Essa região é onde controlamos o node nos seus recursos oferecidos, como tempo em que um efeito vai surgir, tempo de duração de um sprite e etc. Com o AnimationPlayer, você poderá manipular tudo que você achar necessário no seu jogo. Agora vá onde tem um arquivo de folha com um + colorido de verde. Veja abaixo:


Clique no que acabamos de referenciar, assim, você estará criando um script de animação pertencente ao AnimationPlayer.  Dê o nome de PistaMovimento, como abaixo:

Clique ok, e será gerado uma linha do tempo na região de controle do AnimationPlayer.

Em Length(s) você determina quanto tempo terá a duração da animação, em Step(s), você controla a fração de segundos que se passa de um quadro para outro, na parte superior esquerda.

temos controles de execução da animação, como progredir, voltar e etc.

Nesse A, temos a opção de deixar a animação em auto-execute, ou seja assim que for renderizado a cena do jogo, o AnimationPlayer será executado. Se essa opção não estiver habilitada, você poderá executar via código, o que poderemos aprender a fazer posteriormente.

Nessa opção, acima, ao habilitarmos estamos definindo um loop , em que quando a animação terminar, ela se repetirá eternamente. Para o nosso propósito, deixe essas duas opções em que acabamos de aprender as suas funcionalidades, habilitadas. Modifique também o tempo de duração de 1 para 5 em Length(s).

Agora selecione o node Pista1 e vá em suas propriedades, em Position. Você perceberá que agora tem uma chave do lado, clique nessa chave, aparecerá a tela abaixo:

Clique em Create. Agora se observarmos na linha do tempo do AnimationPlayer, marcamos para o inicio da animação a posição em que se encontra a imagem do node Pista1 na área do jogo. Pronto, feito isso, agora, arraste a linha do tempo na área de controle do AnimationPlayer para o final, que é justamente onde está o tempo de igual a 5, como a figura abaixo:

Só para ficar mais claro, a linha do tempo, é essa linha azul, veja que colocamos ela no valor 5 acima, que indica o final do tempo da duração da animação.Agora modifique a posição da imagem da pista1 na propriedade Position, na coordenada Y, e coloque o valor de 1972, como na figura abaixo:

Ao fazermos isso, a imagem desceu para a posição bem abaixo no final da área do jogo, veja a figura para comparar com a sua:



Se não tiver igual a sua, vá mexendo no Position até ficar bem no limite do final da área do jogo. Saia do Position e clique novamente na chave do lado. Com isso você acabou de criar o segundo track, onde a posição nova está marcada para ser setada no tempo final de 5 segundos da animação. Vamos fazer o teste, nos controles de animação clique em player, conforme a figura abaixo, e você verá, que a pista se movimenta automaticamente para baixo se repetindo.



se tudo tiver ocorrido bem, agora der um stop, na animação. Arraste a linha do tempo(linha azul vertical), para o início da animação, em zero. Feito isso, selecione o node Pista2, vá em Position e clique na chave ao lado, agora você criará um track para o node Pista2, esse track parecerá na área controle do AnimationPlayer.

Agora vamos fazer algo simples, mas importante. Selecione o node Pista1, é importante que a linha do tempo em AnimationPlayer esteja na origim em 0, agora vá em Position selecione o valor que está em Y, e dê um ctrl + C para copiar o valor,como abaixo:

Feito isso, selecione o node Pista2, agora vá em AnimationPlayer, e arraste a linha do tempo novamente para o final, em 5, com node Pista2 selecionado, vá em Position e na coordenada Y cole o valor que você copiou que é a posição da Pista1, conforme abaixo:

Der um enter para sair do Position  e a nova posição ser setada, e clique na chave do lado, para marcarmos essa posição no track, em 5. Se tudo ocorreu bem, teremos a imagem abaixo:


Agora salve a Scene, vamos ver como ficou a animação, no canto superior direito da engine, você verá essa imagem abaixo:

Esse símbolo do player, do lado esquerdo do pause, é onde clicamos para rodar o jogo e ver como está ficando, então vamos clicar nele. Ao clicarmos, aparecerá uma mensagem, como abaixo:

Essa mensagem é para você selecionar uma Scene principal do jogo, aquela que será mostrada como primeira scene do jogo ao ser executado. Então clique em Select e selecione na pasta a Scene Jogo que foi criada. Se tudo ocorrer bem você terá o resultado abaixo, compare com o seu.


Observe o vídeo e veja que ao executarmos o jogo, temos uma pista em movimento. Tudo que precisamos agora é colocar o carro em cima dessa pista, para que fique a sensação de que o carro está se movimentando na pista. Mas isso vamos fazer no próximo post.

Espero que tenham gostado, e deixe comentários!!!

Se você perdeu o post anterior, não tem problema, clique em baixo:

Godot - Parte 3 (dando início ao nosso jogo)



Se você ainda não cadastrou seu email para receber atualizações de postagens, vá a nossa página inicial e cadastre, ou se preferir clique Aqui
Autor
Maclaine Sabino

Maclaine Sabino Graduado em Matemática, Administração, finalizando Análise e Desenvolvimento de Sistemas.
Ama aprender coisas novas, tecnologia e música.