Start › Sprite-Sheet erstellen

Sprite-Sheet erstellen

Ein Sprite-Sheet ist ein einziges Bild, das alle Einzelbilder einer Animation nebeneinander enthält. Diese Anleitung zeigt, wozu das gut ist, wie du eines baust — und wie es so in die Spiel-Engine kommt, dass die Engine die Frames von selbst findet.

Was ist ein Sprite-Sheet?

Stell dir eine laufende Figur vor: acht Einzelbilder, die aneinandergereiht den Laufzyklus ergeben. Man könnte acht PNG-Dateien speichern. Man kann sie aber auch in ein Bild legen, alle acht in einer Reihe. Genau das ist ein Sprite-Sheet.

Der Grund dafür ist technisch: Eine Spiel-Engine lädt Bilder in den Grafikspeicher. Ein einziges großes Bild zu laden und daraus Ausschnitte zu zeichnen, ist erheblich schneller, als achtmal die Datei zu wechseln. Bei einer Figur merkt das niemand. Bei fünfzig Figuren mit je acht Frames auf einem schwachen Gerät schon.

Dazu kommt der praktische Grund: Ein Sheet ist eine Datei. Sie lässt sich verschieben, versionieren und weitergeben, ohne dass Einzelbilder verloren gehen.

Was du vorher festlegen solltest

Zwei Entscheidungen ersparen dir später Ärger.

Die Kantenlänge. Alle Frames eines Sheets sollten gleich groß sein — die Engine schneidet das Sheet in ein regelmäßiges Raster. Übliche Größen sind 16 × 16, 32 × 32 oder 64 × 64 Pixel. Wähle sie so, dass die Figur samt Ausholbewegung hineinpasst; wenn der Arm beim Schlagen aus dem Rahmen ragt, ist das Sheet zu klein angelegt.

Der Bezugspunkt. Male die Figur in jedem Frame an derselben Stelle im Rahmen, typischerweise mit den Füßen auf derselben Bodenlinie. Sonst zappelt die Figur im Spiel auf und ab, obwohl du sauber gezeichnet hast. Das ist der mit Abstand häufigste Anfängerfehler.

Schritt für Schritt

Die Schritte sind in jedem Editor die gleichen; die Namen der Menüpunkte hier beziehen sich auf KistePix.

1. Leinwand anlegen

Lege die Leinwand in der Kantenlänge eines einzelnen Frames an, also zum Beispiel 32 × 32. Nicht in der Größe des ganzen Sheets — das Sheet entsteht erst beim Export.

2. Den ersten Frame malen

Male die Ruhestellung. Halte Umriss, Grundfarbe und Schatten auf getrennten Ebenen, dann kannst du später eine Farbe ändern, ohne den Umriss neu zu zeichnen. Das Transparenz-Schachbrett zeigt dir dabei, was tatsächlich leer bleibt — leere Pixel sind es, die die Figur später vor dem Spielhintergrund freistellen.

3. Weitere Frames anlegen

Jeder Frame ist eine Phase der Bewegung. Der Trick ist, nicht jedes Bild neu zu malen: Nimm den vorigen Frame als Grundlage und ändere nur, was sich bewegt. Ein Laufzyklus kommt mit vier bis acht Frames aus, ein Blinzeln mit zwei.

4. Die Anzeigedauer setzen

Jeder Frame bekommt seine eigene Dauer in Millisekunden. 100 ms sind rund zehn Bilder pro Sekunde — ein guter Startwert für Pixel-Art. Ungleiche Dauern sind ausdrücklich erlaubt und oft genau das, was eine Animation lebendig macht: Ein Schlag darf im Ausholen langsam sein und im Treffer kurz.

5. Exportieren

Menü Datei › Als Sprite-Sheet exportieren. KistePix legt alle Frames in einer waagrechten Reihe zu einem PNG zusammen und schreibt daneben eine gleichnamige .json-Datei. Darin steht für jeden Frame, wo er im Sheet liegt und wie lange er zu sehen sein soll.

Zwei Optionen lohnen einen Blick. Der Vergrößerungsfaktor zeichnet jedes Pixel als Block aus mehreren Bildpunkten — nützlich, wenn das Sheet auch als Vorschaubild taugen soll. Für die Engine nimmst du in der Regel Faktor 1 und skalierst im Spiel. Und der transparente Hintergrund gehört fast immer angehakt: Ohne ihn bekommt deine Figur ein weißes Rechteck als Untergrund.

In die Spiel-Engine

Die JSON-Datei ist der Grund, warum du das Sheet nicht von Hand ausmessen musst. Sie folgt dem Aseprite-Schema, das die meisten Engines und Import-Werkzeuge kennen — jedes Feld ist auf der Seite Aseprite-JSON erklärt einzeln beschrieben, samt Beispielen für Godot, Unity, Phaser und GameMaker.

Häufige Stolpersteine

• Die Figur wackelt. Bezugspunkt nicht gehalten — siehe oben.
• Weiße Ränder um die Figur. Beim Export war der transparente Hintergrund nicht aktiv, oder die Engine glättet.
• Nachbar-Frames blitzen am Rand auf. Das passiert bei skalierten Sheets, wenn die Engine Pixel über die Zellgrenze hinaus abtastet. Abhilfe: Faktor 1 exportieren und erst im Spiel vergrößern.
• Die Animation läuft zu schnell. Manche Engines ignorieren die Dauern im JSON und nehmen eine feste Bildrate. Dann setzt du die Geschwindigkeit dort im Animationsplayer.