Sprite-Sheet erstellen: aus Einzelbildern, einem Video oder einem Charakterbild

Ein Sprite-Sheet ist ein einzelnes Bild mit allen Frames einer Animation, meist in einem Raster angeordnet. Dazu gehört eine kleine Datendatei, die festhält, wo jeder Frame liegt und wie lange er angezeigt wird. Die Engine lädt das Bild einmal und zeichnet beim Abspielen jeweils eine Zelle.

Wie man eines erstellt, hängt davon ab, was schon vorliegt. Sind die Frames bereits einzelne PNG-Dateien, müssen sie nur zusammengesetzt werden. Steckt die Bewegung in einem Video, wählt man einen Ausschnitt und entnimmt Frames in einer bestimmten Bildrate. Gibt es nur eine Zeichnung der Figur, muss zuerst die Animation entstehen.

Am 8. Oktober 2026 haben wir alle drei Wege mit Dateien durchgespielt, die Sie herunterladen können: 16 Frames eines laufenden orangefarbenen Roboters, zusammengesetzt im kostenlosen Sprite Sheet Maker; ein vier Sekunden langes transparentes WebM, umgewandelt im kostenlosen Video-zu-Sprite-Sheet-Konverter; und die KI-Generierung, aus der die Roboter-Frames ursprünglich stammen. Beide kostenlosen Tools laufen im Browser. Die Dateien verlassen Ihren Rechner nicht, ein Konto ist nicht nötig. Die Oberfläche der Tools ist derzeit nur auf Englisch verfügbar.

Was in einer Sprite-Sheet-Datei steckt

Der Roboterlauf besteht aus 16 Frames mit je 376 × 280 Pixeln. Vier pro Zeile ergeben ein PNG mit 1504 × 1120 Pixeln.

Am PNG allein ist nicht zu erkennen, wo ein Frame endet und der nächste beginnt. Das steht in der JSON-Datei daneben. Hier der Eintrag des sechsten Frames und die Angaben zum ganzen Sheet aus der Datei, die der Sprite Sheet Maker exportiert hat:

{
  "frames": {
    "frame_0005.png": {
      "frame": { "x": 376, "y": 280, "w": 376, "h": 280 },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 376, "h": 280 },
      "sourceSize": { "w": 376, "h": 280 },
      "duration": 42
    }
  },
  "meta": {
    "image": "robot-run-spritesheet.png",
    "size": { "w": 1504, "h": 1120 },
    "frameTags": [{ "name": "robot-run", "from": 0, "to": 15, "direction": "forward" }],
    "animgen": { "frameCount": 16, "frameDurationMs": 42, "durationMs": 672, "fps": 23.81, "loop": true }
  }
}

• frame ist das Rechteck, das aus dem Sheet ausgeschnitten wird, in Pixeln ab der linken oberen Ecke.
• duration gibt an, wie viele Millisekunden der Frame sichtbar bleibt.
• frameTags benennt eine Folge von Frames als Animation. Enthält ein Sheet mehrere Aktionen, hat jede ihren eigenen Tag.
• spriteSourceSize und sourceSize spielen nur bei getrimmten Frames eine Rolle. Sie sagen der Engine, wo ein zugeschnittener Frame in seiner ursprünglichen Leinwand sitzt.

Die Feldnamen entsprechen dem Hash-Format des JSON-Exports von Aseprite. Code, der Aseprite-Sheets liest, liest dieses also genauso. Der Block animgen ist eine Zusatzangabe und kann ignoriert werden.

Die Dauer wird in ganzen Millisekunden gespeichert. Bei 24 FPS dauert ein Frame 41,67 ms, gespeichert wird 42. So ergeben 16 Frames 672 ms statt 667 ms, deshalb steht bei fps der Wert 23,81. Pro Durchlauf sind das 5 ms Unterschied. Muss der Clip exakt zu Ton oder anderen Animationen passen, stellen Sie die Clip-Geschwindigkeit in der Engine auf 24 FPS, statt die Einzeldauern aufzusummieren.

Vorhandene Frames zusammensetzen

Dieser Weg passt, wenn die Animation bereits als einzelne Bilder vorliegt: eine Bildsequenz aus Kritas Animation rendern, ein PNG-Frame-ZIP aus AnimGen, Renderings aus einem 3D-Programm oder ein Ordner, den Ihnen jemand geschickt hat. Wer in Aseprite zeichnet, kann mit dem eingebauten File → Export Sprite Sheet PNG und JSON direkt schreiben und braucht kein weiteres Tool.

