Nos jogos 2D são comuns existir personagens que possuem animações. Seja para andar, pular, atacar,etc., as animações são importantes para dar uma sensação de realismo maior ao jogador. Um dos métodos mais utilizados atualmente são as animações com sprites. Cada pose do personagem é desenhada de forma que ao juntarmos todas as imagens e começarmos a mudá-las rapidamente, conseguiremos criar a ilusão de movimento.
Essa imagem é conhecida como spritesheet, onde é inserida todas as poses do movimento do personagem.
Juntando todas as imagens (sprites), a animação é criada.
No Godot é possível criar esse tipo de animação utilizando o node AnimatedSprite. Esse node tem a capacidade de armazenar vários sprites dentro de uma animação para que no fim seja possível executá-las via script.
O node possui alguns atributos dentro da janela Inspector:
Frames: aqui é onde criamos a nossa “folha de animação“. É dentro dela onde inserimos os sprites para criarmos as animações;
Animation: Depois de criada as animações, por aqui podemos escolher qual delas será executada. Normalmente é criado uma lista mostrando todas elas;
Frame: Aqui é possível escolher o frame da animação atual. É bem útil para comparar se uma certa parte da animação está sendo executada;
Speed Scale: velocidade que a animação será executada;
Playing: Se marcada a animação será executada automaticamente dentro do editor do Godot.
Centered: Se marcada, os sprites ficarão alinhados ao centro do node. Se desmarcados, o ponto de ancoragem ficará no canto dos sprites. É recomendado que deixe sempre ativo essa opção;
Offset: Serve para “realocar” a posição dos sprites na tela, tanto nos eixos X quanto no Y. É mais usado quando alguma imagem vem em uma posição diferente das demais, já que todas devem ficar no centro para criar a ilusão de movimento;
Flip H e Flip V: Com essas opções podemos virar o personagem para os outros lados, tanto na horizontal quanto na vertical.
O primeiro passo para criarmos uma animação com o AnimatedSprite é termos todos os sprites inseridos dentro do projeto e separado dentro de pastas:
O segundo passo é criar a estrutura da cena do personagem. Caso tenha dúvidas leia o compendium “Criando movimento plataforma 2D com o Godot”:
Depois com o node AnimatedSprites, precisamos inserir uma folha de sprites. Para isso basta ir no atributo Frames > New SpriteFrames:
Depois basta clicar em cima do atributo que uma janela de sprite frames será aberta:
Do lado esquerdo da janela temos as animações. A primeira inserida se chama default e não possui nada. Caso seja necessário, podemos inserir mais animações indo na opção New Animation , assim como podemos deletar qualquer uma com . É extremamente importante que você renomeie todas as animações, pois via script cada uma será chamada pelo nome. Para renomear, basta dar dois cliques com o mouse no nome da animação.
Sabendo disso, vamos criar duas animações de teste: Idle (Esperar), Walk (Andar) e Jump (Pular).
Agora para cada animação devemos inserir os sprites. Clicando uma vez em cada é aberto a caixa de animation frames. Para adicionar os sprites existem 2 maneiras:
1° - Abrir com a opção Add a Texture from File:
2° - Arrastando todas as imagens de uma vez da aba File System:
Segurando a tecla SHIFT é possível selecionar mais de uma imagem por vez.
Na parte superior da caixa de animation frames existem algumas ferramentas úteis que servem para editar a animação. Com elas podemos copiar e colar frames, adicionar mais espaços entre os frames, etc. Mas quando quiser deletar um frame, selecione ele e por fim o remova com o :
Por fim algo importante a ser mencionado é sobre a velocidade de cada animação e o loop. Caso queira, é possível mudar esses valores indo até a parte inferior esquerda da janela:
Depois de ter montado todas as suas animações, vamos programar a chamada de cada um deles.
Sabemos que o personagem deve executar as suas ações em determinados momentos no jogo. Temos nesse exemplo 3 animações, e para cada uma precisaremos comparar em qual situação a animação deve ser tocada. Antes de sair programando tudo, devemos entender a lógica de como a animação será executada:
Veja que as animações dependem de um simples evento: se o personagem está no chão. A partir daí as outras são executadas caso obedeçam as outras condições. Então dentro do script já criado no node principal do personagem (KinematicBody 2D), vamos programar dentro da função _physics_process(delta) a condição que compara se o objeto está no chão com o is_on_floor():
Dentro da condição criada precisamos comparar se ao mesmo tempo as teclas de movimento (que são as setas) estão sendo pressionadas, a animação Walk é executada. Podemos comparar mais de uma sentença utilizando o operador lógico or (ou):
Para reproduzir uma animação dentro do node AnimatedSprite, basta chamar o node via código, e depois utilizar a função play(). Dentro dos parâmetros deve ser inserido o nome da animação dada dentro da janela SpriteFrames.
Devemos comparar também se nenhuma tecla está sendo pressionada, pois nesse caso significa que o personagem está parado. Para isso podemos utilizar o else, que compara a sentença contrária do if:
Até aqui o personagem vai executar as animações Walk e Idle, mas vai faltar ainda a animação Jump. Pela lógica, animação de pulo deve ser chamada quando o personagem não estiver no chão. Então podemos novamente usar o else no if principal, comparando a sentença is_on_floor ao contrário:
O personagem já executa as animações, mas é bem provável que no seu projeto ele não esteja virando para os lados corretos. Isso é simples de resolver, bastando apenas ativar e desativar a função do AnimatedSprite flip_h de true para false dependendo da tecla pressionada. Nesse caso como são direções diferentes, é necessário criar uma condição separada para cada direção dentro da função _physics_process(delta):
Pronto! As três animações já serão executadas caso as condições sejam obedecidas. Se o personagem possuir mais animações, primeiro identifique quais as condições para que elas sejam executadas, e por fim programe.
