Start › Pixel-Art-Animation

Pixel-Art-Animation erstellen

Eine Pixel-Animation ist eine Reihe von Einzelbildern, die nacheinander gezeigt werden. Das Handwerk steckt nicht im Werkzeug, sondern in zwei Fragen: Welche Bilder brauchst du — und wie lange bleibt jedes davon stehen?

Frames: nur so viele wie nötig

Anfänger malen zu viele Bilder. Pixel-Art lebt von der Reduktion, und das gilt auch für die Bewegung. Ein Laufzyklus funktioniert mit vier bis acht Frames. Ein Blinzeln braucht zwei. Eine ruhende Figur, die atmet, kommt mit zwei Frames aus, bei denen sich der Brustkorb um genau ein Pixel hebt.

Der Aufbau, der am zuverlässigsten funktioniert: Male zuerst die Extremstellungen — der weiteste Ausfallschritt, die höchste Stelle des Sprungs, das ganz geschlossene Auge. Diese Bilder tragen die Bewegung. Die Zwischenbilder kommen danach, und meistens brauchst du weniger davon, als du denkst.

Die Zeitleiste: Dauer ist die halbe Miete

Jeder Frame in KistePix hat seine eigene Anzeigedauer in Millisekunden. 100 ms entsprechen zehn Bildern pro Sekunde — ein guter Startwert.

Der Fehler, den fast alle machen: allen Frames dieselbe Dauer geben. Echte Bewegung ist ungleich getaktet. Ein Schlag holt langsam aus (drei Frames zu je 120 ms) und trifft blitzschnell (ein Frame mit 40 ms). Ein Sprung hängt oben im Scheitelpunkt kurz in der Luft. Genau dieses Ungleichgewicht ist der Unterschied zwischen „ruckelt gleichmäßig" und „hat Wucht".

Ebenen sparen dir das Neuzeichnen

Halte, was sich nicht bewegt, auf einer eigenen Ebene: Der Körper bleibt stehen, während nur der Arm über mehrere Frames wandert. Umriss, Farbfläche und Schatten getrennt zu halten, zahlt sich spätestens dann aus, wenn du die Rüstung von Braun auf Blau ändern willst, ohne alle acht Frames neu zu malen.

Abspielen — und ehrlich hinschauen

Lass die Animation in Schleife laufen und achte auf zwei Dinge. Zappelt die Figur, obwohl sie stehen sollte? Dann sitzt sie in den Frames nicht an derselben Stelle — der Bezugspunkt, meistens die Bodenlinie unter den Füßen, muss gehalten werden. Springt die Bewegung an einer Stelle? Dann fehlt dort ein Zwischenbild, oder zwei benachbarte Frames sind sich zu ähnlich und der Sprung liegt woanders.

Als GIF exportieren

Menü Datei › Als GIF exportieren. KistePix übernimmt die Anzeigedauer jedes Frames direkt aus der Zeitleiste ins GIF — was du im Editor siehst, siehst du auch in der Datei.

Zwei Einstellungen entscheiden über das Ergebnis:

• Vergrößerungsfaktor. Eine 32 × 32 große Figur ist auf einer Webseite ein Krümel. Exportiere sie mit Faktor 4 oder 8, dann ist sie 128 bzw. 256 Pixel groß. Wichtig: KistePix vergrößert dabei blockweise, jedes Pixel wird ein sauberer Block. Skalierst du das GIF stattdessen später in einem Bildbearbeitungsprogramm hoch, glättet dieses die Kanten und deine Pixel verschwimmen.
• Transparenter Hintergrund. Für eine Figur, die auf einer beliebigen Webseite sitzen soll: anhaken. Für ein Bild, das ohnehin einen gemalten Hintergrund hat: egal.

GIF oder Sprite-Sheet?

Beides exportiert dieselbe Animation, aber für verschiedene Zwecke. Das GIF ist zum Anschauen: für die Webseite, für einen Beitrag, für die Vorschau. Ein Sprite-Sheet ist zum Verarbeiten: Es geht in eine Spiel-Engine, die daraus selbst eine Animation baut — und die kann sie anhalten, rückwärts spielen oder mit einer Figur mitlaufen lassen. Wie das geht, steht unter Sprite-Sheet erstellen.