Tutorial de Unity 3D

Tema 11
Introduccin a la Animacin con Unity3D

Introduccin a la animacin con Unity3D

1. Objetivos
En este tema comenzaremos a trabajar en los cambios producidos en los objetos de nuestro
videojuego durante su ejecucin.
Inicialmente realizaremos cambios sencillos en su posicin y rotacin, pero ms adelante veremos cmo es
posible animar cualquier parmetro, como por ejemplo la intensidad o el color de una fuente de luz, o incluso
un personaje para que realice las acciones que queramos.
Recuerda que como siempre, para facilitarte las cosas, siempre utilizaremos un guin (-) para prefijar todas
las acciones que requieran tu intervencin directa con el programa.
2. La Vista de Animacin
El proceso para comenzar a animar un objeto es siempre igual, pero es importante que pongas
especial cuidado en seguir correctamente los pasos que explicaremos a continuacin para evitar problemas.
Va a ser muy frecuente durante tus primeras pruebas realizar mal algn paso y tener que rehacer la
animacin desde el principio.
En primer lugar debemos seleccionar el objeto que queremos animar. En nuestro caso vamos a trabajar con
un simple cubo en una escena nueva, de forma que no tengamos ningn otro elemento que pueda
molestarnos.
Ve a las pestaas superiores y selecciona File New Scene para crear una nueva escena. Puedes
aprovechar directamente para guardarla seleccionando File Save Scene y guardndola en la
carpeta Escenas con el nombre Prueba Animacin.
Crea un cubo seleccionando en las pestaas superiores GameObject Create Other Cube. En la
Vista de Jerarqua, haz doble clic en su nombre para centrar la Vista de Escena en l.
En la Vista de Inspector, arriba del todo, introduce numricamente un 0 en su posicin X, un 5 en su
posicin Y y finalmente un 10 en su posicin Z.

Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 1

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

En la Vista de Jerarqua, selecciona la cmara principal, y haz que mire directamente al cubo.
Puedes hacerlo fcilmente seleccionando GameObject Align With View.
Podrs comprobar que tanto la Vista de Escena como la Vista de Juego muestran el cubo desde el mismo
ngulo.
Aade una luz direccional a la escena para poder ver todo correctamente. En las pestaas
superiores haz clic en GameObject Create Other Directional Light. El resultado final debera ser
similar al de la siguiente captura.

Asegrate de tener seleccionado, bien sea en la Vista de Escena o en la de Jerarqua, el cubo. A

continuacin ve a las pestaas superiores y haz clic en Window Animation para abrir la Vista de
Animacin.

Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 2

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

En el lateral izquierdo, la Vista de Animacin muestra su nombre y un breve resumen de todos los
parmetros de nuestro cubo de forma muy similar a cmo pueden verse en la Vista de Inspector. Evita hacer
clic fuera de la Vista de Animacin y seleccionar otro objeto durante todo el proceso, ya que en ese caso el
contenido de la ventana cambiar y es bastante probable que perdamos parte del trabajo realizado.
Es momento de crear un nuevo clip de animacin para nuestro cubo.
En primer lugar, en la Vista de Proyecto, crea una nueva carpeta llama Animaciones haciendo clic
derecho en una zona vaca y seleccionando Create Folder.
Haz clic derecho en la carpeta Animaciones de la Vista de Proyecto y crea una carpeta ms llamada
Pruebas.
Vuelve a la Vista de Animacin (Puedes volver a sacarla haciendo clic en Window Animation si la
habas cerrado) y haz clic en el botn que aparece en la siguiente imagen, selecciona la opcin
Create New Clip para crear un nuevo clip de animacin.

Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 3

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

En la ventana de navegador que se abrir, accede a la carpeta Animaciones que acabas de crear,
dentro de ella a Pruebas y guarda ah el clip de animacin con nombre Prueba Mover.
Tras haber creado el nuevo clip la Vista de Animacin debera verse as:

El siguiente paso es determinar qu valores del cubo son los que queremos animar. Si observas en la
columna de la izquierda de la Vista de Animacin observars que en el men desplegable Transform podemos
ver la posicin (Position), rotacin (Rotation) y escala (Scale) del objeto.
En nuestro caso vamos a realizar una animacin muy sencilla en la que el cubo simplemente se mueva, por lo
que vamos a seleccionar simplemente los valores de posicin.

Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 4

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

Haz clic en la pestaa a la derecha de las posiciones (Position) en la columna izquierda de la Vista de
Animacin y selecciona la opcin de aadir curvas (Add Curves) tal y como puede verse en la
siguiente captura.

Las posiciones tienen valores en las 3 coordenadas X, Y, Z, comprobars que al aadir curvas se han aadido
automticamente las 3 coordenadas de posicin, cada una de ellas con un color.

A continuacin vamos a ver cmo funciona el grfico que podemos observar en la parte derecha de la Vista
de Animacin. Bsicamente se trata de una grfica en la que podemos controlar la posicin de nuestro
objeto (De arriba a abajo) a lo largo del tiempo (De izquierda a derecha).
Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 5

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

Con el ratn dentro de la grfica de la Vista de Animacin, puedes utilizas la rueda del ratn para hacer
zoom hacia dentro o hacia afuera. Si adems pulsas la tecla Ctrl, el zoom slo afectar a la regla del tiempo.
Es importante que sepas que la unidad de medida mnima del tiempo es un frame, esto es, el tiempo que
tarda el videojuego en redibujarse, que por defecto es 60 veces por segundo. De ah que observars que el
tiempo pasa de 0:30 a 1:00, el 0:30 marca 30 frames (Medio segundo) mientras que el 1:00 indica un
segundo.
Pulsa la tecla Ctrl junto con la rueda del ratn dentro de la grfica para tener visible unos 5
segundos (5:00) de tiempo. Es importante que no confundas los frames con los segundos, en la regla
horizontal superior no deberas ver 0:05 sino 5:00.
La ventana de animacin debera verse as ahora:

A continuacin vamos a crear los puntos clave (Keyframe) de la animacin. Los puntos clave se sitan a lo
largo del tiempo y en cada uno de ellos se determina un estado en el objeto a animar. El clip de animacin se
encargar de calcular automticamente el camino necesario para que el objeto pase por todos los puntos
clave suavemente.
La regla de puntos clave est debajo de la regla de tiempo, justo encima de la grfica. Ten cuidado porque
tiene otra regla superior que se ocupa de los eventos de animacin que trataremos ms adelante. La
reconocers porque al hacer clic derecho sobre ella te permite aadir Keyframes as:

Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 6

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

En la regla de puntos clave, en el segundo 5:00 aproximadamente, haz clic derecho y selecciona la
opcin Add Keyframe para aadir un nuevo punto clave al clip de animacin.
Los rombos de colores que representan las coordenadas de posicin ahora tambin aparecern bajo el
nuevo punto clave, creando una lnea que los une con los del instante 0:00 as:

Llegados a este punto slo necesitaramos indicar, para el nuevo punto clave, los nuevos valores de posicin
que queremos que tome nuestro cubo.
sto puede hacerse de varias formas distintas, como por ejemplo introduciendo los valores numricamente
para cada Keyframe en la Vista de Animacin o simplemente arrastrando los rombos de cada Keyframe para
que cambien de valor. Nosotros en cambio lo haremos de forma visual desde la Vista de Escena, ya que
resulta mucho ms sencillo para principiantes.
Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 7

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

3. Animar de forma grfica

Asegrate de tener el Layout en modo 2 by 3 y tener visible la Vista de Animacin.
El Keyframe generado automticamente en el instante 0:00 generalmente no requerir ningn cambio, ya
que por defecto guarda los valores iniciales del objeto, vamos a trabajar directamente con el segundo
Keyframe.
En la regla de Keyframes de la Ventana de Animacin, selecciona el segundo Keyframe haciendo clic
sobre l.
En la Vista de Escena y sin cerrar la Vista de Animacin, utiliza la herramienta de posicionar
(Botones arriba a la izquierda o atajo de teclado W) para mover ligeramente el cubo hacia arriba (Eje
Y). Puedes moverlo metro por metro si mantienes pulsado Ctrl, con un par de metros sera
suficiente.
Si has seguido los pasos correctamente, la Vista de Animacin mostrar los cambios en el segundo
Keyframe, y adems las lneas de colores se vern modificadas para unir los nuevos valores de posicin tal y
como se muestra en la siguiente captura:

