Presentando Timeline en Unity

[El tutorial tiene alrededor de 50 MB de imágenes, incluidos GIF animados]

Los desarrolladores a menudo usan escenas para contar parte de la trama del juego o para cautivar al jugador. Algunos juegos crean escenas animadas especialmente renderizadas con modelos muy detallados, mientras que otros usan modelos reales en el juego. Gracias al uso de modelos en el juego, puede ahorrar mucho dinero y tiempo, ya que no tiene que crear nuevos modelos, plataformas y animaciones exclusivamente para escenas. Pero incluso si usa modelos ya hechos, ¡esto no significa que deba sacrificar efectos especiales o drama! Unity tiene una poderosa herramienta para crear escenas emocionantes: ¡Unity Timeline!

En este tutorial, conocerá la línea de tiempo y aprenderá a crear escenas con animaciones y cambios de cámara.

Llegar al trabajo

Descargue el borrador del proyecto y el proyecto terminado desde aquí .

Abra el archivo del Proyecto de inicio y cargue la escena Principal. Ella será nuestra base. Hay un héroe en él, parado en una torre y mirando al mundo:


Con tu ayuda, él podrá saltar de la torre, darse la vuelta, ir al cofre del tesoro y abrirlo con una patada. Con estas animaciones, la cámara también cambiará su posición. Así es como se ve la escena terminada:

¿Qué es la línea de tiempo?

En este tutorial trabajaremos con Unity Timeline, pero ¿qué es Timeline? Timeline es un GameObject con un componente de línea de tiempo que se puede editar en la ventana Unity Timeline, que controla los fotogramas clave de la animación y los ciclos de vida de los objetos. Al crear una escena usando la Línea de tiempo de Unity, establecemos las claves de animación y determinamos cuándo deberían funcionar. En este tutorial también utilizaremos el AnimationController, que puede considerarse como un superconjunto de fotogramas clave de la animación.

Cuando un personaje realiza una animación, como caminar, cada vértice móvil individual de un objeto debe indicar su camino. En este tutorial no participaremos en la creación de un modelo y animaciones de aparejos; todo ya se ha hecho por nosotros. Pero es útil saber que cuando configura manualmente un fotograma clave para una animación o utiliza un AnimationController, son esencialmente lo mismo: la posición de los objetos en un momento dado. La línea de tiempo controla todos estos movimientos para crear la escena. Entenderá todo esto cuando comience a entender la Unidad de línea de tiempo.

Pero antes de sumergirse en el estudio, es útil dar una breve descripción de la ventana de la línea de tiempo. Mire la imagen y lea las descripciones debajo de los números:

1. Activo de línea de tiempo: esta es una pista que se asigna a un GameObject en la jerarquía. Almacena los fotogramas clave asociados con este GameObject, utilizados para realizar animaciones o para determinar si GameObject está activo.
2. GameObject asociado: este es el GameObject con el que está asociada la pista.
3. Marco: este es el marco de la línea de tiempo establecido actualmente. Cuando necesitamos cambiar las animaciones, establecemos los fotogramas clave en los cuadros inicial y final.
4. Grupo de pistas: aumentar la escala de la escena también aumenta el número de pistas. Puede organizar las pistas agrupándolas.
5. Botón Grabar: cuando este botón está activo, podemos cambiar el cuadro actual y establecer la posición y / o rotación del GameObject en la escena. Los cambios serán grabados.
6. Icono de curvas: al hacer clic en este icono, se abrirá la ventana Curvas, en la que puede ajustar los detalles de los fotogramas clave asociados de la animación para cambiarlos de la manera deseada.

No se preocupe si esta información le parece demasiado complicada hasta ahora; en el proceso de completar el tutorial, volveremos a ella. En esta etapa, es muy importante recordar dónde está la ventana de la línea de tiempo, y que cuando selecciona GameObject Timeline, puede acceder a la ventana de la línea de tiempo.

¡Luz, cámara, MOTOR!

Después de cargar la escena principal, haga clic en Reproducir. Deberías ver a un héroe parado en la cima de una torre:


Esta es la animación predeterminada especificada en el controlador de animación. En este tutorial utilizaremos animaciones creadas previamente, por lo que no debe preocuparse por la estructura interna de los modelos, animaciones o controladores. Pero si desea comprender este proceso, puede estudiar nuestro tutorial Introducción a la animación de Unity .

Crear un GameObject de tipo Timeline

