GIF-zu-Sprite-Sheet-Konverter — Kostenlos, im Browser, kein Upload

Eine GIF-zu-Sprite-Sheet-Konvertierung klingt trivial, bis man sie von Hand macht. Ein GIF ist bereits eine Sequenz vollständiger Frames mit einer Palette und Verzögerungen pro Frame. Was man tatsächlich braucht, ist ein Werkzeug, das jeden Frame dekodiert, Transparenz korrekt zusammensetzt und diese Frames auf einem PNG in einem Raster anordnet, das sich über Texturkoordinaten adressieren lässt. Der Konverter von Neta Studio führt diesen Dekodierungsschritt lokal auf einem Canvas-Element aus, sodass deine Datei im Browser bleibt und nie einen Server berührt. Du legst ein GIF ab, wählst Spalten, Zeilen und FPS und lädst einen einzelnen PNG-Atlas herunter.

Die schwierigen Teile sind nicht die Zeichnung. Es sind die Palette, das Timing und die Rastermathematik. GIF speichert Transparenz als Index in eine Farbtabelle, daher kann ein Frame, der in einem Bildbetrachter sauber aussah, auf dem Canvas mit einem schwarzen oder weißen Rand ankommen, sobald er komponiert wird. Frame-Verzögerungen in einem GIF werden in Hundertstelsekunden angegeben und variieren oft von Frame zu Frame; deshalb erzeugt ein naiver Export ein Sheet, das ruckelt. Diese Seite behandelt die Einstellungen, auf die es ankommt, und die Fehlerfälle, auf die wir beim Bau des Werkzeugs gestoßen sind.

Ein GIF in ein Sprite-Sheet konvertieren

Der Konverter ist das erste Element auf der Seite: eine Ablagezone, eine Frame-Vorschauleiste und vier Bedienelemente — Spalten, Zeilen, FPS und ein Schalter zum Beibehalten des Alphakanals. Wenn du eine Datei ablegst, erzeugt der Browser über den GIF-Decoder pro Frame ein ImageBitmap, zeichnet jedes auf einen Offscreen-Canvas in den Quellabmessungen und kopiert sie anschließend an berechneten Zellenpositionen in den Atlas-Canvas. Die Quelldatei wird mit der File API gelesen und im Speicher gehalten. Es wird keine Netzwerkanfrage mit deinem GIF gesendet.

Die Ausgabe ist immer ein PNG. PNG bietet einen 8-Bit-Alphakanal, den du für Charakter-Arbeiten brauchst; JPEG würde jede weiche Kante zu einem Rand plätten. Wenn dein GIF keine Transparenz hat, ist der Atlas trotzdem RGBA, und die ungenutzten Alpha-Bytes kosten nur Dateigröße. Wenn dein GIF Transparenz verwendet, muss der Decoder den Full-with-Disposal-Frame anfordern statt eines partiellen Updates, sonst verschmieren bewegte Elemente über das Sheet.

Baue das Sheet so, wie deine Engine es sampelt, nicht so, wie es in einem Dateibrowser aussieht. Ein 4x4-Raster aus 64x64-Frames ist eine 256x256-Textur und adressiert Frame n bei Spalte n mod 4, Zeile floor(n / 4). Halte die Sheet-Größe bei einer Zweierpotenz, wenn die Ziel-Engine oder der Shader-Atlas eine erwartet; ein 320x320-Sheet wird auf manchen Pfaden gepolstert oder neu abgetastet, und die Sprite-Kanten werden weich.

GIF zu einem Sprite-Sheet für VRChat

Der Flipbook-Shader von VRChat liest eine Textur als einen horizontalen Streifen, nicht als Raster. Wenn du ihm ein 6x4-Sheet gibst, erhältst du einen Streifen der ersten Zeile, wiederholt, weil die UV-Mathematik davon ausgeht, dass jeder Frame in derselben Zeile sitzt und der Frame-Index nur auf der U-Achse voranschreitet. Setze Spalten auf deine Frame-Anzahl und Zeilen auf 1. Eine 24-Frame-Animation wird zu einem 24x1-Sheet.

