Tema 3. Godot Engine. Las animaciones.

ANIMACIÓN USANDO SPRITESHEETS O PNG SEPARADOS

Para CREAR ANIMACIONES usaremos el Nodo AnimationPlayer. Si tenemos una imagen de tipo SpriteSheet compuesta por diversas secuencias, podemos usar el Nodo Sprite, en combinación con el Nodo AnimationPlayer.

Si los que tenemos son imágenes separadas secuencias de tipo png, podremos usar el Nodo AnimatedSprite junto con el Nodo AnimationPlayer.

EJEMPLO USANDO SPRITE Y ANIMATIONPLAYER

Supongamos que tenemos un SpriteSheet formado que representa los “Bonus” de nuestro juego y queremos animarlo:

Añadimos el Nodo Sprite a la escena:

Arrastramos la Textura sobre la propiedad Texture del Nodo Sprite y ajustamos HFrames y VFrames a la matriz 8×1 de nuestro SpreedSheet.

Añadimos el Nodo AnimationPlayer:

Cuando se crea el Nodo AnimationPlayer, en la parte inferior de la ventana veremos que se muestra Animación. Si hacemos Click encima, aparece un menú donde podremos ir definiendo las diferentes animaciones de nuestro “Bonus”

Creamos una Animación nueva que llamaremos Idle.

Ahora, si nos situamos en el Nodo Sprite, veremos que a la parte derecha hay una llave en la propiedad Frame que podemos ir haciendo Click para añadir ese frame a nuestra animación. Dependiendo de la animación que deseemos deberemos ir haciendo click en el índice o frame adecuado que corresponda a dicha animación.

Partiendo del Frame 0, vamos añadiendo cada una de las secuencias en la Animación inferior.

Como nuestra animación consta de 8 secuencias, indicaremos que nuestra animación durará 0.8 segundos, 0.1 segundo por secuencia (definido en la parte inferior Snap: 0.1)

Y marcamos la opción Animation Looping para que se repita:

En la parte derecha podemos ver que podemos seleccionar segundos o fps. Nosotros trabajaremos con segundos. Si vamos arrastrando la lupa hacia la derecha, veremos con más precisión las décimas de segundo. Podemos ir creando un frame para cada décima de segundo de nuestra animación.

Seleccionamos Sprite y nos ponemos en el Frame 0 (seleccionamos Frame 0) y luego añadimos el Frame 0 a nuestra animación mediante la llave con el + verde. Y arrastramos la imagen al segundo 0.
Volvemos a Sprite y seleccionamos el Frame 1 y con la llave + verde añadimos el Frame1 a nuestra animación.
Así sucesivamente hasta el frame 8 (último) de nuestra imagen.

Si nos hemos equivocado nos ponemos encima de la imagen que queramos rectificar y con el botón derecho podemos borrarla y volverla a insertar.

También podemos ajustar el tiempo y el Snap según queramos que la imagen se ajuste a un mejor movimiento, pero todo dependerá del número de Frames que el diseñador haya creado.

Probad a darle al Play.

Nota:

Observaremos que nuestra animación se compone de 8 frames. Si aumentamos los segundos, por ejemplo a 2 y probamos la animación veremos que cuando se pasa de las 0.8 décimas, la animación ya no hace nada hasta llegar a los 2 hasta que vuelve a empezar. por lo tanto para un óptimo resultado, en nuestro caso, pondremos los segundos a 0.8

Nuestro ejemplo solo tiene una animación de idle (una única animación). Si tuviéramos una matriz con diferentes definiciones podríamos ir creando las diferentes animaciones de la misma forma:

Nueva animación: Tipo1

Nueva animación: Tipo2

ANIMACIÓN USANDO IMÁGENES PNG SEPARADAS. NODO ANIMATEDSPRITE

Supongamos que ahora tenemos las secuencias del diamante separadas en png.

Si disponemos de una animación de un personaje u objeto compuesta por diversos png separados, entonces procederemos de forma diferente. En este ejemplo tenemos la animación Idle formada en diferentes png.

Seleccionamos el nodo AnimatedSprite y en la propiedad Frames creamos un nuevo SpriteFrame. Hacemos un Click sobre Nuevo SpriteFrames y aparecerá un editor en la parte inferior.