El primer paso es crear una línea de tiempo de GameObject. Cree un GameObject vacío haciendo clic derecho (en una Mac con el Comando presionado) en la ventana Jerarquía y seleccionando Crear vacío . Entonces agregamos un GameObject a la escena y lo seleccionamos:


Sin eliminar la selección de GameObject, abra el menú Ventana y seleccione Línea de tiempo . Se abre la ventana Línea de tiempo. Haga clic en el botón Crear , se abre el cuadro de diálogo Guardar. Cambie el nombre del archivo a Línea de tiempo y haga clic en Guardar:


Cambie el nombre de GameObject a Timeline haciendo clic en él, presionando la tecla F2 e ingresando Timeline :


Creamos una línea de tiempo de GameObject que coordinará todas las animaciones y los cambios de cámara en la escena. Dentro del motor, Unity guardó un archivo de activos llamado Timeline.playable en el disco. En GameObject Timeline Unity agregó componentes jugables de Director y Animator .

El componente Director reproducible contiene un campo reproducible adjunto al activo de la línea de tiempo que acabamos de guardar. El componente Animator agregado por Unity en teoría debería permitirnos animar la línea de tiempo de GameObject, pero no haremos esto, por lo que simplemente puede ignorarlo.

Antes de continuar, quiero arrastrar la pestaña Línea de tiempo a la parte inferior de la pantalla. Esto nos permitirá abrir simultáneamente las ventanas Scene y Timeline:


Seleccione GameObject Timeline y regrese a la ventana Timeline. En este momento tenemos una pista de animación para GameObject Timeline. No lo necesitamos, por lo que puede seleccionarlo y presionar Eliminar para eliminar:

¡Animando el salto!

Ahora estamos listos para comenzar las animaciones. Expanda GameObject Hero para ver el modelo de GameObject. Seleccione GameObject Timeline . Arrastre el Modelo de GameObject a la ventana Línea de tiempo; esto abrirá el menú de la pista, así que seleccione Pista de animación . Repita este paso para GameObject Hero :

Nota: agregamos Hero y Model para usar correctamente el espacio local cero. GameObject Hero es un contenedor para el Modelo de GameObject, que le permite reproducir animaciones sin afectar la posición desde la que se juegan. Cuando necesitemos mover al héroe, animaremos GameObject Hero. Cuando un personaje necesita ser animado, lo que se puede hacer mientras se mueve, usaremos el modelo GameObject. Sin esta relación padre-hijo, las animaciones reproducidas por el objeto Modelo anularán incorrectamente los parámetros de movimiento del objeto Héroe si no lo configura como un hijo.

Grabar fotogramas clave

Dado que la pista de GameObject Hero representa la posición del héroe, debemos establecer su posición como el fotograma clave inicial.

Seleccione la pista de Héroe en la ventana Línea de tiempo y haga clic en el botón Grabar (círculo rojo) para comenzar a grabar. Seleccione GameObject Hero en la ventana Jerarquía y establezca su Posición X en -1 , e inmediatamente configure su Posición X en 0 .

Regrese a la ventana Línea de tiempo y presione el botón Grabar en la pista del Héroe para completar la grabación . Entonces agregamos un fotograma clave para la posición inicial del héroe:


En nuestro proyecto, el héroe ya está en la posición desde la que debería comenzar. Sin embargo, hasta que cambiemos la posición, no se registrará al grabar como fotograma clave. Por lo tanto, si alguna vez necesita establecer un fotograma clave al grabar para una posición que ya tiene un fotograma clave, simplemente muévalo y vuelva a registrarlo.

La forma más fácil de hacer esto es establecer la posición X del objeto en -1 en relación con su posición actual, y luego devolver el valor a su lugar. En este tutorial usaremos este truco varias veces.

Luego, necesitamos que el héroe espere 100 cuadros antes de saltar de la torre. Por el momento, hemos establecido solo la posición inicial del héroe, pero necesitamos darle al héroe la misma posición (es decir, en la parte superior de la torre) después de 100 fotogramas. De lo contrario, Unity comenzará inmediatamente a interpolar el movimiento.

Como antes, seleccione GameObject Timeline , pero esta vez debe hacer clic en el campo del marco en la parte superior de la ventana e ingresar "100" . Así que movemos el fotograma clave al cuadro 100.

Presiona el botón Grabar para la pista Hero. Seleccione GameObject Hero y en el campo Transformar de la ventana del Inspector, establezca su Posición X en -1, y luego regrese inmediatamente a 0 . Presione el botón Grabar nuevamente para detener la grabación.


