En este tutorial vamos a ver Sprite Animation en Godot Engine, específicamente sobre el uso de la clase AnimatedSprite. Vamos a importar y crear un nodo que tenga múltiples cuadros de animación, luego miraremos un código para pasar de un cuadro a otro. En el tutorial inmediatamente siguiente, cubriremos un método de animación mucho mejor usando AnimationPlayer.

Como siempre, hay una versión de video HD de este tutorial disponible aquí o incrustado debajo.

Muy bien, entremos con AnimatedSprite.

Animación de sprites

Sprite animado es una práctica clase derivada de Node2D que le permite tener un nodo con múltiples SpriteFrames. En lenguaje sencillo, esta clase nos permite tener un sprite con múltiples cuadros de animación.

Hablando de cuadros de animación, esta es la secuencia de imágenes png que voy a usar para este ejemplo:

Puede descarga el archivo zip que contiene estas imágenes aquío por supuesto puedes usar las imágenes que quieras.

Ahora simplemente queremos importarlos usando el método estándar Importar->Textura 2D. Tenga en cuenta que puede realizar una selección múltiple en el Importador, por lo que puede importar la secuencia completa de una sola vez. Suponiendo que lo haya hecho bien, su sistema de archivos debería parecerse a:

Ahora agregue un nodo AnimatedSprite a su escena así:

Ahora agregamos los marcos a nuestro AnimatedSprite seleccionando Frame->New SpriteFrames

Ahora suéltalo de nuevo y selecciona Editar:

El editor 2D ahora será reemplazado por el editor SpriteFrames. Haga clic en el icono de abrir:

Mayús, seleccione todos los marcos de sprites y seleccione Aceptar

Todos tus sprites deberían aparecer ahora en el editor:

Ahora agreguemos algo de código para hojear los marcos de nuestro AnimatedSprite. Adjunte un script al nodo AnimatedSprite, luego use el siguiente código:

extends AnimatedSprite

var tempElapsed = 0

func _ready():
   set_process(true)
   
func _process(delta):
   tempElapsed = tempElapsed + delta
   
   if(tempElapsed > 0.1):
      if(get_frame() == self.get_sprite_frames().get_frame_count()-1):
         set_frame(0)
      else:
         self.set_frame(get_frame() + 1)
      
      tempElapsed = 0
   
   print(str(get_frame() + 1))

La lógica es bastante simple. En nuestro tick de proceso, incrementamos una variable tempElapsed, hasta que haya transcurrido 1/10 de segundo, momento en el que pasamos al siguiente cuadro. Si estamos en el último cuadro de nuestra animación disponible, volvemos al primer cuadro.

Cuando lo ejecutes, deberías ver:

¡Muy genial! Sin embargo, en lugar de avanzar el cuadro usando código, hay un enfoque mucho mejor para la animación, que veremos en el próximo tutorial. Manténganse al tanto.

El video

Programación Godot Tutorial Video 2D