Vamos a previsualizar el resultado de nuestra animacin. Observa que la Vista de Animacin tiene su propio
botn Play en su parte superior izquierda.
Haz clic en el botn Play de la Vista de Animacin y observa el cubo en la Vista de Escena.
Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 8

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

Si la Vista de Escena muestra correctamente el movimiento del cubo, puedes cerrar la Vista de Animacin y
pulsar Play en Unity. La animacin se reproducir tambin en la Vista de Juego.
Observars que la animacin se realiza una nica vez y despus retorna a su posicin inicial como si nada
hubiese pasado. sto sucede porque el modo de animacin por defecto reproduce el clip una sla vez, pero
podemos alterar este comportamiento desde la Vista de Animacin.
4. Ciclos de Animacin
La Vista de Animacin tambin nos permite determinar si las animaciones se reproducen una sla
vez, si se repiten indefinidamente, si deben realizarse primero en un sentido y despus en el contrario, etc.
En la Vista de Jerarqua, selecciona el cubo y haz doble clic para centrarlo en la Vista de Escena.
Con el cubo an seleccionado, abre la Vista de Animacin haciendo clic en la pestaa
Window/Animation.
Vers que la Vista de Animacin conserva intacta la animacin que habamos establecido para el cubo. Fjate
en la parte inferior izquierda de la Vista de Animacin y observars un men desplegable en el que ahora
mismo figura seleccionado Default.
Si no est activado ya, activa el botn de grabacin en la Vista e Animacin, est arriba a la
izquierda y su icono es un crculo rojo. sto es necesario ya que vamos a hacer modificaciones.
Expande el men tal y como se ve en la siguiente captura.

Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 9

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

El modo bucle (Loop) permite que el clip de animacin se reproduzca una y otra vez continuamente mientras
el juego permanezca en ejecucin, mientras que el modo ida y vuelta (Ping Pong) lo hace de la misma manera
slo que una vez en un sentido y la siguiente en el sentido contrario.
Prueba los modos Loop y Ping Pong para que veas la diferencia.
Establece finalmente el modo Ping Pong y comprueba que, al pulsar Play en Unity, el cubo adems de
subir ahora baja.
5. Curvas de animacin
Una animacin de videojuego generalmente se compone de varios puntos clave. Vamos a seguir
mejorando nuestra animacin hasta darle un aspecto profesional.
Vuelve a poner el Layout en modo 2 by 3 y abre la Vista de Animacin haciendo clic en la pestaa
Window Animation.
En la Vista de Jerarqua, selecciona de nuevo el cubo, comprobars que en la Vista de Animacin el
clip de animacin sigue intacto.
En la Vista de Animacin, vuelve a pulsar el botn de grabacin (Icono redondo y rojo arriba a la
izquierda). Coloca el cursor en la grfica y utilizando la tecla Ctrl y la rueda del ratn deja visible
ms all del segundo 10:00.
En la barra de puntos clave de animacin (Keyframes), en el segundo 10:00, haz clic derecho y
selecciona la opcin Add Keyframe para aadir un nuevo punto clave.
Llegado este punto observars que el nuevo punto clave aadido conserva los mismo valores que el anterior,
esto suceder siempre que aadamos un nuevo punto clave.
Sin embargo, vers que adems la lnea de color verde que nos muestra la posicin en el eje Y
(Arriba/Abajo) a tomado ahora la forma de una curva para unir los 3 puntos clave de la manera ms suave
posible. El resultado de la ventana de animacin debera resultar muy similar al de la siguiente captura:

Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 10

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

