GIF zu Flipbook-Textur — Jedes GIF in einen Frame-Strip für Unity & VRChat packen

Ein GIF ist eine Zeitachse. Eine Flipbook-Textur ist dieselbe Zeitachse, gepackt in ein einzelnes Bild, sodass ein Shader sie per Index durchlaufen kann, statt dass ein Player Frames sucht. Sie legen ein GIF im Tool ab, es erkennt Frame-Anzahl, Abmessungen und Verzögerung und schreibt dann einen einreihigen oder gerasterten Streifen mit Zeilen- und Spalten-Metadaten, die Sie in Ihr Material einfügen.

Diese Seite behandelt, was eine GIF-zu-Flipbook-Konvertierung für Unity, Godot und VRChat tatsächlich erzeugt — die vier Zahlen, die ein Flipbook-Shader benötigt, was auf einem Poiyomi-Material eingestellt werden muss und wann ein Frame-Strip besser ist als ein Raster. Die Ausgabe ist ein PNG mit transparentem Hintergrund und den Zeilen-/Spaltenanzahlen als Klartext daneben.

GIF ablegen

Der Tool-Bereich ist der erste Bildschirm. Die Drop-Zone sitzt oben; alles darunter ist Ausgabe. Ziehen Sie ein GIF darauf, und das Tool liest die Frame-Anzahl, die Verzögerung pro Frame, die Canvas-Größe und die Disposal-Methode aus. Es meldet, was es gefunden hat, bevor es etwas schreibt, denn GIFs in freier Wildbahn sind sich bei allen vier Punkten uneinig.

Zwei Dinge erfordern meist eine Entscheidung. Erstens, ungleichmäßige Frame-Verzögerungen: Die meisten Flipbook-Shader arbeiten mit einer konstanten FPS, daher muss ein GIF mit gemischten Verzögerungen auf eine feste Rate neu abgetastet oder mit seiner langsamsten gemeinsamen Frame-Zeit exportiert werden. Zweitens, Disposal: Ein GIF, das zwischen Frames nur geänderte Bereiche neu zeichnet, zeigt Ghosting, wenn Sie Frames naiv stapeln. Das Tool komponiert jeden Frame vor dem Packen auf eine vollständige Canvas, sodass teilweise Neuzeichnungen zu vollständigen Frames werden.

Wenn das Komponieren abgeschlossen ist, schreibt der Packer ein Bild. Ein 24-Frame-GIF mit 128x128 wird zu einem 3072x128-Strip. Dieselben Frames als 6x4-Raster werden zu 768x512. Beide enthalten dieselben Pixel; der Unterschied liegt darin, was der Shader mit den UVs macht.

Was eine Flipbook-Textur ist

Ein Flipbook-Shader liest vier Zahlen: Zeilen, Spalten, den aktuellen Index und FPS. Er nimmt eine UV-Koordinate im Bereich 0 bis 1, teilt sie in eine Zeilen-/Spalten-Zelle auf und verschiebt diese Zelle um den aktuellen Index. Die Textur selbst ist statisch. Nichts animiert, bis sich der Index bewegt.

Der Index wird üblicherweise aus der Zeit abgeleitet. Bei einem Zeilen-Strip gilt: Index = floor(Zeit multipliziert mit FPS), und die U-Koordinate wird um Index geteilt durch Spalten versetzt. Bei einem Raster liefert der Index auch eine Zeile: Zeile = floor(Index geteilt durch Spalten), Spalte = Index modulo Spalten. Deshalb ist der Zeilen-Strip der einfachere Fall — es gibt nur eine Dimension zu durchlaufen.

Zeilen und Spalten müssen exakt zum Bild passen. Ein 3072x128-Strip mit deklarierten 24 Spalten und 1 Zeile wird korrekt gesampelt. Deklarieren Sie 23 Spalten, und jeder Frame landet um einen Bruchteil einer Zelle daneben, was als diagonaler Schlieren-Effekt sichtbar wird. Deklarieren Sie 1 Spalte, und Sie erhalten ein statisches Bild. Diese beiden Fehler erklären die meisten defekten Flipbooks.

FPS ist von der Frame-Anzahl getrennt. Ein 24-Frame-Strip mit 12 FPS läuft zweimal pro Sekunde durch. Ein 24-Frame-Strip mit 24 FPS läuft einmal pro Sekunde durch. Die Texturdaten sind identisch; nur die Uhr ändert sich. Halten Sie die FPS am selben Ort wie die Zeilen- und Spaltenanzahlen, damit sie nie auseinanderdriften.

Zeilen, Spalten, Index, FPS. Zeilen und Spalten beschreiben die Textur. Index und FPS beschreiben die Zeit. Zeilen und Spalten sind beim Export festgelegt. Der Index ist dynamisch und gehört zum Shader oder Skript. Die FPS sind bei den meisten Shadern fest, können aber über einen Parameter gesteuert werden, wenn Sie die Geschwindigkeit regeln möchten.

Wenn Ihr Shader einen Parameter für Geschwindigkeit oder Wiedergaberate hat, multipliziert er den Zeitterm, nicht die FPS-Konstante. Behalten Sie die exportierte FPS als Basisrate bei, damit die Metadaten bei Geschwindigkeit 1 aussagekräftig bleiben.

Flipbook-Textur für Unity

In Unity ist das Flipbook üblicherweise ein Material auf einem Quad oder einem Partikel. Importieren Sie das PNG mit aktiviertem sRGB, ohne Mipmaps, wenn die Frames klein sind, und Alpha ist Transparenz. Der Wrap-Modus sollte Clamp sein, nicht Repeat — ein wiederholendes Flipbook wickelt den letzten Frame am UV-Rand in den ersten und zeigt eine Ein-Pixel-Naht.

