Laufende Pixel-Katze
Sechs Frames in einer Zeile: die Anordnung, die die meisten Engines als Streifen lesen.
GIF in Sprite Sheet umwandeln
Zieh ein animiertes GIF hierher und du bekommst jeden Frame auf einem einzigen Sprite Sheet als PNG, mit JSON-Atlas und CSS-Animation. Mit diesem kostenlosen Tool kannst du jedes GIF in ein Sprite Sheet umwandeln, auch animierte WebPs und PNGs und kurze Videoclips, alles direkt in deinem Browser.
GIF in Sprite SheetKostenlos · läuft in deinem Browser
GIF hierher ziehen
Animiertes GIF, WebP oder PNG oder ein kurzer MP4- oder WebM-Clip. Alles bleibt in deinem Browser.
- Kostenlos, läuft im Browser
- GIF, WebP, PNG und Video
- Zeilen, Spalten und Rand
- PNG, JSON-Atlas und CSS
Acht Beispiele für Sprite Sheets aus GIFs
Acht Animationen, eigens für diese Beispiele erstellt und mit dem Konverter dieser Seite umgewandelt. Öffne eine und sieh, wie du mit jeder Einstellung ein GIF in ein Sprite Sheet umwandeln kannst.
Flatternder blauer Vogel
Vier Frames auf einem Sheet mit Zweierpotenz-Größe, 1024 × 1024, für Engines, die das verlangen.
Flackernde Fackel
Sechs Frames in halber Größe, ein kleines Sheet für ein Tile-basiertes Spiel.
Lade-Spinner
Acht Frames auf einem quadratischen Sheet, bereit für eine CSS-Ladeanimation.
Schwebender Geist
Vier Frames in einer Spalte, für Engines, die Sheets von oben nach unten abspielen.
Schlagendes Herz-Icon
Vier Frames mit 4 px Rand, damit die Kanten nie in den nächsten Frame laufen.
Winkender Roboter
Vier Frames in einer Zeile mit 4 px Abstand dazwischen.
Raketenflamme
Vier Frames einer flackernden Flamme auf einem fast quadratischen Sheet.
So machst du ein Sprite Sheet aus einem GIF
Drei Schritte, und nichts wird hochgeladen.
Zieh ein animiertes GIF, WebP oder PNG oder einen kurzen MP4- oder WebM-Clip hierher, füge es ein oder wähle es aus. Jeder Frame wird auf deinem Gerät gelesen.
Behalte alle Frames oder einen Bereich, nimm jeden n-ten Frame, lass Wiederholungen weg und stell dann Spalten, Rand, Abstand und Frame-Größe ein.
Speichere das Sprite Sheet als PNG, den JSON-Atlas mit der Dauer jedes Frames, eine CSS-Animation oder die Frames als PNGs in einem ZIP.
Was dieser Konverter am besten kann
Sechs Stärken, vom Pixel-Laufzyklus bis zur Ladeanimation fürs Web.
- Animation
GIF, WebP, PNG und kurze Clips
Öffne ein animiertes GIF, ein animiertes WebP oder PNG oder einen kurzen MP4- oder WebM-Clip. Die Frames werden so gelesen, wie ein Viewer sie zeigt, deshalb kommen überlappende GIF-Frames vollständig heraus.
Nur die Frames, die du brauchst
Behalte einen Bereich, nimm jeden zweiten oder dritten Frame und lass wiederholte Frames weg. Die Zeit eines übersprungenen Frames geht an den Frame davor, so behält die Animation ihr Tempo.
Eine Anordnung für jede Engine
Ein fast quadratisches Sheet, eine Zeile, eine Spalte oder deine eigene Spaltenzahl, mit Rand, Abstand und Größen als Zweierpotenz: So kannst du jedes GIF in ein Sprite Sheet umwandeln, das zu deiner Engine passt.
JSON-Atlas und CSS-Animation
Der JSON-Atlas enthält Position und Dauer jedes Frames im Format, das Phaser und PixiJS lesen; die CSS-Datei spielt das Sheet auf jeder Webseite ab.
Frame-Größe und Pixel-Art
Verkleinere Frames auf ein Viertel oder die Hälfte für kleinere Sheets oder vergrößere Pixel-Art 2× oder 4× mit scharfen Pixeln. Die Größe des Sheets siehst du schon vor dem Download.
Kostenlos und privat
Alles läuft in deinem Browser: kein Upload, kein Konto, kein Wasserzeichen, und das Tool arbeitet auch offline weiter, sobald die Seite geladen ist.
Ratgeber: saubere Sprite Sheets aus jeder Animation
Fünf kurze Tipps für ein sauberes Sheet aus jeder Animation.
Wähle die Anordnung, die deine Engine liest
Eine Zeile passt zu den meisten Animationstools und zu CSS; ein fast quadratisches Sheet hält große Animationen innerhalb der maximalen Texturgröße; eine Spalte passt zu Engines, die Sheets von oben nach unten lesen.
Kürze die Frames
Stell „Ab Frame“ und „Bis Frame“ so ein, dass genau eine Schleife bleibt, und halbiere mit „Jedes n-te“ eine lange Animation. „Wiederholte Frames weglassen“ entfernt Pausen, die manche GIFs als Kopien speichern.
Rand und Abstand
Gib 1 bis 4 px Rand, wenn Frames im Spiel skaliert werden: So bleiben benachbarte Frames sauber von den Kanten getrennt. Abstand schafft Platz zwischen den Zellen zum Bearbeiten.
Behalte die Sheet-Größe im Blick
Die Größe steht unter dem Sheet. Für Handys hält eine kleinere Frame-Größe oder mehr Spalten jede Seite innerhalb von 4.096 px; schalte „Größe als Zweierpotenz“ für Engines ein, die das verlangen.
Nutze den Atlas oder das CSS
Lade das PNG mit dem JSON-Atlas in deine Engine, und du bekommst jeden Frame mit Namen und Dauer. Für eine Website bindest du die CSS-Datei ein und gibst einem Element ihre Klasse.
Wer Animationen in Sprite Sheets verwandelt
Typische Gründe, warum Leute ein GIF in ein Sprite Sheet umwandeln.
Spieleentwicklung
Bring animierte GIFs und Clips als eine Textur mit benannten Frames in deine Engine.
Webdesign
Ersetze ein schweres GIF durch ein einziges PNG und eine kurze CSS-Animation.
UI- und App-Design
Mach aus Lade-Spinnern und Icon-Animationen Sheets für Apps und Oberflächen.
Animation und Modding
Sammle alle Frames einer Animation auf einem Sheet, zum Bearbeiten, Teilen oder Modden.
Häufige Fragen zu Sprite Sheets aus GIFs
Antworten zum Umwandeln von Animationen in Sprite Sheets, zu Dateien und zum Datenschutz.
Öffne das GIF, wähle die Frames und die Spalten und lade dann das Sprite Sheet als PNG herunter, bei Bedarf auch den JSON-Atlas oder das CSS.
Ja. Er läuft komplett in deinem Browser, braucht kein Konto und setzt kein Wasserzeichen.
Nein. Deine Animation wird auf deinem Gerät gelesen und in ein Sheet verwandelt; nichts geht an einen Server.
Ja. Animierte WebPs und PNGs öffnen sich in Chrome, Edge und Safari, und kurze MP4- oder WebM-Clips werden mit 12 Frames pro Sekunde gelesen.
Die Dauer jedes Frames steht im JSON-Atlas und im CSS. Wenn du Frames überspringst, geht ihre Zeit an den Frame davor, so dauert die Schleife genauso lang wie das GIF.
Eine Zeile ist für Animationen am gebräuchlichsten, ein quadratisches Sheet hält lange Animationen kompakt, und eine Spalte passt zu Engines, die Sheets von oben nach unten lesen.
Das JSON-Hash-Format lesen Phaser, PixiJS und viele andere Engines und Tools; es enthält Namen, Position auf dem Sheet und Dauer jedes Frames.
Ja. „Frames (ZIP)“ speichert jeden behaltenen Frame als eigenes PNG, benannt und der Reihe nach nummeriert.
Jetzt GIF in Sprite Sheet umwandeln
Öffne eine Animation und lade ihr Sprite Sheet in Sekunden herunter, kostenlos und direkt im Browser.
GIF öffnen