introducción a la animación con unity3d - animation... · tutorial de unity 3d tema 4...

Tutorial de Unity 3DTema 4

Introducción a la Animación con Unity3D

Introducción a la animación con Unity3D

1. Objetivos

En este tema comenzaremos a trabajar en los cambios producidos en los objetos de nuestro videojuego durante su ejecución.

Inicialmente realizaremos cambios sencillos en su posición y rotación, pero más adelante veremos cómo es posible animar cualquier parámetro, 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 guión (-) para prefijar todas las acciones que requieran tu intervención directa con el programa.

2. La Vista de Animación

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 continuación para evitar problemas. Va a ser muy frecuente durante tus primeras pruebas realizar mal algún paso y tener que rehacer la animación 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 ningún otro elemento que pueda molestarnos.

– Ve a las pestañas superiores y selecciona File New Scene para crear una nueva escena. Puedes→ aprovechar directamente para guardarla seleccionando File Save Scene y guardándola en la→ carpeta Escenas con el nombre Prueba Animación.

– Crea un cubo seleccionando en las pestañas superiores GameObject Create Other Cube. En la→ → Vista de Jerarquía, haz doble clic en su nombre para centrar la Vista de Escena en él.

– En la Vista de Inspector, arriba del todo, introduce numéricamente un 0 en su posición X, un 5 en su posición Y y finalmente un 10 en su posición Z.

Tutorial de Unity 3D Introducción a la Animación con Unity3D Pág. 1



– En la Vista de Jerarquía, selecciona la cámara principal, y haz que mire directamente al cubo. Puedes hacerlo fácilmente seleccionando GameObject Align With View.→

Podrás comprobar que tanto la Vista de Escena como la Vista de Juego muestran el cubo desde el mismo ángulo.

– Añade una luz direccional a la escena para poder ver todo correctamente. En las pestañas superiores haz clic en GameObject Create Other Directional Light. El resultado final debería ser→ → similar al de la siguiente captura.

– Asegúrate de tener seleccionado, bien sea en la Vista de Escena o en la de Jerarquía, el cubo. A continuación ve a las pestañas superiores y haz clic en Window Animation para abrir la Vista de→ Animación.




En el lateral izquierdo, la Vista de Animación muestra su nombre y un breve resumen de todos los parámetros de nuestro cubo de forma muy similar a cómo pueden verse en la Vista de Inspector. Evita hacer clic fuera de la Vista de Animación 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 animación para nuestro cubo.

– En primer lugar, en la Vista de Proyecto, crea una nueva carpeta llama “Animaciones” haciendo clic derecho en una zona vacía y seleccionando Create Folder.→

– Haz clic derecho en la carpeta Animaciones de la Vista de Proyecto y crea una carpeta más llamada “Pruebas”.

– Vuelve a la Vista de Animación (Puedes volver a sacarla haciendo clic en Window Animation si la→ habías cerrado) y haz clic en el botón que aparece en la siguiente imagen, selecciona la opción Create New Clip para crear un nuevo clip de animación.




– 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 animación con nombre “Prueba Mover”.

Tras haber creado el nuevo clip la Vista de Animación debería 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 Animación observarás que en el menú desplegable Transform podemos ver la posición (Position), rotación (Rotation) y escala (Scale) del objeto.

En nuestro caso vamos a realizar una animación muy sencilla en la que el cubo simplemente se mueva, por lo que vamos a seleccionar simplemente los valores de posición.




– Haz clic en la pestaña a la derecha de las posiciones (Position) en la columna izquierda de la Vista de Animación y selecciona la opción de añadir curvas (Add Curves) tal y como puede verse en la siguiente captura.

Las posiciones tienen valores en las 3 coordenadas X, Y, Z, comprobarás que al añadir curvas se han añadido automáticamente las 3 coordenadas de posición, cada una de ellas con un color.

A continuación vamos a ver cómo funciona el gráfico que podemos observar en la parte derecha de la Vista de Animación. Básicamente se trata de una gráfica en la que podemos controlar la posición de nuestro objeto (De arriba a abajo) a lo largo del tiempo (De izquierda a derecha).




