Flipbook-Textur: So animieren Sie Sprites in Unity, Godot & VRChat

Eine Flipbook-Textur ist ein Sprite-Sheet, das ein Shader Frame für Frame auf einer einzelnen Oberfläche abspielt. Es gibt kein Rig und keine Timeline: Das Sheet hält jeden Frame in einem festen Raster, und das Material bewegt ein kleines Fenster mit konstanter Geschwindigkeit über dieses Raster. Ein 8 x 8 großes Sheet enthält 64 Frames; bei 12 Frames pro Sekunde wiederholt es sich in etwa 5,3 Sekunden. Das Mesh ändert sich nie, keine Textur wird erneut hochgeladen, und die gesamte Animation kostet einen einzigen Texture-Lookup.

Diese Seite behandelt die vier Zahlen, die ein Flipbook-Shader benötigt, und wie der Frame-Index auf UV-Koordinaten abgebildet wird, die zwei Möglichkeiten, eine Flipbook-Textur in Unity anzusteuern, wie ein Poiyomi-Flipbook auf einem VRChat-Avatar eingerichtet wird, das Äquivalent in Godot und Phaser und wie Sie Ihr eigenes Sheet aus einem GIF oder aus einer schriftlichen Beschreibung erstellen.

Kurzantwort

Eine Flipbook-Textur ist ein Sprite-Sheet, das als Shader-Animation verwendet wird und über die Zeit nach Zeile und Spalte indiziert wird. Das Sheet belegt einen Texture-Slot; jede Shader-Auswertung berechnet aus verstrichener Zeit und einer Frame-Rate einen Frame-Index, reduziert diesen Index auf eine Spalte und eine Zeile und bildet die Oberflächen-UVs auf diese einzelne Zelle ab. Frame = floor(time * fps) mod frameCount, column = frame mod columns, row = floor(frame / columns). Ein 6 x 6 großes Sheet durchläuft bei 10 FPS 36 Frames in 3,6 Sekunden, vollständig auf der GPU, ohne Upload pro Frame und ohne Änderung des Draw Calls.

So funktioniert eine Flipbook-Textur

Vier Zahlen definieren die Animation. Columns und Rows beschreiben das Sheet-Layout. Frame count ist normalerweise columns mal rows und ist der Wert, bei dem der Index umschlägt. Frame rate gibt an, wie schnell der Index voranschreitet. Alles andere — Filterung, Wrap Mode, UV-Insets — existiert, damit der Sampler nicht außerhalb der aktuellen Zelle liest.

Die Index-Mathematik ist kurz und es lohnt sich, sie auszuschreiben. Bei verstrichener Zeit t: frame = floor(t * fps) mod frameCount, column = frame mod columns, row = floor(frame / columns). Das UV-Fenster ist dann tiling = (1 / columns, 1 / rows) und offset = (column / columns, row / rows). Die vertikale Richtung ist der Teil, der viele stolpern lässt. Die meisten Tools zum Erstellen von Sheets schreiben Zeile 0 an den oberen Bildrand, während die UV-Ursprünge von Unity und Godot unten links liegen. Bei einem Sheet mit oberster Zeile zuerst wird in Unity offset.y zu 1 - (row + 1) / rows, sonst laufen die Zeilen invertiert ab und der erste Frame der Animation ist die letzte Zeile des Sheets.

Filterung entscheidet, ob das Ergebnis sauber ist. Setzen Sie den Wrap Mode des Sheets auf Clamp. Bei Repeat liest ein Sample am rechten Rand der Textur den linken Rand, sodass eine Pixelspalte aus Frame 0 im letzten Frame jeder Zeile auftaucht. Schalten Sie Mipmaps für hartkantige Pixel Art aus, weil die Mip-Kette benachbarte Zellen mittelt und die Animation zu Brei wird, sobald die Oberfläche einige Meter entfernt ist. Wenn die Ziel-Engine oder der Shader Mipmaps erzwingt, lassen Sie einen ein oder zwei Pixel breiten transparenten Rand um jede Zelle, oder rücken Sie das UV-Fenster an allen vier Seiten um einen halben Texel ein.

Flipbook-Textur in Unity

Es gibt zwei Wege, und sie scheitern auf unterschiedliche Weise. Weg eins ist ein Shader, dem der Zeilen- und Spaltenindex gehört und der sich selbst animiert. Weg zwei ist das Animation-Fenster, das Tiling und Offset des Materials per Keyframe animiert, während ein einfacher Lit- oder Unlit-Shader das Sampling übernimmt. Weg eins ist besser für Effekte, die mit der Spielzeit synchron bleiben müssen; Weg zwei ist besser, wenn die Animation von einem Animator-State gesteuert und in der Timeline zusammen mit allem anderen in der Szene sichtbar sein soll.

