Sprite Sheet zu GIF Konverter — Spritesheet in animiertes GIF umwandeln

Ein GIF sind Frames in der Zeit. Ein Spritesheet sind Frames im Raum. Ein Spritesheet in ein GIF umzuwandeln bedeutet, das Sheet in der richtigen Reihenfolge in Zellen zu schneiden und jeder Zelle dann eine Verzögerung zuzuweisen, damit der Browser sie als Bewegung abspielt. Dieser Konverter läuft vollständig im Browser und behandelt die Teile, die üblicherweise brechen: unvollständige letzte Zeilen, ungleichmäßige Raster und transparente Hintergründe.

Ziehe ein Spritesheet hinein, stelle Frame-Größe, Spalten, Zeilen und FPS ein und lade dann das GIF herunter. Du kannst die Schleife vor dem Export in der Vorschau ansehen, was wichtig ist, wenn die letzte Zeile kurz ist oder die Verzögerung keine gerade Frame-Anzahl ergibt.

Spritesheet hier ablegen

Das Tool ist der erste Bildschirm. Es gibt keinen Anmeldungsschritt und keine Warteschlange. Du ziehst ein PNG oder GIF auf die Seite, und der Decoder liest die Sheet-Abmessungen sofort aus.

Du stellst vier Dinge ein: Frame-Breite und -Höhe, Spalten, Zeilen und FPS. Die Frame-Größe ist die Zellgröße in Pixeln. Spalten mal Zeilen ist die Kapazität des Rasters. Wenn das Sheet 512 mal 256 groß ist mit 64 mal 64 Zellen, sind das 8 Spalten und 4 Zeilen, Kapazität 32. FPS legt die Verzögerung pro Frame fest. Dann lädst du das GIF herunter.

Die Vorschau spielt die Schleife direkt ab. Wenn ein Frame zerschnitten aussieht — ein halber Charakter, der in die nächste Zelle verschoben ist — ist die Frame-Größe um ein paar Pixel falsch. Wenn die Animation wandert, ist die Spaltenanzahl falsch. Korrigiere die Zahlen, und die Vorschau aktualisiert sich.

So funktioniert es

Die Datei verlässt den Browser nie. Das Bild wird lokal mit dem eigenen Bild-Decoder des Browsers dekodiert, auf ein Offscreen-Canvas gezeichnet und als Pixeldaten zurückgelesen. Es gibt keinen Upload-Schritt, weil keiner nötig ist.

Der Konverter vermisst das Sheet: er prüft, ob die Breite ohne Rest durch die angegebene Frame-Breite teilbar ist und ob die Höhe ohne Rest durch die angegebene Frame-Höhe teilbar ist. Wenn beide sauber teilbar sind, ist das Raster gleichmäßig. Wenn nicht, sagt dir der Rest entweder, dass die Frame-Größe falsch ist, oder dass es Padding und Abstände gibt, die berücksichtigt werden müssen.

Dann läuft er das Raster von links nach rechts, von oben nach unten durch. Jede Zelle wird in einen Frame-Puffer kopiert. Transparente Pixel bleiben transparent. Der Encoder schreibt das GIF mit einer Verzögerung pro Frame, sodass das Timing in der Datei liegt und nicht im Player.

Bei einem 32-Frame-Sheet, das mit 12 FPS exportiert wird, ist das eine Verzögerung von etwa 8 Hundertstelsekunden pro Frame, oder 8 Zentisekunden in GIF-Begriffen. Die gesamte Schleife ist 32 geteilt durch 12, etwa 2,67 Sekunden.

Sheets mit einer unvollständigen letzten Zeile

Viele Sheets werden als festes Raster mit ungenutzten Zellen am Ende exportiert. Ein 4 mal 4 großen Sheet kann nur 13 Frames enthalten. Die letzte Zeile hat drei leere Zellen. Wenn du die Frame-Anzahl auf der Rasterkapazität lässt, werden diese leeren Zellen zu drei leeren Frames im GIF, und die Schleife blinkt oder pausiert.

Stelle die tatsächliche Frame-Anzahl ein. Wenn die Animation 13 Frames hat, stelle 13 ein. Der Konverter stoppt bei Frame 13 und ignoriert die leeren Zellen. Dasselbe gilt, wenn die letzte Zeile eine kürzere Zeile mit einer anderen Zellbreite ist.

