Ein GIF ohne Geisterbilder in ein Sprite-Sheet umwandeln

Warum es nicht reicht, jeden GIF-Bildblock zu speichern

Eine GIF-Animation ist nicht immer ein Stapel vollständiger Bilder. Ein späteres Einzelbild kann nur das Rechteck speichern, das sich geändert hat. Es enthält außerdem eine Disposal-Anweisung, die dem Abspielprogramm sagt, was es mit der vorherigen Zeichnung tun soll, bevor es die nächste anwendet. Ignoriert ein Extraktionswerkzeug diese Anweisung, bleiben alte Arme, Füße oder Schatten als Spuren sichtbar. Speichert es nur das Rechteck, haben die exportierten PNGs unterschiedliche Größen.

Für ein Sprite-Sheet benötigt jede Zelle ein vollständiges Bild auf einer einheitlichen Arbeitsfläche. Die richtige Reihenfolge lautet: Disposal-Regel des vorherigen Einzelbilds anwenden, aktuelle Aktualisierung zeichnen und dann die vollständige Arbeitsfläche als PNG für diesen Zeitpunkt kopieren. ImageMints GIF-Werkzeug setzt die Bilder vor dem Export zusammen. Du musst Teilbilder nicht manuell platzieren.

Ein konkretes Konvertierungsbeispiel mit 12 Einzelbildern

1. Öffne das Quell-GIF in GIF zu Sprite-Sheet. Prüfe die angezeigte Anzahl der Einzelbilder und die Größe der Arbeitsfläche. Zwölf Einzelbilder mit 64 × 64 Pixeln sollten zwölf vollständige Ausgaben mit 64 × 64 Pixeln ergeben, selbst wenn die internen GIF-Aktualisierungen kleiner sind.
2. Stelle für ein Raster-PNG ein: Bilder pro Zeile auf 4. Das resultierende Sheet hat vier Spalten und drei Zeilen. Seine erwarteten Abmessungen sind daher 256 × 192 Pixel. Diese einfache Abmessungsprüfung deckt überraschend viele falsche Exporte auf.
3. Speichere das Raster-PNG, wenn deine Engine ein Sheet mit gleichmäßigen Abständen benötigt. Speichere die ZIP-Datei, wenn du einzelne nummerierte PNGs brauchst. Die ZIP-Datei enthält außerdem frame-delays.json; behalte sie bei, wenn das ursprüngliche GIF bei manchen Posen länger verweilt als bei anderen.
4. Öffne das Ergebnis in deinem vorgesehenen Editor und prüfe das erste, mittlere und letzte Einzelbild. Achte darauf, dass keine frühere Pose stehen bleibt und die Figur im selben 64 × 64-Bereich bleibt.

Die Timing-Falle: Ein Sheet sagt dir nicht, wie schnell du abspielen sollst

Ein PNG-Sprite-Sheet speichert Pixel, keine Anzeigedauern. Stell dir ein GIF mit 12 Einzelbildern vor, bei dem elf Bilder 80 ms dauern und das letzte 400 ms stehen bleibt. Wenn du das exportierte Sprite-Sheet mit festen 12 fps abspielst, dauert jedes Bild ungefähr 83 ms, und die Pause verschwindet. Das ist kein Extraktionsfehler: Die Zeitangaben befinden sich schlicht außerhalb der PNG-Datei. Lies die Verzögerungen aus der ZIP-Datei und bilde das gehaltene Einzelbild in deiner Engine nach, oder wiederhole das letzte Bild als bewusste Annäherung.

Die Ausgabe für den nächsten Schritt wählen

ImageMint begrenzt GIF-Eingaben auf 20 MB, 100 Einzelbilder, 1024 Pixel pro Seite und insgesamt 20 Millionen Einzelbildpixel, um den Browser-Tab zu schützen. Größere Quellen müssen in einem Desktop-Editor vorverarbeitet werden. Verwende nur Animationen erneut, die dir gehören oder für deren Nutzung du eine Erlaubnis hast.

Eine unterschiedlich lange Pause beim Nachbilden der Animation erhalten

Beim Beispiel mit zwölf Einzelbildern beträgt die Gesamtdauer 11 × 80 + 400 = 1280 ms. Unterstützt das Ziel nur eine feste Dauer, kannst du die gehaltene Pose annähern, indem du sie fünfmal mit 80 ms wiederholst. Dadurch entstehen aus zwölf unterschiedlichen Bildern sechzehn Zeitleisteneinträge, und die Gesamtdauer bleibt erhalten. Das ist eine bewusste Bearbeitung der Zeitleiste, keine automatisch vom Extraktionswerkzeug angewendete Option.

Verwechsle ein wiederholtes Bild nicht mit einem unerwünschten Duplikat. Zwei optisch gleiche Einzelbilder können eine beabsichtigte Haltephase darstellen. Entfernst du eines, ohne seine Verzögerung zu übertragen, verkürzt du die Animation. Speichere zuerst eine unveränderte Extraktion und bearbeite beim Optimieren einer Folge eine Kopie.

Ein Sprite-Sheet importieren, ohne leere Schlusszellen abzuspielen

Wenn zehn Einzelbilder mit 64 × 64 Pixeln in vier Spalten angeordnet werden, hat die Ausgabe 256 × 192 Pixel: zwölf Positionen, aber nur zehn echte Einzelbilder. Die letzten beiden Zellen sind leer. Notiere Zellgröße, Spaltenzahl und tatsächliche Einzelbildanzahl bei der Datei. Bei einem Rasterimporter, der die Einzelbildanzahl nur aus Breite und Höhe ableitet, muss der Animationsbereich korrigiert werden.

Überschreitet ein Sheet-Export ein Seitenlimit, kann eine andere Spaltenanzahl seine Form passend machen. Sie reduziert aber nicht die Anzahl dekodierter Einzelbilder. Zwölf Einzelbilder mit 64 × 64 belegen 49,152 Einzelbildpixel, noch ohne ungenutzte Zellen. Ein winziges komprimiertes GIF kann trotzdem zu einer großen Sequenz dekodiert werden. Reduziere daher Auflösung oder Einzelbilder in einem Editor, wenn das Gesamtpixellimit das Problem ist.

Abschließende Extraktions-Checkliste

• Die ausgegebenen Einzelbilder haben die angegebenen vollständigen Abmessungen der Arbeitsfläche.
• Die mittleren und letzten Einzelbilder enthalten keine unbeabsichtigt stehen gebliebene frühere Pose.
• Die Zielanwendung verwendet die tatsächliche Einzelbildanzahl statt aller Sheet-Zellen.
• Unterschiedliche Verzögerungen bleiben erhalten oder werden bewusst angenähert.
• Das ursprüngliche GIF und deine Berechtigung zu seiner Nutzung bleiben erhalten.