Cómo animar personajes 2D en Unity 2022 LTS

Además de la iluminación 2D, otras técnicas utilizadas para crear el personaje animado esquelético en Happy Harvest incluyen manipular la cara del personaje para crear diferentes expresiones, bibliotecas de sprites para variaciones de personajes y Sprite Swap para cambiar entre sprites adheridos al mismo hueso durante el proceso de animación. .

Consideraciones de perspectiva

En un juego de arriba hacia abajo, los personajes deben dibujarse y animarse desde diferentes perspectivas. Con el estilo de dibujos animados de Happy Harvest, puedes lograr imágenes agradables limitando las direcciones a cuatro.

Hay tres conjuntos de animación para el personaje: Derecha (o “lado”), arriba y abajo. El personaje también se voltea para animaciones orientadas hacia la izquierda o hacia la derecha.

Esto conlleva una compensación. Si el personaje mira hacia la derecha y sostiene una regadera en su mano derecha, la regadera tendrá que cambiar de mano cuando el personaje se voltee para mirar hacia la izquierda.

Manejo de variaciones por dirección

Manejar el cambio de dirección puede ser un desafío desde una perspectiva de arriba hacia abajo. Puedes agregar complejidad si creas un GameObject secundario por dirección para el personaje y los habilitas o desactivas según la dirección actual del personaje. En Happy Harvest, el artista optó por usar un solo esqueleto con sprites orientados en diferentes direcciones que se intercambiaban según la dirección. Esta solución funcionó para el estilo de dibujos animados en bloques de la muestra.

Reglas generales de animación 2D.

Aquí hay algunas técnicas de la demostración para diseñar un personaje manipulado y animado:

Dibuja al personaje en una posición neutral con brazos y piernas estirados. Si partes del cuerpo están dobladas, puede causar problemas al animar.

Haz que la resolución sea un poco más alta de lo que sugieren los píxeles por unidad (PPU) de tu juego. Una resolución puede verse bien en reposo, pero rotar y estirar las imágenes puede provocar pixelación.

Si estás usando mucha iluminación 2D en tu juego y quieres aprovechar al máximo los mapas normales, no pintes luces y sombras en tu sprite. En su lugar, pinte sombras no direccionales. Esta técnica se llama oclusión ambiental. Tu objeto se verá mejor, pero querrás evitar el uso de luz direccional como la luz del sol.

Las capas de partes del cuerpo intercambiadas usando la función Sprite Swap deben agruparse en consecuencia. Por ejemplo, todas las capas con posición de boca.

La animación 2D tradicional puede ser la parte más desafiante y que requiere más tiempo en el desarrollo de arte para un juego 2D. La animación esquelética puede ayudarle a ahorrar tiempo, crear animaciones fluidas y adaptables y permitirle crear más animaciones con menos recursos.

El flujo de trabajo PSD

El paquete de animación 2D te permite importar la obra de arte de tu personaje directamente desde Photoshop a Unity. El paquete PSD Importer maneja archivos PSD y PSB en capas para este propósito. Puedes importar todas las capas del personaje como sprites y colocarlas exactamente como fueron pintadas en la aplicación.

Cuando seleccionas un archivo PSD o PSB importado, muestra opciones similares a la configuración de importación de sprites, pero con otras adicionales para animación 2D y montaje. Las opciones clave que deberá seleccionar son:

Importar capas ocultas: Esta opción importa todas las capas de un archivo PSD o PSB, incluidas las capas ocultas.

Sprites individuales (Mosaico): Esta configuración solo está disponible si el Tipo de textura está configurado en Múltiple. Crea sprites a partir de capas importadas y los coloca en un atlas de texturas. Deja esta opción habilitada si quieres manipular un personaje.

Usar como plataforma: Esta opción genera un carácter prefabricado con la misma jerarquía de capas y posición que el archivo PSD o PSB.

Usar grupo de capas: Esto agrega agrupación de capas del archivo PSD o PSB. Actívalo para agrupar partes de un personaje, como partes intercambiadas con sprites.

En la sección Gestión de capas puede ver la jerarquía de capas y agregar o eliminar manualmente las capas que se importarán.

Puedes crear el esqueleto de un personaje en el Editor de aspectos dentro del Editor de sprites. Comience haciendo clic en el botón Crear hueso y luego haga clic izquierdo en el área de la ventana principal. El primer clic crea un centro óseo y el segundo marca la ubicación de la punta del hueso. Esta herramienta encadena y anida huesos uno dentro de otro.

