Démos Spine

Spine va bien au-delà des limites de l’animation traditionnelle en 2D. Les démos ci-dessous illustrent des façons dont vos artistes, animateurs et programmeurs peuvent tirer parti des flux de travail améliorés et des capacités proposées par Spine pour construire des jeux étonnants.

Toutes les démos ci-dessous sont des démos live, utilisant notre spine-ts runtime pour WebGL. Découvrez comment nous avons utilisé les runtimes Spine dans les démos en explorant le code source de chaque démo.

Spine comparé aux feuilles sprite

Spine
All animations, all frame rates
0.18 MB
Sprite sheet
1 second of animation @ 30FPS
3.39 MB = 18x larger

L’animation traditionnelle avec sprites nécessite une image pour chaque image de l’animation, ce qui résulte en une énorme quantité de feuilles sprite. Chaque animation supplémentaire accroît beaucoup les demandes en espace disque et mémoire de votre jeu, particulièrement pour des nombres d’images par seconde nécessaires à un jeu fluide. Cela devient rapidement un travail énorme pour vos artistes, et votre produit fini souffre lorsque le nombre d’animations doit être réduit pour respecter les contraintes de taille.

Les animations Spine ne stockent que l’os et les données d’animation, couplées à un ensemble unique d’images individuelles réutilisées pour chaque animation. Ceci vous permet de donner vie à vos jeux en les emplissant d’animations uniques. Les animations Spine sont aussi interpolées pour que la lecture soit toujours parfaitement fluide, quel que soit le nombre d’images par seconde.

Comparez les exigences en mémoire et espace disque de Spine par rapport aux feuilles d’animations Spine.

Vitesse d’animation
 

Spine avec animation basée sur les images.

Si Spine remplace largement le besoin d’une animation traditionnelle image par image, les images peuvent toujours être échangées si besoin est. Par exemple, un changement de perspective pour un torse ou une aile qui bat, d’autres expressions faciales, ou un éclair.

Les emplacements, pièces jointes et mécanismes d’ordre de dessins de Spine vous permettent d’intégrer facilement des animations image par image à vos animations Spine par ailleurs totalement dynamiques. Encore mieux, Spine peut manipuler les images image par image, montrées dans cette démo en mettant à l’échelle la tête en train d’exploser de l’extra-terrestre.

Transitions et couches

Smooth
Abrupt

Un désavantage souvent perçu des jeux en 2D est leur manque de transitions d’animation fluides. Dans les jeux en 3D, les transitions entre les animations peuvent être calculées instantanément au runtime. Les animations peuvent même être mélangées, par exemple à moitié marchant et à moitié courant. Dans les jeux en 2D sans Spine, mélanger est impossible, et les transitions ont en général des secousses. Les artistes peuvent créer manuellement des images pour chaque transition possible mais même cela n’aide pas lorsque les animations peuvent être interrompues au milieu de leur lecture.

Spine apporte les avantages du monde 3D dans celui de la 2D. Les runtimes Spine effectuent une transition fluide et dynamique entre deux animations, donnant à vos personnages une fluidité d’apparence naturelle. Les couches permettent aux animations d’être mélangées en haut l’une de l’autre, par exemple pour jouer une animation de tir lorsque votre personnage court, ou pour mélanger de plus en plus la marche et le boitement au fur et à mesure que les dégâts surviennent.

Vitesse d’animation
 

Déformation de maillage

Un personnage Spine constituté d’images 2D rigides peut déjà donner d’excellents résultats, tel que Spineboy dans la démo ci-dessus. Pour apporter encore plus de vie à vos personnages, Spine utilise d’autres astuces de l’univers 3D sous forme de maillages et de poids. Avec les maillages, les images ne sont plus rigides, peuvent être pliées et déformées comme vous le souhaitez. Les poids joignent les maillages aux os, et les images se déforment donc automatiquement lorsque les os sont déplacés.

Les maillages peuvent aussi améliorer les performances de votre jeu, diminuant l’utilisation du taux de remplissage en ne dessinant pas les parties transparentes de vos images. Ceci est particulièrement important sur les appareils portables.

Les superbes images de cette démo ont été gracieusement fournies par Hwadock (alias dugy). Suivez-le sur Twitter et son blog.

Afficher les os
Afficher les triangles

Habillages

La fonctionnalité d’habillages de Spine est parfaite pour apporter de la personnalisation et de la variété tout en gardant votre charge de travail à un niveau raisonnable. Avec les habillages, le travail d’animation ne doit être réalisé qu’une fois, puis vous pouvez attribuer différente apparences à vos squelettes tout en réutilisant toutes vos animations. Pour une souplesse suprême, les runtimes Spine vous permettent de combiner des parties de différents habillages au runtime, couvrant tous les besoins possibles en personnalisations.