Por lo tanto, hemos configurado el cuadro clave inicial de Hero y estamos listos para continuar trabajando con animaciones.

Agregar clips animados

Definición de datos de posición

Primero necesitamos establecer los datos de posición.

Haga clic en GameObject Timeline para seleccionarlo. En la ventana Línea de tiempo, agregue Animación a la pista Modelo haciendo clic derecho (en una Mac - haciendo clic en Comando) en la pista Modelo y seleccionando Agregar desde el clip de animación . Ahora seleccione la animación inactiva :


A continuación, animamos el salto del héroe desde la torre, pero primero tenemos que moverlo hacia arriba y sobre la barandilla, y luego hacia el suelo.

Para hacer esto, primero seleccione la ventana Línea de tiempo y luego vaya al cuadro 138 . Presiona el botón Grabar en la pista del Héroe. Ahora seleccione GameObject Hero . En el campo Transformar de la ventana del Inspector, configure la Posición Y en 3.934 y la Posición Z en 1.97 .

Regrese a la ventana Línea de tiempo y vaya al cuadro 176 . Selecciona GameObject Hero nuevamente y establece la posición Y en 0 y la posición Z en 5.159 . Finalice la grabación presionando el botón Grabar :


¡Guarde la escena y haga clic en Reproducir para ver el resultado de su trabajo!


Añadir animaciones

Establecemos estas posiciones, pero no las animaciones realizadas con ellas. Ahora lo haremos.

Con la ventana Línea de tiempo seleccionada, haga clic con el botón derecho (en una Mac, mantenga presionado Comando) en la pista Modelo y haga clic en Agregar desde el clip de animación , y luego seleccione Saltar . Entonces agrega la animación Jump inmediatamente después de la animación Idle.

Arrastre el lado derecho de la animación Jump para que quede en el cuadro 176 . Ahora agregaremos otro Clip de animación , pero esta vez agregaremos la animación Land (no necesita cambiar su longitud, solo agréguela):


Guarda la escena, haz clic en Reproducir y mira el resultado.

Agregar cámaras

Es un poco difícil seguir la acción después del salto del héroe desde la torre, por lo que es el momento adecuado para trabajar con cámaras.

En la ventana Jerarquía, cambie el nombre de MainCamera a Camera1 . Seleccione GameObject Timeline . Arrastre Camera1 a la ventana de la línea de tiempo, esto abrirá el menú de selección de pista; seleccione Activation Track . Arrastre el carril Activo de la Cámara1 para que termine en el cuadro 157 :

Sugerencia: el marcador de fotograma actual se puede establecer utilizando el campo del contador de fotogramas en el Inspector de línea de tiempo. Si establece el marcador en el cuadro al que desea arrastrar la pista, la pista se adjuntará al marcador de cuadro.

La actividad o inactividad del GameObject durante una escena está controlada por la pista de activación . Nuestra cámara principal ahora se apagará después del cuadro 157. Haga clic en Reproducir y mire el resultado:


Ahora agregaremos otra cámara, solo mirará hacia abajo para mostrar al héroe después de saltar sobre la barandilla de la torre.

En la ventana Jerarquía, seleccione Cámara1 y duplíquela presionando Control-D (Comando-D en Mac). Cambie el nombre del duplicado a Camera2 y desactívelo .

En este tutorial, usamos dos cámaras más, así que creémoslas ahora repitiendo el mismo algoritmo; cámbieles el nombre a Camera3 y Camera4 y desconéctelos. Después de eso, todos los objetos del juego de la Cámara, excepto la Cámara1, deberían apagarse. Así es como debería verse la jerarquía:


Ahora colocaremos Camera2. Seleccione Camera2 y en el campo Transformar de la ventana del Inspector, configure la Posición Y en 10.75 y la Posición Z en 2.84 . Establezca la rotación X en 79.5 :


En cuanto a la Cámara1, seleccione la ventana Línea de tiempo y arrastre el objeto Cámara2 a ella desde la Jerarquía; el menú de selección de pista aparece nuevamente, así que seleccione Activación de pista . Arrastre la barra Activa para que se inicie inmediatamente después de que se complete la activación de la Cámara1 (cuadro 158). Arrastre el lado derecho de la pista activa para Camera2 para que termine en el cuadro 216 .

Guarde la escena, haga clic en Reproducir y vea el cambio de cámaras en su escena.