Zum Mitmachen laden Sie die 16 Roboter-Frames herunter (ZIP, 700 KB). Sie heißen robot-run-1.png bis robot-run-16.png, ohne führende Nullen, wie viele echte Exporte.

1. Öffnen Sie den Sprite Sheet Maker und ziehen Sie die Dateien hinein oder wählen Sie den Ordner.
2. Prüfen Sie die Reihenfolge. Rein alphabetisch sortiert landet robot-run-10.png direkt hinter robot-run-1.png. Das Tool sortiert nach der Zahl im Dateinamen und ordnete die Frames im Test von 1 bis 16. Frames lassen sich außerdem per Drag-and-drop umsortieren, entfernen oder umkehren.
3. Stellen Sie die Geschwindigkeit ein. Sie gilt für die Vorschau und für die Dauer im JSON. Wir haben 24 FPS gewählt, die Bildrate, mit der der Roboter generiert wurde.
4. Wählen Sie die Spaltenzahl. Für 16 Frames sind 4 voreingestellt, das ergibt ein quadratisches 4 × 4 Raster.
5. Laden Sie das Sprite-Sheet als PNG und das JSON herunter. Zum Teilen gibt es dieselben Frames auch als animiertes GIF.

Wir haben das exportierte Sheet dekodiert und jede Zelle mit ihrem Quellframe verglichen. Der Alphakanal stimmte in allen 16 Frames exakt überein, ebenso die Farbe aller vollständig deckenden Pixel. Halbtransparente Randpixel wichen in der Farbe um höchstens eine Stufe von 255 ab, weil die Browser-Canvas Farben mit vormultipliziertem Alpha speichert. Das exportierte PNG, das zugehörige JSON und die Messwerte mit SHA-256-Prüfsummen stehen zum Nachprüfen bereit.

Liegt die Animation als animiertes GIF vor, können Sie es ebenfalls direkt hineinziehen: Jeder GIF-Frame wird zu einer Zelle, und die Geschwindigkeit wird aus der Frame-Verzögerung des GIFs übernommen.

Trimmen ausschalten, wenn die Frames eine gemeinsame Leinwand haben

Die Option Trim empty space around each frame schneidet den leeren Rand um jeden Frame ab. Bei den Roboter-Frames schrumpft jede Zelle auf 163 × 190 und das Sheet auf 652 × 760, also 71 % weniger Pixel. Die PNG-Datei wird dagegen nur von 785,0 KB auf 736,7 KB kleiner, weil vollständig transparente Flächen ohnehin kaum Platz in der Kompression belegen.

Beim Trimmen wird jeder Frame auf seinen eigenen Begrenzungsrahmen zugeschnitten und anschließend unten mittig ausgerichtet. In diesem Laufzyklus hebt der Roboter vom Boden ab, die Unterkante seines Körpers bewegt sich von Frame zu Frame über 22 Pixel. Nach dem Trimmen berührt jeder Frame den unteren Zellenrand: Das Federn verschwindet, und weil schwingende Arme und Beine die Breite des Rahmens verändern, verrutscht der Körper zusätzlich um bis zu 16 Pixel zur Seite.

Frames aus demselben Animationsprogramm teilen sich meist eine Leinwand, und diese Leinwand hält bereits fest, wo die Figur steht. Behalten Sie sie. Trimmen hilft, wenn die Frames unterschiedlich groß sind, etwa Sprites, die aus einem alten Sheet ausgeschnitten wurden. Dann bringt die Ausrichtung unten mittig die Füße wieder auf eine Linie.

Zweierpotenzen und Abstand

Mit Round the sheet up to power-of-two sizes (auf Zweierpotenzen aufrunden) wurde aus 1504 × 1120 ein Sheet mit 2048 × 2048 Pixeln. Das PNG wuchs nur von 785,0 KB auf 843,6 KB, die dekodierte Textur bei vier Byte pro Pixel aber von 6,4 MiB auf 16 MiB. Schalten Sie die Option nur ein, wenn das Ziel es verlangt, etwa für PVRTC-Kompression auf älteren iOS-Geräten oder für Mipmaps unter WebGL 1. Die meisten aktuellen 2D-Engines akzeptieren beliebige Größen.

Der Abstand (Spacing) fügt transparente Pixel zwischen den Zellen ein. Mit linearer Filterung oder Mipmaps kann die GPU ein, zwei Pixel über die Zellgrenze hinweg abtasten, sodass am Rand eine dünne Linie des Nachbarframes erscheint. Die Roboter-Frames haben auf jeder Seite mindestens 39 transparente Pixel, ein Abstand von 0 ist hier unproblematisch. Bei knapp zugeschnittenen Frames fügen Sie ein paar Pixel Abstand hinzu und tragen denselben Wert beim Zerlegen in der Engine als Trennabstand ein.