Con el ratón dentro de la gráfica de la Vista de Animación, puedes utilizas la rueda del ratón para hacer zoom hacia dentro o hacia afuera. Si además pulsas la tecla Ctrl, el zoom sólo afectará a la regla del tiempo.

Es importante que sepas que la unidad de medida mínima 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 observarás 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 ratón dentro de la gráfica 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 deberías ver 0:05 sino 5:00.

La ventana de animación debería verse así ahora:

A continuación vamos a crear los puntos clave (Keyframe) de la animación. Los puntos clave se sitúan a lo largo del tiempo y en cada uno de ellos se determina un estado en el objeto a animar. El clip de animación se encargará de calcular automáticamente 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 gráfica. Ten cuidado porque tiene otra regla superior que se ocupa de los eventos de animación que trataremos más adelante. La reconocerás porque al hacer clic derecho sobre ella te permite añadir Keyframes así:




– En la regla de puntos clave, en el segundo 5:00 aproximadamente, haz clic derecho y selecciona la opción Add Keyframe para añadir un nuevo punto clave al clip de animación.

Los rombos de colores que representan las coordenadas de posición ahora también aparecerán bajo el nuevo punto clave, creando una línea que los une con los del instante 0:00 así:

Llegados a este punto sólo necesitaríamos indicar, para el nuevo punto clave, los nuevos valores de posición que queremos que tome nuestro cubo.

Ésto puede hacerse de varias formas distintas, como por ejemplo introduciendo los valores numéricamente para cada Keyframe en la Vista de Animación 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 más sencillo para principiantes.




3. Animar de forma gráfica

– Asegúrate de tener el Layout en modo 2 by 3 y tener visible la Vista de Animación.

El Keyframe generado automáticamente en el instante 0:00 generalmente no requerirá ningún 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 Animación, selecciona el segundo Keyframe haciendo clic sobre él.

– En la Vista de Escena y sin cerrar la Vista de Animación, 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 sería suficiente.

Si has seguido los pasos correctamente, la Vista de Animación mostrará los cambios en el segundo Keyframe, y además las líneas de colores se verán modificadas para unir los nuevos valores de posición tal y como se muestra en la siguiente captura:

Vamos a previsualizar el resultado de nuestra animación. Observa que la Vista de Animación tiene su propio botón Play en su parte superior izquierda.

– Haz clic en el botón Play de la Vista de Animación 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 Animación y pulsar Play en Unity. La animación se reproducirá también en la Vista de Juego.

Observarás que la animación se realiza una única vez y después retorna a su posición inicial como si nada hubiese pasado. Ésto sucede porque el modo de animación por defecto reproduce el clip una sóla vez, pero podemos alterar este comportamiento desde la Vista de Animación.

4. Ciclos de Animación

La Vista de Animación también nos permite determinar si las animaciones se reproducen una sóla vez, si se repiten indefinidamente, si deben realizarse primero en un sentido y después en el contrario, etc.

– En la Vista de Jerarquía, selecciona el cubo y haz doble clic para centrarlo en la Vista de Escena.

– Con el cubo aún seleccionado, abre la Vista de Animación haciendo clic en la pestaña Window/Animation.

Verás que la Vista de Animación conserva intacta la animación que habíamos establecido para el cubo. Fíjate en la parte inferior izquierda de la Vista de Animación y observarás un menú desplegable en el que ahora mismo figura seleccionado Default.

– Si no está activado ya, activa el botón de grabación en la Vista e Animación, está arriba a la izquierda y su icono es un círculo 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 animación se reproduzca una y otra vez continuamente mientras el juego permanezca en ejecución, mientras que el modo ida y vuelta (Ping Pong) lo hace de la misma manera sólo 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 además de subir ahora baja.

5. Curvas de animación

Una animación de videojuego generalmente se compone de varios puntos clave. Vamos a seguir mejorando nuestra animación hasta darle un aspecto profesional.

– Vuelve a poner el Layout en modo 2 by 3 y abre la Vista de Animación haciendo clic en la pestaña Window – Animation.

– En la Vista de Jerarquía, selecciona de nuevo el cubo, comprobarás que en la Vista de Animación el clip de animación sigue intacto.

