Spine Demos

Spine geht weiter über die Möglichkeiten traditioneller 2D Animation hinaus. Die unten stehenden Demos illustrieren beispielhaft, wie Ihre Künstler, Animatoren und Programmierer ihre Arbeitsabläufe stark verbessern können um fantastische Spiele zu bauen.

Alle unten stehenden Demos sind Live Demos, aufbauend auf unserer spine-ts Laufzeit-Bibliothek für WebGL. Der Source Code zeigt Ihnen wie wir die Spine Laufzeit-Bibliothek in den Demos verwendet haben.

Spine versus sprite sheets

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

Traditionelle Sprite Animation benötigt ein Bild für jedes Frame einer Animation. Dies resultiert in riesigen Sprite Sheets. Jede weitere Animation vergrößert den benötigten Speicher für Ihr Spiel, speziel bei hohen Frameraten. Dies führt auch zu einem enormen Aufwand für ihre künstlerisches Team. Ihr finales Produkt kanns ein volles Potential nicht entfallten, wenn Sie letztendlich Animationen entfernen müssen um Speichergrenzen nicht zu überschreiten.

Spine Animationen speichern lediglich die Knochen- und Animationsdaten, zusammen mit einem einzelnen Set an individuellen Bildern die für jede Animation wiederverwertet werden. Dies erlaubt es Ihnen, Ihr Spiel durch eine beinahe unbegrenzte Anzahl an Animationen lebhafter zu machen. Auch werden Spine Animationen interpoliert: das Abspielen ist unabhängig der Framerate immer geschmeidig.

Vergleichen sie Haupt- und Plattenspeicher Anforderungen von Spine und Sprite Sheet Animationen.

Animationsgeschwindigkeit
 

Spine mit Einzelbildanimationen

Spine ersetzt die klassische Einzelbildanimation zum Großteil. Sie müssen aber nicht vollends darauf verzichten. Für Spezialfälle können Sie auch mit Spine weiterhin Einzelbildanimationen einbinden, z.B. um die Perspektive von Körperteilen oder Flügeln zu ändern oder verschiedene Gesichtsausdrücke zu zeigen.

Spine's Slots, Attachments und Zeichenreihenfolgemechanismus erlauben es Ihnen, Einzelbildanimationen in einfacher Weise in ihre ansonsten voll dynamische Spine Animation zu integrieren. Besser noch: Spine can die Einzelbilder manipulieren, in diesem Demo illustriert durch die Skalierung des explodierenden Alien Kopfes.

Übergänge und Überlagerungen

Smooth
Abrupt

Ein oft erlebter Nachteil von 2D Spielen ist der Mangel an weichen Animationsübergängen. In 3D Spielen können Übergänge zwischen Animationen dynamisch zur Laufzeit berechnet werden. Animationen können auch überlagert werden, z.B. halb Gehen und Rennen. In 2D Spielen ohne Spine sind weiche Übergänge und Überlagerungen unmöglich. Typischerweise sind Übergänge abrupt. Künstler können manuel Übergänge für jede mögliche Animationskombination erstellen, aber selbst diese zeitintensive Arbeit hilft bei Animationen, die vor ihrem Ende unterbrochen werden, nicht.

Spine bringt die Vorzüge aus der 3D Welt in die 2D Welt. Die Spine Laufzeit-Bibliothek kann weich und dynamisch Überänge von einer Animation zur nächsten berechnen und sorgt so für natürlich aussehende Bewegungen Ihrer Charaktere. Überlagerung erlaubt es mehreren Animation miteinander zu mischen, und ermöglicht es Charakteren z.B. gleichzeitig zu laufen und zu schießen, oder vom Laufen in ein Humpeln überzugehen, abhängig davon wieviel Schaden der Charakter genommen hat.

Animationsgeschwindigkeit
 

Mesh Deformationen

