PhotoshopToSpine – Wie man aus Photoshop Ebenen ein Spine Projekt erstellt

Spine ist ein tolles Programm zum Animieren von Sprites für 2D-Spiele. Wir zeigen, wie man den Workflow abkürzt, in dem man Ebenen und Positionen direkt aus PS importiert.

Spine enthält keine Funktionen zum Zeichnen, die Grafiken, die animiert werden sollen, müssen also in anderen Programmen erstellt werden. Dazu erstellt man im normalerweise Einzelgrafiken der Körper- oder Bestandteile des zu animierenden Sprite (Kopf, Körper, Arme, Beine, Flügel, Schwanz, etc.), importiert diese in Spine und baut / positioniert diese dort wieder zu dem Sprite zusammen.

Spine Plugin für Photoshop

Um diesen Umweg zu vermeiden, kann man das Photoshop to Spine Plugin (Skript) für Photoshop verwenden. Dadurch hat man den Vorteil, dass man die Photoshop-Ebenen und die Positionierung exportieren und direkt in Spine importieren kann.

Link zum GitHub-Projekt

Ok, schauen wir uns die Sache mal an.

Installation

Das Photoshop-Skript laden wir von der GitHub-Seite herunter (optional auch das Logo) und kopieren es in den Scripts-Ordner von Photoshop.
Hier ein Beispielpfad:

C:\Program Files\Adobe\Adobe Photoshop CC 2019\Presets\Scripts

In Photoshop ist das Skript nun unter File -> Scripts zu finden und ausführbar.

Planen, Zeichnen und Anordnen in Photoshop

Man sollte vorm Zeichnen grob überlegen, was alles animiert werden soll, aus welchen Einzelteilen der Charakter besteht, ob man verschiedene Skins benötigt. Diese verteilt man auf eigene Ebenen oder Gruppen. Den Ebenen kann man Tags geben, welche den Export beeinflussen.
So werden über den Tag [skin] auf einer Gruppe Skins in Spine erzeugt, [merge] fügt alle Ebenen unter einer Gruppe zu einer Grafik zusammen, [ignore] ignoriert die Gruppe oder Ebene.
Mehr dazu auf der GitHub-Seite des Plugins.

In diesem Beispiel haben wir einen Charakter mit 4 Skins (eigentlich 4 Charakter). Die Einzelteile (Kopf, Arme, Beine, etc.) sind in Gruppen aufgeteilt, welche über den [merge]-Tag zusammengefügt werden.

Export aus Photoshop

Nun können wir das Skript aufrufen.
Hier können wir festlegen, wohin die Bilder gespeichert werden sollen, ob deaktivierte Ebenen mit exportiert werden sollen und Weiteres.

Mit Klick auf OK wird der Export-Prozess gestartet. Das kann je nach Anzahl der Ebenen länger dauern.
Das Skript erzeugt eine JSON-Datei, welche die Pfade zu den Bilddateien enthält und die Informationen zur Positionierung. Dieses JSON kann dann direkt in Spine importiert werden.
Die Bilder befinden sich im angegebenen Ordner.