Mache die Gesamtbreite des Streifens zu einer Zweierpotenz. Ein 24-Frame-Streifen aus 64-Pixel-Frames ist 1536 Pixel breit, was keine Zweierpotenz ist; die nächstgrößere Größe, die sich sauber bei 64 Pixeln teilen lässt, ist 2048 und bietet Platz für 32 Frames. Du kannst die ungenutzten Zellen mit transparenten Pixeln oder mit einer Kopie des letzten Frames auffüllen. Zweierpotenz ist wichtig, weil eine Nicht-PoT-Textur, die auf dem Upload-Pfad durch Mipmap-Generierung oder Komprimierung geht, die Abtastung um einen halben Texel verschieben kann, und ein Sprite, das einen Pixel breit ist, zeigt das.

Keye das Alpha hier, im Sheet, nicht im Shader. Ein Cutout- oder Alpha-Test-Pfad in einem Shader ist ein grobes Werkzeug; weiche Kanten aus der kantengeglätteten Kontur eines GIFs überleben oder verschwinden je nach Schwellenwert, und der Schwellenwert ist nichts, was du pro Avatar abstimmen möchtest. Exportiere das PNG mit echtem Alpha und einer premultiplied-sicheren Kante, und der Shader sampelt es einfach. Halte das Loop-Pacing konstant: Das Flipbook von VRChat schreitet in einem festen Zeitschritt voran. Wenn dein Quell-GIF unregelmäßige Verzögerungen pro Frame hatte, gleiche sie vor dem Export an, sonst läuft die Animation mit einer gleichmäßigen Rate, die nicht zum ursprünglichen Timing passt.

Die vollständige Parameterliste und das Textur-Setup findest du im Flipbook-Textur-Leitfaden.

GIF zu einem Frame-Raster ("Tabellenkalkulation")

Wenn Leute nach gif to spreadsheet suchen, meinen sie fast nie eine .xlsx. Sie meinen das Frame-Raster: die Frames in Zeilen und Spalten angeordnet, sodass jeder über einen Index adressierbar ist. Das Wort wird verwendet, weil ein Raster auf den ersten Blick wie eine Tabellenkalkulation aussieht. Dieses Werkzeug erzeugt dieses Raster, und das Raster ist dasselbe wie ein Sprite-Sheet — der Unterschied liegt nur darin, wie du es nennst. Entscheidend ist, dass das Layout regelmäßig ist: feste Zellengröße, feste Spalten und eine Frame-Reihenfolge von links nach rechts, oben nach unten.

Die Alternative, die manche ausprobieren, ist, Frames einzeln in einem Pixel-Art-Editor zu zeichnen und Onion Skins übereinanderzulegen, bis die Animation richtig aussieht. Dieser Workflow ist gut für selbst gestaltete Charaktere und schlecht für ein GIF, das du bereits hast. Ein Pixel-Editor liest die Verzögerungen pro Frame eines GIFs nicht, und 24 Frames von Hand in 24 Ebenen zu importieren, verliert das Timing vollständig. Wenn deine Quelle bereits eine Animation ist, ist das Konvertieren des Rasters der kürzere Weg. Die Pixel-Art-Werkzeuge lohnen sich beim Gestalten, nicht beim Transkodieren.

Für handgezeichnete Frame-Arbeit decken die Pixel-Art-Seiten die Zeichen- und Palettenseite ab.

Frame-Größe, Raster und transparente Hintergründe

Vier Dinge lassen die meisten Konvertierungen scheitern. Jedes hat ein bestimmtes Symptom.

GIF-Transparenz stirbt in der Palette. Ein GIF kann höchstens 256 Farben verwenden und markiert Transparenz als Paletteindex. Wenn ein Frame mit Disposal-Methode 2 dekodiert wird, kann der Bereich, der in einem Frame transparent war, auf die Hintergrundfarbe eines vorherigen Frames zurückgesetzt werden. Die Lösung besteht darin, jeden Frame gegen einen transparenten Puffer zu komponieren, nicht gegen Weiß. Wenn deine Vorschau eine schwarze oder graue Form um das Sprite zeigt, ist das der Hintergrundindex der Palette, und er ist jetzt echte Pixel.

