Pixel to Unity Teil 3 – Wie man aus einer Aseprite Pixel Animation einen Unity Animation Controller erstellt

Im dritten Teil unserer Pixel-To-Unity Reihe importieren wir eine Aseprite-Datei mit Sprite-Animation in Unity und lassen aus dieser automatisiert die Animation-Clips und AnimationController erzeugen. 

Im vorherigen Teil unserer Reihe haben wir unsere Animation mit verschiedenen Tags bzw. Loops in Aseprite erstellt. Diese wollen wir nun in Unity importieren, aus den einzelnen Tags sollen Animation-Clips erstellt werden, welche wiederum durch einen AnimationController gesteuert werden.
Diesen AnimationController wollen wir dann in einem CharacterController ansprechen und je nach Bewegung bzw. Status die passende Animation abspielen.

Aseprite to Unity

Im ersten Schritt wollen wir unsere mühsam gepixelte Sprite-Animation von Aseprite zu Unity bekommen. Der harte Weg wäre der Export als Sprite-Sheet mit Einzelframes, der Import des Sheet in Unity und das manuelle Bauen der AnimationClips aus den Frames.
Da damit schon kreative Leute vor uns zu kämpfen hatten, existieren zum Glück bereits Tools, die uns den harten Weg etwas ebenen und uns ein paar Schritte abnehmen. Oder alle – wie der AnimationImporter von Stephan Hövelbrinks. Dazu mehr im nächsten Abschnitt.

In diesem Fall müssen wir ganz einfach nur die Aseprite-Datei mit der Endung .aseprite oder .ase in unser Unity Projekt ziehen. Den Rest macht dann der AnimationImporter.
Also tun wir das.
Schritt 1 geschafft.

Animation Importer

Wie hier bereits berichtet, hat Stephan Hövelbrinks, Entwickler des postapokalyptisches Pixel-RGP Death Trash, ein kostenloses Unity-Asset zum Importieren von Aseprite-Animationen erstellt: den AnimationImporter. Diesen wollen wir nutzen.

Dazu laden wir einfach die aktuellste Version des Asset-Packages für Unity aus dem GitHub-Projekt herunter und importieren es in Unity.

Im Assets Verzeichnis unseres Projekts finden wir nun einen Ordner „AnimationImporter“ und im Menü unter Window einen neuen Eintrag „Animation Importer“, worüber wir das Tool starten können.

Im oberen Teil des Tools können wir die Aseprite-Datei in unserem Projekt droppen. Je nach Feld werden automatisch die AnimationClips und der AnimationController erzeugt oder die bereits vorhandenen aktualisiert.

Zuvor müssen wir den Pfad zur Aseprite-Anwendung auswählen.

Im unteren Bereich können noch verschiedene Einstellungen vorgenommen werden. Wo die Assets erzeugt werden sollen, welches Schema für die Benennung angewendet werden soll, welche Tags nicht geloopt werden sollen, etc.
Ich mag z.B. folgendes Naming Schema.

Na dann: Drop the file.

Hat alles geklappt, finden wir nun das erzeugte Sprite Sheet, die erstellten AnimationClips, sowie den AnimationController vor. Je nach persönlicher Einstellung in separaten Ordnern oder eben nicht.

Im Animator sehen wir, dass für den erstellten AnimationController bereits alle im Aseprite-File vorhandenen Tags als States angelegt und mit dem korrekten AnimationClip verknüpft wurden.
Als Default-State wurde Idle vorkonfiguriert. Perfekt.

Die Frames der gesamten Animation wurden als Sprite Sheet gespeichert. D.h. alle Frames befinden sich in einer PNG-Datei.

In den Import-Settings erkennt man, dass alle Einstellungen bereits korrekt gesetzt sind.

Sogar die Einstellungen für Pixel-Art. Ausgezeichnet!

Charakter in Szene setzen

Jetzt wollen wir uns aus den vorhandenen Assets einen spielbaren Charakter zusammen bauen.
Wir beginnen damit, dass wir einfach einen Frame aus dem Sprite Sheet in die Szene ziehen und Unity erstellt für uns ein Gameobjekt mit der Komponente Sprite Renderer.

Dem Gameobjekt fügen wir nun die Animator-Komponente hinzu.

Als Controller ziehen wir den AnimationController hinein, den uns der Importer erzeugt hat.

Wenn wir jetzt die Szene starten, sehen wir, dass sich unser Charakter bewegt. Es wird die Idle-Animation unseres AnimationControllers abgespielt.

Animation States und Player Controller

Nun wollen wir unserem Charakter das Laufen, Springen und Schießen beibringen. Dazu bereiten wir zuerst den AnimationController vor. Den lassen wir uns im Animator anzeigen.
Da wir Pixel-Art verwenden und wir es in diesem Beispiel einfach halten wollen, verzichten wir auf überblendete Animationen (BlendTrees) und Übergänge auf Grundlage von Variablen (z.B. Speed).

