Ich habe länger nichts mehr in meinen Blog eingetragen. Nun wird es wieder einmal Zeit, ihm mehr Aufmerksamkeit zu widmen. Heute zeige ich euch, woran ich in letzter Zeit getüftelt habe.

Seit Anbeginn und bis heute werden Animationen in Spielen mittels einzelnen Bildern bewerkstelligt. Das heißt, man bedient sich der traditionellen Methode und zeichnet jedes Bild in einer Animation einzeln. Anschließend spielt man die Bilder nach einander in der Game Engine ab und erhält so ein bewegtes Bild. Aber daraus ergeben sich für Spieleprogrammierer auch Probleme. Für eine flüssigere Animation benötigt man mehr Bilder. Das ist nicht nur mehr Arbeit sondern auch mehr Ressourcen-Verbrauch in der Game Engine. Mit dem Einzug von 3D kamen neue Möglichkeiten die sich auch auf 2D Spiele übertragen ließen. Nun kann man die Einzelbilder in ein einziges größeres Bild, das sogenannte Spritesheet, packen. Somit bräuchte man für jede Animation nur noch ein einziges Bild in die Game Engine laden, statt mehrere. Das ist übersichtlicher und bequemer. Im Anschluss spielt man die Bildsequenz ab, in dem man immer ein Bildausschnitt aus dem Spritesheet darstellt. Oft verwendet man dazu Meshes. Auch dieser Begriff kommt aus dem 3D. Man nimmt ein Mesh Face, also ein Rechteck (bestehend aus zwei Dreiecken) im 3-dimensionalen Raum und pinnt dieses mittels UV Koordinaten an das Spritesheet (Textur). Man spricht hierbei von UV Mapping. @Vega hat eigens für Codea ein Tutorial zu diesem Thema erstellt: https://codea.io/talk/discussion/1244/mesh-tutorial.

Irgendwann 2013, wurde eine Kickstarter Kampagne von Esoteric Software gestartet, um ihr neuestes Produkt, Spine2D, auf den Markt zu bringen. Spine verwendet ein Verfahren, das ebenfalls aus dem 3D Bereich bekannt ist. Es erlaubt ein "Knochen Gerüst" zu erstellen und an ein Bild zu binden. Anschließen kann man die Knochen animieren und das Bild verformt sich entsprechend. Esoteric's Software war nicht das erste Programm das dies ermöglichte, doch nach ihrem äußerst erfolgreichen Kickstart war Spine in aller Munde und entwickelte sich schnell und zielsicher zum Marktführer in Sachen 2D Knochen Animationen. Der größte Vorteil dieser Methode besteht in der Optimierung. Mit Spine speichert man die Transformations-Daten der Knochen. Eine Animation bedarf nicht mehr jeden Frames als einzelnes Bild. Man Benötigt nur ein Bild und die Animations-Sequenzen werden aus den Knochen-Transformationen errechnet. Die Größe des benötigten Spritesheets reduziert sich somit enorm! Als Bonus, kann man Animationen flüssiger abspielen und außerdem die Knochen zur Laufzeit manipulieren. Soll der Spieler seinen Kopf immer in Richtung Maus drehen, zum Beispiel, kann man die Knochen-Rotation anpassen. Ein weitere Vorteil von Spine gegenüber traditionellen Animations-Techniken besteht in der Arbeitserleichterung und Wiederverwendung von Animationen. Wenn ein Skelett erstellt und animiert wurde, kann er für ähnliche Grafiken, ohne Änderungen, wiederverwendet werden. Somit kann man ein animiertes Skelett für mehrere Spiel-Charaktäre verwenden und sich somit viel Arbeit und Speicher sparen. Es ist rundum ein super Verfahren, dass meiner Meinung nach jeder nutzen sollte. Mehr Infos auf http://esotericsoftware.com.

Wer Spine in der Game Engine seiner Wahl verwenden möchte, sollte sich informieren, ob die Engine Spine überhaupt unterstützt. Andernfalls muss man sich die Runtime selbst zusammenschustern. Für mich war das mit Codea der Fall. Zum Glück steht wenigstens eine generische Lua Runtime zur Verfügung - ich musste also nur das Rendering selbst implementieren.

Wenn jemand, so wie ich Codea nutzt, kann meine Runtime kostenlos verwenden. Infos dazu findet ihr im Codea Forum: https://codea.io/talk/discussion/8174/spine2d-support-for-codea.

Die Vorgehensweise ist ziemlich einfach.

Als erstes schmeißt ihr den "/spine-lua" Ordner, so wie er ist, in euere Dropbox.

![](/content/images/2017/03/Bildschirmfoto-2017-03-24-um-11.33.38.png)

Danach such ihr euch einige Beispiele zum Testen heraus. Ich habe mir dafür einen Ordner "/spine-data" in meiner Dropbox erstellt. Und anschließend folgende Projektdateien von https://github.com/EsotericSoftware/spine-runtimes/tree/master/examples kopiert. (Die gelisteten Dateien befinden sich jeweils in Unterordnern "/<projekt>/export/...".)

  • raptor.json, raptor.atlas, raptor.png,
  • goblins.json, goblins.atlas, goblins.png,
  • spineboy.json, spineboy.atlas, spineboy.png,
  • alien.json, alien.atlas, alien.png,
  • tank.json, tank.atlas, tank.png
![](/content/images/2017/03/Bildschirmfoto-2017-03-24-um-11.40.32.png)

Anschließend öffnet ihr Codea und synchronisiert euere Dropbox. Erstellt nun ein neues Projekt und kopiert mein Demo Beispiel, bestehend aus 3 Tabs, inklusive der Spine Runtime.

![](/content/images/2017/03/IMG_0110.PNG)

Das ist auch schon alles! Wie man unschwer erkennen kann, lädt man die Spine Dateien mit dem Aufruf player = spine.Actor(base_path, json_file, default_skin, scale_factor). Als Rückgabewert bekommt man die Referenz zur erstellten Klasse. Nun hat man mit player.skeleton Zugriff auf das Skelett und mit player.mesh auf das mesh (inklusive der Textur). Wie man die Spine Runtime bedient ist ein anderes Thema, auf das ich, in Zukunft, in einem anderen Beitrag zu sprechen komme. Eine offizielle Dokumentation findet ihr bei Esoteric Software: http://de.esotericsoftware.com/spine-documentation.

Mit dieser neuen, mächtigen Bibliothek in euerer Script-Sammlung, könnt ihr nun qualitativ hochwertigere Spiele erstellen als jemals zuvor. Bedenkt, dass ihr mit Spine nicht nur Charaktere für euere Games erstellen und animieren könnt, sondern auch Menüs, Cutscenes und vieles mehr. Die Möglichkeiten sind wahrlich unbegrenzt.