Creación de Videojuegos. Godot Engine. Las animaciones.

Tema 3. Godot Engine. Las animaciones.

Animaciones usando SpriteSheets

Para animar a nuestro Personaje, usaremos un nuevo nodo hijo llamado AnimationPlayer

El Nodo AnimationPlayer en Godot
El Nodo AnimationPlayer

Por lo tanto seleccionamos el Nodo Principal Personaje, haremos click en + y buscaremos el Nodo AnimationPlayer, y lo seleccionamos.

Godot. Nodo AnimationPlayer hijo del Nodo Sprite
Nodo AnimationPlayer hijo del Nodo Sprite

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 personaje.

Godot Engine. Ventana de Animación.
Ventana de Animación

Creamos una Animación nueva que llamaremos Idle.

Godot. Creación de animaciones.
Creamos una animación llamada Idle

Ahora, si nos situamos en el  Nodo Sprite, veremos que a la parte derecha hay una llaves 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.

Godot. Frames de la animación.
Godot. Frames de la animación.

En la parte derecha podemos observar que podemos seleccionar los 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.

Primer frame de nuestro personaje en Godot.
Primer frame de nuestro personaje en Godot.
Pantalla completa de nuestra animación. Godot Engine.
Pantalla completa de nuestra animación. Godot Engine.

Ejemplo:

  • 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 5 (último) de nuestra imagen.
Godot Engine. Agregamos todos los frames de la animación del personaje.
Agregamos todos los frames de la animación del personaje.

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 definir una proporción de tiempo entre los cambios de estado: Al lado del reloj podemos cambiar el tiempo. Probar a ir cambiando el tiempo y darle al Play para ver el resultado de la animación en la pantalla. Si hacemos click en las dobles flechas activaremos o desactivaremos el loop de la animación.

Godot. Frames. Modificación del tiempo.
Modificación del tiempo (frames). Godot.

Observaremos que nuestra animación se compone de 6 frames. Si aumentamos los segundos, por ejemplo a 2 y probamos la animación veremos que cuando se pasa de las 0.6 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.6 (décimas de segundo).

Animación completa en Godot.
Animación completa en Godot.

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

Nueva animación: Salto 

Nueva animación: Andar

Buscad un spritesheet con muchas animaciones y probad a realizar vuestra animacion siguiendo este tutorial.

Animación usando imágenes separadas con 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.

Animación en Godot usando imágenes en png
Animación en Godot usando imágenes en png

Para ello, dado un Nodo Padre de tipo KinemeticBody2D (que renombraremos como Player2) crearemos un Nodo hijo de tipo AnimatedSprite y le añadimos su CollisionShape.

Godot: AnimatedSprite y CollisionShape2D
Godot: AnimatedSprite y CollisionShape2D

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

Godot. Frames usando AnimatedSprite
Frames usando AnimatedSprite

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

Fotogramas de Animación. Godot Engine.
Fotogramas de Animación. Godot Engine.

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.

Godot. Arrastramos todos png  a la animación Idle.
Arrastramos todos png a la animación Idle.

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
Ejemplo de indentación de la página web de Godot

Creamos un Script en el Nodo Player2 y añadimos:

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.

func _ready():
$AnimatedSprite.play(“idle”)

Ahora arrastramos el Nodo Player2 a la escena y probamos a ver el resultado. El player2 se anima en estado idle.

Ejemplo de animación con Godot.
Ejemplo de animación con Godot.

Ahora haremos lo mismo con la animación left y right:

Teniendo en cuenta que nuestra animación apunta a la derecha:

right

Godot. Animación derecha del personaje.
Godot. Animación derecha del personaje.

left: para animar el left modificaremos la propiedad Flip H por código

Godot. Animación izquierda del personaje.
Godot. Animación izquierda del personaje.

Y modificamos el código:

La función fun_process(delta) se ejecuta de forma continua dada la configuración de cada dispositivo, bien sean ordenadores o móviles.

(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)


func _process(delta):
velo.y += Velocidad * delta
if Input.is_action_pressed(“Player_Left”):
$AnimatedSprite.flip_h = true;
$AnimatedSprite.play(“left”)
velo.x = -Velocidad
if Input.is_action_pressed(“Player_Right”):
$AnimatedSprite.play(“right”)
$AnimatedSprite.flip_h = false;
velo.x = Velocidad
if !Input.is_action_pressed(“Player_Left”) and !Input.is_action_pressed(“Player_Right”):
$AnimatedSprite.play(“idle”)
velo.x = 0

move_and_slide(velo,Vector2(0,-1))

Duplicamos la 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 

Animación. SpriteSheet de 3x8 Godot.
SpriteSheet de 3×8 Godot.

Por lo tanto:

HFrames =  8

VFrames = 3

Godot. HFrames y VFrames
Godot. HFrames y VFrames

Tenemos en cuenta que por defecto nuestra animación está hacia la izquierda.

Crearemos la animación Left que está formada por los índice o frames: 8 a11

Deberemos ir primero y situarnos al Frame 8 y empezar a añadirlos a nuestra animación.

Pistas de animación con Godot. Animación Left
Pistas de animación con Godot. Animación Left

Ahora haremos Click en Animación y Duplicaremos Left

Y a continuación renombraremos la copia por Right

Con la Animación Right Seleccionada, iremos a Sprite y 

en Offset -> Flip H marcaremos la opción a Activada.

Godot. Para animar a la izquierda marcamos la propiedad Flip H.
Godot. Para animar a la izquierda marcamos la propiedad Flip H.

Una vez hecho esto haremos un Click en la Llave que hay al lado de Flip H

Esto nos activará la pista en nuestra animación para que se invierta.

Cuidado: DEBEMOS DESMARCAR EL FlipH en la animación left y darle a la llave para que nos guarde la opción del Flip_h activada:

Left sin FlipH

Godot. Animación Left
Godot. Animación Left

Ahora veremos la animación Left con la propiedad flip_h activada:

Godot. Propiedad flip_h activada desde el editor de animaciones.
Godot. Propiedad flip_h activada desde el editor de animaciones.

Right hacemos lo mismo: la propiedad  flip_h también debe aparecer activada:

Godot. Animación derecha personaje.
Godot. Animación derecha personaje.

Otra opción sería tener un sprite para cada dirección. 

Nota: tened en cuenta que esto lo manejaremos por código.


ÍNDICE


0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x