Pixel to Unity – Wie man ein Pixel Sprite in Aseprite animiert und für den Export vorbereitet

Im zweiten Teil unserer Pixel-To-Unity Reihe schauen wir uns das Animations-Tool Aseprite an und wie man damit eine Sprite-Animation für den Export und Import in Unity aufbaut.

Aseprite ist ein Tool zum Erstellen von Sprite-Animationen und ist besonders bei Pixel-Künstlern sehr beliebt, da es dafür zugeschnitten die richtigen Werkzeuge liefert.
Auf den ersten Blick sieht das Tool etwas ungewöhnlich aus, weil auch die UI einen Pixel-Look hat. Aber man gewöhnt sich dran.

Nun wollen wir also ein Sprite pixeln und animieren, um es später in Unity verwenden zu können.

Farbpalette

Beim Erstellen eines neuen Aseprite-Projekts werden wir nach dem zu verwendenden Color Mode gefragt. Die Auswahl steuert, wie die Pixelfarben und die Farbpalette behandelt werden.
Bei RGBA funktioniert die Farbauswahl wie in den meisten Grafik-Tools. Ich wähle per Color-Picker oder Farbwert-Eingabe eine Farbe. Gezeichnete Pixel behalten ihre Farbe auch wenn ich die Palette ändere.
Bei Indexed verhält sich das etwas anders. Hier ist jeder Pixel eine Referenz zur Palette. D.h. ändere oder verschiebe ich die Farben in der Palette, hat das direkte Auswirkung auf die Färbung der Pixel im Bild.

Die Farben in Aseprite basieren auf Farb-Paletten, die im linken Bereich dargestellt werden.

Man kann aus vielen Presets wählen oder eine eigene Palette erstellen.

Öffnet man ein Bild, wird aus dessen Farbinformationen bereits eine Palette erstellt.

Pixeln Frame by Frame

Kommen wir nun zum Pixeln der Frame-By-Frame Animation.
Im unteren Bereich befinden sich Layer und Timeline. Durch Hinzufügen neuer Frames erstellen wir die Animation aus Einzelbildern.

Wir starten also im ersten Frame mit dem Pixeln eines Charakters.

Unsere erste Animation soll die Idle-Animation des Charakters sein. Wir pixeln also ein paar Frames, in diesem Beispiel sind es 4.

Animation-Tags

Jetzt wollen wir Aseprite sagen, dass diese 4 Frames zusammen gehören und geloopt werden sollen. Dazu markieren wir diese und wählen per Rechtsklick „New Tag“.

Es öffnet sich ein Fenster, in dem wir dem Tag einen Namen geben und die Anzahl der zusammengehörigen Frames ändern können. Zusätzlich kann man die Richtung des Abspielens der Animation angeben.
Wir geben als Name „Idle“ an und lassen alle anderen Einstellungen.

Über der Timeline werden die Tags dargestellt. Drückt man Play, wird nur der Tag geloopt abgespielt, in dem man sich befindet.

Aus diesen Tags werden später in Unity die Animation Clips erstellt und die benötigten States im AnimationController.
Wir bauen nun also alle benötigten Animationen für den Charakter auf und trennen diese mittels Tags.

Fazit und Ausblick

Ok, jetzt haben wir eine Animation mit Tags. Aber wir haben nichts exportiert. Kein Spritesheet, keine Einzelbilder, nix. Sollte es nicht um den Export gehen?
Genau. Das alles kann Aseprite.
Wir sind hier trotzdem fertig.

Denn im nächsten Teil der Reihe schauen wir uns ein Unity Plugin an, mit dem man aus Aseprite-Files automatisiert die für Unity benötigten Animation Clips und den entsprechenden Animation Controller generieren kann. Man umgeht also die aufwendigeren Schritte, aus den Spritesheets manuell die Animation Clips zusammen zu basteln und den AnimatioController aufzubauen.

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