Legen Sie in jedem Fall zuerst den Sprite-Sheet-Import fest: Wrap Mode Clamp, Mip Maps off, Filter Mode Point und keine Kompression bei Pixel Art. Diese drei Einstellungen verursachen mehr Flipbook-Fehler als die Shader-Mathematik.

Weg 1: ein Shader mit Zeilen- und Spaltenindex

In Shader Graph nimmt der Flipbook-Node Columns, Rows und einen zeitgesteuerten Frame-Index und gibt die neu zugeordneten UVs aus. In einem handgeschriebenen Shader legen Sie _Columns, _Rows und _Fps als Properties offen und berechnen die Zelle in der Vertex- oder Fragment-Stufe. Wenn die Animation objektsynchron laufen muss, steuern Sie den Frame-Index über einen Script-Float statt _Time.y in jedem Material unabhängig abzufragen, damit zwei Flipbooks auf demselben Objekt nicht auseinanderdriften.

Weg 2: Das Animation-Fenster steuert Tiling und Offset

Dieser Weg animiert den _ST-Vektor der Textur. Built-in Standard und Unlit verwenden _MainTex_ST; URP Lit und Unlit verwenden _BaseMap_ST. Das Tiling bleibt fest bei (1, 1 / rows) und nur offset.y ändert sich. Die folgenden Schritte gelten für diesen Weg.

Poiyomi-Flipbook für VRChat

Der Flipbook-Abschnitt des Poiyomi-Shaders scrollt ein UV-Fenster über ein Sheet direkt am Material, sodass ein Material-Slot einen animierten Sprite auf einem Avatar-Mesh anzeigen kann. Er bietet Rows, Columns und eine Frame-Rate sowie einen Modus, in dem Sie den Frame-Index selbst steuern, statt ihn über die Shader-Zeit laufen zu lassen.

Verwenden Sie einen einzeiligen Strip statt eines Rasters. Ein Strip gibt dem Shader nur eine Achse, entlang derer er schreitet, wodurch die vertikale Naht vollständig entfällt. Bei einem Raster muss sich das UV-Fenster am Ende jeder Zeile eine Zeile nach unten bewegen, und jede Filterung, Mip-Stufe oder Halbtexel-Rundungsfehler an dieser Grenze tastet die benachbarte Zeile ab — sichtbar als dünnes Band eines anderen Frames während der Wiedergabe. Ein Strip macht den Frame-Index außerdem zu einer einfachen Multiplikation: Die Frame-Breite in UV ist 1 / frameCount, und der Offset ist einfach frame / frameCount. Für eine 8-Frame-Animation mit 256 x 256 großen Zellen ist der Strip 2048 x 256 und bleibt eine Zweierpotenz.

Alpha ist auf einem Avatar wichtiger als in einer flachen Szene. Wenn der Sprite harte Kanten hat, verwenden Sie Cutout oder Opaque. Flipbooks in der Transparent-Queue schreiben keine Tiefe, und auf einem Avatar sortieren sie sich gegen den Körper und gegeneinander auf Arten, die sich mit dem Kamerawinkel ändern. Behalten Sie die animierte Oberfläche nach Möglichkeit auf einem Material, das bereits am Avatar ist — jeder zusätzliche Material-Slot zählt gegen den Performance-Rang Ihres Avatars. Wenn der Frame-Index von einem Animator-State mit einem synchronisierten Parameter gesteuert wird, sieht jeder Client denselben Frame; ein aus der Shader-Zeit berechneter Frame-Index wird lokal ausgewertet und kann bei verschiedenen Betrachtern an einer anderen Stelle in der Schleife stehen.

Flipbook in Godot & Phaser

In Godot 4 ist der 2D-Weg AnimatedSprite2D mit einer SpriteFrames-Ressource. Importieren Sie das Sheet, öffnen Sie SpriteFrames, setzen Sie Hframes und Vframes auf die Spalten- und Zeilenanzahl, fügen Sie die Frames für die Animation hinzu, stellen Sie dann die Geschwindigkeit der Animation in Frames pro Sekunde ein und lassen Sie Loop aktiviert. SpriteFrames speichert die Animation als Liste von Frame-Indizes, sodass sowohl ein Raster-Sheet als auch ein einzelner Strip ohne UV-Mathematik auf Ihrer Seite funktionieren.

Wenn Sie nur eine Animation benötigen, ist ein einfaches Sprite2D leichter: Setzen Sie Hframes und Vframes einmal und lassen Sie dann die Integer-Property frame von einem AnimationPlayer mit Step-Interpolation voranschreiten. Tween Sie frame nicht mit einer Standard-Easing-Kurve — der Wert ist ein Integer-Index, und eine Interpolation rundet entweder auf einen einzelnen Wert ab oder flackert zwischen zwei Zellen.

Für ein Flipbook auf einer 3D-Oberfläche in Godot ist ein ShaderMaterial mit derselben Zeilen- und Spaltenmathematik wie in der Unity-Version der kürzeste Weg: uv = UV * vec2(1.0 / cols, 1.0 / rows) + vec2(col / cols, row / rows), wobei die Zeile aus dem Frame-Index berechnet wird. Godots UV-Ursprung liegt unten links, genau wie in Unity, daher braucht ein Sheet mit oberster Zeile zuerst dieselbe vertikale Spiegelung.

In Phaser 3 wird das Sheet einmal geladen und beim Laden zerlegt. frameWidth und frameHeight definieren die Zelle, Frames werden von links nach rechts und von oben nach unten nummeriert, und die Animation wird über Frame-Nummern statt über Koordinaten identifiziert — es gibt keinen Shader zu schreiben und keine Zeilen- und Spaltenarithmetik, bei der man Fehler machen könnte.

Ein Sprite-Sheet live in 3D abspielen

Die spielbare Szene in diesem Abschnitt ist The Cyclops' Island, ausgeführt im 3D Game Builder von Neta Studio. Das Flipbook auf dem Bildschirm ist dieselbe Index-zu-UV-Operation, die oben beschrieben wurde, ausgewertet in einem Three.js-Shader auf der GPU — der Unterschied ist, dass sie auf einem echten Mesh in einer echten Szene läuft, mit einer Kamera, die Sie steuern, und Lichtern, die sich bewegen.

Das ist wichtiger, als es klingt. Ein Flipbook in einer flachen Unity-Szene wird normalerweise frontal betrachtet, wo Naht-Bleeding und Mip-Blending schwer zu erkennen sind. Bewegen Sie die Kamera in einem flachen Winkel um eine animierte Oberfläche, und die Probleme zeigen sich sofort: ein Band der benachbarten Zelle am Frame-Rand, die letzte Mip-Stufe, die zwei Frames zu einem Brei mittelt, oder eine Alpha-Kante, die von vorn korrekt aussieht und von der Seite verschwindet. Der Browser-Build macht die Schleife zwischen dem Erstellen eines Sheets und dem Ansehen auf einer Oberfläche kurz genug, um ohne Build-Schritt zu iterieren.

Mini World ist die kleinere Szene, um ein einzelnes Sheet zu testen — weniger Meshes und kürzere Ladezeit. Agent Sprite Forge erzeugt die Frames, wenn Sie noch kein Sheet haben, und beide Szenen verwenden denselben Flipbook-Pfad, sodass ein Sheet, das in Mini World richtig aussieht, sich in The Cyclops' Island genauso verhält.

Erstellen Sie Ihr eigenes Sheet

Es gibt drei Wege zu einem brauchbaren Sheet: ein vorhandenes GIF konvertieren, ein Raster auf einen einzelnen Strip zuschneiden oder Frames aus einer schriftlichen Beschreibung generieren. Alle drei enden in derselben Datei — ein PNG, bei dem jede Zelle dieselbe Größe hat, von links nach rechts und von oben nach unten angeordnet, wobei die Sheet-Breite ein sauberes Vielfaches der Zellenbreite ist.

Ein GIF zu konvertieren ist der Weg mit der meisten versteckten Arbeit, weil ein GIF keine Sequenz vollständiger Frames ist. Frames sind häufig partielle Diffs gegenüber dem vorherigen Frame, und Verzögerungen werden pro Frame in Hundertstelsekunden gespeichert. Ein Flipbook-Shader akzeptiert eine einzige Frame-Rate, daher muss variables Timing vor dem Export in duplizierte Frames eingeebnet werden.

Ein Raster auf einen Strip zuzuschneiden ist mechanisch: Behalten Sie die benötigte Zeile, schneiden Sie die Höhe auf eine Zelle zu und lassen Sie die Breite bei Frame-Anzahl mal Zellenbreite. Das ist der richtige Schritt, wenn ein Raster-Sheet als einzelne Animation verwendet wird, weil er die vertikale Achse und die damit verbundene Naht entfernt. Das Generieren aus einer Beschreibung ist der dritte Weg — Agent Sprite Forge nimmt eine Aktion und eine Frame-Anzahl und gibt ein Sheet mit fester Zellgröße zurück, wodurch die Handarbeit entfällt, Frames einzeln zu exportieren und auszurichten.

Betreten Sie die Welt, zu der sie 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, einen Planeten, eine regnerische Straßenecke. Jede Welt auf dieser Seite wurde aus einer schriftlichen Beschreibung erstellt und als spielbare Seite veröffentlicht.

FAQ