Spine Charaktere bestehend aus rigiden 2D Bilden erzielen bereits exzellente Ergebnisse, wie z.B. Spineboy im letzten Demo. Um Ihren Charakteren noch mehr Leben einzuhauchen, bringt Spine weitere Tricks aus der 3D Welt in Form von Meshes und deren Gewichtung. Mit Meshes sind Bilder nicht mehr rigide und können gestaucht und defomiert werden. Gewichte verbinden Meshes mit Knochen, womit die Bilder sich, in Abhängigkeit zur Knochenbewegung, automatisch defomieren.

Meshes können auch die Performance Ihres Spiels verbessern indem die Füllrate, durch das wegfallen des Zeichnens transparenter Teile der Bilder, verringert wird. Dies ist speziel auf mobilen Geräten wichtig.

Die fantastischen Artworks und Animationen dieser Demos wurden uns freundlicherweise von Hwadock (vulgo dugy) bereitgestellt. Folgen Sie ihm auf Twitter und seinem Blog.

Knochen zeigen
Dreiecke anzeigen

Skins

Spines Skin Funktion eignet sich perfekt um Anpassungen und Varietät zu erstellen und gleichzeitig den Arbeitsaufwand gering zu halten. Mit Skins müssen Sie nur ein einziges mal animieren und können dann das Aussehen ihrer Skelette ändern ohne Animationen anpassen zu müssen. Für weitere Flexibilität sorgt die Spine Laufzeit-Bibliothek, die es Ihnen erlaubt Teile verschiedener Skins zur Laufzeit zu kombinieren.

Skins geben Spielern die Möglichkeit ihren eigenen Fingerabdruck in Ihrer Spielewelt zu hinterlassen, in dem sie ihre Avatare mit neuem Ausehen, Kleidung, Waffen und anderen Accessoirs ausstatten können. Skins lassen Sie auch das meiste aus Ihren Animationen herausholen: mischen sie die Artworks für Gegner, Gegenstände und andere Spieleobjekte nach belieben, um die Vielfalt in Ihrem Spiel ohne große Mühe zu erhöhen.

Die Artworks für dieses Demo finden Sie im 2D Anim Heroes character pack für Unity.

Zufällige Skins

Inverse Kinematik

Spines Unterstützung Inverser Kinematik erlaubt es, realistische und dynamische Bewegungen, die mit traditioneller 2D Animation unmöglich wären, möglich zu machen. Sie erlaubt anspruchsvolles Rigging, mit Hilfe dessen komplexe Posen einfach mit einer kleinen Anzahl an Knochen manipuliert werden können.

Da Spine weder Baking oder Plotting verwendet, scheint IK speziel zur Laufzeit. In dem man Knochen zur Laufzeit dynamisch mit Hilfe von IK platziert werden, können ihren Charakteren einfach auf die Spieleumwelt zu reagieren und z.B. auf Gegener zielen, oder mit ihren Füßen dem Verlauf des Untegrundes folgen. In diesem Demo balanziert Spineboy auf einem Benutzer-gesteuerten Hoverboard während gleichzeitig eine Animation abgespielt wird.

Probieren Sie es aus! Ziehen sie die roten Kreise umher um Spineboy dynamisch zu positionieren. Die "Schießen" und "Springen" Buttons sowie die "Zielen" Checkbox mischen dynamische Animationen und Benutzerinteraktionen mit der Ruheanimation.

Zielen
Knochen zeigen

Additives Animations-Blending

Werden Animationen auf verschiedenen Spuren abgespielt, werden Posen der niedrigeren Spuren von jenen höherer Spuren überschrieben. Mit additiven Spuren werden Posen der unteren Spuren mit denen der höheren Spuren additiert. Dies erlaubt das mischen verschiedenener Posen aus unterschiedlichen, unabhängigen Animation mit variierenden Anteilen, wie z.B. Gesichtsausdrücke wie 50% glücklich, 20% zorning und 30% aufgeregt.

Die Eule in diesem Demo hat 4 Animation, eine für jede Richtung. Die unabhängigen Posen jeder Animation werden in Relation des Mauszeigers relative zur Zeichenflächenmitte zusammengemischt.

Pfad Constraints