Wenn du nicht erkennen kannst, ob das Sheet leere Frames am Ende hat, stelle die Anzahl auf einen Frame über dem letzten Frame, den du sehen kannst. Exportiere, sieh dir die Vorschau an und reduziere um eins, wenn du ein leeres Bild siehst. Es ist schneller, in der Vorschau zu prüfen, als das Sheet von Hand zu untersuchen.

Transparente Hintergründe bleiben transparent

GIF hat eine transparente Farbe, keinen Alpha-Kanal. Das ist 1-Bit-Alpha: ein Pixel ist entweder vollständig transparent oder vollständig opak. Teiltransparenz gibt es im Format nicht. Sheets mit weichen Kanten zeigen nach dem Export eine harte Kante, wenn du nichts dagegen unternimmst.

Der Konverter behält die Quelltransparenz bei. Er schreibt die transparente Farbe in die GIF-Palette und markiert diese Pixel als transparent. Ein Pixel mit einem Alpha-Wert unter dem Schwellenwert wird transparent; alles darüber wird opak.

Der Fehler, den es zu vermeiden gilt, ist das Flachlegen. Wenn das Sheet vor dem Encodieren auf ein opakes Canvas gezeichnet wird, nehmen transparente Pixel die Farbe des Canvas an. Das ist üblicherweise Weiß oder Schwarz, und vor einem neuen Hintergrund erscheint das als solider Block. Behalte das Quell-PNG mit seinem Alpha und komponiere es nicht vor dem Export.

Bei weichen Kanten mattiere die Kante gegen eine bekannte Farbe, auf der das Frame angezeigt wird. Wenn das GIF auf einer weißen Seite liegt, mattiere die Kante gegen Weiß, damit der Anti-Aliasing-Hof passt. Wenn es auf einem dunklen Hintergrund liegt, mattiere stattdessen gegen diese Farbe. Eine einzelne Matte-Farbe kann nicht für beides richtig sein.

Sheets, die kein gleichmäßiges Raster sind

Gepackte Sheets haben oft einen Abstand zwischen den Zellen und Padding um das Sheet herum. Eine 64 mal 64 Zelle mit 2-Pixel-Abstand ergibt eine Schrittweite von 66 Pixeln. Wenn du 64 als Frame-Breite eingibst, ist jede Zelle nach der ersten um kumulativ 2 Pixel verschoben, und die Animation wandert.

Gib die Zellgröße plus den Abstand als Schrittweite ein und das Padding als Offset. Manche Exporter schreiben das ganze Sheet als Zellen plus Abstände ohne Padding; andere fügen einen Rand hinzu. Lies die Metadaten der Datei oder miss die erste Zelle, um beide Zahlen zu finden.

Wenn die letzte Zelle eine andere Größe hat — ein Sheet, bei dem das letzte Frame für einen Smear oder ein Effekt-Frame breiter ist —, kann das gleichmäßige Raster es nicht in einem Durchgang beschreiben. Teile das Sheet auf: lasse die gleichmäßigen Frames als einen Bereich durch den Konverter laufen und füge das abweichende Frame separat hinzu, oder beschneide es vor der Konvertierung auf die gemeinsame Zellgröße.

Wenn das Sheet gepackt statt gerastert ist, gibt es keine einfache Schrittweite. Exportiere es als Raster aus dem Quell-Tool oder schneide die Zellen mit einem Rechteck pro Frame aus und führe diese Frames einzeln zu.

FPS wählen

GIF speichert die Frame-Verzögerung in Zentisekunden. Bei 10 FPS sind das 10 Zentisekunden pro Frame. Bei 30 FPS sind es 3,33, gerundet 3, was etwa 33 FPS ergibt. Das Format kann beliebige Verzögerungen unter einer Zentisekunde nicht ausdrücken, also wähle eine FPS, die sauber in 100 aufgeht: 10, 20, 25 oder 50 FPS.

Ungleichmäßige Verzögerungen verursachen Ruckeln. Wenn du 24 FPS einstellst, ist die Verzögerung 4,17 Zentisekunden und rundet uneinheitlich, sodass manche Frames länger halten als andere. Bei einer kurzen Schleife ist das als einmaliges Stocken pro Zyklus sichtbar. Verwende stattdessen 20 oder 25.