Einen Videoclip in ein Sprite-Sheet umwandeln

Dieser Weg passt, wenn die Bewegung als Video vorliegt: eine Bildschirmaufnahme, ein gerenderter Clip, ein Greenscreen-Video oder eine generierte Animation als MP4 oder WebM.

Wir haben das Beispiel des Konverters verwendet, ein 640 × 640 großes WebM einer laufenden türkisfarbenen Figur, 4,00 Sekunden lang, mit transparentem Hintergrund (Quellvideo).

1. Öffnen Sie den Video-zu-Sprite-Sheet-Konverter und ziehen Sie den Clip hinein. Die Zeitleiste füllt sich mit Vorschaubildern.
2. Ziehen Sie die Griffe um die benötigte Bewegung und spielen Sie sie mit Play range in Schleife ab. Wir haben 2,50 bis 3,83 Sekunden Laufen behalten.
3. Wählen Sie Bildrate und Framebreite. Bei 12 FPS ergibt der 1,33 Sekunden lange Ausschnitt 16 Frames, bei 256 Pixeln Breite ein 4 × 4 Raster mit 1024 × 1024 Pixeln und 560,1 KB.
4. Laden Sie Sprite-Sheet-PNG und JSON herunter oder ein ZIP mit nummerierten PNG-Frames.

Die Quelle läuft mit 24 FPS, bei 12 FPS bleibt also jeder zweite Frame übrig. Mit 24 FPS bleiben alle erhalten, und die Zahl verdoppelt sich auf 32. Achten Sie bei einer Schleife in Play range auf den Sprung vom letzten zurück zum ersten Frame: Ein sichtbarer Ruckler bedeutet, dass der Ausschnitt einen Frame früher oder später beginnen oder enden sollte.

Dieses WebM bringt seine eigene Transparenz mit, und die Frames behalten sie. MP4 hat keinen Alphakanal. Wurde der Clip vor einem einfarbigen oder grünen Hintergrund aufgenommen, erkennt der Konverter die Farbe und kann sie entfernen, mit Reglern für Toleranz und Kantenbereinigung. Haare, Rauch und Bewegungsunschärfe vor Greenscreen brauchen echtes Keying, das das kostenlose Tool nicht leistet.

Die Animation aus einem einzelnen Charakterbild generieren

Der dritte Weg beginnt mit einer Zeichnung ohne Bewegung. Die Roboter-Frames oben sind so entstanden: ein 1254 × 1254 großes PNG des Roboters und ein Prompt, der gleichmäßiges Laufen auf der Stelle nach rechts verlangt, mit fester Kamera und gleichbleibender Größe. Die Anfrage nutzte Seedance 2.0 Fast, 4 Sekunden, 480p und Alpha Key und kostete am 3. Oktober 2026 tatsächlich 36 Credits. Zurück kam ein 752 × 560 großer Clip mit 97 Frames bei 24 FPS.

Von diesen 97 Frames haben wir die Quellframes 44 bis 59 als Schleife behalten und für diesen Artikel auf 376 × 280 halbiert. Der Artikel zur spielbaren Figur enthält den genauen Prompt, das ursprüngliche Key-Color-Video und die Auswahl des Schleifenbereichs. Der Artikel zum Laufzyklus geht genauer darauf ein, wie man eine saubere Schleife findet.

Wird die Animation in AnimGen generiert, enthält der Export bereits ein Sprite-Sheet mit JSON oder ein Paket für Godot, Unity, Unreal Paper2D, Cocos Creator oder Construct 3 (Ausgabeformate). Der kostenlose Packer ist nur nötig, wenn Sie die Frames vorher anderswo bearbeiten. Der Credit-Verbrauch hängt von Modell und Einstellungen ab. Prüfen Sie vor dem Generieren das angezeigte Angebot und die aktuellen Preise.

Das Sheet in Godot 4 oder Unity importieren

