Animaciones

Introducción

El sistema de animación de Godot es extremadamente poderoso y flexible.

Para empezar, usemos la escena del tutorial anterior (Pantalla de introducción). El objetivo es añadir una animación "fade-in" a la imagen de inicio. Aquí hay una copia por si acaso: robisplash.zip.

Agregar un reproductor de animaciones

Primero agregaremos un nodo AnimationPlayer a la escena, como hijo de "background" (el nodo raíz):

../../_images/robisplash_anim_inspector.png

Cuando se selecciona un nodo de este tipo, aparece el panel de edición de animación:

../../_images/robisplash_anim_editor.png

El editor de animaciones permanecerá visible hasta que se oculte manualmente.

Crear una animación

Es hora de crear una nueva animación! Presiona el botón de Animación y luego selecciona nuevo en el menú. Ponle un nombre a la animación "intro" cuando aparezca el diálogo.

../../_images/robisplash_anim_button.png ../../_images/robisplash_anim_new.png

Ahora que tenemos una animación, el editor de propiedades entra en modo "edición de animación". En este modo, aparece un icono con forma de llave junto a cada propiedad del editor de propiedades. En Godot cualquier propiedad de un objeto puede ser animada:

../../_images/robisplash_anim_property_keys.png

Editando la animación

El logo aparecerá desde la parte superior de la pantalla.

Con el panel del editor de animaciones abierto, selecciona el nodo "logo" y establece la propiedad "Rect / Position" en (118, -400) y pulsa el botón de la llave junto a la propiedad para agregar una clave:

../../_images/robisplash_anim_logo_inspector_key.png

Cuando el diálogo aparezca, confirme la creación de la nueva pista.

El fotograma clave sera agregado al editor de animaciones:

../../_images/robisplash_anim_editor_keyframe.png

Mueve el cursor del editor hacia adelante en la línea de tiempo haciendo clic aquí:

../../_images/robisplash_anim_editor_track_cursor.png

Cambia la posición del logo a (118, 0) y vuelve a añadir un fotograma clave. Con dos fotogramas clave se produce la animación.

../../_images/robisplash_anim_editor_keyframe_2.png

Presionando "Reproducir la animación seleccionada desde el principio" (or Mayúsculas + D en el teclado) en el panel de animaciones hará que el logo descienda.

../../_images/robisplash_anim_editor_play_start.png

Haz clic en el botón "Autoreproducir al Cargar" para que la animación se inicie automáticamente cuando se inicie la escena.

../../_images/robisplash_anim_editor_autoplay.png

Y finalmente, cuando ejecute la escena, la animación deberá verse así:

../../_images/out.gif