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

Sinopsis

El nodo class_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 class_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

After creating one click on the AnimationPlayer node in the Node tab to open the Animation Panel at the bottom of the viewport.

The animation panel position

La posición del panel de animación

It consists of four parts:

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.

Para obtener más detalles, consulta la referencia del panel de animación a continuación.

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 (Método abreviado predeterminado: Mayúsculas+D) para ver los cambios al instante.

Tutorial: Crear una animación simple

Configuración de la escena

For this tutorial, we’ll going to create an AnimationPlayer node and a sprite node as its child.

Our scene setup

Nuestra configuración de la escena

The sprite holds an image texture and we animate that sprite to move between two points on the screen. For this tutorial use the default Godot Icon as the sprites” texture. As a starting point, move the sprite to a left position on the screen.

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.

Select the AnimationPlayer node, then click the «Animation» button in the animation editor. From the list select «New» (Add Animation) to add a new animation. And Enter a name for the animation in the dialog box.

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 para 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 nombre de la pista consiste en una ruta de nodo, seguida de dos puntos, seguidos de una referencia a su propiedad, que nos interesaría modificar.

En nuestro ejemplo, la ruta es AnimationPlayer/Sprite y la propiedad es position.

La ruta siempre comienza en el nodo padre AnimationPlayer (por lo que las rutas siempre tienen que incluir el propio nodo AnimationPlayer).

Nota

No te preocupes si cambias los nombres de los nodos del árbol de escenas para los que ya tienes pistas. Godot actualiza automáticamente las rutas en las pistas.

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 has an additional feature here. Like said before, Godot always calculates the frames between two keyframes. In a loop, the first keyframe is also the last keyframe, if no keyframe is specified at the end.

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

Each track has a settings panel at the end, where you can set the update mode, the track interpolation, and the loop mode.

Track settings

Ajustes de pista

The update mode of a track tells Godot when to update the property values. This can be:

  • 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

Track mode

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

For advanced use and to edit keyframes in detail, You can click on them to bring up the keyframe editor in the inspector. You can use this to directly edit its values.

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 /classes/index you know that each node type is a class and has a bunch of callable methods.

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

Wouldn’t it be great to use a method at a specific keyframe in an animation? This is where «Call Method Tracks» come in handy. These tracks reference a node again, this time without a reference to a property. Instead, a keyframe holds the name and arguments of a method, that Godot should call when it reaches this keyframe.

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 class_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

Add Call Method Track

Select the class_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

When Godot reaches the keyframe, Godot calls the class_AudioStreamPlayer node’s «play» function and the stream plays.

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