Por defecto, se crea una animación llamada default, a la que le cambiaremos el nombre por idle:

Ahora podemos arrastrar todos los png de la animación idle que tenemos en recursos dentro de la ventana de animación idle. Dejamos el loop activado. Si queremos, podemos aumentar la velocidad de los FPS.

Arrastramos todos los png dentro de la Animación Idle, y dentro de su área AnimationFrames:

Si vamos al Nodo AnimatedSprite y activamos la propiedad Playing, observaremos que la animación empieza a ejecutarse.

Así que, como se puede deducir, al Nodo Animation Player no haría falta en este caso.

Y también tenemos que saber que podemos ejecutar dicha animación desde el propio código, cuando veamos GDScript.

func _ready():
$AnimatedSprite.play(«idle»)

EJEMPLO CON ANIMATIONPLAYER

El nodo AnimationPlayer lo usaremos para funciones más potentes ya que nos brinda un abanico potencial de posibilidades.

De todas maneras, vamos a ver un ejemplo del uso de AnimationPlayer con AnimatedSprite:

Antes de empezar, ya que hemos creado anteriormente una animación en AnimationPlayer, iremos al Nodo AnimationPlayer y cambiaremos el nombre de las animaciones, o borramos la que habíamos creado y creamos dos nuevas: Azul y Verde.

O bien, podemos borrar el Nodo AnimationPlayer y volverlo a crear de nuevo para seguir con este ejemplo:

Para seguir con el ejemplo, modificaremos el nombre de la animación Idle por Verde:

y crearemos una nueva animación con el nombre Azul:

Arrastraremos los diamantes de color azul, dentro de su AnimationFrames:

Ahora crearemos dos animaciones usando el Nodo AnimationPlayer

Primero, seleccionamos el Nodo AnimatedSprite.

Segundo, en la parte inferior del Editor, hacemos Click en Animation

Ojo, ahora observamos que en la propiedad Animation de AnimatedSprite, podemos seleccionar dos animaciones: Azul o Verde.

Seleccionamos Azul y hacemos un Click en la Llave:

Esto nos genera una animación en la barra

Hacemos un Click en el Frame 0 de nuestra animación Azul:

Y vamos incrementando los Frames y añadiéndolos:

Hacemos lo mismos pasos con el diamante Verde, pero seleccionando las opciones de la nueva animación:

En sucesivos tutoriales, veremos que podemos ejecutar dichas animaciones usando el código GDScript. Además con el Nodo AnimationPlayer, podremos ejecutar funciones o cambiar propiedades en el frame de la animación que deseemos.

GDScript

Con Godot se pueden usar varios lenguajes de programación. En todos los tutoriales, usaremos GDScript. Ahora crearemos el Scrip (código de programación usado por Godot por defecto, GDScript)

Debemos tener en cuenta que GDScript usa una estructura indentada:

Ver más información en la web de Godot -> Indentación

Cada nivel de la Indentación deberá ser uno mayor que el bloque que lo contiene.

Ejemplo de indentación de la página web de Godot

Creamos un Script en el Nodo Escena y añadimos lo siguiente:

func _ready():
$AnimatedSprite.play(«idle»)

Aunque ya lo explicaremos en temas posteriores, func_ready() es una función en Godot que se ejecuta siempre que se inicia el Nodo. Con esta instrucción activamos la animación Idle. Fijarse cómo se llama al Nodo $AnimatedSprite y se ejecuta el método play(«idle») que activa la animación.

(Ojo, el código de estos tutoriales no está indentado por consiguiente, dará un error si se copia y se pega en el editor de código de Godot). Es conveniente, escribir el código a mano e indentarlo y de esta forma practicar con la indentación de GDScript)

Flip_h o Flip_v en una animación

En este apartado vamos a duplicar la animación para que el personaje, en función de su movimiento derecha o izquierda, se visualice de forma adecuada. Realizaremos el ejemplo usando SpriteSheets.

Ahora usaremos otro spritesheet para definir el movimiento derecha o izquierda:

Nuestro spritesheet es de 3×8