Oft folgt ein Teil eines Charakters einem offenen oder geschlossenen Pfad. Anstatt diese Bewegung manuel zu definieren, können Sie Spines Pfad Constraints dazu verwenden, um Knochen automatisch einem Pfad folgen zu lassen. Der zusammengesetzte Bézier Pfad besteht aus einer Menge von verbundenen Punkten die es Ihnen erlauben den Pfad zu manpulieren. Der Pfad selbst kann ebenfalls animiert und sogar mit Knochen gewichtet werden, damit der Pfad automatisch den Bewegungen von Knochen folgt.

In diesem Demo sehen Sie eine Rebe bestehend aus einem Mesh welches an Knochen gebunden ist. Die Knochen sind wiederum auf den Pfad beschränkt. Jehr mehr Punkte im Mesh, desto weicher die Deformation.

Pfad Constraints können auch effektiv zur Laufzeit eingesetzt werden. Bewegen Sie die roten Kontrollelemente um den Pfad dynamisch zu modifizieren und sehen Sie, wie die Rebe dem Pfad nahtlos folgt!

Knochen & Pfade anzeigen

Pfad Constraints ermöglichen leistungsfähiges Rigging, welches unser Stretchyman Demo zeigt. Die Meshes für Arme und Beine sind an viele kleine Knochen gebunden und gewichtet. Die Knochen sind in ihrer Bewegung auf das Folgen der simplen Pfade beschränkt. Die Pfade sind wiederum an Knochen gebunden und gewichtet und können dazu verwendet werden, die Extremitäten zu kontrollieren. Diese Konstruktion erlaubt es, eine große Zahl an Knochen über eine viel kleiner Menge an Knochen zu kontrollieren. Dies macht nicht nur das Animieren einfacher, es simplifiziert auch die Manipulation zur Laufzeit.

Bewegen Sie die roten Kontrollelemente um Stretchyman zum Tanzen zu bringen!

Knochen & Pfade anzeigen

Clipping

Manchmal müssen Teile einer Animation versteckt werden, wie in diesem Beispiel, in dem Spineboy durch ein Portal springt. Clipping hilft dabei, in dem es das Zeichnen auf eine polygonale Region beschränkt. Nur jene Teile des Skeletts innerhalb der vordefinierten, animierbaren Region, werden gezeigt. Dies ermöglicht viele Effekte die anderweitig nicht möglich wären, wie z.B. Fenster, Lichteffekte und mehr. Es ist auch möglich nur einen Teil des Skeletts von Clipping beschränken zu lassen. Z.B. ein Charakter, der durch eine Röntgenanlage geht.

Dreiecke anzeigen

Transformierungs Constraints

Komplexe Skelette mit voneinander abhängigen Teilen zu animieren kann langwierig sein. Spines Transformierungs Constraints erleichtern dies und ermöglichen komplexeres Rigging. Indem Knochentransformationen auf jene eines anderen Knochens beschränkt werden, müssen Sie nür einen Knochen animieren, während die anderen Knochen automatisch angepasst werden. Wenn auch oberflächlich simpel, so erlaubt es diese Funktion, viele Animationsaufgaben zu automatisieren.

Transformierungs Contraints eignen sich auch perfekt zur Animation von Maschinen, wie z.B. dem Panzer in diesem Demo. Anstatt jedes einzelne Rad individuell zu animieren, muss nur ein einzelnes Rad animiert werden, während die anderen Rädern dessen Bewegungen über ein Transformierungs Constraint folgen. Über Offsetting und Mischen können beschränkte Teile individualisiert werden.

Die Ketten des Panzers drehen sich über ein Pfad Constraint, was ohne Pfade unmöglich zu animieren wäre. Der Pfad ist an die Räder gewichtet, und folgt so automatisch wenn sich die Räder auf und ab bewegen.

Knochen & Pfade anzeigen

In diesem Demo ist die Rotation der zwei kleineren Räder auf die Rotation des großen Rades beschränkt. Auch ist die Translation des großen Rades so beschränkt, dass es immer zwischen den zwei kleinen Rädern bleibt.

Rotationsoffset
 
Translations Mix