Animación en 2D de Unity Based-Bone Mecanim y Scripting

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, usaremos la excelente herramienta Mecanim de Unity para combinar animaciones, y agregaremos algunas secuencias de comandos simples para demostrar el resultado final.

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 los tutoriales anteriores, configuramos el proyecto, armamos un personaje de dragón 2D y creamos tres animaciones diferentes. Si aún no ha completado los tutoriales anteriores, le recomendamos que lo haga antes de continuar.

Vista previa final

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

Mecanim

En este punto, tienes tu dragón completamente ensamblado con tres animaciones definidas. Sin embargo, no hay conexión entre ellos. Por lo tanto, nuestro objetivo inicial es conectar los diferentes clips de animación y combinarlos. Para esto, Unity proporciona una herramienta impresionante llamada Mecanim que hace exactamente lo que necesita.

Mecanim es un sistema de animación potente y flexible. Dado que está integrado con Unity, no hay necesidad de software de terceros. Puedes animar fácilmente cualquier cosa, desde sprites para mezclar formas o incluso luces. Mecanim te permite crear máquinas de estado y mezclar árboles para controlar tu personaje.

Pero, antes de continuar, hablemos un poco sobre la combinación de animaciones y máquinas de estados para que comprendas mejor lo que vamos a hacer..

¿Qué es una máquina de estado??

En Unity, puede combinar dos o más movimientos similares; por ejemplo, puede combinar las animaciones de correr y caminar en función de la velocidad actual del personaje. Básicamente, tienes dos formas diferentes de combinar animaciones en Unity. En algunas situaciones es posible que desee utilizar Transiciones; en otros deberás usar Mezclar arboles:

  • Transiciones Se utilizan para la transición sin problemas entre animaciones. Esto generalmente funciona bien si la transición es rápida..
  • Mezclar arboles Permite que múltiples animaciones se mezclen suavemente, al tiempo que incorporas partes de ellas en cantidades variables. Estas cantidades están controladas por parámetros numéricos. Para dar un ejemplo práctico, imagina que tenemos un juego de disparos; Es posible que desees que el personaje dispare y corra al mismo tiempo. Los árboles de mezcla le permiten combinar las dos animaciones, permitiendo que el personaje corra y dispare al mismo tiempo, sin necesidad de crear una tercera animación para esa mezcla específica de acciones.

Una máquina de estado almacena el estado de una entidad en un momento dado, y puede reaccionar a una entrada para cambiar el estado de esa entidad, o para provocar una acción o salida. Para obtener más información, consulte Máquinas de estado finito: teoría e implementación..

En Unity, usas máquinas de estado para controlar el estado de los personajes del juego. Por ejemplo, un estado para un personaje podría ser Caminar, y otro podría ser Saltar. El personaje puede cambiar de Caminar estado a la Saltar estado basado en la entrada del jugador (probablemente presionando el botón Saltar). 

Aquí puede ver un ejemplo de una máquina de estado (más compleja) de la documentación de Unity. Cada cuadro representa un estado, y las flechas representan posibles transiciones entre ellos:

Vamos a crear una máquina de estados con nuestras animaciones existentes y luego usaremos las transiciones para combinarlas..

Construyendo nuestra máquina de estado

Si marca la Animaciones carpeta donde has estado guardando tu .anim archivos, encontrarás un Dragon.controller expediente. Este es el archivo mecanim asociado con el carácter que Unity generó automáticamente cuando guardó su primera animación.

Haga doble clic en el Dragon.controller archivo, y Unity abrirá un Animador ver pestaña junto a tu Escena y Juego pestañas.

Como puede ver, Unity ya agregó las tres animaciones al archivo. Dado que las animaciones ya están en su lugar, no es necesario agregarlas, pero si desea agregar una animación adicional al controlador, todo lo que debe hacer es arrastrar el .anim archivo a la Animador ver. De la misma manera, si desea eliminar una animación existente del controlador, solo debe seleccionar Animador ver y presionar Borrar. Siéntete libre de probar esto por ti mismo..

Tenemos cuatro cajas diferentes en el Animador:

  • Cualquier estado
  • Ocioso
  • Saltar
  • Otoño

Cualquier estado es el estado predeterminado que creaim mecanim, y no lo usarás. Puedes arrastrarlo a cualquier esquina de la Animador Ventana y déjala ahí..

Los otros tres cuadros se refieren a las tres animaciones que creamos. Como puede notar, Ocioso Es de color naranja, mientras que los otros dos son grises. Eso es porque Ocioso es la animación de la raíz; es la animación que el personaje va a reproducir de forma predeterminada. Si presionas el botón de reproducción en tu editor y lo pruebas, verás que el personaje hace esto Ocioso animación. En este caso particular, ese es exactamente el comportamiento que queremos; sin embargo, si quisieras, por ejemplo, la Otoño Para que la animación sea la animación raíz, todo lo que tendría que hacer es hacer clic con el botón derecho en ella Establecer por defecto.