Wir legen also für jeden Tag in unserer Aseprite Animation – also für jeden State im AnimationController – einen Parameter vom Typ Bool an.

Jetzt können wir die Transitions von State zu State definieren. Das Ergebnis könnte so wie auf folgendem Bild aussehen.

Idle

Idle ist der Standardzustand. Hier müssen wir nichts anpassen.

Walk

Vom Idle-Zustand wollen wir zum Walk-Zustand und wieder zurück kommen.
Dazu legen wir jeweils einen Übergang (Transition) an und schauen uns zunächst den Übergang von Idle zu Walk an.

Dazu klicken wir auf den entsprechenden Übergang. Im Inspektor können wir nun die Einstellungen vornehmen.

• Unter Conditions wählen wir aus, dass der Zustand nur gewechselt wird, wenn der Parameter isWalking auf true ist.
• Wir deaktivieren Has Exit Time.  Der Parameter Exit Time wird dadurch deaktiviert und der Übergang startet sofort, anstatt zur angegebenen Zeit.
• Wir setzen Transition Duration auf 0. Da wir nur Animationen mit wenigen Frames haben, soll der Übergang nicht überblendet werden, sondern direkt zum nächsten Zustand führen.

Der Wechsel von Walk zurück zu Idle erfolgt analog dazu. Wir klicken auf den Übergang und nehmen folgende Einstellungen vor.

• Unter Conditions wählen wir aus, dass der Zustand nur gewechselt wird, wenn der Parameter isWalking auf false ist.
• Wir deaktivieren Has Exit Time.
• Wir setzen Transition Duration auf 0.

Run

Analog zu Walk funktioniert auch Run. Üblich für Run ist, dass der Zustand von Walk aus erreicht wird und auch wieder dahin zurück führt. Denn meist verwendet man eine Speed-Variable, um den Zustand zu wechseln oder zu überblenden.
Darauf verzichten wir in diesem Beispiel.

Wir setzen stattdessen unter Conditions unsere Zustands-Variable isRunning auf true.

Die anderen Einstellung stellen wir analog zu Walk ein.

Any State Animationen

Neben Walk und Run, die vom Idle-Zustand gewechselt sind und wieder zum Idle-Zustand zurück wechseln, gibt es Animation-States, die von jedem Zustand aus erreichbar sein sollen.
In unserem Beispiel wären das die Animationen für Springen, Schießen und die Todesanimation.

Während der Zustand für Death endet, erfolgt nach Shoot und Jump ein Exit. Von dort geht es wieder bei Entry los.

Im folgenden schauen wir uns die Übergänge wieder etwas genauer an.

Jump

Bei Any State zu Jump macht es Sinn, ein wenig die vorherige Animation zu überblenden, damit z.B. der Übergang von Walk zu Jump nicht abgehackt ist, sondern der Char in der Luft noch etwas weiterläuft. Dazu muss man etwas mit der Duration Time experimentieren. Richtig abstimmen kann man das erst später, wenn man den Code für den PlayerController geschrieben hat, der die Bewegungen und die Physik (z.B. Fallgeschwindigkeit) steuert.

Bei Jump zu Exit setzen wir die Duration Time wieder auf 0, damit sofort zum entsprechenden Zustand gewechselt wird.

Shoot

Der Übergang von Any zu Shoot erfolgt analog zu Jump.
Als Transition Duration haben wir hier den Wert 0.25 gewählt.

Beim Übergang zu Exit setzen wir die Transition Duration wieder auf 0.

Death

Der Death-Zustand hat die Besonderheit, dass er von Any aus erreichbar ist und dann endet. Einmal im Death-Zustand angekommen, gibt es kein zurück.
Das Leben des Charakters soll im letzten Frame der Todesanimation enden.

Wir setzen wieder die entsprechende Condition.

Jetzt müssen wir noch Can Transition To Self ausschalten, damit die Animation nicht unendlich weiter läuft.

Trigger verwenden

Alternativ zu einem Bool-Parameter kann auch ein Trigger verwendet werden. Ein Trigger ist auch ein Bool-Parameter, dessen Wert jedoch nach der Transition zurückgesetzt wird.
Für unsere Todesanimation könnte das dann so aussehen.

Den Trigger können wir dann als Condition auswählen.

Das Setzen des Triggers erfolgt dann wie die Werte der anderen Parameter im Code.

Fazit und Ausblick

Die Sprite-Animation ist importiert, die Clips erzeugt und der AnimationController vorbereitet. Die Magie passiert dann im Code.
Im nächsten Beitrag der Pixel to Unity Reihe schreiben wir einen einfachen Character Controller, der unsere Spielfigur steuert und jeweils die passende Animation triggert.

Bis dahin hoffe ich wie immer, diese erstbeste Anleitung war hilfreich.