Share
En este tutorial, nos centraremos en las herramientas de animación 2D basadas en huesos que proporciona 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 esta publicación, configuraremos el proyecto, definiremos los activos y haremos los preparativos iniciales para la animación..
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..
Este tutorial está dirigido principalmente a dos grupos de desarrolladores de juegos:
Asumimos que tiene algunas habilidades de programación, por lo que no cubriremos el código en profundidad. Para seguir este tutorial, por supuesto necesitarás descargar Unity.
Para comenzar a utilizar Unity rápidamente, siga nuestro tutorial anterior que lo introduce en el entorno Unity 2D y sus herramientas y características. Le recomendamos encarecidamente que haga esto si no está familiarizado con Unity..
Esta demostración muestra el dragón animado que buscamos:
Ejecuta Unity y crea un nuevo proyecto seleccionando Nuevo proyecto… desde el Expediente menú. los Asistente de proyecto aparecerá. Ahora, crea un nuevo 2D proyecto, seguido de una nueva carpeta llamada Sprites (dentro de tu Bienes directorio).
Ahora que tiene organizada la carpeta del proyecto, es hora de importar los recursos del juego. Puede encontrarlos en la carpeta Activos del repositorio de GitHub de este tutorial. (Usted puede simplemente hacer clic Descargar ZIP en la última página si no está familiarizado con GitHub.) Tenga en cuenta que esta carpeta incluye recursos para toda la serie de tutoriales, por lo que hay algunos que no utilizará hasta más adelante..
Antes de continuar, compara las siguientes dos imágenes:
En la primera imagen, el dragón se divide en varias partes del cuerpo (cabeza, cuerpo, brazos, etc.). En el segundo, el ninja se muestra en varias poses, con una secuencia de poses para diferentes acciones. Esto te permite imaginar claramente cómo se moverá el avatar en tu juego.
El sprite ninja es lo que llamamos un hoja de sprites o atlas de sprites. Este tipo de sprite era muy popular en los juegos clásicos en 2D, y todavía es muy común en la actualidad..
El sprite dragón requiere una técnica de animación 2D más reciente, normalmente llamada animación basada en el hueso. Como su nombre lo indica, la animación se realizará en base a cada hueso, donde cada hueso del cuerpo puede tener una acción o animación específica. La separación de todas las partes principales del cuerpo del personaje permite a los desarrolladores crear las animaciones directamente en el motor. Esta nueva técnica de animación es muy similar a la que se usa en la animación 3D..
En este tutorial, nos centraremos en la animación basada en huesos. Sin embargo, tenga en cuenta que la unidad no hace cierto Animación basada en huesos, así que la simularemos..
Arrastre el archivo sprite al editor y suéltelo en el Sprites carpeta, como asi:
Antes de que cualquier personaje esté listo para la animación, debe agregar un Escena al proyecto. Crear un Escenas carpeta en tu Bienes directorio, a continuación, cree una nueva escena y guárdelo como Prueba.scene dentro de esta carpeta Al final de este paso, deberías tener algo como esto:
Ahora, todavía en el Proyecto pestaña, seleccione la continuar sprite, luego mira el Inspector panel:
Como se puede ver en el Modo Sprite propiedad en el Inspector, la Modo Sprite se establece en Soltero. Esto significa que el motor utilizará toda la textura como un todo al crear un nuevo sprite. Como tenemos las partes del cuerpo separadas en el continuar, No queremos que eso suceda. Por lo tanto, necesitamos cambiar el Modo Sprite desde Soltero a Múltiple.
Cuando cambia la opción, un nuevo botón etiquetado Editor de Sprite aparece:
Actualmente, el Editor de Sprite La herramienta de corte no funciona bien en imágenes comprimidas. Con el fin de garantizar el mejor resultado para los sprites animados, necesita cambiar el Formato valor en la parte inferior de la Inspector pestaña de la opción por defecto, Comprimido, a Color verdadero. Luego, haga clic en Aplicar.
Ahora, seleccione el sprite dragón y haga clic en el Editor de Sprite botón. Aparecerá una nueva ventana:
En la esquina superior izquierda de la ventana, encontrará el Rebanada botón. Haga clic en él, y aparecerá otro menú:
Este menú le permite cambiar los parámetros de cómo el sprite será cortado por el motor. Si establece las rodajas a Automático, El motor intentará detectar las diferentes partes del personaje que tienes en la imagen. Puede definir un tamaño mínimo para los cortes, un pivote (el punto alrededor del cual gira el corte) y uno de los tres métodos:
También puede configurar el Tipo parámetro a Cuadrícula. Esto le dará otras opciones:
Al igual que en el modo automático, puede seleccionar el punto de giro del sprite, pero también tiene una opción para definir el tamaño de píxel. Este valor determina la altura y el ancho de los mosaicos en píxeles..
Para esta imagen en particular, seleccione la Automático modo y presione el Rebanada botón. El resultado debe ser similar a este:
Como puede ver, el editor dividió las distintas partes del sprite en diferentes rectángulos. Estas son las partes que usarás para construir tu personaje. Como se mencionó anteriormente, esta no será una animación perfecta, pero cada parte se animará por separado.
Si hace doble clic en uno de los rectángulos generados, se abrirá un panel emergente con las propiedades de esa parte en particular del sprite:
Puede cambiar el nombre del sprite generado, su posición, su tamaño y su punto de pivote. También puede cambiar los valores de posición y tamaño arrastrando los puntos azules en los vértices de los rectángulos. El círculo azul en el centro del rectángulo seleccionado indica el punto de pivote.
Para este sprite, es seguro dejar que Unity cree los sprites individuales automáticamente. Sin embargo, en sprites más complejos es posible que desee definir los sprites manualmente. Puede hacerlo haciendo clic y arrastrando el botón izquierdo del ratón sobre la imagen para definir un rectángulo.
Una vez que sueltes el botón del ratón, Unity creará un sprite desde ese rectángulo..
Puede presionar el Recortar Botón para ajustar el rectángulo al sprite. Luego, simplemente repita este proceso a todos los sprites que desee generar.
Dado que el modo automático funciona bien para esta imagen, no tiene que definir los sprites manualmente.
Lo siguiente que debe hacer es ajustar los puntos de pivote en los distintos sprites generados. Este paso es muy importante para la animación..
Básicamente, debe arrastrar el punto de pivote al área donde el sprite se unirá a la parte del cuerpo principal. Por ejemplo, desea mover el pivote de la cabeza cerca del área del cuello. Esto asegurará que, cuando animes al personaje, todos los movimientos, por ejemplo las rotaciones, se orienten alrededor de ese punto, permitiendo que el personaje se mueva de una manera realista. Si dejas los puntos de giro en sus lugares originales, terminarás con extrañas animaciones, ya que el personaje no podría moverse de una manera realista..
Piense en los puntos de pivote de los miembros como las articulaciones de una muñeca. Para que la muñeca se mueva, las uniones deben colocarse correctamente, ¿verdad? Las mismas reglas se aplican para los puntos de pivote..
Para mover el punto de pivote, arrastre el círculo azul en el centro de cada sprite al lugar correcto (que es el punto donde se debe conectar a la parte del cuerpo principal). En la siguiente imagen puedes ver el pivote de la cabeza en su lugar correcto:
La parte de la cola debe verse así:
¿Se te ocurrió la idea? ¡Genial! Repita el proceso para las partes restantes. (Puede dejar el pivote para el punto negro en su centro; explicaremos más sobre esto en la siguiente sección.) Recuerde, desea una animación de dragón, no una animación de Frankenstein..
Una vez que hayas terminado, haz clic en Aplicar:
Si echas un vistazo rápido a la carpeta donde tienes los sprites, podrás ver que el sprite dragón ahora tiene una flecha al lado:
Presione la flecha y podrá ver todas las partes que conforman nuestro personaje de dragón por separado:
Ahora que tienes tu personaje dividido en diferentes sprites, puedes comenzar a colocar los sprites en la escena. Ya que el dragón está compuesto de varias partes del cuerpo, necesitas construir el personaje..
Lo primero que debes hacer es arrastrar el punto negro del sprite dragón a la escena. Este objeto funcionará como un centro de masa para tu personaje Más tarde, centrarás tu atención allí; Sin embargo, por ahora, solo debes saber que esta es la base de tu personaje..
Ahora, toma el cuerpo del dragón y colócalo sobre el punto negro, así:
Repite este proceso hasta que hayas montado tu dragón. Al final debería verse algo como esto:
Finalmente tienes tu dragón listo, sin embargo, como puedes notar, parece extraño. Algunas partes que deberían estar debajo del cuerpo están sobre él, o viceversa. Eso sucede porque agregamos las partes del dragón sin ningún orden específico.
Antes de resolver ese problema, vamos a convertir el sprite dragón en un único objeto de juego. Como te habrás dado cuenta, ahora mismo, las distintas partes del dragón funcionan como objetos individuales del juego: debes agruparlos en un solo objeto del juego antes de poder comenzar a animarlos..
Para agrupar correctamente todos los sprites, utiliza el sprite con el punto negro como objeto principal del juego; Todas las demás partes del cuerpo deben agruparse bajo la masa del sprite. Simplemente arrastre un sprite al sprite de punto negro dentro del Jerarquía para agruparlo bajo el punto negro.
En la siguiente imagen puedes ver cómo debe verse la jerarquía de sprites después de haber agrupado los objetos del juego.
Antes de continuar, cambia el nombre de tu objeto base de juego a Continuar. Cuando mueves el Continuar objeto del juego, ahora puedes mover todas las partes del personaje en la escena.
¿Pero qué pasa si quieres mover un solo sprite? Por ejemplo, si desea mover solo la mano, sabe que el brazo está conectado a la mano, por lo tanto, si lo mueve, toda la mano debería moverse también, ¿correcto? Si intentas hacer esto, verás que ese no es el caso. Cuando selecciona el brazo y lo mueve, las partes restantes del cuerpo permanecen inmóviles. Entonces, para mover la parte del cuerpo completa, necesitas crear una jerarquía dentro de tu sprite.
Para hacer este proceso más intuitivo, cambie el nombre de las partes del cuerpo (haciendo clic derecho y seleccionando Rebautizar) con sus respectivos nombres, así:
Con respecto a la jerarquía, piense en el personaje como un árbol, con raíces, un tronco y ramas. El punto negro actúa como la raíz del árbol; Cuando lo mueves, se mueve todo el cuerpo del personaje. Después de la raíz viene el tronco; en este caso, su tronco será el cuerpo del personaje, por lo que este será el siguiente sprite en la jerarquía. Todas las otras partes del cuerpo son ramas del árbol. Sin embargo, todavía puede tener ramas de ramas como, por ejemplo, en la cola, la Punta de cola es una rama de la Cola, y así…
Organiza los sprites de tu personaje siguiendo esta jerarquía:
Ahora, si mueve la parte superior del brazo, seguirán todas las partes del brazo. Genial no lo es?
Antes de que puedas comenzar a animar al personaje, todavía hay un último detalle que debemos cuidar. Como hemos comentado, las partes del sprite no se están dibujando en el orden correcto. Para resolver esto, debes cambiar el valor de la Orden en la capa parámetro para cada sprite individual.
Para asegurarse de que el tutorial sea exitoso, use los siguientes valores para cada Sprite:
Accentsconagua
0 3 4 4 5 4 5 1 2 1 2 4 5 Al final, tu dragón debería verse así:
Para terminar esta parte, solo centra tu personaje en la pantalla. Haz esto cambiando el Transformar valores de la posición central a (0, 0, 0).
Con esto concluye la primera parte de la serie. Ahora tiene un carácter 2D con el orden y la jerarquía de sprites correctos.
Si tiene alguna pregunta o comentario sobre lo que hemos cubierto hasta ahora, no dude en dejar un comentario a continuación..
