Animación 2D basada en hueso creando las animaciones reales

En esta serie, nos centramos en las herramientas de animación en 2D basadas en huesos proporcionadas por el motor Unity. La idea principal es presentar y enseñar los fundamentos de la animación 2D para que puedas aplicarla a tus propios juegos. En este tutorial, agregaremos las animaciones de inactividad, salto y caída..

Antes de comenzar el tutorial, nos gustaría agradecer a Chenguang (DragonBonesTeam) por proporcionarnos el arte del juego utilizado para producir esta serie de tutoriales..

Donde dejamos

En el tutorial anterior, importamos un sprite 2D que representa el personaje del juego, lo cortamos con el Editor de Sprite de Unity y construimos la base del personaje. Si no ha completado el tutorial anterior, le recomendamos encarecidamente que lo haga, ya que va a necesitar el carácter 2D para poder seguir este tutorial..

Vista previa final

Esta demostración muestra el dragón animado que buscamos para el golpe. Espacio para que salte:

Teoría general de la animación

Hay varios conceptos importantes que debe tener en cuenta al animar. Para el propósito de este tutorial, asumiremos que no tiene experiencia con la animación (2D o 3D), y que nunca ha trabajado con software de animación antes.

La animación, tal como la conocemos, ha evolucionado de la pintura a la digital. Existen docenas de técnicas de animación híbridas, pero todas ellas comparten los mismos principios básicos, como los ciclos de sincronización de labios, squash o caminata..

Para entender la animación, primero debes aprender el concepto de cuadro. Un cuadro es una de las muchas imágenes fijas que componen una animación. Si detiene una caricatura, la imagen que muestra su televisor sería de un solo cuadro..

La principal diferencia entre la animación tradicional y la animación por computadora radica en las herramientas utilizadas. La animación tradicional es un proceso muy práctico, donde los artistas tendrían que dibujar o componer miles de marcos individuales. La animación por computadora elimina la necesidad de muchas herramientas y, en general, simplifica todo el proceso. 

Por ejemplo, mientras que con la animación tradicional, el artista tendría que dibujar casi todos los cuadros de una animación, con la animación por computadora el artista puede usar lo que llamamos puntos clave del marco. Estos puntos clave del cuadro, como lo especifica el nombre, son etapas clave de la animación. Básicamente, el artista crea esos puntos clave del cuadro, y la computadora interpola entre ellos para crear los cuadros faltantes. Como se puede imaginar, este tipo de proceso es mucho menos laborioso..

Puede definir un fotograma clave como una única imagen fija en una secuencia animada que tiene lugar en un punto importante de esa secuencia. Un buen ejemplo sería en una animación de caída de roca: la posición original de la roca en el aire sería un cuadro clave, y la posición final de la roca en el suelo sería otra. La computadora entonces generaría todos los otros marcos. Llamamos a los cuadros entre cuadros clave. interpolada Marcos, y son los responsables de crear la ilusión de movimiento.

El marco también se puede utilizar como una unidad de tiempo. Por ejemplo, puedes decir que una animación dura 20 cuadros. La duración real de cualquier animación depende de la velocidad de fotogramas, que puede variar con el formato de la animación. En Norteamérica y Japón, el estándar es de 30 cuadros por segundo (fps), mientras que en el resto del mundo el estándar suele ser de 25 fps..

Animaciones

Ya que ahora conoces los conceptos básicos de la animación y la animación por computadora específicamente, volvamos a Unity para comenzar a animar nuestro personaje..

El primer paso es crear una carpeta en el Bienes directorio llamado animaciones, En el que guardarás las animaciones de tus personajes..

A continuación, abra la Animación panel en la unidad (Ventana > Animación):

Como puede ver, el panel contiene una línea de tiempo horizontal, un botón de grabación, un botón de reproducción y un par de botones para navegar a través de los cuadros. 

Toma el Animación Ventana y atracarla junto a la Consola pestaña (tenga en cuenta que está utilizando el Diseño 2D creado en el tutorial Unity 2D Arkanoid). De esta manera, puedes trabajar en tu escena con el panel de animación aún abierto.

Animación inactiva

Creará tres animaciones diferentes para el dragón: una animación inactiva, una animación de salto y una animación de otoño. 

Para crear la primera animación, seleccione la Continuar objeto del juego y haga clic Añadir curva sobre el Animación panel. Una nueva ventana le pedirá que nombre el archivo de animación y la carpeta de destino para guardarlo. Los archivos de animación de Unity tienen .anim extensión, y los guardarás en el Animaciones carpeta que creó anteriormente. Crear el Ocioso.anim expediente.

Como puede observar, una vez que guarde el archivo, varias cosas cambian en el diseño del editor:

Si echa un vistazo a los botones de reproducción en la parte superior de su escena, notará que se han vuelto rojos. En el Animación en el panel, el botón de grabación ahora también es rojo, y verá una línea roja en la línea de tiempo. Esto significa que estás en grabar modo. Además, si nos fijamos en el Inspector, Verá que Unity ha agregado automáticamente un nuevo componente a su objeto de juego: el Animador.

los Animador componente es una referencia a una Controlador de animador que se utiliza para configurar el comportamiento de un personaje. Esto incluye una configuración para Máquinas de estado, Mezclar arboles y eventos que pueden ser controlados por script. Básicamente, la Animador Es el vínculo entre el personaje y su comportamiento..

