Neste compendium vamos criar uma movimentação de um personagem na visão Top Down (Visto de Cima). O personagem será controlado pelas setas e irá se mover nas oito direções: Cima , Baixo , Esquerda, Direita e as quatro Diagonais.
Tópicos:
Jogos na perspectiva Top Down, são jogos em que a câmera fica por cima do jogo sendo que a visão é vista de cima para baixo. Os personagens então se movem em 8 direções: Cima , Baixo , Esquerda, Direita e as quatro Diagonais.
Jogo Gauntlet de 1985 da Atari Games
A primeira coisa que precisamos fazer é criar a nossa cena do player. Para isso vamos utilizar um KinematicBody2D e filho desse node um Sprite e um CollisionShape2D. Mude o nome do KinematicBody2D para Player.
Adicione um uma textura para o node Sprite pelo Inspetor
Agora precisamos definir o “corpo” do nosso personagem, que representa a colisão dele com o outros objetos. Para isso vamos definir a o CollisionShape2D para uma esfera.
Por fim salve essa cena com nome Player e Crie um Script para o jogador.
Antes de prosseguir vamos criar uma fase com paredes para o nosso exemplo. Para isso criaremos uma cena com o node StaticBody2D.
Precisamos definir o formato do colisor desse objeto. Para este exemplo vamos utilizar o node CollisionPolygon2D, mas você poderia usar o node CollisionShape2D também. A vantagem de utilizar o CollisionPolygon2D é a capacidade de “desenhar” o nosso cenário.
Clique no botão Create Points
Para auxiliar na hora de criar a colisão ative a opção Grid Snap
Use o botão esquerdo para criar cada ponto do polígono de colisão.
Porém essa colisão não é visível na hora que o jogo iniciar. Para isso podemos adicionar um Polygon2D que irá exibir as “paredes” no jogo.
O node Polygon2D é semelhante ao CollisionPolygon2D, porém ele não serve para ser colisão, apenas para exibir a polígono dentro do jogo. Para não precisar recriar os pontos, podemos copiar um polígono de um node para outro, pois ambos possuem a propriedade Polygon:
Você além de poder definir uma cor desse polígono, pode também colocar uma Textura no campo Texture:
Você pode reparar que a textura não se repete pelo polígono. Para resolver este problema podemos mudar a flag de importação Repeat:
Por último, criamos as outras parede utilizando a mesma técnica. Após isso instancie o jogador na cena.
Primeiro vamos criar as seguinte variáveis
A variável speed representa a velocidade do jogador. Já a variável dir representa a direção que o jogador irá se mover. Uma variável que armazena um valor do tipo Vector2 está guardando dois valores, sendo que o primeiro representa um valor X e o outro um valor Y. São esses valores de x e y que formam um vetor. Uma maneira simples de representar um vetor é através de uma seta, onde os valores x e y definem o seu tamanho e a direção para a qual ela está apontando.
Observe a imagem para compreender a direção de um vetor:
Então vamos criar este código dentro de um _physics_process( )
Aqui na linha 7 está verificando se o jogador está pressionando a tecla para direita mude o x do vetor para 1. Se não, na linha 9, se o jogador estiver pressionando para esquerda mude o x para -1. Se não, na linha 11, caso nenhuma das outras opções forem verdadeiras, o x volta para 0.
Agora faremos o mesmo para o eixo y:
Por último, usamos a função move_and_slide( ) para mover o personagem na linha 21
Se você testar o jogo terá o resultado como este:
Observe que e você se mover na diagonal o personagem se move mais rápido do que se estivesse se movendo em apenas um eixo ( Direita e Esquerda , Cima e Baixo )
Para resolver este problema, podemos normalizar a variável dir. Modifique a linha 21 para como está na imagem abaixo:
O resultado será este:
Uma melhoria que podemos fazer é mudar o ângulo de movimento do personagem. Para isso podemos adicionar uma nova linha antes da função move_and_slide( ) para rotacionar o node Sprite.
Teremos um problema no resultado, pois assim que o jogador soltar qualquer tecla, o personagem irá voltar para o ângulo 0:
Para resolver isto, vamos adicionar uma comparação antes de rotacionar o sprite:
O que a comparação da lina 21 está verificando e se o valor absoluto do vetor (isto é, se o vetor for maior do que 0, não estiver zerado ) é maior do que zero. Se afirmativo, só então rotacionamos nosso Sprite.
Podemos melhorar ainda mais a rotação do personagem. Em vez do Sprite rotacionar de forma brusca na direção do movimento, podemos rotacionar o Sprite gradualmente de forma suave. Para isso crie uma nova variável que será nossa rotação:
Então mude o código da linha onde ocorre a rotação:
O resultado será um movimento bem mais suave:
