GIF zu Sprite Sheet

So machst du aus einem GIF ein Sprite Sheet

1. 1

   Richtung wählen

   „GIF zu Sheet“ legt alle Einzelbilder auf ein Raster. „Sheet zu GIF“ macht das Gegenteil: du gibst das Raster an, und die Animation wird neu gebaut.

2. 2

   Datei öffnen

   In der einen Richtung ein GIF, animiertes WebP, APNG oder animiertes AVIF; in der anderen ein Sheet als PNG, WebP oder JPG.

3. 3

   Raster einstellen

   Lass die Spalten auf null für ein fast quadratisches Raster, oder leg sie selbst fest. Füge Abstand zwischen den Zellen hinzu, wenn deine Engine ihn braucht, und verkleinere die Einzelbilder, falls das Sheet zu groß würde.

4. 4

   Herunterladen

   Mit den Metadaten bekommst du PNG und JSON in einem ZIP, denn das JSON verweist auf das Bild über seinen Namen: sie zu trennen zerreißt die Verbindung.

Was hier anders ist

• Die Zeiten überleben

  Ein nacktes Sprite Sheet verliert genau das, was es zur Animation machte: wie lang jedes Einzelbild dauert. Das JSON trägt alle Dauern, die Animation lässt sich also exakt wiederherstellen — in einer Engine oder hier zurück.

• Aseprites Format, nicht unser eigenes

  Die Metadaten nutzen das Format, das Aseprite exportiert und das Phaser, PixiJS sowie die Importer von Godot und Unity bereits lesen. Ein eigenes zu erfinden hätte bedeutet, dass du einen Adapter schreibst.

• Die Größe steht vorher da

  Die Fläche des Sheets ist Anzahl der Bilder mal Bildgröße, bei jedem Raster — eine lange Animation passt also einfach nicht in ein Bild. Die entstehenden Maße erscheinen, während du die Optionen änderst, berechnet vom selben Code, der es baut.

• Beim Schneiden stört eine halbleere letzte Zeile nicht

  Fünf Bilder in einem 3×2-Raster lassen eine Zelle leer. Sag, wie viele Bilder es wirklich sind, und diese Zelle wird übersprungen, statt dass am Ende deiner Animation ein leeres Bild auftaucht.

• Der Abstand, den Engines wirklich brauchen

  Padding zwischen den Zellen verhindert, dass die bilineare Filterung Pixel aus dem Nachbarbild hereinzieht — die übliche Ursache feiner Nähte um Sprites. Ein Rand um das Sheet ist auch dabei.

Unterstützte Formate

Zum Sheet: animierte GIFs, animierte WebP, APNG und animierte AVIF. Heraus kommt ein PNG-Sheet, transparent, sofern du keinen Hintergrund wählst, plus das optionale JSON. In der anderen Richtung wird aus jedem PNG-, WebP- oder JPG-Sheet ein animiertes GIF.

Häufige Fragen

Wozu dient ein Sprite Sheet?

Spiel-Engines zeichnen Animationen aus einer einzigen Textur statt aus einer Datei pro Bild: ein Upload zur GPU, ein Bild zu verwalten. So liefert man 2D-Animation in Godot, Unity, Phaser und den anderen üblicherweise aus.

Brauche ich das JSON?

Wenn deine Engine Aseprite-JSON liest, ja: es erspart dir, die Rechtecke und Zeiten von Hand einzutippen. Legst du das Sheet auf ein gleichmäßiges Raster und setzt die Geschwindigkeit im Code, reicht das PNG.

Warum kann ich das Sheet nicht als eine lange Zeile bauen?

Kannst du, indem du die Spalten auf die Bildanzahl setzt — es hilft nur selten: die Fläche bleibt gleich, und sehr breite Texturen stoßen bei älteren GPUs an Grenzen. Ein fast quadratisches Raster ist die sichere Wahl.

Warum heißt es, das Sheet würde zu groß?

Weil die Fläche Bilder × Breite × Höhe ist, und daran ändert kein Raster etwas. Eine Animation mit 200 Bildern in 400×400 sind 32 Megapixel in einem Bild. Verkleinere die Bilder, oder kürze die Animation vorher.

Die geschnittenen Bilder sind um ein Pixel verschoben. Was ist passiert?

Das Raster teilt das Sheet nicht exakt. Das Werkzeug lehnt ein Raster ab, das Bruchteile von Pixeln bräuchte, statt zu runden, denn der Fehler wächst mit jeder Spalte; prüf die Zahlen, oder beschreibe das Raster über die Bildgröße.

Kann ich die Einzelbilder als getrennte Dateien bekommen?

Ja, aber im GIF-Splitter: öffne die Animation dort und exportiere die Einzelbilder als PNG-Dateien in einem ZIP.