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...
Animación de Sprite 2D
Introducción
En este tutorial aprenderás cómo crear personajes 2D animados con la clase AnimatedSprite2D y AnimationPlayer2D. Típicamente, cuando creas o descargas un personaje animado, éste viene en uno de estos dos modos: como imágenes individuales o como una sola hoja de sprites conteniendo todos los frames de la animación. Ambos pueden ser animados en Godot con la clase AnimatedSprite2D.
Primero, usaremos AnimatedSprite2D para animar un conjunto de imágenes individuales. Luego animaremos una hoja de sprites usando esta clase. Finalmente, aprenderemos otro modo de animar un hoja de sprites con AnimationPlayer y la propiedad Animation de Sprite2D.
Nota
El arte de los siguientes ejemplos está hecho por https://opengameart.org/users/ansimuz y tgfcoder.
Imágenes individuales con AnimatedSprite2D
En este escenario, tienes una colección de imágenes, cada una conteniendo un frame de la animación del personaje. Para este ejemplo, usaremos la siguiente animación:
Puedes descargar las imágenes aquí: 2d_sprite_animation_assets.zip
Descomprime las imágenes y colócalas en la carpeta de tu proyecto. Configura tu árbol de escena con los siguientes nodos:
Nota
El nodo raíz puede ser también Area2D o RigidBody2D. La animación se hará del mismo modo. Una vez que la animación esté completa, puedes asignar una forma al CollisionShape2D. Ver Introducción a la física para más información.
Ahora selecciona el AnimatedSprite2D y en su propiedad SpriteFrames selecciona "Nuevo SpriteFrames".
Haz clic en el nuevo recurso SpriteFrames y verás que aparece un nuevo panel en la parte inferior de la ventana del editor:
Desde el panel del Sistema de Archivos en el lado izquierdo, arrastra las 8 imágenes individuales a la parte central del panel de SpriteFrames. En el lado izquierdo, cambia el nombre de la animación de "default" a "run".
Utiliza los botones de reproducción ubicados arriba y a la derecha de la entrada "Filtrar Animaciones". Verás la animación reproduciéndose en el viewport. Sin embargo, está un poco lenta. Para arreglar esto, cambia el ajuste de Velocidad (FPS) en el panel de SpriteFrames a 10.
Puedes añadir animaciones adicionales haciendo clic en el botón "Añadir animación" y agregar imágenes adicionales.
Controlando la animación
Una vez que la animación está completa, puedes controlar la animación a través del código usando los métodos play() y stop(). Aquí hay un breve ejemplo para reproducir la animación mientras se mantiene la tecla de la flecha derecha, y detenerla cuando se suelta la tecla.
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();
}
}
}
Hoja de sprites con AnimatedSprite2D
También puedes animar fácilmente desde una hoja de sprites con la clase AnimatedSprite2D`. Usaremos esta hoja de sprites de dominio público:
Haz clic con el botón derecho del ratón en la imagen y selecciona "Guardar imagen como" para descargarla, luego copia la imagen en la carpeta de tu proyecto.
Configura tu árbol de escena de la misma forma que lo hiciste previamente cuando usaste imágenes individuales. Selecciona el AnimatedSprite2D y en su propiedad SpriteFrames, selecciona "Nuevo SpriteFrames".
Haz clic en el nuevo recurso de SpriteFrames. Esta vez, cuando aparezca un panel en la parte inferior, selecciona "Añadir Frames desde un Sprite Sheet".
Se te pedirá que abras un archivo. Selecciona tu hoja de sprites.
Se abrirá una nueva ventana, mostrando tu hoja de sprites. Lo primero que tendrás que hacer es cambiar el número de imágenes verticales y horizontales en tu hoja de sprites. En esta hoja de sprites, tenemos cuatro imágenes horizontalmente y dos verticalmente.
A continuación, selecciona los cuadros de la hoja de sprites que quieres incluir en tu animación. Seleccionaremos los cuatro primeros, y luego haremos clic en "Añadir 4 cuadros" para crear la animación.
Ahora verás tu animación en la lista de animaciones en el panel inferior. Haz doble clic sobre default para cambiar el nombre de la animación a jump.
Finalmente, usa el botón de reproducción en el editor de SpriteFrames para ver a tu rana ¡saltando!
Sprite sheet con AnimationPlayer
Otra forma en que puedes animar cuando se ustiliza una hoja de sprites es usar un nodo estándar Sprite2D para mostrar la textura, y luego animar el cambio de textura a textura con AnimationPlayer.
Consideremos esta hoja de sprites, que contiene 6 cuadros de animación:
Haz clic con el botón derecho del ratón en la imagen y selecciona "Guardar imagen como" para descargarla, luego copia la imagen en la carpeta de tu proyecto.
Nuestro objetivo es mostrar estas imágenes una tras otra en un bucle. Comienza por establecer tu árbol de escenas:
Nota
El nodo raíz puede ser también Area2D o RigidBody2D. La animación se hará del mismo modo. Una vez que la animación esté completa, puedes asignar una forma al CollisionShape2D. Ver Introducción a la física para más información.
Arrastra la hoja de sprites en la propiedad Texture del Sprite, y verás toda la hoja desplegada en la pantalla. Para cortarla en cuadros individuales, expande la sección Animación en el Inspector y pon los Cuadros a "6". Hframes y Vframes son el número de marcos horizontales y verticales en tu hoja de sprites.
Ahora intenta cambiar el valor de la propiedad Frame. Verás que va de "0" a "5" y la imagen mostrada por el Sprite2D cambia en consecuencia. Esta es la propiedad que estaremos animando.
Selecciona el AnimationPlayer y haz clic en el botón Animation seguido de New. Nombra a la nueva animación "walk". Ponga la duración de la animación en "0.6" y haga clic en el botón "Loop" para que nuestra animación se repita.
Ahora selecciona el nodo Sprite2D y haz clic en el icono de la llave para añadir una nueva pista.
Continúa agregando cuadros en cada punto de la línea de tiempo (0,1 segundos por defecto), hasta que tengas todos los cuadros de 0 a 5. Verás los cuadros que realmente aparecen en la pista de animación:
Presiona "Play" en la animación para ver cómo se ve.
Controlando una animación de AnimationPlayer
Como con AnimatedSprite2D, puedes controlar la animación por medio del código usando los métodos play() y stop(). De nuevo, aquí hay un ejemplo para reproducir la animación mientras se mantiene la tecla de la flecha derecha, y detenerla cuando se suelta.
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
If updating both an animation and a separate property at once
(for example, a platformer may update the sprite's h_flip/v_flip
properties when a character turns while starting a 'turning' animation),
it's important to keep in mind that play() isn't applied instantly.
Instead, it's applied the next time the AnimationPlayer is processed.
This may end up being on the next frame, causing a 'glitch' frame,
where the property change was applied, but the animation was not.
If this turns out to be a problem, after calling play(), you can call advance(0)
to update the animation immediately.
Sumario
Estos ejemplos ilustran las dos clases que puedes usar en Godot para la animación 2D. AnimationPlayer es un poco más complejo que AnimatedSprite2D pero proporciona una funcionalidad adicional, ya que también puedes animar otras propiedades como la posición o la escala. La clase "AnimationPlayer" también puede ser usada con un "AnimatedSprite". Experimenta para ver qué es lo que mejor funciona para tus necesidades.