Bienvenido a un nuevo codelab de nuestro curso sobre desarrollo de aplicaciones XR, en esta ocasión vamos a aprender sobre el Componente Animator y la Ventana Animation. Recuerda que este es un complemento del videotutorial sobre el componente Animator y la ventana Animación. Esperamos que en este Codelab puedas aprender a animar tus GameObjects para agregar movimiento a tu aplicación XR.
Selecciona el elemento al que quieras agregar una animación luego ve a Window > Animation > Animation.
Se te abrirá la siguiente ventana.
Arrastra la pestaña Animation para que quede junto a Console, de esta manera podrás tener disponible esta ventana mientras realizas tus animaciones.
A continuación, da click en el botón Create y selecciona una ubicación para tus nuevas animaciones. Puedes crear una carpeta que se llame Animations, para guardarlas allí.
Ahora, verás el siguiente panel en la parte inferior de tu ventana de Unity.
La Ventana Animation tiene una serie de partes que te ayudará a ubicar los componentes y a trabajar con ellos. En la parte superior izquierda encuentras los botones de reproducción.
- Botón de grabación (Círculo Rojo) 🔴 : Permite iniciar y detener la grabación de una animación.
- Botón de Rewind (Retroceso) ⏮ : Lleva el cursor de reproducción al inicio de la animación.
- Botón Previous Keyframe I◀: Lleva al marcador anterior.
- Botón de Play (Reproducir) ▶ : Reproduce la animación desde la posición actual del cursor.
- Botón Next Keyframe ▶I : Lleva al siguiente marcador.
- Botón de Forward (Adelante) ⏭ : Lleva el cursor de reproducción al final de la animación.
La parte lateral derecha de la ventana es la línea de tiempo, muestra la duración de la animación, también, permite ver y editar los marcadores de animación.
En la parte izquierda, podrás ver las propiedades de la animación, allí podrás gestionar las propiedades que quieras agregar a tu GameObject, por ejemplo, rotación.
En la parte inferior derecha podrás cambiar para visualizar curvas control más preciso de la interpolación entre keyframes.
En el panel de la parte izquierda, puedes añadir las propiedades con las que quieras hacer la animación. Para ello, seleccionas Add Property y seleccionas la propiedad que prefieras de las disponibles. Por ejemplo, puedes animar tu GameObject con las propiedades de transformación, estas pueden ser de posición, escala o rotación. Una vez seleccionada una propiedad, puedes ver que en tu línea de tiempo sale un marcador 🔸, este ícono aparecerá cada que hay un cambio en tu animación, al inicio marcan el punto inicial de la animación.
Ejemplo Animación con Propiedad de Rotación
Para este ejemplo haremos que el árbol que tenemos seleccionado, se mueva de forma tal que parezca que es un movimiento causado por el viento. Para ello vamos a agregar la propiedad de rotación.
Luego, al desplegar la propiedad se verán las opciones de rotación para X Y Z y los marcadores de inicio y fin de la animación. Para crear el movimiento de balanceo del árbol hay que dar un poco más de tiempo entre el inicio y fin de la animación, de esta manera se verá el árbol impulsado por una suave brisa. Para ello, selecciona los últimos marcadores y los desplázalos unos segundos a la derecha. Cabe anotar que los marcadores de inicio y fin tienen la misma información de rotación, esto quedará así para que el árbol vuelva a su posición inicial.
Después, te ubicas en el medio de tus marcadores iniciales y finales y cambias la rotación en eje X por 5°, en este caso -85°.
Ahora, podrás ver tu animación en acción al dar play en el panel izquierdo o dando click sobre la barra espaciadora de tu teclado.
Nota: Esta animación se verá reflejada desde el inicio de tu aplicación, es decir está quedaría activada por defecto.
Grabar Animación
Otra manera de hacer una animación, sin cambiar cada uno de los valores directamente, es grabándola. Esto lo puedes hacer en el botón rojo en el panel de la parte izquierda de la Ventana Animation.
En esta ocasión añadiremos una bellota al árbol para que así podamos hacer que esta se mueva cada vez que el árbol se balancea. Para ello añade un GameObject de bellota a tu árbol, esto se vería de la siguiente manera en la ventana de jerarquía.
En este caso, dejando la bellota como hija del árbol, lograrás que el árbol se balancee junto a la bellota. Luego, añade una nueva propiedad, esta vez selecciona el GameObject bellota, luego la propiedad de Position de Transform.
Una vez añadida, daremos inicio a la grabación seleccionando el botón rojo.
En play mode la animación se vería así
El Animator Controller es un componente que te va a ayudar a agregarle la lógica a tus animaciones. En el caso del árbol que previamente estábamos utilizando verás que ya tiene un componente Animator disponible. Para ello, con el árbol seleccionado, ve a la ventana inspector.
Aquí verás los siguientes elementos:
- Controller: El controlador de animación que se utilizará para animar este objeto. El controlador define las animaciones y la lógica de transición entre ellas.
- Avatar: Es una representación de un personaje que puede ser animado.
- Apply Root Motion: El movimiento raíz se refiere a la traslación y rotación del personaje en el mundo basado en la animación.
- Update Mode: Define cómo y cuándo se actualizarán las animaciones.
- Culling Mode: Este modo controla cómo se gestiona la animación cuando el objeto no está visible. En Always Animate las animaciones siempre se reproducen, independientemente de si el objeto es visible o no.
Para visualizar el componente del Animator debes ir a Window > Animation > Animator
Luego, podrás ver la ventana Animator donde pondrás la lógica y transiciones de tus animaciones.
En la parte izquierda encontrarás dos pestañas, la primera Layers permite gestionar y organizar diferentes capas de animación, cada capa puede tener su propia lógica de animación y se puede combinar con otras capas. Por su parte Parameters define los parámetros que pueden ser utilizados para controlar las transiciones entre los distintos estados de animación. Los tipos de parámetros incluyen floats, ints, bools y triggers.
Por su parte, a la izquierda de la ventana podrás ver los estados de la animación, en este caso hay uno de entrada (Entry) el punto de entrada de la animación, tu animación (My Animation) que corresponde a qué animación se reproduce cuando el Animator entra en este estado y cualquier estado (Any State), este es un estado especial que puede realizar transiciones a cualquier otro estado en cualquier momento, es útil para animaciones que deben interrumpir otras animaciones en curso.
Para complementar la animación puedes utilizar una de las animaciones que aprendiste en el video para que tu árbol crezca y luego tenga el movimiento de balanceo. Para ello, arrastra la animación Crecer a la ventana animator.
Luego sobre crecer da click derecho y selecciona Set as Layer Default State
Luego, da nuevamente click derecho sobre Crecer y selecciona Make transition, une esta animación con My Animation.
Si seleccionas la flecha de transición, puedes ver una previsualización de tu animación.
Así como realizaste esta animación puedes crear muchas más, para ello, es importante nombrarlas de acuerdo a los acciones que realizan. Entonces, vamos a modificar el nombre de la animación de My Animation a Balanceo, de esta manera podrás encontrarla más fácil en tu carpeta Animations. Dirígete, a la ventana project a Assets > Animations, allí, sobre My Animation, da click derecho > Rename.
Adicionalmente, en el Animator, también debes cambiar el nombre para que la puedas referenciar mejor. Para ello, con la animación My Animation seleccionada en la ventana animator, dirígete a la ventana del inspector, allí verás la animación Balanceo referenciada y el nombre My Animation en la parte superior, es este el que vas a modificar.
Ahora, te debería quedar de la siguiente manera.
Puedes agregar parámetros para que tus animaciones se activen dependiendo de alguna condición. Esto se realiza con código de C#, más adelante en otro codelab te contaremos como hacerlo. Por ahora, ¡Ya tienes tu árbol animado!
¡Felicidades! Has completado el codelab sobre la Ventana Animation y el Componente Animator. Ahora sabes cómo crear animaciones para tus GameObjects. Esperamos que esta guía te haya sido útil. Te invitamos a seguir explorando y experimentando con Unity.