Introducción a las características de la animación 2D

Sinopsis

El nodo AnimationPlayer permite crear desde animaciones simples hasta complejas.

En esta guía aprenderás a hacerlo:

  • Trabajar con el Panel de Animación
  • Animar cualquier propiedad de cualquier nodo
  • Crear una animación simple
  • Funciones de llamada con la potente Pista de Llamada a Funciones

En Godot, puedes animar cualquier cosa disponible en el Inspector, como transformaciones de nodos, sprites, elementos UI, partículas, visibilidad y color de materiales, etc. También puedes modificar los valores de las variables de script y llamar a cualquier función.

Crear un nodo AnimationPlayer

Para usar las herramientas de animación primero tenemos que crear un nodo AnimationPlayer.

El tipo de nodo AnimationPlayer es el container de datos para las animaciones. Un nodo AnimationPlayer puede contener varias animaciones, que pueden hacer una transición automática entre estas.

The AnimationPlayer node

El nodo AnimationPlayer

Haz clic en el nodo AnimationPlayer en la pestaña Nodos para abrir el Panel de Animación en la parte inferior de la ventana de visualización.

The animation panel position

La posición del panel de animación

Consta de cuatro partes:

The animation panel

El panel de animación

  • Controles de animación (es decir, añadir, cargar, guardar y eliminar animaciones)
  • El listado de pistas
  • La línea de tiempo con fotogramas clave
  • Los controles de línea de tiempo y pista, donde se puede ampliar la línea de tiempo y editar pistas, por ejemplo.

La animación por computadora se basa en fotogramas clave

Un fotograma clave define el valor de una propiedad en un momento determinado.

Diamond shapes represent keyframes in the timeline. A line between two keyframes indicates that the value hasn't changed.

Keyframes in Godot

Fotogramas clave en Godot

El motor interpola valores entre fotogramas clave, lo que da como resultado un cambio gradual de los valores a lo largo del tiempo.

Two keyframes are all it takes to obtain a smooth motion

Dos fotogramas clave son todo lo que se necesita para obtener un movimiento suave

La línea de tiempo permite insertar fotogramas clave y cambiar su timming. También define la duración de la animación.

The timeline in the animation panel

La línea de tiempo en el panel de animación

Cada línea del Panel de Animación es una pista de animación. Normal y Transform rastrea las propiedades del nodo de referencia. Su nombre o id es una ruta al nodo y a la propiedad afectada.

Example of Normal animation tracks

Ejemplo de pistas de animación normales

Truco

Si animas la propiedad incorrecta, puedes editar la ruta de una pista en cualquier momento. Haz doble clic sobre él y escribe la nueva ruta. Reproduce la animación con el botón "Reproducir desde el principio" Play from beginning (o presionando Shift + D en el teclado) para ver los cambios al instante.

Tutorial: Crear una animación simple

Configuración de la escena

Para este tutorial, crearemos un nodo AnimationPlayer y un nodo sprite como su hijo.

Our scene setup

Nuestra configuración de la escena

El sprite contiene una textura de imagen. Animamos ese sprite para que se mueva entre dos puntos de la pantalla. Para este tutorial usaremes el icono por defecto de Godot como textura del sprite. Como punto de partida, mueve el sprite a una posición a la izquierda de la pantalla.

Truco

No es necesario añadir nodos animados como hijos al nodo AnimationPlayer, pero es una buena forma de distinguir los nodos animados de los nodos no animados en el árbol de escenas.

Selecciona el nodo AnimationPlayer y haz clic en el botón "Animación" del editor de animaciones. De la lista selecciona "Añadir animación" (Add Animation) e ingresa un nombre para la animación en el cuadro de diálogo.

Add a new animation

Añadir una nueva animación

Añadir una pista

Para añadir una nueva pista para nuestro sprite, selecciónala y echa un vistazo a la barra de herramientas:

Convenience buttons

Botones de conveniencia

Estos interruptores y botones permiten agregar fotogramas clave para la ubicación, rotación y escala del nodo seleccionado, respectivamente.

Deselecciona rotación, porque sólo nos interesa la ubicación de nuestro sprite para este tutorial y haz clic en el botón con forma de llave.

Como no tenemos una pista ya configurada para la propiedad de transform/location, Godot nos preguntará si debería configurarla por nosotros. Haz clic en "Crear".

Esto crea una nueva pista y nuestro primer fotograma clave al principio de la línea de tiempo:

The sprite track

La pista de sprite

El segundo fotograma clave

Ahora tenemos que establecer el destino al que debe dirigirse nuestro sprite y cuánto tiempo se tarda en llegar allí.

Digamos que queremos que tarden 2 segundos en llegar al otro punto. De forma predeterminada, la animación está configurada para que dure sólo 1 segundo, así que cámbiala en los controles de la línea de tiempo en el panel inferior del panel de animación a 2.

Animation length

Duración de la animación

Haz clic en el encabezado de la línea de tiempo cerca de la marca de 2 segundos y mueve el sprite al destino deseado en el lado derecho.

De nuevo, haz clic en el botón de la barra de herramientas. Esto creará nuestro segundo fotograma clave.

Reproducir la animación

Haz clic en el botón " Reproducir desde el principio" (Play from beginning).

¡Genial! Nuestra animación funciona:

The animation

La animación

De un lado a otro

Godot tiene una característica adicional aquí. Como se ha dicho antes, Godot siempre calcula los fotogramas entre dos fotogramas clave. En un bucle, el primer fotograma clave es también el último fotograma clave, si no se especifica ningún fotograma clave al final.

Animation loop

Bucle de animación

Si ahora ajustas la duración de la animación a 4 segundos, la animación avanza y retrocede. Puedes cambiar este comportamiento si cambias el modo de bucle de la pista. Esto se explicará en el siguiente capítulo.

Ajustes de pista

Cada pista tiene un panel de ajustes al final, donde puede establecer el modo de actualización, la interpolación de pista y el modo de bucle.

Track settings

Ajustes de pista

El modo de actualización de una pista le indica a Godot cuándo actualizar los valores de la propiedad. Este puede ser:

  • Continuo: Actualiza la propiedad en cada frame
  • Discreto: Sólo se actualiza la propiedad en fotogramas clave
  • Trigger: Sólo se actualiza la propiedad en fotogramas clave o triggers
  • Capture: The current value of a property is remembered, and it will blend with the first animation key found
Track mode

Modo de pista

En animaciones normales, normalmente se utiliza "Continuo". Los otros tipos se utilizan para escribir animaciones complejas.

La interpolación le dice a Godot cómo calcular los valores de los fotogramas entre los fotogramas clave. Estos modos de interpolación son compatibles:

  • Nearest: Se establece el valor de fotograma clave más cercano
  • Lineal: Se establece el valor basado en un cálculo de función lineal entre los dos fotogramas clave
  • Cúbica: Se establece el valor basado en el cálculo de una función cúbica entre los dos fotogramas clave
Track interpolation

Interpolación de pista

La interpolación cúbica conduce a un movimiento más natural, donde la animación es más lenta en un fotograma clave y más rápida entre fotogramas clave. Normalmente se utiliza para la animación de personajes. La interpolación lineal crea más bien un movimiento robótico.

Godot admite dos modos de bucle, que afectan a la animación si está configurada para bucle:

Loop modes

Modos de bucle

  • Clamp loop interpolation: Cuando se selecciona esta opción, la animación se detiene después del último fotograma clave de esta pista. Cuando se alcanza de nuevo el primer fotograma clave, la animación se restablece a sus valores.
  • Wrap loop interpolation: Cuando se selecciona esta opción, Godot calcula la animación después del último fotograma clave para alcanzar de nuevo los valores del primer fotograma clave.

Keyframes for other properties

Godot doesn't restrict you to only edit transform properties. Every property can be used as a track where you can set keyframes.

Si seleccionas tu sprite mientras el panel de animación está visible, obtendrás un pequeño botón de fotograma clave para todas las propiedades del sprite. Haz clic en este botón y Godot añade automáticamente una pista y un fotograma clave a la animación actual.

Keyframes for other properties

Keyframes for other properties

Edit keyframes

Para un uso avanzado y para editar el fotograma clave en detalle, puedes hacer clic en estos para abrir el editor de fotogramas clave en el inspector. Puedes usar esto para editar directamente sus valores.

Keyframe editor editing a key

Editor de fotogramas clave editando una clave

Additionally, you can also edit the easing value for this keyframe by clicking and dragging the easing setting. This tells Godot, how to change the property values when it reaches this keyframe.

You usually tweak your animations this way, when the movement doesn't "look right".

Advanced: Call Method tracks

Godot's animation engine doesn't stop here. If you're already comfortable with Godot's scripting language Bases de GDScript and Godot API you know that each node type is a class and has a bunch of callable methods.

For example, the AudioStreamPlayer node type has a method to play an audio stream.

¿No sería genial reproducir una secuencia en un fotograma clave específico de una animación? Aquí es donde "Pista de Llamada a Funciones" resulta útil. Estas pistas hacen referencia a un nodo de nuevo, esta vez sin referencia a una propiedad. En su lugar, un fotograma clave contiene el nombre y los argumentos de una función, que Godot debería llamar cuando llegue a este fotograma clave.

To demonstrate, we're going to use a call method track to play audio at a specific keyframe. Normally to play audio you should use an audio track, but for the sake of demonstrating methods we're going to do it this way.

Add a AudioStreamPlayer to the Scene Tree and setup a stream using an audio file you put in your project.

Click on "Add track" (Add track) on the animation panel's track controls.

Select "Add Call Method Track" from the list of possible track types.

Add Call Method Track

Añadir una Pista de Llamada a Función

Select the AudioStreamPlayer node in the selection window. Godot adds the track with the reference to the node.

Select AudioStreamPlayer

Select AudioStreamPlayer

Right click the timeline where Godot should play the sample and click the "Insert Key" option. This will bring up a list of methods that can be called for the AudioStreamPlayer node. Select the first one.

../../_images/animation_method_options.png

Cuando Godot alcanza el fotograma clave, llama a la función "play" del nodo AnimationPlayer y se reproduce la secuencia.

You can change its position by dragging it on the timeline, you can also click on the keyframe and use the keyframe settings in the inspector.

../../_images/animation_call_method_keyframe.png