– En la Vista de Animación, vuelve a pulsar el botón de grabación (Icono redondo y rojo arriba a la izquierda). Coloca el cursor en la gráfica y utilizando la tecla Ctrl y la rueda del ratón deja visible más allá del segundo 10:00.

– En la barra de puntos clave de animación (Keyframes), en el segundo 10:00, haz clic derecho y selecciona la opción Add Keyframe para añadir un nuevo punto clave.

Llegado este punto observarás que el nuevo punto clave añadido conserva los mismo valores que el anterior, esto sucederá siempre que añadamos un nuevo punto clave.

Sin embargo, verás que además la línea de color verde que nos muestra la posición en el eje Y (Arriba/Abajo) a tomado ahora la forma de una curva para unir los 3 puntos clave de la manera más suave posible. El resultado de la ventana de animación debería resultar muy similar al de la siguiente captura:




Al añadir un nuevo punto clave, éste queda por defecto seleccionado, podemos estar seguros de ello debido a la línea vertical roja que lo atraviesa. Vamos a hacer que este nuevo punto clave devuelva el cubo a su posición inicial.

– Sin cerrar la Vista de Animación, vuelve a la Vista de Escena y utiliza el botón de posicionamiento (Arriba a la izquierda o atajo de teclado W) para devolver el cubo a su posición inicial. En principio serían 2 metros hacia abajo así que puedes pulsar Ctrl mientras lo arrastras hacia abajo 2 movimientos en el eje Y.

La gráfica de la posición Y habrá tomado finalmente el aspecto de una parábola:

– Haz clic en el botón Play de la Vista de Animación y comprueba como el cubo sigue subiendo y bajando, sólo que ahora en la parte superior realiza un movimiento mucho más suave que antes.




El movimiento se ha suavizado debido a que la gráfica ahora forma una curva suave, en lugar de una recta que cambia de dirección bruscamente al repetirse con modo Ping Pong.

Sólo deberías notar un problema en ésto, y es que al llegar abajo, el cubo sigue haciendo ese cambio brusco de dirección. Si observas la Vista de Animación, el punto en el que la gráfica termina y vuelve a enlazar por el otro extremo sigue formando un cambio brusco de dirección. Es lo que vamos a solucionar ahora mismo.

En la Vista de Animación, dentro de la gráfica, cada uno de los rombos señalan 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 acción.

Además de poder modificar su valor, también es posible hacer clic derecho sobre ellos para acceder a un menú que, entre otras cosas, nos permite configurar cómo es la curva de animación al llegar a ellos.

– En la curva de animación de la posición Y (Curva verde), haz clic derecho en el rombo correspondiente al Keyframe del momento 0:00, debería desplegarse un menú como el siguiente:

El menú anterior permite realizar diversas modificaciones en la gráfica como generar escalones, realizar rupturas bruscas en las curvas, aplanarlas, etc. En nuestro caso simplemente vamos a utilizar la opción de aplanado para evitar el cambio brusco que se produce al concatenarse la animación en modo Ping Pong.

– En el menú de la captura anterior, selecciona la opción de aplanado (Flat) y observa como el lateral derecho de la curva de animación se aplana suavizando en gran manera el cambio brusco.




– Repite la misma operación en el rombo de la curva de posición Y (La verde también), pero esta vez en el último Keyframe. La curva ahora mismo debería quedar completamente suavizada tal y como se muestra en la siguiente captura.

– Pulsa ahora el botón de Play en la Vista de Animación y observa como el movimiento de subida y bajada del cubo resulta totalmente suave y sin cambios bruscos.

6. Animaciones de cámara

Una utilidad muy interesante de la Vista de Animación es crear animaciones de cámara que recorran toda nuestra escena a modo de cinemática. Para ello necesitaremos trabajar sobre una escena en la que hayamos añadido elementos gráficos como por ejemplo terreno, objetos 3D, luces, etc.

Para realizar la siguiente tarea, asegúrate de que hay una cámara principal en la Vista de Jerarquía, y que en la misma vista no hay ningún controlador de personaje, ya que éste tomaría el control de la cámara y generalmente tendría prioridad sobre la animación que vamos a crear.

