En el tutorial anterior cubrimos Animación de sprites, aunque para ser honesto, se trataba más de crear sprites listos para la animación. La forma real en que realizamos la animación no fue la ideal. Afortunadamente, estamos a punto de cubrir una forma que es muy ideal… ¡y capaz de mucho más que solo animar sprites!
Como siempre, hay un video HD de este tutorial disponible aquí o incrustado debajo. Es importante haber seguido las tutorial anteriorya que construiremos directamente sobre él.
Fotogramas clave explicados
Antes de profundizar en este tutorial, creo que es bastante importante cubrir un concepto clave en la animación, los fotogramas clave. Esencialmente, usted anima configurando una cantidad de cuadros «clave» en la línea de tiempo de las animaciones, luego deja que la computadora se encargue del resto. Puede establecer un fotograma clave en casi cualquier propiedad disponible en Godot, como veremos pronto. Por ejemplo, puede crear una clave en el valor de posición de un sprite. Luego avance la línea de tiempo, establezca otra clave en una posición diferente. Luego, la computadora interpolará la posición en el tiempo entre esas dos teclas. Esta interpolación entre fotogramas clave a menudo se denomina «interpolación» como «intermedio». No se preocupe, tendrá mucho más sentido cuando entremos en breve.
AnimaciónJugador
En el tutorial anterior, creamos una animación simple usando código para incrementar el cuadro actual a una velocidad de reproducción fija. Ahora vamos a lograr lo mismo usando el sistema de animación incorporado en Godot.
Comience abriendo el proyecto anterior y elimine el código de nuestro AnimatedSprite. Ahora agregue un nodo AnimationPlayer debajo de la raíz de su escena, así:
Con AnimationPlayer seleccionado, notará un nuevo editor en la parte inferior de la ventana 2D:
Este es su control de línea de tiempo de animación. Vamos a crear una nueva animación llamada «walkcycle»
Haga clic en el icono Nueva animación
Asigne un nombre a su animación y haga clic en Aceptar
Haga clic en el icono Editar
Esto ampliará aún más las opciones de animación.
Primero establezcamos la duración de nuestra animación en 2 segundos:
Luego puede ajustar la resolución de la línea de tiempo de la animación usando el control deslizante Zoom:
Aquí hemos ampliado ligeramente para mostrar poco más de 2 segundos:
Ahora que estamos en modo de edición con nuestro AnimationPlayer seleccionado, en la vista 2D, notará que hay nuevas opciones disponibles en la parte superior
Esta es una forma rápida de establecer claves para la información de posicionamiento de un nodo. Puede activar o desactivar si la clave almacenará datos de ubicación, rotación y/o escala. Para establecer una clave, presione el icono de clave. La primera vez que presione el ícono de la llave, se le preguntará si desea crear una nueva pista de animación.
Seleccione su sprite, asegúrese de que la línea de tiempo esté en 0 y cree una clave. Avance la línea de tiempo a 2 segundos, luego mueva el sprite ligeramente hacia la derecha, luego presione el ícono de la llave nuevamente para crear otro cuadro clave.
Presione el icono de reproducción en AnimationPlayer para ver la animación que acaba de crear:
Bueno, eso es ciertamente movimiento, pero bastante basura en lo que respecta a las animaciones, ¿eh? ¿Qué tal si agregamos algo de animación de cuadro a nuestra mezcla? Aquí es donde empiezas a ver el poder de la animación en Godot.
Con AnimationPlayer seleccionado, retroceda la línea de tiempo a cero, asegúrese de seleccionar su AnimatedSprite, luego en el panel Detalles notará que todas las propiedades tienen una pequeña clave al lado:
Esto se debe a que puedes crear fotogramas clave de casi cualquier valor en Godot. Ahora vamos a hacerlo con el valor de Marco. Este es el valor que aumentamos programáticamente para crear nuestra animación antes. Ahora lo haremos usando fotogramas clave. Con la línea de tiempo en 0, configure el Marco en 0 y luego haga clic en el ícono de Clave a su derecha. Haz clic en Crear cuando te pregunte si deseas crear una nueva pista. Luego mueva la línea de tiempo hasta el final, aumente el cuadro hasta el último cuadro (21 en mi caso), luego haga clic en la tecla nuevamente. Esto creará una nueva pista de animación:
Puede ver los diferentes nombres de las pistas a la izquierda. Los puntos azules representan cada fotograma clave de la animación. Hay un cambio final que tenemos que hacer. Despliegue el ícono a la derecha de la pista de animación y cambie el tipo a Continuo, así:
Ahora, cuando presione reproducir, debería ver:
Reproducción de su animación
Si bien su animación aparece correctamente si presiona Reproducir en la interfaz de AnimationPlayer, si presiona Reproducir en su juego, no sucede nada. ¿Por qué es esto?
En pocas palabras, debe comenzar su animación. Hay dos enfoques para iniciar una animación.
Reproducir animación automáticamente
Puede configurar la animación para que se reproduzca automáticamente. Esto significa que cuando se crea el reproductor de animación, se iniciará automáticamente la animación seleccionada. Puede alternar si una animación se reproducirá automáticamente usando este icono en los controles del reproductor de animación.
Reproducir una animación usando código
Por supuesto, AnimationPlayer también tiene una interfaz programática. El siguiente código se puede usar desde la raíz de la escena para reproducir una animación:
extends Node
func _ready():
get_node("AnimationPlayer").play("walkcycle")
Scripting del AnimationPlayer
Digamos que desea agregar un poco de lógica a su animación de fotogramas clave… con AnimationPlayer tiene un par de opciones que podemos explorar.
En primer lugar, están los eventos integrados en el propio AnimationPlayer:
Para acciones simples como ejecutar un script cuando una animación cambia o finaliza, el uso de conexiones AnimationPlayer debería ser más que suficiente.
¿Qué tal si quisieras ejecutar algún código como parte de tu secuencia de animación? Bueno, eso también es posible. En la ventana del editor de animación, haga clic en el botón Pistas para agregar una nueva pista de animación:
Seleccione Agregar pista de función de llamada:
Aparecerá otra pista en su animación. Haga clic en el + verde para agregar un nuevo fotograma clave.
Ahora haga clic con el botón izquierdo y arrastre la nueva clave aproximadamente a la mitad (1 segundo). Cambie al modo de edición haciendo clic con el bolígrafo sobre un icono de punto, luego haga clic en su fotograma clave para editarlo. En el campo de nombre ingrese hasta la mitad. Este es el nombre del método que vamos a llamar:
Agregue un método a su escena raíz llamado a mitad de camino:
extends Node
func _ready():
get_node("AnimationPlayer").play("walkcycle")
func halfway():
print("Halfway there")
Cuando se golpea el fotograma clave, se llamará al método intermedio. Agregar más llamadas a funciones es tan simple como agregar más teclas o pistas completas de Call Func. Como habrás notado en el video anterior, tienes la capacidad de pasar parámetros a la función llamada:
Finalmente, también puede acceder a animaciones, pistas e incluso teclas directamente usando código. El siguiente ejemplo cambia el destino de nuestra pista pos. Este script se adjuntó al objeto AnimationPlayer:
extends AnimationPlayer
func _ready():
var animation = self.get_animation("walkcycle")
animation.track_set_key_value(animation.find_track("AnimatedSprite:transform/pos"),1,Vector2(400,400))
Ahora, cuando ejecute el código, debería ver:
