Konvertiere dein animiertes GIF in ein Sprite-Sheet f r die Spieleentwicklung und CSS-Animationen. W hle zwischen horizontalem, vertikalem oder Raster-Layout und exportiere es anschlie end mit JSON-Metadaten oder direkt verwendbarem CSS. Verwende den GIF-Frame-Extraktor , um einzelne Frames auszuw hlen oder die Gr e deines GIFs vor der Sprite-Erstellung anzupassen.
oder klicken Sie, um Dateien zu durchsuchen
Alle Frames in einer einzigen Zeile von links nach rechts. Ideal f r CSS-Animationen und Game-Engines, die horizontale Streifen erwarten.
Alle Frames werden in einer einzigen Spalte gestapelt. Dies ist n tzlich f r vertikale Scrollanimationen oder wenn die Ausgabebreite schmal bleiben muss.
Frames in einem anpassbaren Raster Spalten und Zeilen exakt festlegen. Ideal f r Phaser, Unity und PixiJS, die feste Raster-Sheets erwarten.
Berechnet automatisch die quadratischste Anordnung. Ideal f r schnelle Exporte ohne manuelle Konfiguration.
Exportiert JSON-Metadaten, die mit Phaser, PixiJS und Unity kompatibel sind. Aktiviert die JSON-Ausgabe f r den sofortigen Engine-Import.
Generieren Sie die CSS-Datei f r eine sofort einsatzbereite Keyframe-Animation. F gen Sie sie direkt in Ihr Stylesheet ein.
Eine Bildanfrage statt vieler. Sprite-Sheets reduzieren den HTTP-Overhead im Vergleich zu einzelnen extrahierten Frames erheblich.
Kombiniere Symbolanimationen in einem einzigen Blatt. Verbessere zuerst die Qualit t und packe sie dann in ein kompaktes Sprite-Sheet.
Ein Sprite-Sheet ist ein einzelnes Bild, das mehrere Animationsbilder in einem Raster oder Streifen anordnet. Spieleentwickler und Webdesigner verwenden sie, um HTTP-Anfragen zu reduzieren und Animationen zu beschleunigen. Anstatt 20 separate Bilder zu laden, l dt der Browser nur ein einziges und bewegt ein Fenster dar ber, um jedes Bild anzuzeigen.
PNG wird f r die meisten Sprite-Arbeiten empfohlen, da es volle Transparenz und verlustfreie Qualit t unterst tzt. WebP liefert kleinere Dateien bei guter Qualit t und unterst tzt ebenfalls Transparenz ideal f r moderne Webprojekte. JPG ist nur dann sinnvoll, wenn keine Transparenz ben tigt wird und die kleinstm gliche Dateigr e erforderlich ist.
Die JSON-Datei beschreibt jedes Einzelbild: seine x/y-Position auf dem Sprite-Sheet, Breite, H he und die urspr ngliche Verz gerung in Millisekunden. Dieses Format ist kompatibel mit Phaser 3, PixiJS und dem Sprite-Sheet-Importer von Unity. Verwenden Sie den Frame Extractor , um einzelne Einzelbilder vor der Generierung des Sprite-Sheets zu untersuchen.
Aktivieren Sie CSS-Datei generieren , bevor Sie auf Generieren klicken. Die Ausgabe enth lt eine Klasse f r die Hintergrundposition jedes Frames und eine Keyframe-Animation, die alle Frames in Originalgeschwindigkeit durchl uft. Verkn pfen Sie die CSS-Datei und wenden Sie die Animationsklasse auf alle Div-Elemente an, die das Sprite-Sheet als Hintergrundbild verwenden.
Das GIF wird vollst ndig in Ihrem Browser mit JavaScript verarbeitet kein Upload erforderlich. Die generierten Sprite-Sheets werden lokal auf Ihrem Ger t erstellt und niemals an unsere Server gesendet. Ihre Dateien bleiben absolut privat.