Utilice el botón Editar hueso para refinar los huesos. El botón Dividir hueso le permite dividir huesos en dos. Esta es una buena opción para hacer extremidades. Si haces un hueso de la pierna y haces clic donde debería estar la rodilla, el hueso se dividirá en muslo y pantorrilla.

Si revisas el archivo llamado PSD_Character_Boy.psd en Happy Harvest, notarás algunos huesos adicionales, como el llamado face_bone. Estos permiten que la cabeza del personaje gire ligeramente, dándole una apariencia casi tridimensional. También puedes fijarte en los huesos que se utilizan para mover las cejas y los párpados para hacer que el personaje sea más expresivo. Estos son detalles efectivos para agregar si el personaje principal está hablando con NPC.

Puede reparar y cambiar el nombre de los huesos en la vista de lista de huesos. Para abrir esta vista, haga clic en el botón Visibilidad a la derecha de la barra superior y seleccione la pestaña Hueso. Para cambiar el padre del hueso, arrástrelo a la vista de lista. Puede cambiar el nombre de los huesos haciendo clic en el nombre del hueso activo. Nombrar huesos te ayudará a encontrarlos más adelante.

Para verificar que la jerarquía sea correcta, seleccione el botón Vista previa de pose y pruebe algunas poses. Para restablecer la posición de los huesos, presione el botón Restablecer postura en la barra de herramientas.

Para asignar sprites a huesos, necesitarás crear geometría. Comience presionando el botón Geometría automática. Se abrirá una pequeña ventana emergente y podrá definir cómo se creará la geometría.

Es una buena idea poner todos los controles deslizantes en cero para mantener la geometría lo más simple posible. Habilite la opción Pesos para unir huesos a los sprites automáticamente. Al hacer clic en el botón Generar para todos los visibles se crea y establece pesos óseos para todos los sprites. Para hacer esto para un objeto individual, haga doble clic en el objeto. Esto es útil para modificar la geometría de ciertos sprites.

Para controlar completamente una cantidad de vértices y cómo se dobla la geometría, necesitarás editar la malla manualmente con las herramientas en la sección Geometría.

Utilice la menor cantidad de vértices posible. Menos vértices le ayuda a ahorrar en rendimiento, ya que la posición de cada vértice debe calcularse en función de la rotación de los huesos. Menos vértices también hacen que la malla se doble con mejor apariencia, ya que es más fácil establecer pesos para menos puntos. Además, cada plataforma de destino tiene un número de vértices de juego ideal, por lo que siempre es una buena idea optimizar la geometría.

Pesos

Una vez que la geometría de tus sprites esté limpia, es hora de configurar los pesos. Los pesos definen la influencia ósea en cada vértice de cero a uno. Cero significa que un hueso no tiene influencia sobre el vértice y uno significa que el vértice se moverá como si estuviera pegado al hueso. Unos buenos pesos sobre la malla pueden dar como resultado una flexión de apariencia realista. Configurar los pesos incorrectamente puede romper la ilusión del juego y distorsionar tus sprites.

Para comenzar a configurar pesos, debes definir qué huesos afectarán a un determinado objeto. Haz clic en el botón Influencia ósea y selecciona un objeto. En la pequeña ventana emergente, puedes establecer qué huesos influyen en el sprite seleccionado. Establece solo los huesos relevantes que deben afectar al sprite y elimina el resto.

En Happy Harvest, puedes ver cómo varios sprites están influenciados por el mismo hueso. Por ejemplo, hand_l_bone influye en muchas versiones de la mano, incluidas las laterales, frontales y posteriores.

No todo se puede animar girando un hueso. A veces necesitas otra expresión facial o pose de la mano, especialmente si quieres que el personaje cambie la dirección en la que mira. En este caso, puedes intercambiar un sprite por otro con Sprite Swap. Para hacer esto, primero necesitas organizar los sprites en categorías y etiquetas en un recurso de biblioteca de sprites.

La ventana del Editor de la biblioteca de Sprite es donde edita el contenido de un recurso de la biblioteca de Sprite seleccionado. Seleccione un recurso de biblioteca de Sprite y luego seleccione Abrir en el editor de biblioteca de Sprite en su ventana de inspección. También puedes abrir la ventana del Editor de la biblioteca de Sprites a través de Ventana > 2D > Editor de la biblioteca de Sprites.

