Sie befinden sich hier: / de / tutorials / charakter-animation-mit-spine2d

2D-Animationen mit Spine

In diesem Artikel können Sie erfahren wie ein Character (oder auch Figur) mit Hilfe von Spine animiert wird. Spine ist ein Tool von Esoteric Software. Spine setzen wir hauptsächlich für 2D-Animationen ein.

Das Bild zeigt ein graues Eichhörnchen

1 - Erstellung eines Characters

Um einen Character zu animieren, muss dieser zuerst erstellt werden. Auf der linken Seite ist eine Figur namens "Squiller" abgebildet. Es handelt sich um ein sehr gemeines Eichhörnchen.

Das Bild zeigt das graue Eichhörnchen, welches in einzelne Sprites aufgeteilt wurde, damit es in Spine animiert werden kann

2 - Vorbereitung des Characters

Damit ein Character in Spine animiert werden kann, muss dieser erstmals in seine Einzelteile zerlegt werden. Dabei wird der Character an seinen Gelenken geteilt, dass jedes Körperteil einzeln animiert werden kann.

Der Screenshot zeigt eine JSON Datei für Spine in Photoshop. Hierbei wurde ein Häkchen bei “Write Spine JSON”  in den Einstellungen gesetzt

3 - JSON Datei erstellen

Dabei ist es wichtig eine JSON-Datei zu erstellen, da Spine dieses Format benötigt, um die Datei richtig zu laden.

Der Screenshot zeigt die Einstellungen von Spine und welche Schaltfläche für den Import betätigt werden muss

4 - Import in Spine

Nun wird die JSON-Datei in Spine importiert und daraufhin geöffnet. Anschließend muss unten links auf das „Erstellen” Symbol geklickt werden. Danach werden die Bones eingezeichnet.

Der Screenshot zeigt wie die Bones des Charakters in Spine benannt werden

5 - Bones in Spine

Es muss beachtet werden, dass die „Bones” des Characters richtig sitzen, damit die Gelenke sich optimal drehen lassen. Ebenfalls ist zu beachten, dass die Knochen vom richtigen Ursprung ausgehend gezeichnet werden. Dies verhindert, dass die Knochen am falschen Gelenk verknüpft werden. Beispielsweise soll der Oberarm am Torso und nicht an der Hüfte verbunden werden, da er sonst vom Hüftknochen ausgehend gezeichnet wird.

Der Screenshot zeigt die Animationsansicht anhand eines grauen Eichhörnchens

6 - Naming in Spine beachten

Es ist außerdem sehr hilfreich die Knochen in der Hierarchie nach den korrespondierenden Körperteilen zu benennen, damit es nicht zu Verwirrungen in Spine kommt. Die einzelnen Sprites in der Hierarchie-Liste sollten außerdem per „Drag and Drop” in die Knochen gezogen werden. Dadurch werden die Sprites mit den Knochen verbunden und können sich gemeinsam bewegen.

Wenn der Schritt abgeschlossen wurde, ist das Modell nun geriggt.

Der Screenshot zeigt wie in Spine Keyframes gesetzt werden können. Der Fokus liegt auf dem Keyframemenü

7 - Spine Animationsansicht

Nun muss oben links auf “Setup” geklickt werden, woraufhin die Animationsansicht in Spine geöffnet wird.

Der Screenshot zeigt das Setzen von Keyframes in Spine in der Gesamtübersicht

8 - Keyframes in Spine setzen

Jetzt können alle Knochen markiert und die vier Keys (Drehen, Umsetzen, Skalieren und Stauchen) aktiviert werden. Das Aktivieren funktioniert mit einem Klick auf die roten Kastensymbole neben den vier Parametern. Die Kästen sind zu beginn grün und werden per Klick rot angezeigt. Die Kästen sind dafür zuständig, dass sobald etwas in der Animation verändert wird, an dieser Stelle automatisch neue Keyframes gesetzt werden.

Ein Artikel von geschrieben am .

Offene Fragen?

Hat Ihnen der Artikel gefallen? Sie können gerne unsere Artikel teilen, zitieren oder weiterempfehlen. Bei Fragen können Sie uns gerne kontaktieren oder ein kleines Feedback hinterlassen. Wir freuen uns auf Sie!

Adresse

Studio Merkas
Spieleentwicklung & Unterhaltungssoftware e.U

Pischekstraße 19
D-70184 Stuttgart
Deutschland


Öffnungszeiten
Montag - Freitag, 9:00 - 17:00 Uhr