Animación de personaje con AnimationPlayer

Godot tiene su propio editor de animaciones: podemos realizar transformaciones en un nodo estableciendo todo lo que queremos que pase, mediante una línea de tiempo. Haremos una animación para el movimiento del jugador, usando una hoja de sprites.

Puedes descargar el proyecto desde Aquí.

Creando los nodos

Para éste tutorial sólo vamos a necesitar crear un nuevo nodo para nuestro jugador: el AnimationPlayer. En resumen:

• KinematicBody2D (jugador): es el cuerpo de nuestro protagonista y el nodo donde se realizan todos los cálculos para movimiento y funciones.
• Sprite2D (spr): es la imagen del jugador. Para hacer una animación necesitamos que la hoja de sprites se encuentre dentro de este nodo y los frames sean configurados para cambiarlos durante la animación.
• CollisionShape2D (col): capa que recibe las colisiones con otros cuerpos.
• AnimationPlayer (anim):  editor de animaciones con linea de tiempo.
• Camera2D: cámara que centra la imagen del juego en nuestro jugador

Ahora que conocemos todos los nodos que necesitamos para el funcionamiento del jugador, vamos a explicar la formación de la animación:

Primero tenemos que tener en cuenta la cantidad de frames que tiene nuestra hoja de sprites. El personaje del tutorial tiene la siguiente hoja:

Por lo tanto, en el nodo del Sprite, quedaría algo así:

La cantidad de imágenes (frames) en horizontal es 23, mientras que en vertical sólo tenemos 1. El número de frame lo pongo en 11 porque me parece que es un buen comienzo para el movimiento del jugador (en esa hoja que uso), pero ustedes pueden cambiarlo como quieran.

Cuando hagan clic en el nodo de AnimationPlayer, van a desbloquear la pestaña de «Animación» en la parte inferior del motor.

Cuando estén creando por primera vez una animación, tienen que hacer clic aquí:

Ese botón es para añadir una nueva animación, en el formulario tienen que escribir el nombre que le quieran dar.

Ahora que tenemos la animación en blanco, vamos a hacer clic en nuestro Sprite.

Ahora tenemos una llave en la derecha de cada propiedad. Tenemos que hacer clic en una llave para decirle al editor de animaciones que queremos crear una «pista» para trabajar con la alteración de esa propiedad. Nosotros vamos a hacer una animación para el movimiento, así que debemos hacer clic en la llave que representa al frame 11. Cuando hagamos clic, nos preguntará lo siguiente:

Le damos a crear. Se tiene que añadir un punto blanco en nuestro editor, además, el Frame acaba de subir a 12 por arte de magia. Ahora sólo tenemos que mover la aguja del tiempo, aproximadamente un micro segundo más, para después volver a hacer clic en la llave del Frame y aumentar el 12 a 13.

Desde ahora, cada vez que hagamos clic en la llave del Frame, la aguja del tiempo se moverá sola al siguiente micro segundo. Cuando terminemos con todas las imágenes del movimiento y no necesitemos crear más puntos, podemos mover la aguja para comprobar la animación.

SI estamos listos, pasamos a lo siguiente:

Al colocar la aguja en el último punto, arriba nos marcara el segundo exacto en el que estamos. En mi caso es 0.6. Con esa información vamos en la parte inferior del editor para marcar el tiempo máximo de la animación:

En «duración» ponemos el tiempo que obtuvimos arriba: 0.6. Tenemos que hacer que la animación sea un bucle que mientras esté activado, no se detenga. En la derecha de la imagen hay un botón marcado de azul (a ustedes les debe salir blanco), lo tienen que presionar para activar la repetición de la animación cada vez que pasen los 0.6 segundos.

Ahora sólo tienen que buscar en la parte superior del editor, el botón de guardar:

Activar la animación en el Script

Dentro del Script que usa el jugador, vamos a activar la animación que creamos.

if direction_x == 0:
		$anim.stop()
		$spr.frame = 0
	elif direction_x != 0 and !$anim.is_playing():
		$anim.play("mov_personaje")

Sí la dirección es 0, significa que no hemos presionado ninguna tecla, por lo tanto debemos detener la animación: con $anim.stop() estamos accediendo al nodo de AnimationPlayer para detenerlo.

Cuando las teclas son presionadas (la dirección no es igual a 0) y también comprobamos que nuestra animación de movimiento no se esta ejecutando, se accede nuevamente al nodo AnimationPlayer y se activa la animación usando la propiedad $anim.play() dentro del paréntesis se tiene que poner el nombre de la animación que tengamos dentro del nodo. Hasta ahora la única que hemos creado es «mov_personaje» .

Ya terminamos una explicación sencilla sobre lo que pueden hacer con el AnimationPlayer. Si tienes una duda, puedes dejarla en los comentarios.

Los Sprites que he usado se pueden descargar en OpenGameArt.

Si quieres aprender más sobre movimiento (fuera de animaciones), puedes ver Aquí.