Un activo de biblioteca de Sprites agrupa los sprites que contiene en categorías y etiquetas, y le permite editar su contenido en la ventana del editor de biblioteca de Sprites. En Happy Harvest, busque LIBRARY_PSD_character_base, que contiene un carácter ficticio. Una vez que hicimos animaciones de muestra para confirmar que la categorización funcionó, creamos variaciones como LIBRARY_PSD_character_boy. Dado que cada etiqueta tiene una versión coincidente en todas las bibliotecas de Sprite, la etiqueta o el sprite al que se hace referencia se puede animar y mostrar correctamente cuando se cambia una biblioteca por otra.

Puedes ver que las variaciones también comparten la misma plataforma o esqueleto al verificar los diferentes archivos PSD, como PSD_character_base y PSD_character_boy (que coinciden con los huesos y la estructura). Estos también se doblan durante la animación.

Para observar las animaciones, seleccione el personaje prefabricado y luego seleccione Prefab_character_base dentro de Visual (se recomienda incluir la parte visual de un personaje como un GameObject secundario y usar el GameObject raíz para colisiones u otra lógica).

El primer fotograma de las animaciones, por ejemplo, ANIM_character_idle_side, modifica los parámetros clave para la dirección para la que se crea la animación. Éstas incluyen:

Valores del solucionador de sprites: Sprite Resolveres un componente adjunto al GameObject de la extremidad que permite intercambiar fácilmente entre sprites de la misma categoría en la Biblioteca de Sprite. En este caso, cuando estés creando la animación, selecciona las versiones “laterales” de los diferentes sprites.

Posición de los huesos: Hay un ligero cambio en la perspectiva desde la vista frontal o posterior a la vista lateral de ¾. Puedes crear esta perspectiva moviendo la posición inicial de los huesos del hombro y la pierna, usando la misma plataforma para las animaciones orientadas hacia adelante y hacia atrás.

Cinemática inversa 2D para la posición inicial del objetivo: El brazo, el pie y las piernas utilizancinemática inversa 2D(2D IK) para calcular la posición de la cadena de huesos en función de una posición objetivo. Puedes ver cómo se restablece la posición objetivo de esos GameObjects mirando los elementos LimbSolver2D_Target.

La forma en que se maneja el cambio de animaciones orientadas hacia la derecha a hacia la izquierda en Happy Harvest es usar ANIM_character_face_left o ANIM_character_face_right. El único parámetro que modifican es la escala del GameObject padre, cambiando X a un valor de uno o uno negativo, lo que hace que todo el objeto visual gire sobre el eje X. Esto se utiliza en el animador que controla al personaje, que se explica en la siguiente sección.

La disposición y transición entre clips de animación en la demostración se realiza con Animator Controller, que configura el flujo de clips de animación y transiciones que pueden leer variables del juego o desencadenar cambios de estado.

En Happy Harvest, si abre la ventana de Animator o el archivo CONTROLLER_PSD_Character_base_prefab, verá que el controlador de Animator para el proyecto está configurado. Examina las capas del lado izquierdo que manejan diferentes partes del cuerpo. La cabeza puede reproducir una animación mientras el cuerpo reproduce otra, y así sucesivamente. Esto ofrece más posibilidades sin aumentar el número de animaciones a realizar. Aquí están las capas de animación en la muestra:

Cabeza: Esta capa se utiliza para hacer que el personaje parpadee y mire a su alrededor. Está marcado con unaApara indicar que es una capa aditiva. Como capa aditiva, combina las animaciones de la cabeza (parpadeando y mirando a su alrededor) con las de las otras capas, como inactivo o caminar. Si esta capa fuera una anulación en lugar de una adición, no combinaría animaciones para una propiedad utilizada al mismo tiempo por varias otras animaciones.

Base: Esto se utiliza para las animaciones del cuerpo principal: caminar, inactivo y usar una herramienta. Cada estado tiene una forma hexagonal para indicar que sonmáquinas de subestados. Si hace doble clic en IDLE, por ejemplo, verá cómo los parámetros DirX, DirY y Velocidad se usan en la propiedad Condiciones de las flechas de transición para activar la transición entre animaciones, según la velocidad y la dirección de orientación.

