Tutorial de Scripting Visual (Ladrillos Lógicos)

En esta lección, comenzaremos a integrar animaciones en la lógica de nuestro Player.

En este punto, el Player ya puede moverse y saltar. Ahora necesitamos hacer que el personaje reaccione visualmente a esos estados reproduciendo las animaciones correctas, como idle, walking, running y falling.

La idea principal es sencilla: utilizaremos el estado actual del personaje para decidir qué animación debe reproducirse.

Por ejemplo:

• Si el Player está en el suelo y no se mueve, reproduce la animación idle.
• Si el Player está en el suelo y se mueve, reproduce la animación walking.
• Si el Player está corriendo, reproduce la animación running.
• Si el Player no está en el suelo, reproduce la animación falling.

Este es uno de los patrones más comunes al crear un controlador de personaje. La lógica de movimiento controla lo que el personaje está haciendo, y la lógica de animación lee esa información para decidir qué debe ver el jugador.

1. Creando la Lógica de Ejecución de Animaciones

Ahora que aprendimos a crear y organizar eventos, vamos a crear un nuevo evento para el bloque de lógica de animación llamado Update Animations.

Este evento será responsable de actualizar el estado de la animación del Player.

Lo primero que haremos es conectar este evento a un nodo If que verifica si el personaje está actualmente en el suelo o no. Esta información se usará para decidir qué animación debe reproducirse.

Por ejemplo, cuando el Player está en el suelo, podemos reproducir animaciones idle, walk o run. Cuando el Player no está en el suelo, podemos reproducir en su lugar una animación falling.

A continuación, necesitamos acceder al Animation Component, que es responsable de gestionar y reproducir las animaciones del personaje.

Para hacer esto, primero obtenemos la Entity, luego usamos el nodo Child para obtener el objeto hijo llamado Mesh, que es el objeto de malla de nuestro Player. Desde esta Entity hijo, podemos acceder al Animation Component.

Dado que probablemente necesitaremos acceder al Animation Component múltiples veces, podemos convertir los nodos Get Entity, Get Child y Get Animation Component en una función reutilizable.

Para hacer esto, selecciona los nodos que desees, haz clic derecho y elige Promote Selection To Function.

Esto creará una función que contiene esta lógica, haciendo que el gráfico sea más limpio y fácil de entender. También nos permite reutilizar este mismo flujo en otras partes del Logic Brick sin tener que recrear los mismos nodos nuevamente.

Vamos a renombrar esta función a Play Animation.

Usar nombres claros y descriptivos es muy importante al trabajar con lógica visual. A medida que tu gráfico crece, buenos nombres te ayudarán a entender rápidamente qué evento, función y bloque de lógica son responsables de.

Ahora haz doble clic en la función Play Animation para abrirla y editarla.

Luego haz clic derecho en el nodo Function Inputs y agrega dos nuevos pines de entrada.

La primera entrada será:

• Animation, de tipo String.

Esta entrada se utilizará para informar el nombre de la animación que debe reproducirse.

La segunda entrada será:

• Blend, de tipo Float.

Esta entrada se utilizará para controlar el tiempo de transición entre animaciones.

Estos parámetros hacen que la función sea mucho más flexible.

En lugar de crear un bloque diferente de nodos para cada animación, podemos usar la misma función Play Animation y simplemente pasar un nombre de animación diferente y un valor de mezcla cada vez que la llamemos.

Desde la salida de Get Animation Component, agrega el nodo Play By Name.

Este nodo es responsable de reproducir una animación basada en su nombre.

Luego conecta los parámetros de Animation y Blend que creamos en el nodo Function Inputs a los campos correspondientes del nodo Play By Name.

Esto significa que cada vez que se llama a la función Play Animation, recibirá el nombre de la animación y el tiempo de mezcla, luego pasará esos valores a Play By Name.

No olvides habilitar la opción Loop en el nodo Play By Name.

Con Loop habilitado, la animación continuará reproduciéndose mientras esté activa, en lugar de detenerse cuando alcanza el último fotograma. Esto es especialmente importante para animaciones como idle, walking, running y falling, ya que normalmente necesitan seguir reproduciéndose continuamente.