Cubriremos la Animador Componente con más profundidad después; Por ahora, solo concentrémonos en la animación. En tus Continuar objeto del juego, seleccione la Cabeza:

Sobre el Animación línea de tiempo, arrastre la línea roja a 1:00 (un minuto en).

Ahora en el Inspector, selecciona el Rotación Z a 7.9. Como puede observar, ahora tiene algunas formas pequeñas en su línea de tiempo. Estas marcas indican los fotogramas clave de la animación..

Mueve la línea roja a 2:00 y establecer el Rotación Z de la cabeza a 0.

Presione nuevamente el botón de grabación para desactivar el modo de grabación. Ahora puede presionar el botón de reproducción para probar su animación. Si todo funcionara, la cabeza de tu dragón debería estar subiendo y bajando.

Ajustando la animación

La cabeza de dragón parece estar girando un poco demasiado. Ya que solo queremos un pequeño asentimiento, necesitamos editar la animación.. 

Vuelva a encender el modo de grabación presionando el botón, y mueva la línea roja a 1:00 minuto. Alterar el Rotación Z valor para 2.05.

Presione el botón de grabación para salir del modo de grabación y probar la animación nuevamente. 

Como puede ver, para editar una animación, solo tiene que seleccionar el fotograma clave deseado y cambiarlo. Si necesita cambiar el tiempo de una animación, por ejemplo, si la animación es demasiado rápida o demasiado lenta, puede arrastrar la marca en la línea de tiempo al marco deseado.

Bien, ahora tienes la cabeza animada, pero quieres animar todo el cuerpo. Ya que creaste tu personaje como una jerarquía en lugar de objetos aislados del juego, no necesitas crear una animación única para cada parte del cuerpo; en su lugar, simplemente pulsa el botón marcado Añadir curva y seleccione una parte del cuerpo diferente. Haz clic en el botón y selecciona la cola del dragón..

Intenta hacer subir y bajar la cola. Al igual que hiciste antes, usa el Rotación Z Eje y la línea de tiempo entre cero y dos minutos.. 

Gracias a la jerarquía que creó, cuando mueve la cola, el motor también mueve automáticamente la punta. Sin embargo, también puede animar la punta individualmente si la selecciona.

¡Genial! Ahora anime el resto de las partes del cuerpo para la animación inactiva. Tómese el tiempo que necesite para editar la animación hasta que esté completamente satisfecho. La animación lleva tiempo y nunca obtiene los resultados que desea en el primer intento. Al final, su línea de tiempo debería verse similar a esto:

Tenga en cuenta que, para el Ocioso Animación, no cambias ningún valor del centro de masa del dragón (el punto negro).

La animacion de salto

Para el Saltar Animación, tendrá que crear un nuevo archivo de animación. Para hacer eso, en el Animación panel, haga clic en la etiqueta que dice Ocioso y seleccione Crear nuevo clip.

Nombralo Saltar.anim y guárdalo en el Animaciones carpeta.

Para esta animación, quieres que tu dragón mire hacia arriba mientras saltas. Ya que hemos cubierto los conceptos básicos de la creación de animaciones usando Unity, solo le daremos algunos consejos en lugar de guiarlo por el proceso..

Como hiciste antes, debes seleccionar la Continuar Objeto del juego y comenzar agregando curvas. Empecemos por la cabeza; Esta animación será corta, por lo que 0:30 segundos va a hacer. Gire la cabeza en el eje Z para mirar hacia arriba.

Para evitar que la cabeza sea completamente estática, puede agregarle un poco de movimiento. Puedes conseguirlo añadiendo un poco de rotación..

Repita el proceso para las partes restantes del cuerpo. Ten en cuenta que la animación debe parecer que el personaje está en el aire.. 

Te enseñaremos cómo hacer el salto completo más adelante. Como referencia, intente que su personaje tenga poses similares a las siguientes:

¿Lo has hecho? Bonito!

Ahora, concentrémonos en la animación final: la animación de otoño..

La animacion de otoño

Ahora tu personaje puede saltar, pero dos partes componen un salto completo: el salto en sí, donde el personaje se levanta del piso, y la caída, cuando el personaje vuelve a bajar. En este momento te estás perdiendo la segunda parte del salto, la Otoñoanimación.

Al igual que antes, en el Animación panel, haga clic en la etiqueta con el nombre de la animación actual y seleccione Crear nuevo clip.

Guarda la nueva animación en el Animaciones carpeta con el nombre Otoño.anim.

Esta vez, quieres que el personaje se vea abajo mientras caes. Para hacer eso, necesitas presionar el Añadir curva Abotón y empieza a posar el dragón. Al igual que el Saltar Animación, 30 segundos funcionará para este caso..

Repita el proceso de selección de las partes del cuerpo y la creación de los respectivos fotogramas clave para todo el personaje (excepto el punto negro). Una vez más, puedes agregar marcos de teclas centrales solo para asegurarte de que el personaje no esté estático durante la caída..

La próxima vez

Con esto concluye el segundo tutorial que explica cómo crear una animación 2D basada en el hueso con Unity. Ahora ha aprendido los conceptos básicos de la animación y ha utilizado fotogramas clave para crear tres tipos de animaciones. La próxima vez, conectará las diferentes animaciones, las combinará y las llamará por script..

Si tiene alguna pregunta o comentario sobre lo que hemos cubierto hasta ahora, deje un comentario a continuación..

Referencias

  • Hoja de sprites de dragón: utilizada con el permiso de Chenguang de DragonBonesTeam