Voltear: Esta capa hace que el personaje gire hacia la derecha o hacia la izquierda según el parámetro DirX. La animación, como se mencionó anteriormente, cambia la escala de todo el GameObject, de una escala X de uno a uno negativo (dirección X invertida).

Puede usar la pestaña Parámetros (al lado de Capas) para conectar el Animator

Podrás ver los resultados en tu juego si aprendes los principios básicos de animación y dedicas tiempo a pulir el movimiento de los personajes.

Para crear nuevas animaciones para el personaje principal, abra una ventana de Animación a través de Ventana > Animación > Animación.

Seleccione la base prefabricada Prefab_character_base. Al hacer clic en la opción Crear nuevo clip en el menú desplegable con animaciones existentes, se crea un nuevo clip de animación. Un clip de animación es como una grabación lineal de cómo la posición, rotación, escala y otras propiedades de un objeto cambian con el tiempo. Su nueva animación se agregará automáticamente al Controlador de animación existente en la primera capa de animación.

Comience a animar haciendo clic en el botón rojo Grabar. Ahora todos los cambios que hagas en el personaje se grabarán en un clip de animación. Puede continuar modificando la animación cambiando a curvas o mirando propiedades individuales. Comienza a mover los huesos debajo de root_bone y observa cómo el personaje se comporta como una marioneta.

El movimiento del cuerpo humano es complejo. Si quieres tomar un vaso de agua de una mesa, tu mano debe moverse hasta el punto en el espacio que ocupa el vaso. Todo esto lo haces sin siquiera pensar en rotar el brazo y el antebrazo, porque tu cerebro procesa estos cálculos de forma inconsciente.

Para lograr el mismo movimiento en un juego, necesitarás animar la rotación del brazo y del antebrazo al mismo tiempo. Es una tarea desafiante hacer coincidir ambas rotaciones mientras se realiza un movimiento de mano creíble. La herramienta Cinemática inversa 2D , que forma parte del paquete de animación 2D, calcula las rotaciones y permite que una cadena de huesos los mueva a las posiciones objetivo.

Primero deberá agregar un componente 2D de IK Manager en GameObject en la parte superior de la jerarquía, similar al de Prefab_character_base. Este componente es responsable de gestionar todos los IK Solvers del personaje. Al hacer clic en el botón + se agrega un nuevo solucionador. El solucionador calcula la rotación de los huesos para que coincida con la transformación objetivo.

En Happy Harvest, agregamos solucionadores de extremidades. Este es el solucionador estándar para piernas y brazos, que puede resolver hasta dos huesos y el Efector (la propiedad que define el hueso o la Transformación que resuelve IK Solver). Puedes ver cómo funcionan y están organizados mirando los GameObjects llamados LimbSolver2D en la parte inferior de la jerarquía del GameObject padre del personaje.

Happy Harvest incluye una serie de animaciones simples y útiles para accesorios de fondo u otros personajes. Estos son algunos de los aspectos destacados:

- La casa prefabricada de cerdo tiene una configuración sencilla sin IK 2D que funciona bien como elemento decorativo.

- El movimiento oscilante de las farolas (P_Lantern_Hanging) es un clip de animación que se reproduce en bucle y solo cambia la rotación del sprite con el tiempo, sin necesidad de rigging.

- La animación Flipbook, o fotograma a fotograma, es un método rápido para animar personajes de fondo menores con menos gastos generales porque implica menos fotogramas. También se adapta muy bien al efecto de salpicadura de agua.

- El efecto del agua y la brisa que mueve los arbustos y árboles son efectos especiales creados con Shader Graph y VFX Graph.

Si aún no lo ha hecho, asegúrese de descargar estos libros electrónicos avanzados que cubren el desarrollo y renderizado de juegos 2D y efectos visuales (3D y 2D) en Unity:

Arte, animación e iluminación de juegos 2D para artistas.

Introducción a Universal Render Pipeline para creadores avanzados de Unity

La guía definitiva para crear efectos visuales avanzados en Unity

Además, echa un vistazo a nuestras otras demostraciones en 2D, The Lost Crypt y Dragon Crashers.

Encontrarás más recursos para programadores, artistas, artistas técnicos y diseñadores avanzados en el centro de mejores prácticas de Unity.