11 - animation tutorial unity3d

Tutorial de Unity 3DTema 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 nuestrovideojuego durante su ejecucin.

Inicialmente realizaremos cambios sencillos en su posicin y rotacin, pero ms adelante veremos cmo esposible animar cualquier parmetro, como por ejemplo la intensidad o el color de una fuente de luz, o inclusoun personaje para que realice las acciones que queramos.

Recuerda que como siempre, para facilitarte las cosas, siempre utilizaremos un guin (-) para prefijar todaslas 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 pongasespecial 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 laanimacin desde el principio.

En primer lugar debemos seleccionar el objeto que queremos animar. En nuestro caso vamos a trabajar conun simple cubo en una escena nueva, de forma que no tengamos ningn otro elemento que puedamolestarnos.

Ve a las pestaas superiores y selecciona File New Scene para crear una nueva escena. Puedesaprovechar directamente para guardarla seleccionando File Save Scene y guardndola en lacarpeta 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 suposicin Y y finalmente un 10 en su posicin Z.

Tutorial de Unity 3D Introduccin a la Animacin con Unity3D Pg. 1



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 mismongulo.

Aade una luz direccional a la escena para poder ver todo correctamente. En las pestaassuperiores 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. Acontinuacin ve a las pestaas superiores y haz clic en Window Animation para abrir la Vista deAnimacin.




En el lateral izquierdo, la Vista de Animacin muestra su nombre y un breve resumen de todos losparmetros de nuestro cubo de forma muy similar a cmo pueden verse en la Vista de Inspector. Evita hacerclic fuera de la Vista de Animacin y seleccionar otro objeto durante todo el proceso, ya que en ese caso elcontenido 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 clicderecho 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 llamadaPruebas.

Vuelve a la Vista de Animacin (Puedes volver a sacarla haciendo clic en Window Animation si lahabas cerrado) y haz clic en el botn que aparece en la siguiente imagen, selecciona la opcinCreate New Clip para crear un nuevo clip de animacin.




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 lacolumna de la izquierda de la Vista de Animacin observars que en el men desplegable Transform podemosver 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 loque vamos a seleccionar simplemente los valores de posicin.




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

Las posiciones tienen valores en las 3 coordenadas X, Y, Z, comprobars que al aadir curvas se han aadidoautomticamente 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 Vistade Animacin. Bsicamente se trata de una grfica en la que podemos controlar la posicin de nuestroobjeto (De arriba a abajo) a lo largo del tiempo (De izquierda a derecha).




Con el ratn dentro de la grfica de la Vista de Animacin, puedes utilizas la rueda del ratn para hacerzoom 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 quetarda el videojuego en redibujarse, que por defecto es 60 veces por segundo. De ah que observars que eltiempo pasa de 0:30 a 1:00, el 0:30 marca 30 frames (Medio segundo) mientras que el 1:00 indica unsegundo.

Pulsa la tecla Ctrl junto con la rueda del ratn dentro de la grfica para tener visible unos 5segundos (5:00) de tiempo. Es importante que no confundas los frames con los segundos, en la reglahorizontal 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 lolargo del tiempo y en cada uno de ellos se determina un estado en el objeto a animar. El clip de animacin seencargar de calcular automticamente el camino necesario para que el objeto pase por todos los puntosclave suavemente.

La regla de puntos clave est debajo de la regla de tiempo, justo encima de la grfica. Ten cuidado porquetiene otra regla superior que se ocupa de los eventos de animacin que trataremos ms adelante. Lareconocers porque al hacer clic derecho sobre ella te permite aadir Keyframes as:




En la regla de puntos clave, en el segundo 5:00 aproximadamente, haz clic derecho y selecciona laopcin 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 elnuevo 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 posicinque queremos que tome nuestro cubo.

sto puede hacerse de varias formas distintas, como por ejemplo introduciendo los valores numricamentepara cada Keyframe en la Vista de Animacin o simplemente arrastrando los rombos de cada Keyframe paraque cambien de valor. Nosotros en cambio lo haremos de forma visual desde la Vista de Escena, ya queresulta mucho ms sencillo para principiantes.




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, yaque por defecto guarda los valores iniciales del objeto, vamos a trabajar directamente con el segundoKeyframe.

En la regla de Keyframes de la Ventana de Animacin, selecciona el segundo Keyframe haciendo clicsobre 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 (EjeY). Puedes moverlo metro por metro si mantienes pulsado Ctrl, con un par de metros serasuficiente.

Si has seguido los pasos correctamente, la Vista de Animacin mostrar los cambios en el segundoKeyframe, y adems las lneas de colores se vern modificadas para unir los nuevos valores de posicin tal ycomo se muestra en la siguiente captura:

Vamos a previsualizar el resultado de nuestra animacin. Observa que la Vista de Animacin tiene su propiobotn 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.




Si la Vista de Escena muestra correctamente el movimiento del cubo, puedes cerrar la Vista de Animacin ypulsar 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 nadahubiese pasado. sto sucede porque el modo de animacin por defecto reproduce el clip una sla vez, peropodemos 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 slavez, 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 pestaaWindow/Animation.

Vers que la Vista de Animacin conserva intacta la animacin que habamos establecido para el cubo. Fjateen la parte inferior izquierda de la Vista de Animacin y observars un men desplegable en el que ahoramismo figura seleccionado Default.