Al aadir un nuevo punto clave, ste queda por defecto seleccionado, podemos estar seguros de ello debido
a la lnea vertical roja que lo atraviesa. Vamos a hacer que este nuevo punto clave devuelva el cubo a su
posicin inicial.
Sin cerrar la Vista de Animacin, vuelve a la Vista de Escena y utiliza el botn de posicionamiento
(Arriba a la izquierda o atajo de teclado W) para devolver el cubo a su posicin inicial. En principio
seran 2 metros hacia abajo as que puedes pulsar Ctrl mientras lo arrastras hacia abajo 2
movimientos en el eje Y.
La grfica de la posicin Y habr tomado finalmente el aspecto de una parbola:

Haz clic en el botn Play de la Vista de Animacin y comprueba como el cubo sigue subiendo y
bajando, slo que ahora en la parte superior realiza un movimiento mucho ms suave que antes.

Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 11

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

El movimiento se ha suavizado debido a que la grfica ahora forma una curva suave, en lugar de una recta
que cambia de direccin bruscamente al repetirse con modo Ping Pong.
Slo deberas notar un problema en sto, y es que al llegar abajo, el cubo sigue haciendo ese cambio brusco
de direccin. Si observas la Vista de Animacin, el punto en el que la grfica termina y vuelve a enlazar por el
otro extremo sigue formando un cambio brusco de direccin. Es lo que vamos a solucionar ahora mismo.
En la Vista de Animacin, dentro de la grfica, cada uno de los rombos sealan el valor de la magnitud que
representan y pueden ser arrastrados a mano alzada para modificar sus valores. Si lo compruebas, utiliza el
atajo de teclado Ctrl+Z para, como siempre, deshacer la accin.
Adems de poder modificar su valor, tambin es posible hacer clic derecho sobre ellos para acceder a un
men que, entre otras cosas, nos permite configurar cmo es la curva de animacin al llegar a ellos.
En la curva de animacin de la posicin Y (Curva verde), haz clic derecho en el rombo
correspondiente al Keyframe del momento 0:00, debera desplegarse un men como el siguiente:

El men anterior permite realizar diversas modificaciones en la grfica como generar escalones, realizar
rupturas bruscas en las curvas, aplanarlas, etc. En nuestro caso simplemente vamos a utilizar la opcin de
aplanado para evitar el cambio brusco que se produce al concatenarse la animacin en modo Ping Pong.
En el men de la captura anterior, selecciona la opcin de aplanado (Flat) y observa como el lateral
derecho de la curva de animacin se aplana suavizando en gran manera el cambio brusco.
Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 12

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

Repite la misma operacin en el rombo de la curva de posicin Y (La verde tambin), pero esta vez
en el ltimo Keyframe. La curva ahora mismo debera quedar completamente suavizada tal y como
se muestra en la siguiente captura.

Pulsa ahora el botn de Play en la Vista de Animacin y observa como el movimiento de subida y
bajada del cubo resulta totalmente suave y sin cambios bruscos.
6. Animaciones de cmara
Una utilidad muy interesante de la Vista de Animacin es crear animaciones de cmara que recorran
toda nuestra escena a modo de cinemtica. Para ello necesitaremos trabajar sobre una escena en la que
hayamos aadido elementos grficos como por ejemplo terreno, objetos 3D, luces, etc.
Para realizar la siguiente tarea, asegrate de que hay una cmara principal en la Vista de Jerarqua, y que
en la misma vista no hay ningn controlador de personaje, ya que ste tomara el control de la cmara y
generalmente tendra prioridad sobre la animacin que vamos a crear.
Sigue los mismos pasos del Apartado 2 de este mismo tema, pero esta vez sobre la cmara principal
(Main Camera) para crear un clic de animacin al que puedes poner como nombre Prueba Cmara.
En la Vista de Animacin, a la derecha, aade tambin las curvas de rotacin, ya que en principio la
cmara adems de moverse por la escena tambin rotar para seguir su camino.
Una vez hecho sto, la Vista de Animacin debera tener un aspecto similar al siguiente:
Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 13

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