Die letzte Zeile ist teilweise gefüllt. Wenn deine Frame-Anzahl 23 ist und du 6 Spalten wählst, erhältst du drei vollständige Zeilen und eine letzte Zeile mit fünf Zellen, nicht sechs. Die Atlas-Höhe rundet trotzdem auf die volle Zeilenhöhe auf. Wenn die Flipbook-Mathematik deiner Engine ein vollständiges Raster annimmt und den Frame-Index ableitet, indem sie die Gesamtzahl der Frames durch die Spalten teilt, liest sie am Ende der Schleife eine leere Zelle. Fülle das Sheet mit transparenten Zellen zu einem vollständigen Rechteck auf, oder reduziere die Spalten, sodass die Anzahl gleichmäßig teilbar ist.

Die Frame-Größe muss das Sheet teilen. Wenn du ein Unterrechteck der Breite 64 aus einem 320 breiten Sheet extrahierst, erhältst du genau fünf Spalten. Aus einem 330 breiten Sheet erhältst du fünf Spalten und einen 10-Pixel-Rest, der kein Frame ist. Halte die Sheet-Abmessungen bei Frame-Größe mal Spalten, und zwar auf beiden Achsen.

Off-by-one beim Ursprung. Textur-UV-Koordinaten laufen üblicherweise von unten links, während das Frame-Raster von oben links angeordnet wird. Wenn Frame 0 als letzter Frame gerendert wird, invertiert deine Engine V. Die Sprite-Zelle für Spalte c, Zeile r liegt im Bildraum bei x = c * width, y = r * height, und die Umwandlung in eine gespiegelte UV ist eine Subtraktion von 1.

Wohin das Sheet als Nächstes geht

Der Export ist in jedem Fall dasselbe PNG; die Engine unterscheidet sich darin, wie sie die Textur zerlegt haben möchte und was sie mit Alpha macht. Nutze dies als Kurzreferenz.

Exportiere für jedes Ziel ein Sheet mit dem Raster, das das Ziel ohne eigenen Shader lesen kann. Wenn du zwei Ziele unterstützt, exportiere zwei Sheets: einen horizontalen Streifen für VRChat und ein Raster für die Engine. Ein erneuter Export aus demselben GIF dauert weniger Zeit, als die UV-Mathematik zu schreiben, um sie zusammenzuführen.

Sieh dein Sheet in 3D animiert

Die meisten Konverter hören beim PNG auf und überlassen es dir, das Ergebnis woanders zu überprüfen. Der 3D Game Builder macht weiter: Du kannst ein Sheet auf eine gebillboardete Ebene laden und es in einer echten Szene animiert sehen — der einzige Test, der beantwortet, ob Raster und Timing stimmen. Agent Sprite Forge ist der Ort, an dem ein Sprite zu einem Charakter mit Controller wird; das Sprite ist der Charakter, und die 3D-Welt ist sein Zuhause.

The Cyclops' Island ist die spielbare Demo dieser Idee — eine kleine 3D-Szene, in der du dich bewegen kannst, im Browser gebaut und mit Sprites als Charaktere. Lege dein eigenes Sheet hinein, und dieselbe Rig, die die Demo-Frames steuert, sampelt deinen Atlas. Wenn die Frame-Reihenfolge falsch ist, siehst du es sofort: Der Charakter läuft rückwärts oder springt am Ende der Schleife auf eine leere Zelle. Wenn das Alpha falsch ist, siehst du ein hartes Rechteck um den Körper. Das sind dieselben Fehler, die du in einer Engine finden würdest — sichtbar in etwa fünf Sekunden.

Probiere die spielbare Szene von The Cyclops' Island aus und tausche deinen eigenen Atlas ein.

Weitere kostenlose Sprite-Werkzeuge

Der Konverter ist nur ein Baustein. Diese drei decken den Rest des Sprite-Workflows auf Neta Studio ab, und sie laufen in derselben Browser-Sitzung mit derselben lokalen Dateiverarbeitung.

Betritt die Welt, zu der es gehört

Ein Sprite ist ein Charakter ohne Ort zum Stehen. Der letzte Schritt ist der, den sonst niemand anbietet: Nimm das Sheet, das du gerade gebaut hast, und setze es in eine Welt, in der jemand herumlaufen kann — eine kleine Insel, ein Planet, eine regnerische Straßenecke. Jede Welt auf dieser Seite wurde aus einer geschriebenen Beschreibung erstellt und als spielbare Seite veröffentlicht.

FAQ