Godot 4. Fügen Sie einen AnimatedSprite2D-Knoten hinzu und legen Sie in seiner Eigenschaft Sprite Frames eine neue SpriteFrames-Ressource an. Wählen Sie im SpriteFrames-Panel unten im Editor Add frames from a Sprite Sheet, öffnen Sie das PNG und setzen Sie Horizontal und Vertical auf 4. Einen Abstand tragen Sie bei Separation ein. Markieren Sie die 16 Zellen, klicken Sie auf Add 16 frames, stellen Sie die Animation auf 24 FPS und schalten Sie die Wiederholung ein. Das Tutorial zu 2D-Sprite-Animationen von Godot zeigt denselben Dialog. Bei einem Sheet ohne Abstand funktioniert auch ein einfaches Sprite2D mit hframes = 4 und vframes = 4, wenn Sie die Eigenschaft frame lieber per Code weiterschalten.

Unity. Wählen Sie das PNG aus und stellen Sie Texture Type auf Sprite (2D and UI) und Sprite Mode auf Multiple. Für Pixel-Art setzen Sie außerdem Filter Mode auf Point. Öffnen Sie den Sprite Editor, wählen Sie Slice, als Type Grid By Cell Size mit 376 × 280 Pixeln und den Pivot unten mittig, dann übernehmen. Markieren Sie die 16 Sprites in der richtigen Reihenfolge und erstellen Sie einen Animationsclip mit 24 Samples pro Sekunde. Die Slicing-Optionen erklärt Unitys Leitfaden zum Sprite Editor.

Ist die letzte Zeile nicht voll, etwa bei 15 Frames in einem 4 × 4 Raster, legen beide Engines auch für den leeren Platz eine Zelle an. Lassen Sie sie aus der Animation weg. Die AnimGen-Pakete für Godot und Unity ersparen diesen Handgriff, und der Godot-4-Importtest prüft eines davon in einem laufenden Projekt.

Probleme, die Sie vor dem Einsatz prüfen sollten

Zur Größe: 4096 × 4096 gilt als verbreitete sichere Obergrenze für Mobilgeräte und WebGL. Der Vergleich von Sprite-Sheet und PNG-Sequenz misst ein 5120 × 5120 großes Sheet, das diese Grenze überschreitet, und zeigt, wie man es aufteilt.

Häufige Fragen zum Erstellen von Sprite-Sheets

Gibt es ein kostenloses Tool zum Erstellen von Sprite-Sheets?

Der Sprite Sheet Maker und der Video-Konverter aus diesem Artikel sind kostenlos, laufen im Browser und brauchen kein Konto. Die weiteren kostenlosen Sprite-Tools wandeln GIFs um, zerlegen vorhandene Sheets und machen aus Sheets wieder GIFs. Wer bereits mit Aseprite arbeitet, erledigt das Zusammensetzen mit dem eingebauten Export. TexturePacker, ein kommerzieller Atlas-Packer, bietet zusätzlich Polygon-Packing und Exporter für bestimmte Engines. Das lohnt sich eher bei großen Atlanten aus vielen verschiedenen Sprites als bei einer einzelnen Animation.

Kann ChatGPT ein Sprite-Sheet erstellen?

Bildmodelle können mehrere Posen einer Figur in einem Bild als Raster zeichnen. ChatGPT haben wir für diesen Artikel nicht getestet. Prüfen Sie vor der Verwendung eines solchen Bildes, ob alle Zellen gleich groß sind, ob die Figur von Zelle zu Zelle Maßstab und Proportionen behält, ob keine Pose in die Nachbarzelle ragt und ob der Hintergrund transparent ist oder eine einzelne Farbe, die sich entfernen lässt. Der Sprite Sheet Cutter zerlegt ein solches Bild in einzelne Frames und setzt sie in einheitlicher Framegröße neu zusammen. Um aus einem Charakterbild eine durchgehende Bewegung zu generieren und als Frames zu exportieren, nutzen Sie den oben beschriebenen KI-Weg.

Welches Format hat ein Sprite-Sheet?

Meist ein PNG, weil es Transparenz verlustfrei speichert, dazu eine Datendatei. Für eigenen Code und Webspiele ist JSON am verbreitetsten. Engines haben zusätzlich eigene Formate, etwa eine Unity-.meta-Datei mit den Slice-Rechtecken, eine Godot-SpriteFrames-Ressource oder eine .plist für Cocos Creator. Wählen Sie das Format, das Ihre Engine oder Ihr Loader liest, und halten Sie PNG und Datendatei immer zusammen.

Für den ganzen Ablauf laden Sie die Roboter-Frames herunter, setzen sie im Sprite Sheet Maker zusammen und laden das Ergebnis mit den Schritten oben in Ihre Engine. Haben Sie eine Figur, aber noch keine Animation, beginnen Sie im AnimGen-Studio und exportieren das Sheet direkt von dort.