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. (Mayúsculas-D)» 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