– Sigue los mismos pasos del Apartado 2 de este mismo tema, pero esta vez sobre la cámara principal (Main Camera) para crear un clic de animación al que puedes poner como nombre “Prueba Cámara”.

– En la Vista de Animación, a la derecha, añade también las curvas de rotación, ya que en principio la cámara además de moverse por la escena también rotará para seguir su camino.

Una vez hecho ésto, la Vista de Animación debería tener un aspecto similar al siguiente:




Los 2 puntos clave de animación que tenemos por ahora conservan los mismos valores. Los dejaremos así para asegurar que la cámara no empieza moviéndose directamente, ya que sería una sensación demasiado brusca.

A partir de este punto, añadiremos nuevos puntos clave a lo largo del tiempo, posicionaremos la cámara como deseemos y repetiremos la operación hasta conseguir una cinemática que recorra automáticamente todos los puntos de interés de nuestra escena. Sigue con atención los pasos siguientes ya que tendrás que repetirlos de la misma manera para completar la cinemática de cámara.

– En la Vista de Animación, en la regla de puntos clave, añade un nuevo punto de clave unos segundos después del último haciendo clic derecho y seleccionando la opción Add Keyframe.

– En la Vista de Escena, muévete libremente hasta visualizar un punto interesante de la escena por el que quieras que pase tu cámara. Evita recorridos muy largos ya que el desplazamiento entre puntos será calculado automáticamente y no será capaz de evitar atravesar obstáculos si los hay.

– Haz clic en la pestaña superior GameObject Align With View para que la cámara pase a enfocar lo→ que se está mostrando en la Vista de Escena. Observa que el punto clave cambia sus valores, tanto de posición como de rotación, para tomar los que tiene ahora mismo la cámara.

– Repite los pasos anteriores las veces necesarias hasta conseguir que la cámara recorra los puntos de interés de la escena. Las curvas en la Vista de Animación terminarán teniendo un aspecto similar al siguiente:




Puedes realizar animaciones de cámara de varios minutos (P. ej. 300.0 segundos). No obstante, en cinemáticas de larga duración comprobarás que cada nuevo punto clave de animación tarda más tiempo en procesar, ésto se debe a que las curvas deben recalcularse cada vez y requerirán más memoria cuantos más puntos clave intervengan.

7. Actividades de evaluación propuestas

Como actividades complementarias, vamos a grabar un vídeo que muestre el fruto final de nuestro trabajo para poder subirlo a Youtube. Comenzaremos añadiendo música a nuestro videojuego, ya que la escena ganará muchos puntos con una buena música de fondo.

– Busca un archivo MP3 con una música de fondo que quieras incluir en tu videojuego.

– En la Vista de Proyecto, haz clic derecho en una zona vacía, selecciona Create Folder y crea una→ carpeta con nombre “Música”.

– Haz clic derecho sobre la carpeta Música en la Vista de Proyecto y selecciona Import New Asset... Se abrirá una ventana de navegación en la que debes localizar el archivo MP3 y pulsar el botón 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 arrástralo sobre la cámara principal en la Vista de Jerarquía.




Los sonidos en Unity tienen en cuenta su posición en el escenario, y su volumen y orientación de los canales en stereo dependerá de la posición de la cámara principal. Al haber arrastrado la música directamente sobre la cámara principal nos aseguramos de que el volumen de reproducción siempre sea el máximo.

– Comprueba que, pulsando Play, ahora el videojuego también reproduce la música.

– Instala el programa gratuito FRAPS que puedes descargar desde http://www.fraps.com/download.php (También sirve cualquier otro programa de captura de vídeo 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 botón Play de Unity para comenzar la ejecución, y pulsa la tecla F9 para que FRAPS comience el proceso de captura de vídeo.

– Vuelve a pulsar F9 para finalizar el proceso de captura de vídeo.

Podrás encontrar el vídeo en la carpeta de instalación de FRAPS, dentro del directorio Movies. Utilízalo para subir a Youtube el trabajo final de tu cinemática.


http://www.fraps.com/download.php

introducción a la animación con unity3d - animation... · tutorial de unity 3d tema 4...

Documents