Spine sobrepasa todos los límites de la tradicional animación en 2D. Las demos que presentamos a continuación ilustran cómo los artistas, animadores y programadores pueden intensificar las secuencias de tareas y las funciones que ofrece Spine para crear fabulosos juegos.
Todas las demos siguientes son demos en vivo que utilizan nuestro spine-ts runtime para WebGL. Descubre cómo utilizamos los Spine Runtimes en las demos con el código fuente de cada demo.
Para realizar la animación tradicional de Sprite es necesario utilizar una imagen por cada cuadro de animación, lo que genera una gran cantidad de hojas de Sprite. Cada animación adicional aumenta el espacio en el disco de tus juegos y los requisitos de memoria, especialmente a frecuencias de cuadro necesarias para una buena reproducción. En poco tiempo representa una gran carga de trabajo para tus artistas y el producto final resulta afectado cuando hay que reducir el número de animaciones para adaptarse a las restricciones de espacio.
Los trabajos de Spine solo guardan los datos de huesos y animaciones junto con un grupo de imágenes individuales que se utilizan para cada animación. Esto permite darle vida a tus juegos ya que puedes incorporarles una gran cantidad de animaciones exclusivas. Además, las animaciones de Spine están interpoladas y de esta manera, la reproducción no presenta nunca inconvenientes, independientemente de la frecuencia de cuadro.
Si bien Spine reemplaza ampliamente la necesidad de la animación tradicional cuadro por cuadro, las imágenes se pueden intercambiar cuando sea necesario. Por ejemplo, un cambio de perspectiva para un torso o alas que se agitan, expresiones faciales alternativas o un fogonazo.
Los mecanismos con ranuras, complementos y orden del dibujo permiten integrar fácilmente las animaciones cuadro por cuadro en las animaciones totalmente dinámicas de Spine. Incluso, Spine puede manipular las imágenes cuadro por cuadro que se muestran en esta demo ajustando a escala la explosión de la cabeza del alienígena.
Un problema común de los juegos 2D es la falta de transiciones de animaciones uniformes. En los juegos 3D, las transiciones entre las animaciones pueden calcularse sobre la marcha en el tiempo de ejecución. Las animaciones también pueden combinarse, por ejemplo, mitad caminando, mitad corriendo. En los juegos 2D que no se crean con Spine, es imposible realizar combinaciones y normalmente las transiciones son discordantes. Los artistas pueden crear cuadros manualmente para cada posible transición, pero incluso así no se logra un efecto uniforme ya que las animaciones se pueden interrumpir en medio de la reproducción.
Spine incorpora los beneficios del mundo de 3D al 2D. Los runtimes de Spine ralizan una transición uniforme y dinámica de una animación a la siguiente otorgando a los personajes una fluidez natural. Las superposiciones permiten que las animaciones se combinen unas encima de otras, por ejemplo, una animación de disparos que se producen mientras el personaje está corriendo o una combinación de caminar y renguear cada vez más a medida que aumenta el daño.
Un personaje de Spine creado con imágenes rígidas en 2D puede también ofrecer resultados excelentes, como el Spineboy de la demo anterior. Para darles a los personajes aún más vida, Spine trae más características del mundo 3D en la forma de mallas y pesos. Las mallas hacen que las imágenes ya no sean rígidas y puedan combinarse y deformarse de la manera que quieras. Los pesos vinculan las mallas a los huesos para que la imagen se deforme automáticamente a medida que se mueven los huesos.
Las mallas también pueden mejorar el funcionamiento de tus juegos ya que reducen el uso del índice de relleno al no dibujar partes transparentes en tus imágenes. Esto es muy importante, especialmente en los dispositivos móviles.
El fabuloso arte de esta demo fue gentileza de Hwadock (dugy). Síguelo en Twitter y en su blog.
Las apariencias de Spine son ideales ya que permiten personalizar, ofrecen variedades y mantienen una carga de trabajo razonable. Con las apariencias, el trabajo de la animación solo se debe hacer una vez, luego se pueden asignar distintas apariencias a los esqueletos reutilizando todas las animaciones. Para una excelente flexibilidad, los Runtimes de Spine te permiten combinar partes de distintas apariencias en el tiempo de ejecución y cubrir todas las posibilidades de personalización.
Las apariencias ofrecen a los jugadores la posibilidad de incorporar su propio toque al mundo de los juegos al dotar a sus avatares con nuevos aspectos, ropas, armas y otros accesorios. Las apariencias también otorgan más ventajas más allá de las animaciones ya que permiten combinar el arte para crear enemigos, elementos y otros objetos del juego y aumentar significativamente la variedad con muy poco trabajo.
El arte de esta demo se puede encontrar en el paquete de personajes 2D Anim Heroes de Unity.
Spine permite utilizar la cinemática inversa para crear movimientos realistas y dinámicos que, de otra manera, sería imposible animar. También permite realizar maniobras más avanzadas para controlar poses complejas mediante un número pequeño de huesos.
Como Spine no utiliza los procesos de horneado ni trazado, la CI se destaca por su implementación en el tiempo de ejecución. Al ubicar los huesos de manera dinámica, las restricciones de CI permiten que tu personaje reaccione fácilmente al entorno, con acciones como apuntar al enemigo, hacer que los pies sigan los desniveles y baches del terreno y mucho más. En esta demo Spineboy mantiene su equilibrio sobre una tabla controlada por el usuario mientras se reproduce una animación al mismo tiempo.
¡Prueba como funciona! Arrastra los círculos rojos para posicionar a Spineboy de manera dinámica. En el cuadro de animación estático se encuentran los botones de disparo y salto y los casilleros de apuntar y animaciones por capas.
When playing animations on separate tracks, normally the pose from lower tracks is overridden by higher tracks. With an additive track, its pose is added to the result of the lower tracks. This enables blending the poses from multiple independent animations with varying influences, such as different facial expressions like 50% happy, 20% mad, and 30% excited.
The owl in this demo has 4 animations, one for each direction. The independent poses of each of these animations are blended together depending on the mouse cursor's position relative to the center of the canvas.
Con frecuencia, una parte del personaje sigue una ruta abierta o cerrada. En lugar de ingresar este movimiento manualmente, las restricciones de ruta de Spine pueden utilizarse para hacer que los huesos sigan una ruta automáticamente. La ruta combinada de Bézier consiste en un conjunto de puntos interconectados que permiten ondular y dar forma a la misma. La misma ruta puede ser animada y recibir pesos en los huesos para que se deforme automáticamente a medida que se mueven los huesos.
En esta demo se conecta una malla de enredadera a los huesos que están restringidos a una ruta. Cuantos más vértices haya en la malla, más fluidas serán las ondulaciones.
Las restricciones de ruta también se pueden utilizar para crear fabulosos efectos durante el tiempo de ejecución. Mueve las manijas rojas para modificar la ruta de manera dinámica y ver como la enredadera la sigue sin problemas.
Las restricciones de ruta permiten realizar maniobras importantes como lo muestra Stretchyman en esta demo. Para los brazos y piernas, las mallas tienen pesos conectados en huesos muy pequeños que deben seguir rutas simples para los miembros. Las rutas, luego reciben pesos en los huesos que se deben mover para controlar los miembros. Esta configuración permite controlar una gran cantidad de huesos con apenas unos pocos huesos. Esto no solo facilita la animación, sino que, en el tiempo de ejecución, solo es necesario ajustar unos pocos huesos para posicionarlos de manera dinámica.
Mueve las manijas rojas y haz bailar a Stretchyman.
A veces, algunas partes de la animación debe estar parcialmente ocultas, como en este ejemplo en el que Spineboy sale de un portal. Los recortes son prácticos en este caso al restringir la presentación a una región poligonal. Solo se muestran las partes del esqueleto que se encuentran dentro de la región predefinida y animada. Esto permite incorporar muchos efectos que, de otra manera, no hubiesen sido posibles, como ventanas, iluminación y muchos más. Por ejemplo, una animación en la que el personaje pase por un rayo X.
La animación de esqueletos complejos con muchas piezas interdependientes puede llegar a ser una tarea tediosa. Las restricciones de transformación de Spine eliminan estas complicaciones desbloqueando poderosas estrategias. Al restringir transformaciones de un hueso a la transformación de otro hueso, solo es necesario animar uno de los huesos y los demás se ajustan automáticamente. Si bien, parece algo muy simple, con estrategias avanzadas se puede hacer un muy buen uso de esto para automatizar el comportamiento del esqueleto al posicionarlo.
Las restricciones de transformación también son ideales para aplicar a las máquinas, como es el caso del tanque en esta demo. En lugar de ingresar la rotación de cada rueda por separado, se anima una sola rueda y las demás la siguen mediante una restricción de transformación. Para devolver individualismo a las partes que tienen la restricción se puede recurrir a la compensación y combinación.
Las cadenas del tanque circulan mediante una restricción de ruta. Esta animación no se podría realizar sin rutas. La ruta recibe pesos en las ruedas, y la misma se ondula automáticamente a medida que las ruedas se mueven hacia arriba y abajo.
En esta demo, la rotación de las dos ruedas más pequeñas está restringida por la rotación de la rueda más grande. Además, el traslado de la rueda grande también está restringido para que la misma permanezca en medio de las dos ruedas más pequeñas.
Compara los requisitos de memoria y espacio de disco para Spine con las animaciones de la hoja de Sprite.