Pixel Art Walk Cycle: eine Figur in 4 Frames animieren

Ein einfacher Pixel Art Walk Cycle braucht nur vier Frames: die Ausgangspose, einen Schritt mit dem linken Bein, wieder die Ausgangspose und einen Schritt mit dem rechten Bein. Bei jedem Schritt gehen das Bein, der Ellbogen und der Kopf ein Pixel nach unten. Frame 1 und 3 sind gleich, also zeichnest du nur zwei. Probier es unten mit dem Weisen und drück dann auf Play.

Dieses Sprite ist breit. Am Computer zeichnet es sich leichter, oder mit dem Handy quer.

Schritt 1

Farben für diesen Schritt
Tools
Vorlage

Fertigen Schritt zeigen

Animationsgrundlagen in einer Minute

Animierter Pixel Art Weiser, der auf der Stelle läuft, von vorn gesehen
Der Walk Cycle aus dem Kurs
Romans Folie: vier Frames des Weisen zu je 150 ms, Keyframes an den Enden, ein Animationszyklus aus 4 Frames und 600 ms, etwa 7 Frames pro Sekunde
Aus meinen Kursfolien: Frame, Keyframe, Animationszyklus und FPS am Beispiel des Weisen.
  • Animation ist eine Handlung, gezeigt als Folge von Bildern, den sogenannten Frames.
  • Ein Frame ist ein einzelnes Bild der Animation. Diese hier hat vier.
  • Ein Keyframe ist ein Frame, der markiert, wo eine Handlung beginnt oder endet. Hier sind der erste und der letzte Frame Keyframes.
  • Der Animationszyklus ist die Dauer und die Anzahl der Frames zusammen. Jeder Frame dauert hier 150 Millisekunden, vier Frames ergeben 600 Millisekunden.
  • Frames pro Sekunde sind die Frames, die du in einer Sekunde siehst: 1000 geteilt durch 150 ergibt etwa sieben.

Nur sieben Frames pro Sekunde, und es sieht trotzdem flüssig aus. Pixel Art verzeiht niedrige Bildraten. Zeichentrickfilme fangen meist bei 24 Frames pro Sekunde an und gehen viel höher, aber in Pixel Art bewirken ein paar Frames schon viel.

Was sich bei einem Schritt bewegt

Frame 1 und 3 sind genau dieselbe Ausgangspose. Frame 2 und 4 sind die Schritte, links und rechts. Du arbeitest also nur an zwei Frames.

Fang mit der Außenseite des Sprites an. Beim linken Schritt gehen das linke Bein und ein Teil des Gewands ein Pixel nach unten, der Ellbogen geht ein Pixel nach unten und der Hut ein Pixel nach unten. Dann wieder hoch. Beim rechten Schritt ist es spiegelverkehrt, und der Hut nickt wieder nach unten. Bei jedem Schritt nickt der Weise mit dem Kopf.

Dann das Innere. Während das linke Bein nach unten geht, geht auch der rechte Arm nach unten, und der linke Arm wird etwas kürzer. Das Muster auf dem Gewand verschiebt sich um ein Pixel und neigt sich ein bisschen, als würde sich der Stoff mit dem Körper bewegen.

Das ist viel auf einmal. Wenn es sich nach zu viel anfühlt, fang einfach an: Animiere nur die Schritte. Dann kommt der Hut dazu, dann die Arme, dann die Textur auf dem Gewand.

Ein Tipp: In den Schritt-Frames sitzt der ganze Oberkörper ein Pixel tiefer, also ändern sich viele Pixel. Wähl diesen Teil aus (M) und verschieb ihn ein Pixel nach unten (V), in Aseprite genauso wie im Trainer. Dann korrigierst du die Details von Hand.

Onion-Skin-Einstellungen

In Aseprite stelle ich Onion Skin so ein, dass es hinter dem Sprite angezeigt wird, im rot-blauen Tönungsmodus, mit etwa halber Deckkraft. Dann siehst du genau, welche Pixel sich im nächsten Frame bewegen. Im Trainer wird der vorherige Frame rot angezeigt.

Du bist dran: vier Richtungen

Animierter Pixel Art Weiser, der in vier Richtungen läuft: hinten, vorn, links und rechts
Die Bonus-Challenge aus dem Kurs

Wenn die Vorderansicht funktioniert, probier die Rückansicht, die linke und die rechte Seite. Gleiche Idee: Frame 1 und 3 sind die Ausgangspose, Frame 2 und 4 die Schritte. Ich würde als Nächstes die Rückansicht machen, weil sie der Vorderansicht ähnelt. Achte auf die Details: Der Saum des Gewands schwingt bei jedem Schritt ein bisschen, und die Textur verschiebt sich. Diese kleinen Dinge geben einem Gang seinen Rhythmus. Für die Seitenansicht gibt es einen eigenen Trainer: Walk Cycle in der Seitenansicht.

Und wenn du dich sicher fühlst, experimentier. Änder, wie sich die Textur, die Gliedmaßen oder der Kopf bewegen. Es ist deine Animation.