Passe die Schleifenlänge an die beabsichtigte Dauer der Animation an. Ein Gehzyklus, der auf 0,8 Sekunden ausgelegt ist, sollte ein GIF ergeben, das in 0,8 Sekunden schleift. Bei 16 Frames sind das genau 20 FPS. Ändere die Frame-Anzahl, und die beabsichtigte FPS ändert sich mit.

Die meisten Browser erzwingen außerdem eine Mindestverzögerung. Verzögerungen unter 2 Zentisekunden werden vom Betrachter häufig auf etwa 10 Zentisekunden begrenzt, sodass ein Export mit 50 FPS in manchen Kontexten mit 10 FPS abgespielt wird, unabhängig vom Dateiinhalt. Teste das exportierte GIF in dem Browser, den du anvisierst.

Der umgekehrte Weg

Die umgekehrte Richtung ist üblich. Du hast ein animiertes GIF und willst ein Spritesheet: ein Bild mit allen Frames auf einem Raster angeordnet, damit eine Game-Engine es in eine Animation schneiden kann. Ein GIF-zu-Spritesheet-Konverter macht das: er dekodiert die GIF-Frames, packt sie in ein gleichmäßiges Raster und exportiert ein PNG mit Frame-Größe und -Anzahl.

Der knifflige Teil des umgekehrten Wegs ist dasselbe Transparenzproblem. Ein GIF hat eine transparente Farbe. Wenn du es zu einem Sheet entpackst, wird diese Farbe zu den transparenten Pixeln des Sheets, und jede Anti-Aliasing-Kante, die im GIF flachgelegt wurde, bleibt flachgelegt. Das Sheet erbt, was das GIF verloren hat.

Auch die Frame-Verzögerung geht auf dem Weg hinaus verloren. Ein Spritesheet hat kein Timing; die Engine oder der Animator weist es zu. Wenn du das Timing brauchst, notiere die FPS des GIFs vor der Konvertierung und stelle sie in der Zielanimation ein.

Sieh dir das GIF in 3D an

Eine GIF-Schleife ist eine flache Animation. The Cyclops' Island ist eine spielbare 3D-Welt, die in Neta Studio gebaut wurde, in der das Sprite der Charakter ist und die Welt der Ort, an dem er lebt. Du kannst eine konvertierte Animation auf einen Charakter laden und ihn durch die Szene bewegen.

Das ändert, was du prüfst. Ein GIF, das auf einer Seite gut aussieht, kann in einer Welt falsch wirken: die Bildrate, die vor einem weißen Hintergrund flüssig wirkte, kann vor bewegter Geometrie langsam wirken, und die Matte-Farbe, die du für die Transparenz gewählt hast, passt möglicherweise nicht zur Umgebung.

Mini World und der 3D Game Builder sind die beiden anderen Orte, an denen du das Ergebnis unterbringen kannst. Mini World ist eine kleine Welt mit derselben Builder-Oberfläche. Agent Sprite Forge erzeugt Sprite-Charaktere, die du exportieren und animieren kannst. Alle laufen im Browser.

Weitere kostenlose Tools

Wenn du mit Sprites arbeitest, ist der Konverter ein Schritt in einer Kette. Dies sind die anderen.

Sprite-Animator: spielt ein Sheet mit festgelegter FPS mit Onion Skinning und Frame-Stepping ab, damit du eine Schleife prüfen kannst, bevor du sie exportierst. Nützlich, um ein fehlerhaftes Frame zu finden, ohne zuerst ein GIF zu exportieren.

Sprite-Sheet-Ersteller: packt einzelne Frame-Bilder in ein Raster mit gewählter Zellgröße, Spalten und Padding. Das verwendest du, wenn Frames als separate Dateien statt als ein Sheet ankommen.

Sprite-Ressourcen-Bibliothek: eine Sammlung fertiger Sprites und Sheets, um den Konverter zu testen, einschließlich Sheets mit unvollständigen letzten Zeilen und transparenten Hintergründen.

Nichts davon erfordert einen Upload. Sie laufen im Browser, genau wie der Konverter.

Betritt die Welt, zu der es gehört

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

FAQ