Como puedes ver, la Otoño la animación es ahora naranja y la Ocioso es gris.

Ya que quieres Ocioso Para ser la animación de la raíz, simplemente repita el proceso para que se vuelva naranja..

Ahora es el momento de conectar las animaciones. Botón derecho del ratón Ocioso y seleccione Hacer la transición.

Esto creará una pequeña flecha que comienza desde Ocioso. Haga clic en el Saltar Animación para hacer que la flecha conecte las dos animaciones..

Si selecciona la flecha que acaba de crear, verá que aparecen nuevas propiedades en la Inspector lengüeta.

Como puedes ver, tienes una línea de tiempo y las animaciones Ocioso y Saltar. Hay una banda azul sobre las animaciones que comienza en Ocioso pero luego cambia a Saltar. Además, hay un período en el tiempo durante el cual las dos animaciones se superponen.

Desde el Avance El área está vacía, incluso si hace clic en el botón de reproducción sobre la vista previa, no puede ver lo que está sucediendo..

Para obtener una vista previa de la transición en la que está trabajando, simplemente seleccione Continuar objeto de juego de la Jerarquía pestaña y arrástrala a la Avance zona. Ahora puede ver el carácter en la vista previa y, si presiona jugar, puede ver la transición entre las dos animaciones..

En el Inspector, el área donde la banda azul cambia de Ocioso a Saltar es nuestra transicion

Puede editar las transiciones arrastrando las dos flechas azules en la línea de tiempo que limitan el área de transición. Al cambiar su posición, puede hacer la transición más rápida o más suave.

Lo siguiente que debes hacer es definir cuando quieres que esta transición suceda Para ello, cree un nuevo parámetro haciendo clic en el + firmar en el Parámetros lista.

A continuación, seleccione la Flotador Opcion y llamalo Movimiento vertical:

Ahora, vuelve a la Inspector, Y debajo Condiciones La variable Movimiento vertical aparecerá Selecciónalo.

Acaba de definir la condición para determinar cuándo cambiar el estado en la máquina de estado: si el valor de Movimiento vertical es mayor que 0, entonces el personaje comenzará el Saltar animación. 

También queremos una transición entre el Saltar animación y la Otoño animación:

El valor máximo que Movimiento vertical va a llegar es 1, así, para la transición entre Saltar y Otoño, Podemos activarlo cuando ese valor sea menor que 0.5.

Ahora tenemos que hacer que el personaje vuelva a la Ocioso Animación después de la caída. Ya que Ocioso debe estar jugando cuando el personaje está en el piso, debe crear una transición entre Otoño y Ocioso.

Para finalizar, debes asegurarte de que se active cuando el personaje está en el suelo. Puedes hacer eso configurando el parámetro de transición de Movimiento vertical a menos que 0.1-que básicamente significa que la Movimiento vertical es 0, lo que significa que el personaje está en el suelo.

Ahora necesitamos asegurarnos de que no veamos ninguna Ocioso animaciones mientras el personaje está en el aire entre el Saltar y Otoño animaciones Para hacer eso, crea un nuevo parámetro, esta vez un Bool.

Llámalo En el suelo.

Seleccione la transición entre Saltar y Otoño. Quieres que esta transición suceda cuando el personaje todavía está en el aire, ¿verdad? Así que ve a la Inspector, haga clic en el +, y agregar un nuevo parámetro a la transición. Básicamente, quieres que esto suceda cuando el valor de En el suelo es falso.

A continuación, en la transición de Otoño a Ocioso, agrega el parámetro En el suelo y establece el valor en cierto:

Nuestro trabajo con Mecanim está hecho. Ahora es el momento de pasar a las secuencias de comandos.

Animaciones de scripting

En su directorio de activos, cree una nueva carpeta llamada Guiones. A continuación, crea un nuevo script de C # llamado CharacterMove.cs. Tenga en cuenta que el script que está a punto de crear es muy simple, cuyo objetivo principal es mostrar cómo puede cambiar las animaciones del personaje por código.. 

La mejor práctica es usar la física de Unity cuando quieras crear juegos robustos. Sin embargo, en aras de la simplicidad y la comprensión, solo crearemos una pequeña simulación.

Cree cuatro variables en el script: una para hacer referencia a la Animador componente, otro para la velocidad de la caída, un tercero para la cantidad de movimiento vertical y una bandera para verificar si el personaje está en el suelo.

clase pública CharacterMove: MonoBehaviour // Variables public Animator anim; // Refrerencia al animador privado float FallSpeed; // La velocidad con la que cae el personaje. Flotador privado Movimiento vertical; // La cantidad de movimiento vertical privado bool onGround; // Marcar para comprobar si el personaje está en el suelo.

