Attention: Here be dragons
This is the latest
(unstable) version of this documentation, which may document features
not available in or compatible with released stable versions of Godot.
Checking the stable version of the documentation...
Animação de sprites 2D
Introdução
Neste tutorial, você aprenderá a criar personagens 2D animados com a classe AnimatedSprite2D e o AnimationPlayer. Normalmente, quando você cria ou baixa um personagem animado, ele virá de uma de duas formas: como imagens individuais ou como uma única folha de sprites contendo todos os quadros da animação. Ambas podem ser animadas no Godot com a classe AnimatedSprite2D.
Primeiro, usaremos o AnimatedSprite2D para animar uma coleção de imagens individuais. Depois, animaremos uma folha de sprites (spritesheet) usando esta classe. Por fim, aprenderemos outra maneira de animar uma folha de sprites com o AnimationPlayer e a propriedade Animation do Sprite2D.
Nota
Arte para os próximos exemplos por https://opengameart.org/users/ansimuz e tgfcoder.
Imagens individuais com AnimatedSprite2D
Neste cenário, você tem uma coleção de imagens, cada qual contendo um dos seus frames de animação do personagem. Para este exemplo, nós usaremos a seguinte animação:
Você pode fazer o download das imagens aqui: 2d_sprite_animation_assets.zip
Descompacte as imagens e coloque-as na pasta do seu projeto. Configure a árvore da sua cena com os seguintes nós:
Nota
O nó raiz também pode ser Area2D ou RigidBody2D. A animação ainda será feita da mesma maneira. Assim que a animação estiver completa, você pode atribuir uma forma ao CollisionShape2D. Veja Introdução à Física para mais informação.
Agora selecione o AnimatedSprite2D e, em sua propriedade SpriteFrames, selecione "New SpriteFrames".
Clique no novo recurso SpriteFrames e você verá um novo painel aparecer na parte inferior na janela do editor:
Pelo painel de Sistema de Arquivos no lado esquerdo, arraste as 8 imagens individuais para a parte central do painel de SpriteFrames. No lado esquerdo, mude o nome da animação de "default" para "run".
Use os botões "Play" no canto superior direito do campo Filter Animations para visualizar a animação. Agora você deverá ver a animação sendo reproduzida no viewport. No entanto, ela está um pouco lenta. Para corrigir isso, altere a configuração Speed (FPS) no painel SpriteFrames para 10.
Você pode adicionar animações adicionais clicando no botão "Add Animation" e adicionando mais imagens.
Controlando a animação
Uma vez que a animação estiver completa, você pode controlar a animação por meio do código usando os métodos play() e stop(). Aqui está um breve exemplo para reproduzir a animação enquanto a tecla da seta para direita está sendo pressionada, e para parar a animação quando a tecla é solta.
extends CharacterBody2D
@onready var _animated_sprite = $AnimatedSprite2D
func _process(_delta):
if Input.is_action_pressed("ui_right"):
_animated_sprite.play("run")
else:
_animated_sprite.stop()
using Godot;
public partial class Character : CharacterBody2D
{
private AnimatedSprite2D _animatedSprite;
public override void _Ready()
{
_animatedSprite = GetNode<AnimatedSprite2D>("AnimatedSprite2D");
}
public override void _Process(double delta)
{
if (Input.IsActionPressed("ui_right"))
{
_animatedSprite.Play("run");
}
else
{
_animatedSprite.Stop();
}
}
}
Folha de sprites com AnimatedSprite2D
Você também pode animar facilmente a partir de uma folha de sprites com a classe AnimatedSprite2D. Usaremos a seguinte folha de sprites em domínio público:
Clique com o botão direito do mouse na imagem e selecione "Salvar imagem como" para baixá-la, e logo depois copie a imagem na pasta do seu projeto.
Configure sua árvore de cena da mesma forma que fez anteriormente ao usar imagens individuais. Selecione o AnimatedSprite2D e, em sua propriedade SpriteFrames, selecione "New SpriteFrames".
Clique no novo recurso SpriteFrames. Dessa vez, quando o painel inferior aparecer, selecione "Add frames from a Sprite Sheet(Adicionar frames de uma Sprite Sheet)".
Será pedido que você abra um arquivo. Selecione sua sprite sheet.
Uma nova janela abrirá, mostrando sua sprite sheet. A primeira coisa que você precisará fazer é mudar o número de imagens verticais e horizontais em sua sprite sheet. Nesta sprite sheet, nós temos quatro imagens horizontalmente e duas imagens verticalmente.
Em seguida, selecione os frames da sprite sheet que você quer incluir na sua animação. Nós vamos selecionar os quatro de cima, depois clique em "Add 4 frames(Adicionar 4 frame(s))" para criar a animação.
Agora você verá sua animação na lista de animações no painel inferior. Clique duas vezes em "default" para mudar o nome da animação para "jump".
Por fim, marque o botão de reprodução no editor SpriteFrames para ver seu sapo pulando!
Sprite sheet com AnimationPlayer
Outra maneira de animar ao usar uma folha de sprites é usar um nó Sprite2D padrão para exibir a textura e, em seguida, animar a mudança de textura para textura com o AnimationPlayer.
Considere esta sprite sheet, a qual contém 6 quadros de animação:
Clique com o botão direito na imagem e selecione "Salvar imagem como" para baixá-la. Em seguida, copie a imagem para dentro da pasta do seu projeto.
Nosso objetivo é exibir essas imagens uma após a outra em um ciclo. Começe configurando a árvore da sua cena:
Nota
O nó raiz também pode ser Area2D ou RigidBody2D. A animação ainda será feita da mesma maneira. Assim que a animação estiver completa, você pode atribuir uma forma ao CollisionShape2D. Veja Introdução à Física para mais informação.
Arraste a sprite sheet para a propriedade Texture da Sprite, e você verá toda a folha exibida na tela. Para cortá-la em frames individuais, expanda a seção Animação no Inspetor e defina a propriedade Hframes como 6. Hframes e Vframes são o número de quadros horizontais e verticais, respectivamente na sua sprite sheet.
Agora tente alterar o valor da propriedade Frame. Você verá que ela varia de 0 a 5 e que a imagem exibida pelo Sprite2D muda de acordo. Esta é a propriedade que iremos animar.
Selecione o AnimationPlayer e clique no botão "Animação" e ,depois, em "Novo". Nomeie a nova animação como "walk". Defina a duração da animação como 0.6 e clique no botão "Loop" para que a nossa animação se repita.
Agora selecione o nó Sprite2D e clique no ícone de chave para adicionar uma nova trilha.
Continue adicionando frames a cada ponto da linha do tempo (0.1 segundos por padrão), até que você tenha todos os frames de 0 a 5. Você verá os frames realmente aparecendo na trilha de animação:
Pressione "Play" na animação para ver como ela fica.
Controlando uma animação do AnimationPlayer
Assim como no AnimatedSprite2D, você pode controlar a animação via código usando os métodos play() e stop(). Novamente, aqui está um exemplo para reproduzir a animação enquanto a tecla de seta para a direita estiver pressionada e interrompê-la quando a tecla for solta.
extends CharacterBody2D
@onready var _animation_player = $AnimationPlayer
func _process(_delta):
if Input.is_action_pressed("ui_right"):
_animation_player.play("walk")
else:
_animation_player.stop()
using Godot;
public partial class Character : CharacterBody2D
{
private AnimationPlayer _animationPlayer;
public override void _Ready()
{
_animationPlayer = GetNode<AnimationPlayer>("AnimationPlayer");
}
public override void _Process(double delta)
{
if (Input.IsActionPressed("ui_right"))
{
_animationPlayer.Play("walk");
}
else
{
_animationPlayer.Stop();
}
}
}
Nota
Se você atualizar uma animação e uma propriedade separada ao mesmo tempo (por exemplo, um jogo de plataforma pode atualizar as propriedades h_flip/v_flip do sprite quando um personagem vira enquanto inicia uma animação de 'virada'), é importante ter em mente que play() não é aplicado instantaneamente. Em vez disso, é aplicado na próxima vez que o AnimationPlayer for processado. Isso pode acabar acontecendo no próximo quadro, causando um quadro com 'bug' (glitch), onde a alteração da propriedade foi aplicada, mas a animação não. Se isso se tornar um problema, após chamar play(), você pode chamar advance(0) para atualizar a animação imediatamente.
Resumo
Esses exemplos ilustram as duas classes que você pode usar no Godot para animação 2D. AnimationPlayer é um pouco mais complexo do que AnimatedSprite2D, mas oferece funcionalidades adicionais, pois também permite animar outras propriedades, como posição ou escala. A classe AnimationPlayer também pode ser usada em conjunto com um AnimatedSprite2D. Experimente para descobrir o que funciona melhor para suas necessidades.