Als lustige, kleine Idee kam mir in den Sinn, eine Animation in Spriter zu machen, die ich dann in HiBe als animiertes Poster verwenden könnte. Auf diesem Weg würde ich auch endlich mal Spriter verwenden und kennenlernen, was mir beim “anstehenden” 2D Spieleprojekten helfen dürfte.
Das Poster sollte eins dieser Motivationsposter sein, wie diese “Hang in there”-Poster mit den Kätzchen. Bei mir sollte eine Katze (ja, sollte es ursprünglich wohl sein) in einer Art Schacht feststecken. Ich hatte schnell ein paar Ideen zur Animation und musste dann nur noch die Grafiken erzeugen und sie in Spriter animieren. Easy!
Im folgenden beschreibe ich meine 4 Tage lange Leidensgeschichte…
Die Erstellung der Grafik
Zu allererst brauchte ich die Körperteile der Katze, da ich diese in Spriter dann als separate Objekte, nur durch eine Hierarchy von Bones verbunden, animieren würde.
Also zuerst mal in Photoshop die Körperteile “zeichnen”. Bei mir heißt so die Konstruktion durch boolsche Operationen zwischen gefüllten Ellipsen und Rechtecken. Hier und da wird noch was per Lassoauswahl beschnitten und fertig sind die… deformierten, ovalen… Dinger.
Zur Visualisierung habe ich die Arme zunächst zusammengesetzt. Spriter benötigt aber später nur ein Sprite pro Elementtyp.
Die verbogene Wandplatte konnte ich mit der Photoshop Transformation nicht so verbiegen, wie ich gerne wollte. Hier habe ich kurzerhand ein kleines Java Programm geschrieben.
Eine haarige Angelegenheit
Da die Konturen der Teile bis dahin recht einfach und nicht besonders tierisch aussahen, wollte ich dem Ding noch ein wenig Fell verpassen. Zum Glück hatte ich hierzu vor einer Weile mal ein Tool programmiert mit dem ich Layers of Fur (^-^) auf ein Bild anwenden kann.
An dieser Stelle habe ich ziemlich viel Zeit verbracht. Hauptsächlich, da ich parallel auch immer am Programm iz4Fur gearbeitet habe. Zum Beispiel habe ich eine Option eingebaut, um den Alpha Channel des Ursprungsbildes auf die Felldichte anzuwenden und habe den Direction Layer verbessert.
Das Fell aller Körperteile hat im Wesentlichen den gleichen Aufbau. Am Rand ist die Dichte, Länge und der Glanz (Shinyness) am stärksten und nimmt zur Mitte hin ab, so dass es so aussieht als würde das Fell dorthin in der Dunkelheit verschwinden.
Jetzt mussten die Teile nur noch exportiert werden. Da Spriter die Elemente in einzelnen PNGs braucht, musste das Bild entsprechend zerteilt werden. Da ich antizipierte, dass ich diese Aktion häufiger durchführen werden würde, wollte ich mir hier möglichst Arbeit ersparen und den Prozess automatisieren.
Dies bedeutete selbstverständlich erstmal… mehr Arbeit! Ich habe iz4Fur um ToolLayer erweitert, die keinen visuellen Anteil am Bild haben und stattdessen auf das Ergebnisbild losgelassen werden.
Die erste Implementation hiervon war natürlich der SliceExportLayer, der einen zuvor gewählten Bereich auf “gefüllte” Pixel untersuchte und damit den kleinstmöglichen Ausschnitt bekam, der das komplette Teil beinhaltete.
Dazu kam noch die Möglichkeit diesen Bereich wieder um einen Wert zu vergrößern und auf das nachste Vielfache eines Wertes einzurasten. Dies sollte bewirken, dass sich der Bereich auch bei kleinen Änderungen in der Größe des Teils nicht veränderte und somit die Grafik in Spriter nicht verschoben werden würde.
And finally: Spriter!
Endlich war es soweit: Ich öffnete ein neues Projekt in Spriter und verwies auf das Verzeichnis, dass alle Grafiken enthielt und konnte nun endlich meine Katze… n… spinne… ach, ist ja auch egal… zusammensetzen.
Hier war – wie ich aus den ersten Tutorialvideos zu Spriter erfahren hatte – der erste Schritt, den richtigen Pivotpunkt in allen Sprites zu setzen. Nach ein paar Stunden Arbeit mit Spriter kann ich nun sagen, dass der Schritt völlig irrelevant war. Wenn man mit Bones arbeitet, wird die Grafik ohnehin um den Ursprung des Knochens rotiert und skaliert.
Als nächstes habe ich den Basiskörper zusammengesetzt: Torso, Kopf, 2 x Arm, Pfote und Kralle. Nachdem die Teile positioniert waren, konnte ich sie mit Bones versehen und gleichzeitig eine Hierarchie aufbauen, denn jeder neu gezeichnete Knochen war ein Kind des aktuell ausgewählten. Das geht tatsächlich recht leicht von der Hand. Am Ende hatte ich den Körper, den Kopf und einen kompletten Arm mit korrekter Hierarchie und Bones.
Dann habe ich einen Arm ausgewählt und mit gedrückter Steuerungstaste verschoben, was – so seltsam es klingen mag – in Spriter anscheinend der normale Weg ist, ein Objekt zu duplizieren.
Das Ergebnis war: Der erste Absturz von Spriter.
Nach dem Neustart erschien eine Meldung, die OpenGL für den Absturz verantwortlich machte und mich fragte, ob ich es deaktivieren wollte. Das tat ich und konnte schon weiterarbeiten. Also… nochmal das gleiche wie vor 5 Minuten machen.
Der zweite Versuch war nicht deutlich länger und nachdem ich irgendwie mit einer leeren Knochenhierarchie endete, habe ich diese gelöscht. Eine Progressbar erschien, die mich über den Löschungsprozess auf dem Laufenden hielt. Dessen letzter Schritt sah anscheinend die Entfernung von Spriter selbst vor, denn danach war das Programm wieder weg.
Ich will hier nun nicht weiter auf die einzelnen Schritte der Bastelei eingehen. Am Ende ist Spriter nicht erneut abgestürzt und ich bin irgendwie fertig geworden.
Fazit
Ich weiß nicht so recht was ich von Spriter halten soll. Zum einen ist es sicherlich ein cooles Tool, aber zum anderen stößt man schnell an seine Grenzen.
Ich finde es ziemlich unbegreiflich, dass ein Tool, dessen alleinige Aufgabe es ist, Animationen zu erstellen, nur eine Zeitleiste mit Keyframes besitzt, die von allen Elementen mit allen…
OMFG!!!
Ich habe gerade in diesem Augenblick bemerkt, dass es sehr wohl Keyframes für die einzelnen Sprites gibt. Zwar nicht für die verschiedenen Eigenschaften, wie man es aus professionellen Animationseditoren, aber immerhin. Das Problem war, dass diese Elemente bei mir nicht sichtbar waren, weil die Leiste mit Keyframes unten zusammengeschoben war. XD
Ok, dann finde ich fast alles super. Aber am allersupersten finde ich STRG+PLUS. Diese Tastenkombination erzeugt eine neue Version, d.h. das Projekt wird unter einem neuen Namen (mit einer Zahl am Ende, die hochgezählt wird) gespeichert, um im Notfall in der Zeit zurückreisen zu können. Wieso haben nicht mehr Programme dieses Feature?
Ich werde mich sicher wieder in Spriter wiederfinden, wenn ich beginne an meinem 2D Jump’n’run Action RPG zu arbeiten. Und ich freue mich schon die neu entdeckten Funktionen zu testen… ^-^
Ach, bevor ich’s vergesse… Hier ist die finale Animation:
Die finale Animation in 40% der Ursprungsgröße und mit 65 Einzelbildern.
Und für alle, die noch mehr sehen möchten: Die Animation in 70%.