Es gibt zwei Möglichkeiten, den Index anzusteuern. Bei einem Unlit- oder Particles-Shader mit integriertem Flipbook-Node stellen Sie die Kachelung auf Zeilen und Spalten ein und speisen einen Blend-Wert von 0 bis 1 ein. Bei einem benutzerdefinierten Shader schreiben Sie die UV-Mathematik selbst und legen Zeilen, Spalten und FPS als Materialeigenschaften offen, damit sie ohne Neukompilieren bearbeitet werden können.

Die Metadaten, die Sie einfügen: Zeilen, Spalten, Frame-Anzahl, exportierte FPS. Wenn Ihr Shader einen normalisierten Blend statt eines ganzzahligen Index verwendet, reicht der Blend-Bereich von 0 bis Frame-Anzahl geteilt durch die Gesamtzahl der Rasterzellen — bei 24 Frames in einer Zeile ist das 0 bis 1, bei einem 6x4-Raster mit 24 Frames aus 24 Zellen ebenfalls 0 bis 1. Teilraster sind der Fall, bei dem das Leute aus dem Tritt bringt: Ein 6x4-Raster mit 20 Frames endet bei 20 geteilt durch 24, also etwa 0.833. Gehen Sie darüber hinaus, und Sie sampeln leere Zellen.

Poiyomi-Flipbook für VRChat

Poiyomi bringt einen Flipbook-Node mit, und er ist der übliche Weg für einen sprechenden Mund, einen scrollenden Bildschirm oder einen Zwei-Frame-Toggle auf einem Avatar. Der Node nimmt eine Textur, ein Zeilen-/Spalten-Paar und einen Blend-Wert. VRChat führt zur Laufzeit keinen benutzerdefinierten Shader-Code aus einem Skript aus, daher muss der Index aus einer animierten Materialeigenschaft oder einem Animator-gesteuerten Parameter kommen.

Das Mesh ist genauso wichtig wie das Material. Ein Flipbook auf einem flachen Quad liest sich korrekt; dieselbe Textur auf einer gekrümmten Oberfläche zeigt gestreckte Zellen, wo die UVs ungleichmäßig verteilt sind. Behalten Sie Flipbook-Materialien auf planaren oder nahezu planaren Meshes.

Arbeiten Sie für Poiyomi im Strip-Layout, wenn die Animation eine Schleife ist, weil die UV-Mathematik aus einer Multiplikation und einer Addition besteht. Verwenden Sie das Raster-Layout, wenn die Animation aus diskreten Zuständen besteht, zwischen denen Sie springen möchten — ein Mund mit vier Formen ist als 4x1-Raster mit ganzzahligem Index leichter zu verstehen als ein Scroll.

Frame-Strip vs. Raster: Was exportieren

Die Pixeldaten sind identisch. Die Wahl hängt davon ab, was sie konsumiert. Shader wollen einen Strip. Engines und Sprite-Systeme wollen ein Raster. Entscheiden Sie sich nach dem Konsumenten, nicht nach der Dateigröße — ein Strip ist breiter und ein Raster quadratischer, und beide komprimieren bei gleicher Gesamtpixelzahl ähnlich.

Ein Strip hat eine Zeile, daher bleibt die V-Koordinate ungenutzt und der Shader verschiebt nur U. Das sind weniger Instruktionen und weniger Möglichkeiten, die Mathematik falsch zu machen. Ein Raster nutzt beide Achsen, was atlasbasierte Systeme erwarten. Wenn Sie unsicher sind, exportieren Sie den Strip und exportieren Sie nur dann als Raster neu, wenn ein Engine-Importer danach verlangt.

Ein weiterer Fall ist der Sprite-Animator, der einzelne Frames erwartet. Manche Engines wollen einen Ordner mit PNGs, keinen Atlas. Das Tool kann die Frames separat schreiben, aber das Bild auf der Festplatte ist dann die Summe aller Frames statt einer einzelnen Datei, und die Importeinstellungen gelten pro Frame.

In 3D abspielen

Eine Flipbook-Textur auf einer statischen Ebene beweist nichts. Die Punkte, die Sie prüfen müssen, sind die, die erst in Bewegung sichtbar werden: ob die Naht sauber umläuft, ob das Alpha in der Ferne hält, ob sich die FPS richtig anfühlen, wenn sich die Kamera bewegt. The Cyclops' Island ist eine spielbare Szene, die im 3D-Spiel-Builder erstellt wurde, wo Oberflächen in Echtzeit animieren, sodass Sie eine Flipbook-Schleife neben Geometrie beobachten können statt in einem Inspector.

Öffnen Sie es, laufen Sie über die Oberfläche und beobachten Sie den Loop-Punkt. Wenn ein Flipbook einen Frame zu kurz oder eine Spalte zu breit ist, sehen Sie es dort — ein sichtbares Stocken oder diagonale Schlieren —, noch bevor Sie ein Asset hochladen. Das ist das ganze Argument für die spielbare Szene: Der Fehler ist visuell, und visuelle Fehler brauchen einen Viewport.

Dieselbe Szene ist eine Referenz dafür, wie das Durchblättern von Frames bei unterschiedlichen Entfernungen und Kamerawinkeln wirkt. Frames, die aus der Nähe bei 128 Pixeln gut aussehen, werden in der Ferne ohne Mip-Kontrolle Aliasing zeigen; Frames, die aus der Ferne gut aussehen, können aus der Nähe zu weich sein. Beides lässt sich in Bewegung leichter beurteilen.

Betreten Sie die Welt, zu der es gehört

Ein Sprite ist eine Figur ohne Ort zum Stehen. Der letzte Schritt ist der, den sonst niemand bietet: Nehmen Sie das Sheet, das Sie gerade erstellt haben, und setzen Sie 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