Si no est activado ya, activa el botn de grabacin en la Vista e Animacin, est arriba a laizquierda 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.




El modo bucle (Loop) permite que el clip de animacin se reproduzca una y otra vez continuamente mientrasel juego permanezca en ejecucin, mientras que el modo ida y vuelta (Ping Pong) lo hace de la misma maneraslo 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 desubir ahora baja.

5. Curvas de animacin

Una animacin de videojuego generalmente se compone de varios puntos clave. Vamos a seguirmejorando 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 pestaaWindow Animation.

En la Vista de Jerarqua, selecciona de nuevo el cubo, comprobars que en la Vista de Animacin elclip de animacin sigue intacto.

En la Vista de Animacin, vuelve a pulsar el botn de grabacin (Icono redondo y rojo arriba a laizquierda). Coloca el cursor en la grfica y utilizando la tecla Ctrl y la rueda del ratn deja visiblems all del segundo 10:00.

En la barra de puntos clave de animacin (Keyframes), en el segundo 10:00, haz clic derecho yselecciona 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 suaveposible. El resultado de la ventana de animacin debera resultar muy similar al de la siguiente captura:




Al aadir un nuevo punto clave, ste queda por defecto seleccionado, podemos estar seguros de ello debidoa la lnea vertical roja que lo atraviesa. Vamos a hacer que este nuevo punto clave devuelva el cubo a suposicin 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 principioseran 2 metros hacia abajo as que puedes pulsar Ctrl mientras lo arrastras hacia abajo 2movimientos 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 ybajando, slo que ahora en la parte superior realiza un movimiento mucho ms suave que antes.




El movimiento se ha suavizado debido a que la grfica ahora forma una curva suave, en lugar de una rectaque 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 bruscode direccin. Si observas la Vista de Animacin, el punto en el que la grfica termina y vuelve a enlazar por elotro 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 querepresentan y pueden ser arrastrados a mano alzada para modificar sus valores. Si lo compruebas, utiliza elatajo 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 unmen 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 rombocorrespondiente 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, realizarrupturas bruscas en las curvas, aplanarlas, etc. En nuestro caso simplemente vamos a utilizar la opcin deaplanado 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 lateralderecho de la curva de animacin se aplana suavizando en gran manera el cambio brusco.




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

Pulsa ahora el botn de Play en la Vista de Animacin y observa como el movimiento de subida ybajada 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 recorrantoda nuestra escena a modo de cinemtica. Para ello necesitaremos trabajar sobre una escena en la quehayamos 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 queen la misma vista no hay ningn controlador de personaje, ya que ste tomara el control de la cmara ygeneralmente 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 lacmara 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:




Los 2 puntos clave de animacin que tenemos por ahora conservan los mismos valores. Los dejaremos aspara asegurar que la cmara no empieza movindose directamente, ya que sera una sensacin demasiadobrusca.

A partir de este punto, aadiremos nuevos puntos clave a lo largo del tiempo, posicionaremos la cmaracomo deseemos y repetiremos la operacin hasta conseguir una cinemtica que recorra automticamentetodos los puntos de inters de nuestra escena. Sigue con atencin los pasos siguientes ya que tendrs querepetirlos 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 segundosdespus 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 elque quieras que pase tu cmara. Evita recorridos muy largos ya que el desplazamiento entre puntosser 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 loque se est mostrando en la Vista de Escena. Observa que el punto clave cambia sus valores, tantode 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 puntosde inters de la escena. Las curvas en la Vista de Animacin terminarn teniendo un aspecto similaral siguiente:




Puedes realizar animaciones de cmara de varios minutos (P. ej. 300.0 segundos). No obstante, encinemticas de larga duracin comprobars que cada nuevo punto clave de animacin tarda ms tiempo enprocesar, sto se debe a que las curvas deben recalcularse cada vez y requerirn ms memoria cuantosms puntos clave intervengan.

7. Actividades de evaluacin propuestas

Como actividades complementarias, vamos a grabar un vdeo que muestre el fruto final de nuestrotrabajo para poder subirlo a Youtube. Comenzaremos aadiendo msica a nuestro videojuego, ya que laescena 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 unacarpeta con nombre Msica.

Haz clic derecho sobre la carpeta Msica en la Vista de Proyecto y selecciona Import New Asset... Seabrir una ventana de navegacin en la que debes localizar el archivo MP3 y pulsar el botn inferiorizquierdo Import para importarlo como recurso de proyecto.

Una vez finalizado el proceso de carga, localiza el archivo MP3 en la Vista de Proyecto y arrstralosobre la cmara principal en la Vista de Jerarqua.




Los sonidos en Unity tienen en cuenta su posicin en el escenario, y su volumen y orientacin de los canalesen stereo depender de la posicin de la cmara principal. Al haber arrastrado la msica directamentesobre 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 desdehttp://www.fraps.com/download.php (Tambin sirve cualquier otro programa de captura de vdeoque sepas manejar).

Con el programa FRAPS abierto, maximiza la Vista de Juego de Unity pulsando la tecla Espacio con elcursor sobre ella.

Pulsa el botn Play de Unity para comenzar la ejecucin, y pulsa la tecla F9 para que FRAPScomience 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 parasubir a Youtube el trabajo final de tu cinemtica.


11 - animation tutorial unity3d

Documents