En el Comienzo() método, debe asegurarse de que la velocidad esté configurada en 0.03 (o cualquier otro valor que sientas que se adapte a tus animaciones) y que el personaje está conectado a tierra.

void Start () // El carácter comienza en el suelo onGround = true; // Establece la velocidad de caída fallSpeed ​​= 0.03f; 

Ahora en el Actualizar() Método, hay varias cosas que necesita comprobar. Primero, necesitas detectar cuando el Barra espaciadora Se pulsa, para que el personaje salte. Cuando se presiona, ajuste el movimiento vertical a 1 y el en el suelo bandera para falso.

void Update () // Si se presiona la barra espaciadora y el carácter está en el suelo si (Input.GetKeyDown (KeyCode.Space) == true && onGround == true) verticalMovement = 1f; onGround = falso; 

¿Qué pasa cuando el Barra espaciadora no está siendo presionado? Bueno, necesitas comprobar si el personaje está en el aire y su movimiento vertical es mayor que 0; si es así, necesitas reducir el movimiento vertical restando la velocidad de caída.

void Update () // Si se presiona la barra espaciadora y el carácter está en el suelo si (Input.GetKeyDown (KeyCode.Space) == true && onGround == true) verticalMovement = 1f; onGround = falso;  else // Verifique si el personaje está en el aire y el movimiento vertical mayor que 0 si (en campo == falso && Movimiento vertical> 0) // Reducir movimiento vertical movimiento vertical - = caídaSpeed; 

Como recordarás, una vez movimiento vertical Cae por debajo 0.5, la Otoño la animación comenzará a reproducirse. 

Sin embargo, no queremos restar. velocidad de caída desde movimiento vertical Para siempre, ya que el personaje aterrizará en algún momento. Si el valor del movimiento vertical es igual o menor que 0, diremos que significa que el personaje ha tocado tierra.

void Update () // Si se presiona la barra espaciadora y el carácter está en el suelo si (Input.GetKeyDown (KeyCode.Space) == true && onGround == true) verticalMovement = 1f; onGround = falso;  else // Verifique si el personaje está en el aire y el movimiento vertical mayor que 0 si (en campo == movimiento falso y vertical> 0) // Reduzca el movimiento vertical Movimiento vertical - = caída Velocidad // Si el movimiento vertical es menor o igual a 0, el personaje está en el piso si (movimiento vertical < 0)  verticalMovement = 0; onGround = true;    

Para terminar el Actualizar() Método, necesitas pasar los valores de movimiento vertical y en el suelo al Animador componente:

void Update () // Si se presiona la barra espaciadora y el carácter está en el suelo si (Input.GetKeyDown (KeyCode.Space) == true && onGround == true) verticalMovement = 1f; onGround = falso;  else // Verifique si el personaje está en el aire y el movimiento vertical mayor que 0 si (en campo == falso && Movimiento vertical> 0) // Reducir movimiento vertical movimiento vertical - = caídaSpeed; // Si el movimiento vertical es menor o igual a 0, el personaje está en el piso si (movimiento vertical < 0)  verticalMovement = 0; onGround = true;    // Update the animator variables anim.SetFloat("VerticalMovement", verticalMovement); anim.SetBool("OnGround", onGround); 

El guión está terminado. Ahora tienes que añadirlo a la Continuar objeto de juego y añadir la referencia a la Animador componente. Para hacer esto, una vez que agregue el script, arrastre el Animador al campo apropiado en el script.

Si presionas reproducir y probarlo, las animaciones deberían estar cambiando como se supone que deben hacerlo. El dragón comienza en Ocioso, pero una vez que presionas el Barra espaciadora va a Saltar y luego comienza a jugar el Otoño animación antes de volver a Ocioso.

Herramientas y tecnologías externas

Aunque en esta serie de tutoriales solo hemos utilizado las herramientas predeterminadas que vienen con Unity, hay muchas y excelentes herramientas 2D en la Tienda de Activos de Unity que pueden ayudarlo a hacer este proceso aún más fácil y rápido. Dos buenos ejemplos son Smooth Moves y Puppet 2D, cada uno de los cuales puede ayudarlo a definir los personajes, la jerarquía y las animaciones de una manera intuitiva y fácil.. 

Los complementos como estos ofrecen algunos extras, como la posibilidad de agregar "huesos" 2D, lo que hace que todo el proceso de animación sea más fácil y las deformaciones más realistas. Si su idea es utilizar animaciones 2D con varios grados de detalle, le recomendamos que revise esos complementos..

Conclusión

Esto concluye nuestra serie de tutoriales sobre cómo crear una animación 2D basada en huesos con Unity. Hemos cubierto mucho terreno en esta breve serie, y ahora debería saber lo suficiente como para comenzar con sus animaciones 2D. Si tiene alguna pregunta o comentario, como siempre, no dude en escribirnos una línea en los comentarios.

Referencias

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