Les habillages donnent aux joueurs la possibilité d’ajouter leur propre touche à l’univers de votre jeu en équipant leurs avatars de nouvelles apparences, vêtements, armes et autres accessoires. Les habillages vous donnent aussi plus de kilométrage à partir de vos animations : mélangez et faites correspondre votre art pour les ennemis, les objets et autres éléments du jeu, afin d’augmenter grandement la variété pour peu d’efforts.

Les images de cette démo se trouvent dans le pack de personnages 2D Anim Heroes pour Unity.

Habillages au hasard

Inverser la cinématique

La prise en charge de Spine de cinématiques inversées permet des mouvements réalistes et dynamiques qu’il serait autrement très difficile ou impossible d’animer. Elle permet aussi des trucages plus avancés, où des poses complexes peuvent être facilement contrôlées par un petit nombre d’os.

Comme Spine n’utilise pas la cuisson ou le traçage, Ci fait vraiment des merveilles au runtime. En positionnant les os de manière dynamique au runtime, les contraintes CI permettent à votre personnage de réagir facilement à l’environnement, comme viser des ennemis, avoir les pieds qui suivent les pentes et sautent sur le sol, et bien plus. Dans cette démo, Spineboy est équilibré sur un hoverboard contrôlé par l’utilisateur tout en lisant en même temps une animation.

Essayez ! Déplacez les cercles rouges pour poser Spineboy de façon dynamique. Les boutons de tir, de saut et de visée cochent les animations de couches sur l’animation inactive.

Viser
Afficher les os

Additive animation blending

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.

Contraintes de chemin

Une partie de personnage suit souvent un chemin ouvert ou fermé. Plutôt que de mettre manuellement une clé sur ce mouvement, les contraintes de chemin de Spine peuvent être utilisées pour que les os suivent automatiquement un chemin. Le chemin de Bézier composite est fait d’un ensemble de points interconnectés vous laissant courber et donner forme au chemin. Le chemin lui-même peut être animé et recevoir des poids aux os pour que les os se déforment automatiquement lorsque les os sont déplacés.

Dans cette démo un maillage est attaché aux os qui sont contraints à un chemin. Plus il y a de sommets dans ce maillage, plus il se pliera de manière fluide.

Les contraintes de chemin peuvent aussi être utilisées avec beaucoup d’effet au runtime. Déplacez les poignées rouges pour modifier de manière dynamique le chemin et regardez le maillage le suivre sans à coup !

Afficher les os et les chemins

Les contraintes de chemin permettent de puissants trucages montrés par Stretchyman dans cette démo. Pour les bras et les jambes, les maillages ont des poids vers de nombreux petits os qui sont ensuite contraints à suivre de simples chemins pour les membres. Les chemins reçoivent alors des poids vers les os pouvant être déplacés pour contrôler les membres. Ce système permet à un grand nombre d’os d’être contrôlés par seulement quelques os. Non seulement cela facilite l’animation, mais au runtime seuls quelques os doivent être ajusté pour poser de manière dynamique.

Déplacez les poignées rouges et faites danser Stretchyman !

Afficher les os et les chemins

Rogner

Des parties de l’animation doivent parfois être en partie cachées, comme sur cet exemple où Spineboy sort d’un portail. Le rognage est pratique dans ces cas, en contenant le rendu à une surface de polygone. Seules les parties du squelette à l’intérieur de la surface à animer prédéfinie sont affichées. Cela permet de nombreux effets qui ne seraient pas possibles autrement, telles que les fenêtres, les effets d’éclairage et autres. Il est aussi possible de faire en sorte que le rognage n’affecte qu’un sous-ensemble du squelette. Par exemple une animation où le personnage traverse un rayon X.

Afficher les triangles

Transformer les contraintes

Animer des squelettes complexes avec de nombreuses parties interdépendantes peut être laborieux. Les contraintes de transformation de Spine suppriment ce problème en déverrouillant d’autres puissants trucages. En contraignant les transformations d’os à la transformation d’un autre os, vous n’avez qu’à animer l’un des os et les autres sont automatiquement ajustés. Même si cela paraît simple, les trucages avancés peuvent utiliser cela pour automatiser la manière dont un squelette se comporte quand il est posé.

Les contraintes de transformation sont aussi excellentes pour les machines, tel que le tank dans cette démo. Au lieu de placer une clé pour la rotation de chaque roue individuelle, une seule roue est animée tandis que les autres suivent via une contrainte de transformation. Compenser et mélanger peut remettre de l’individualisation dans les parties contraintes.

Les chenilles sur le tank circulent en utilisant une contrainte de chemin, qui serait impossible à animer sans chemins. Le chemin a un poids aux roues, et le chemin se courbe automatiquement lorsque les roues montent et descendent.

Afficher les os et les chemins

Dans cette démo, la rotation des deux roues les plus petites est contrainte par la rotation de la grande roue. La translation de la grande roue est aussi contrainte pour qu’elle reste entre les deux petites roues.

Compensation de rotation
 
Mélange de translation