Los 2 puntos clave de animacin que tenemos por ahora conservan los mismos valores. Los dejaremos as
para asegurar que la cmara no empieza movindose directamente, ya que sera una sensacin demasiado
brusca.
A partir de este punto, aadiremos nuevos puntos clave a lo largo del tiempo, posicionaremos la cmara
como deseemos y repetiremos la operacin hasta conseguir una cinemtica que recorra automticamente
todos los puntos de inters de nuestra escena. Sigue con atencin los pasos siguientes ya que tendrs que
repetirlos de la misma manera para completar la cinemtica de cmara.
En la Vista de Animacin, en la regla de puntos clave, aade un nuevo punto de clave unos segundos
despus del ltimo haciendo clic derecho y seleccionando la opcin Add Keyframe.
En la Vista de Escena, muvete libremente hasta visualizar un punto interesante de la escena por el
que quieras que pase tu cmara. Evita recorridos muy largos ya que el desplazamiento entre puntos
ser calculado automticamente y no ser capaz de evitar atravesar obstculos si los hay.
Haz clic en la pestaa superior GameObject Align With View para que la cmara pase a enfocar lo
que se est mostrando en la Vista de Escena. Observa que el punto clave cambia sus valores, tanto
de posicin como de rotacin, para tomar los que tiene ahora mismo la cmara.
Repite los pasos anteriores las veces necesarias hasta conseguir que la cmara recorra los puntos
de inters de la escena. Las curvas en la Vista de Animacin terminarn teniendo un aspecto similar
al siguiente:

Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 14

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

Puedes realizar animaciones de cmara de varios minutos (P. ej. 300.0 segundos). No obstante, en
cinemticas de larga duracin comprobars que cada nuevo punto clave de animacin tarda ms tiempo en
procesar, sto se debe a que las curvas deben recalcularse cada vez y requerirn ms memoria cuantos
ms puntos clave intervengan.
7. Actividades de evaluacin propuestas
Como actividades complementarias, vamos a grabar un vdeo que muestre el fruto final de nuestro
trabajo para poder subirlo a Youtube. Comenzaremos aadiendo msica a nuestro videojuego, ya que la
escena ganar muchos puntos con una buena msica de fondo.
Busca un archivo MP3 con una msica de fondo que quieras incluir en tu videojuego.
En la Vista de Proyecto, haz clic derecho en una zona vaca, selecciona Create Folder y crea una
carpeta con nombre Msica.
Haz clic derecho sobre la carpeta Msica en la Vista de Proyecto y selecciona Import New Asset... Se
abrir una ventana de navegacin en la que debes localizar el archivo MP3 y pulsar el botn inferior
izquierdo Import para importarlo como recurso de proyecto.
Una vez finalizado el proceso de carga, localiza el archivo MP3 en la Vista de Proyecto y arrstralo
sobre la cmara principal en la Vista de Jerarqua.
Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 15

Tutorial de Unity 3D
Tema 11
Introduccin a la Animacin con Unity3D

Los sonidos en Unity tienen en cuenta su posicin en el escenario, y su volumen y orientacin de los canales
en stereo depender de la posicin de la cmara principal. Al haber arrastrado la msica directamente
sobre la cmara principal nos aseguramos de que el volumen de reproduccin siempre sea el mximo.
Comprueba que, pulsando Play, ahora el videojuego tambin reproduce la msica.
Instala

el
programa
gratuito
FRAPS
que
puedes
descargar
desde
http://www.fraps.com/download.php (Tambin sirve cualquier otro programa de captura de vdeo
que sepas manejar).

Con el programa FRAPS abierto, maximiza la Vista de Juego de Unity pulsando la tecla Espacio con el
cursor sobre ella.
Pulsa el botn Play de Unity para comenzar la ejecucin, y pulsa la tecla F9 para que FRAPS
comience el proceso de captura de vdeo.
Vuelve a pulsar F9 para finalizar el proceso de captura de vdeo.
Podrs encontrar el vdeo en la carpeta de instalacin de FRAPS, dentro del directorio Movies. Utilzalo para
subir a Youtube el trabajo final de tu cinemtica.

Tutorial de Unity 3D Introduccin a la Animacin con Unity3D

Pg. 16