Finalmente, conecta la salida Flow del nodo Play By Name a Function Outputs, terminando la ejecución de la función Play Animation.

Ahora es mucho más fácil reproducir las animaciones de nuestro personaje.

Ve de nuevo al nodo If que verifica si el Player está en el suelo o no, y usa la función Play Animation.

Cuando la condición es True, lo que significa que el Player está en el suelo, llama a la función pasando "p-idle" como el parámetro de animación. Esta es la animación utilizada cuando el personaje está parado.

Cuando la condición es False, lo que significa que el Player no está en el suelo, llama a la función pasando "p-fall". Esta es la animación utilizada cuando el personaje está en el aire.

Para ambos casos, usa 0.1 como el valor de Blend. Esto le da a la animación un pequeño tiempo de transición, haciendo que el cambio sea más suave en lugar de saltar instantáneamente de una animación a otra.

Ahora solo necesitamos llamar al evento Update Animations dentro del flujo del evento Move Player.

De esta manera, cada vez que se actualiza la lógica de movimiento del Player, la lógica de animación también se actualizará.

Con esto, el Player ya podrá alternar entre p-idle y p-fall dependiendo de su estado actual. Cuando el Player esté en el suelo, reproducirá la animación idle. Cuando el Player esté en el aire, reproducirá la animación falling.

Perfecto. Ahora continuemos desarrollando la lógica de animación del Player añadiendo las animaciones de movimiento.

Para hacer esto, obtén la Walk Direction y usa el nodo Length para medir la intensidad del vector de movimiento.

La longitud del vector de movimiento nos dice si el personaje se está moviendo o no.

Luego agrega un nodo If para verificar si este valor es mayor que 0.

Si el resultado es True, significa que el personaje se está moviendo, así que podemos reproducir la animación de caminar p-walk.

Si el resultado es False, significa que el personaje no se está moviendo, así que deberíamos reproducir la animación idle p-idle.

Esto hace que el Player cambie automáticamente entre estar parado y caminar en función de su movimiento.

Ahora hay dos detalles más para completar el comportamiento de animación de movimiento de nuestro personaje:

Primero, necesitamos reproducir la animación de correr cuando el Player está corriendo.

Segundo, necesitamos hacer que el Player mire en la dirección en la que se está moviendo.

Para controlar las animaciones de caminar y correr, agrega un nodo Sequence justo después de la verificación que determina si el Player se está moviendo.

Luego, obtén la propiedad Is Running y usa un nodo If para verificar su valor.

Si Is Running es True, reproduce la animación de correr.

Si Is Running es False, reproduce la animación de caminar.

De esta manera, el Player no solo sabrá si se está moviendo o está parado, sino también si debe usar la animación de caminar o correr mientras se mueve.

En la segunda salida Then de la secuencia que acabamos de agregar, usa el nodo Look At Smooth.

Este nodo rotará suavemente al personaje, haciéndolo mirar en la dirección en la que se está moviendo. Esto hace que el movimiento se sienta mucho más natural, ya que la malla del personaje estará visualmente enfrentada a la misma dirección que el movimiento.

Necesitamos multiplicar el valor de Get Walk Direction por -1 antes de enviarlo a Look At Smooth.

Esto invierte el vector de dirección y corrige la dirección en la que la malla del personaje está mirando. Dependiendo de cómo se importó o orientó el modelo del personaje, la malla visual puede mirar en la dirección opuesta al vector de movimiento. Multiplicar por -1 soluciona esto y hace que el personaje mire en la dirección correcta mientras se mueve.

Después de eso, conecta la dirección ya multiplicada al nodo Look At Smooth.

A continuación, también necesitamos proporcionar el Transform del objeto que se rotará.

Para hacer esto, accede a la Entity, luego obtén el Mesh del Player y utiliza el nodo Get Transform.

Esta transformación debe conectarse a Look At Smooth, asegurando que la rotación se aplique al objeto correcto, que es la malla visible del personaje.

En este punto, la lógica de animación del Player ya está mucho más completa.

El personaje puede ahora alternar entre las animaciones idle, falling, walking y running según su estado actual. También rota suavemente para mirar en la dirección del movimiento, haciendo que el controlador se sienta más natural y visualmente conectado a la lógica del juego.