GIF zu Spritesheet

GIFs speichern oft nur die Pixel, die sich zwischen zwei Frames geändert haben. Ein naiver Frame-Dump liefert dir deshalb Sprites mit Löchern und Resten aus dem vorherigen Frame. Dieser Konverter spielt jeden Frame mit seiner Disposal-Methode ab, so wie es ein Browser tut, damit jeder Frame im Sheet vollständig ist. Außerdem behält er die eigene Verzögerung jedes Frames, was bei Animationen wichtig ist, die eine Pose halten.

Anleitung: GIF zu Spritesheet

1. Zieh ein animiertes GIF hierher (oder probier das Beispiel). Jeder Frame wird mit Verzögerung und Disposal dekodiert.
2. Wähl den Frame-Bereich und nutze Nur jeden N-ten Frame behalten, um ein langes GIF zu halbieren oder zu dritteln. Die behaltenen Frames übernehmen die Zeit der übersprungenen, das Tempo bleibt also gleich.
3. Klick auf Frames im Streifen, um einzelne Frames auszulassen.
4. Auf Inhalt zuschneiden beschneidet alle Frames mit einem gemeinsamen Rahmen, damit der Sprite an Ort und Stelle bleibt. Füg Padding hinzu, wenn deine Engine Abstand drumherum braucht.
5. Hat das GIF einen einfarbigen Hintergrund statt Transparenz, aktivier Hintergrundfarbe entfernen.
6. Wähl Original-Timing oder feste FPS und exportier dann das Sheet, die Datendatei, ein GIF oder ein ZIP mit allem.

Was du bekommst

• PNG-Spritesheet, transparent, als Raster mit automatischer oder fester Spaltenzahl.
• Aseprite JSON mit den Frame-Dauern aus dem GIF, dazu Phaser/TexturePacker JSON, Godot 4 .tres SpriteFrames, CSS-Sprites und Unity-Slicing-Einstellungen.
• Neu kodiertes GIF nach deinen Änderungen, in 1×–8× Skalierung.
• ZIP mit allem oben Genannten und jedem Frame als separatem PNG.

Zu welchen Engines es passt

• Aseprite JSON behält ungleichmäßige Frame-Dauern. Godot-Importer wie Aseprite Wizard und Aseprite-Importer für Unity lesen es direkt.
• Godot 4 .tres nutzt eine feste Geschwindigkeit mit relativen Dauern pro Frame, damit gehaltene Frames gehalten bleiben.
• Phaser 3: Als Atlas mit dem Hash-JSON laden und die Animation aus den Frame-Namen bauen, die unter animations stehen.

Tipps aus der Spieleentwicklung damit

• Pixel-Art-GIFs mit 255 Farben oder weniger werden hier verlustfrei neu kodiert, weil das Tool die exakten Farben nutzt, statt neu zu quantisieren.
• Viele GIFs aus dem Netz sind 2× oder 3× hochskalierte Pixel-Art. Das Tool erkennt das und stellt die echten 1×-Pixel wieder her, so bleibt dein Sheet klein und scharf.
• GIF-Verzögerungen unter 20 ms spielen Browser mit 100 ms ab. Das Tool macht es genauso, damit die Vorschau dem entspricht, was du vorher gesehen hast.
• Für Engines, die nur eine einzige FPS-Zahl kennen, stell das Timing auf Feste FPS und prüf in der Vorschau, ob gehaltene Posen noch wirken.

Anwendungsfälle

• Ein GIF aus einem alten Projekt oder aus einem Pixel-Art-Editor, der nur GIF exportiert, in eine Game-Engine bringen.
• Ein GIF aus einem KI-Animationstool in Frames verwandeln, die du bearbeiten und bereinigen kannst.
• Ein GIF in nummerierte PNG-Frames zerlegen, um sie in Aseprite, LibreSprite oder Photoshop nachzubearbeiten.
• Aus einem vorhandenen GIF eine CSS-Sprite-Animation für eine Website machen.

FAQ