¡Es hora de llegar al tesoro!

Miramos el cofre

Ahora que nuestro héroe ha aterrizado en el suelo, debe dirigirse al cofre del tesoro y comenzar a caminar.

Seleccione GameObject Timeline y establezca el marco 202 . Presione el botón Grabar en la pista del Héroe para comenzar a grabar.

Seleccione GameObject Hero y en el campo Transformar de la ventana del Inspector, establezca Rotación Y en -1, y luego cambie inmediatamente el valor a 0 para establecer el fotograma clave inicial de la rotación de GameObject Hero.

Cuando termine, seleccione GameObject Timeline nuevamente y configure el marco 216 . Seleccione GameObject Hero nuevamente y, en el campo Transformar de la ventana del Inspector, configure Rotación Y en -90 .

Nota: los fotogramas clave de la posición y la rotación se establecen independientemente uno del otro. Anteriormente, cuando establecíamos la posición inicial del héroe, el fotograma clave para el turno no se guardaba, por lo que debemos establecer un nuevo marco antes de pasar al giro deseado en la dirección del tesoro.

Además, el héroe debería estar en un estado de espera en este momento, así que agregue la animación inactiva a la pista de animación del modelo y haga que dure hasta el cuadro 216 :


Entonces, nuestro héroe ha aterrizado y está listo para buscar tesoros. ¡Es hora de ir hacia él y abrir el cofre!

Sugerencia: si la pista de la línea de tiempo se vuelve demasiado grande, puede girar la rueda del mouse para cambiar su escala. Para moverse hacia la izquierda o hacia la derecha, mantenga presionado el botón central del mouse mientras lo mueve hacia la izquierda o hacia la derecha.

Nos acercamos al tesoro.

Seleccione GameObject Timeline y establezca el marco 216 . Presione el botón Grabar en la pista Hero para comenzar a grabar.

Seleccione GameObject Hero y establezca la Posición X en -1 en el campo Transformar de la ventana del Inspector, y luego vuelva a 0 para establecer el fotograma clave para la posición inicial. A continuación, en la línea de tiempo, seleccione el cuadro 361 en la pista de héroe.

Regrese a GameObject Hero y establezca la Posición X en -6 en el campo Transformar de la ventana del Inspector. Regrese a la pista Hero y finalice la grabación.

Finalmente, dele al objeto Modelo una animación de Paseo , siguiendo los mismos pasos que antes, y luego estírelo hasta el cuadro 361 :


Puede notar que el héroe parece pasar por el tesoro, pero de hecho es un problema con la vista previa de la línea de tiempo, porque, como veremos pronto, el héroe va directamente al cofre y se detiene.

Para evitar que Camera2 siga todo el camino del héroe, ahora podemos usar Camera3 para disparar desde la espalda del héroe.

Para hacer esto, en el menú principal de la ventana Jerarquía, seleccione y arrastre Camera3 al modelo GameObject, que se encuentra dentro del GameObject Hero, para que la cámara sea su hija.

Establezca la posición de la cámara3 (X: 0, Y: 2.06, Z: -2.5) . Dale un turno (X: 0, Y: 0, Z: 0) . La jerarquía debería verse así:


Debido al hecho de que Camera3 ahora es un hijo del Modelo GameObject, repetirá todos los movimientos del Modelo GameObject, mirándolo desde atrás. Sin embargo, Camera3 todavía necesita una pista de activación para que se active en el momento adecuado.

Arrastre GameObject Camera3 a Timeline y seleccione Activation Track , como hicimos con Camera1 y Camera2. Establezca el cuadro inicial de Camera3 en el cuadro final de Camera2, y establezca el cuadro final en Camera3 en 361 :


Ahora guarde la escena, haga clic en Reproducir y vea cómo resulta todo:


¡Ya hemos hecho casi todo! Ahora el héroe solo necesita abrir el cofre ... ¡por supuesto, patearlo!

Abre el cofre

Para la vista final, usamos Camera4, configurándolo como lo hicimos con Camera1 y Camera2.

Arrastre Camera4 a la línea de tiempo y agregue la pista de activación . Establezca el cuadro inicial de Camera4 al final de la fase de actividad de Camera3 y extiéndalo al cuadro 555 . Debería verse así:


Agrega una animación de Kick . Haga clic derecho (en una Mac, mantenga presionado Comando) en la pista Modelo. Seleccione Agregar animación del clip y luego seleccione Patada . No cambies la duración. La pista Modelo ahora debería verse así:


Necesitamos abrir el cofre, así que ahora agregaremos una animación de su portada. Configurar esta animación es similar a lo que hicimos antes.

Expanda GameObject ChestBottom en la ventana Jerarquía. Arrastre GameObject ChestLid a la línea de tiempo y seleccione Pista de animación . En la línea de tiempo, establezca el marco 389 . Ahora seleccione la pista ChestLid . Haga clic en el botón Grabar .

Ahora que la grabación está en progreso , seleccione GameObject ChestLid en la ventana Jerarquía y establezca la Posición X en -1 , y luego regrese a 0 para establecer la posición inicial. En la ventana Línea de tiempo, establezca el marco 555 . Finalmente, en el campo Transformar de la ventana del Inspector, establezca Y Position ChestLid en 6 . Presione el botón Grabar en la pista nuevamente para finalizar la grabación.


Entonces animamos la tapa del cofre para que vuele a través de la pared.

Ahora debe colocar Camera4 de modo que quede por encima del cofre cuando la tapa se despegue. Repetiremos los mismos pasos nuevamente que para la cámara anterior, por lo que no describiré cada acción en detalle.

Dele una posición al objeto Camera4 (X: -9.00, Y: 5.4, Z: 5.18) . Configure Camera4 para rotar (X: 90, Y: 0, Z: 0) .


Al igual que con todas las demás cámaras agregadas, agregar una animación hace que la escena sea más interesante, por lo que debe hacer que la cámara se acerque después de abrir el cofre.

Seleccione la ventana de la línea de tiempo . Arrastre GameObject Camera4 hacia él y cree una pista de animación . Establecer la pista 389 a la pista. Haga clic en la pista Camera4 y luego haga clic en el botón Grabar . Seleccione GameObject Camera4 . En el campo Transformar de la ventana del Inspector, establezca la Posición X en 0 y luego -9 nuevamente .

En la ventana Línea de tiempo , arrastre la pista de animación al cuadro 555 .

Finalmente configure la Posición Y de Camera4 en 3.74 :


La escena finalmente ha terminado. ¡Haga clic en Jugar y califíquelo!

Gestión con complejidad: agrupación de pistas

Fue una breve animación de todo con un par de "actores", por lo que fue bastante fácil para nosotros rastrear objetos y pistas del juego. Pero cuando se crean escenas más complejas con muchas partes móviles y actores, se vuelve muy difícil de controlar. Por eso es muy necesario ordenar. Aunque la escena está lista, dediquemos unos minutos a organizarla; en el futuro aún se lo agradecerá.

Una forma de organizar su trabajo es agrupando pistas. Primero, haga clic derecho debajo de las pistas en la ventana Línea de tiempo y seleccione Grupo de pistas . Haga clic en Track Group y en el Inspector cambie su nombre a Activaciones :


Repita este proceso y cree un Grupo de seguimiento llamado Animaciones . La línea de tiempo ahora debería verse así:


Ahora arrastre todas las pistas con secciones activas al grupo Activaciones , y el resto al grupo Animaciones . Ahora puede abrir y cerrar cada grupo para la conveniencia de trabajar con ellos:


No olvides guardar tu trabajo. Siéntese en la silla de su director y felicítese: ha terminado su primera línea de tiempo.

A donde ir ahora

Si se perdió algunas partes del tutorial, no olvide que puede descargar la pieza de trabajo y el proyecto terminado desde aquí .

Trabajamos duro y creamos una escena usando animaciones de modelos, cambiando cámaras y actualizando los ciclos de vida de los objetos, pero aquí se puede aprender mucho más. Uno de los aspectos más importantes relacionados con Timeline es la creación de sus propios scripts en los que puede asociar animaciones con código que se puede ejecutar con ellos. Obtenga más información sobre los guiones aquí . Si ya te has sentido cómodo, intenta agregar un guión a la escena después de abrir el cofre del tesoro.

Si está interesado en aprender más sobre animaciones en Unity en general, consulte nuestro excelente tutorial Introducción a la animación de Unity.

Para obtener más información sobre la creación de modelos 3D y la ventana Animación, consulte la serie detallada de tutoriales para desarrolladores de Unity que se presentan aquí .

Y lo último: si está interesado en crear juegos, puede comprar nuestro libro Unity Games By Tutorial . Habla sobre la creación de cuatro tipos de juegos desde cero con una descripción detallada de cada etapa del proceso.