Texture flipbook : comment animer des sprites dans Unity, Godot et VRChat

Une texture flipbook est une planche de sprites qu'un shader joue image par image sur une seule surface. Il n'y a ni rig ni timeline : la planche contient toutes les images dans une grille fixe, et le matériau déplace une petite fenêtre sur cette grille à vitesse constante. Une planche de 8 x 8 contient 64 images ; à 12 images par seconde, elle boucle en environ 5,3 secondes. Le maillage ne change jamais, aucune texture n'est rechargée, et toute l'animation coûte une seule lecture de texture.

Cette page couvre les quatre nombres dont un shader flipbook a besoin et la façon dont l'indice d'image se projette sur les coordonnées UV, les deux méthodes pour piloter une texture flipbook dans Unity, la configuration d'un flipbook Poiyomi sur un avatar VRChat, l'équivalent dans Godot et Phaser, et la création de votre propre planche à partir d'un GIF ou d'une description écrite.

Réponse rapide

Une texture flipbook est une planche de sprites utilisée comme animation de shader, indexée par ligne et par colonne au fil du temps. La planche occupe un seul emplacement de texture ; chaque évaluation du shader calcule un indice d'image à partir du temps écoulé et d'une fréquence d'images, réduit cet indice à une colonne et une ligne, puis remappe les UV de la surface dans cette unique cellule. Image = floor(time * fps) mod frameCount, colonne = frame mod columns, ligne = floor(frame / columns). Une planche de 6 x 6 à 10 FPS parcourt 36 images en 3,6 secondes, entièrement sur le GPU, sans chargement par image et sans modification du draw call.

Comment fonctionne une texture flipbook

Quatre nombres définissent l'animation. Les colonnes et les lignes décrivent la disposition de la planche. Le nombre d'images vaut normalement colonnes multiplié par lignes, et c'est la valeur à laquelle l'indice reboucle. La fréquence d'images est la vitesse à laquelle l'indice avance. Tout le reste — filtrage, mode de répétition, marges UV — existe pour empêcher le sampler de lire en dehors de la cellule courante.

Le calcul de l'indice est court et mérite d'être écrit. Pour un temps écoulé t : frame = floor(t * fps) mod frameCount, column = frame mod columns, row = floor(frame / columns). La fenêtre UV est alors tiling = (1 / columns, 1 / rows) et offset = (column / columns, row / rows). La direction verticale est le point qui piège le plus de monde. La plupart des outils de création de planches écrivent la ligne 0 en haut de l'image, alors que les origines UV d'Unity et de Godot sont en bas à gauche. Sur une planche dont la première ligne est en haut dans Unity, offset.y devient 1 - (row + 1) / rows, sinon les lignes sont jouées à l'envers et la première image de l'animation est la dernière ligne de la planche.

Le filtrage détermine si le résultat est propre. Réglez le mode de répétition de la planche sur Clamp. Avec Repeat, un échantillon au bord droit de la texture lit le bord gauche, si bien qu'une colonne de pixels de l'image 0 apparaît dans la dernière image de chaque ligne. Désactivez les mipmaps pour le pixel art aux contours nets, car la chaîne de mip moyenne les cellules voisines et l'animation devient floue dès que la surface se trouve à quelques mètres. Si le moteur ou le shader cible impose les mipmaps, laissez une marge transparente d'un ou deux pixels autour de chaque cellule, ou réduisez la fenêtre UV d'un demi-texel sur les quatre côtés.

Texture flipbook dans Unity

Il existe deux approches, et elles échouent de manières différentes. La première est un shader qui gère lui-même l'indice de ligne et de colonne et s'anime seul. La seconde est la fenêtre Animation qui pose des keyframes sur le tiling et l'offset du matériau, tandis qu'un shader Lit ou Unlit classique effectue l'échantillonnage. La première convient mieux aux effets qui doivent rester synchronisés avec le temps de jeu ; la seconde convient mieux lorsqu'il faut piloter l'animation par un état d'Animator et la voir dans la timeline aux côtés du reste de la scène.

Dans les deux cas, configurez d'abord l'import de la planche de sprites : Wrap Mode Clamp, Mip Maps désactivées, Filter Mode Point, et aucune compression sur le pixel art. Ces trois réglages causent plus de bugs de flipbook que le calcul du shader.

Approche 1 : un shader avec un indice de ligne et de colonne

Dans Shader Graph, le nœud Flipbook prend Columns, Rows et un indice d'image piloté par le temps, et produit les UV remappés. Dans un shader écrit à la main, exposez _Columns, _Rows et _Fps comme propriétés et calculez la cellule dans l'étape vertex ou fragment. Si l'animation doit être synchronisée entre plusieurs objets, pilotez l'indice d'image depuis un float de script plutôt que d'échantillonner _Time.y indépendamment dans chaque matériau, afin que deux flipbooks sur le même objet ne puissent pas se désynchroniser.

Approche 2 : la fenêtre Animation pilotant le tiling et l'offset

Cette approche anime le vecteur _ST de la texture. Les shaders Standard et Unlit intégrés utilisent _MainTex_ST ; URP Lit et Unlit utilisent _BaseMap_ST. Le tiling reste fixe à (1, 1 / rows) et seul offset.y change. Les étapes ci-dessous s'appliquent à cette approche.

Flipbook Poiyomi pour VRChat

La section Flipbook du shader Poiyomi fait défiler une fenêtre UV sur une planche directement dans le matériau, si bien qu'un seul emplacement de matériau peut afficher un sprite animé sur un maillage d'avatar. Elle expose Rows, Columns et une fréquence d'images, plus un mode où vous pilotez vous-même l'indice d'image au lieu de le laisser dépendre du temps du shader.

Utilisez une bande d'une seule ligne plutôt qu'une grille. Une bande ne donne au shader qu'un seul axe à parcourir, ce qui supprime entièrement la couture verticale. Avec une grille, la fenêtre UV doit descendre d'une ligne à la fin de chaque ligne, et la moindre erreur de filtrage, de niveau de mip ou d'arrondi au demi-texel à cette frontière échantillonne la ligne voisine — visible sous la forme d'une fine bande d'une autre image pendant la lecture. Une bande simplifie aussi l'indice d'image en une simple multiplication : la largeur d'une image en UV vaut 1 / frameCount, et l'offset vaut simplement frame / frameCount. Pour une animation de 8 images de cellules 256 x 256, la bande fait 2048 x 256 et reste une puissance de deux.

L'alpha compte davantage sur un avatar que dans une scène plate. Si le sprite a des contours nets, utilisez Cutout ou Opaque. Les flipbooks en file Transparent n'écrivent pas la profondeur et, sur un avatar, ils se trient par rapport au corps et entre eux d'une manière qui change avec l'angle de caméra. Gardez la surface animée sur un matériau déjà présent sur l'avatar dans la mesure du possible — chaque emplacement de matériau supplémentaire compte dans le rang de performance de votre avatar. Si l'indice d'image est piloté par un état d'Animator avec un paramètre synchronisé, chaque client voit la même image ; un indice d'image calculé à partir du temps du shader est évalué localement et peut se situer à un point différent de la boucle selon le spectateur.

Flipbook dans Godot et Phaser

Dans Godot 4, la voie 2D est AnimatedSprite2D avec une ressource SpriteFrames. Importez la planche, ouvrez SpriteFrames, réglez Hframes et Vframes sur le nombre de colonnes et de lignes, ajoutez les images de l'animation, puis réglez la vitesse de l'animation en images par seconde et laissez Loop activé. SpriteFrames stocke l'animation sous forme d'une liste d'indices d'images, si bien qu'une planche en grille comme une bande unique fonctionnent sans aucun calcul UV de votre côté.

Si vous n'avez besoin que d'une seule animation, un simple Sprite2D est plus léger : réglez Hframes et Vframes une fois, puis faites avancer la propriété entière frame depuis un AnimationPlayer avec une interpolation step. N'animez pas frame avec une courbe d'interpolation par défaut — la valeur est un indice entier et l'interpoler revient soit à la figer sur une seule valeur, soit à faire clignoter deux cellules.

Pour un flipbook sur une surface 3D dans Godot, un ShaderMaterial avec le même calcul de ligne et de colonne que la version Unity est le chemin le plus court : uv = UV * vec2(1.0 / cols, 1.0 / rows) + vec2(col / cols, row / rows), la ligne étant calculée à partir de l'indice d'image. L'origine UV de Godot est en bas à gauche, comme celle d'Unity, donc une planche dont la première ligne est en haut nécessite le même retournement vertical.

Dans Phaser 3, la planche est chargée une fois et découpée au chargement. frameWidth et frameHeight définissent la cellule, les images sont numérotées de gauche à droite et de haut en bas, et l'animation est identifiée par des numéros d'images plutôt que par des coordonnées — il n'y a aucun shader à écrire et aucun calcul de ligne et de colonne à rater.

Faites défiler une planche de sprites en direct en 3D

La scène jouable de cette section est The Cyclops' Island, qui tourne dans le constructeur de jeux 3D Neta Studio. Le flipbook à l'écran résulte de la même opération indice-vers-UV décrite plus haut, évaluée dans un shader Three.js sur le GPU — la différence est qu'elle s'exécute sur un vrai maillage dans une vraie scène, avec une caméra que vous contrôlez et des lumières qui bougent.

Cela compte plus qu'il n'y paraît. Un flipbook dans une scène Unity plate est généralement observé de face, où les fuites de couture et le mélange des mips sont difficiles à voir. Faites le tour d'une surface animée avec la caméra sous un angle rasant et les problèmes apparaissent immédiatement : une bande de la cellule voisine au bord de l'image, le dernier niveau de mip qui moyenne deux images en un flou, ou un bord alpha qui se lit correctement de face et disparaît de côté. La version navigateur raccourcit la boucle entre la création d'une planche et son affichage sur une surface au point d'itérer sans étape de build.

Mini World est la scène la plus légère pour tester une planche unique — moins de maillages et un chargement plus court. Agent Sprite Forge génère les images si vous n'avez pas encore de planche, et les deux scènes utilisent le même pipeline flipbook : une planche qui rend bien dans Mini World se comporte de la même façon dans The Cyclops' Island.

Créez votre propre planche

Trois voies mènent à une planche utilisable : convertir un GIF existant, découper une grille en une seule bande, ou générer des images à partir d'une description écrite. Les trois aboutissent au même fichier — un PNG dont toutes les cellules ont la même taille, disposées de gauche à droite et de haut en bas, avec une largeur de planche qui est un multiple exact de la largeur de cellule.

La conversion d'un GIF est la voie qui cache le plus de travail, car un GIF n'est pas une séquence d'images complètes. Les images sont souvent des différences partielles par rapport à l'image précédente, et les délais sont stockés par image en centièmes de seconde. Un shader flipbook n'accepte qu'une seule fréquence d'images, il faut donc aplatir les timings variables en dupliquant des images avant l'export.

Découper une grille en bande est mécanique : conservez la ligne voulue, recadrez la hauteur sur une cellule et gardez la largeur au nombre d'images multiplié par la largeur de cellule. C'est le bon réflexe lorsqu'une planche en grille sert à une seule animation, car cela supprime l'axe vertical et la couture qui l'accompagne. La génération à partir d'une description est la troisième voie — Agent Sprite Forge prend une action et un nombre d'images et renvoie une planche à taille de cellule fixe, ce qui élimine le travail d'alignement manuel d'images exportées une par une.

Entrez dans le monde auquel elle appartient

Un sprite est un personnage qui n'a nulle part où se tenir. La dernière étape est celle que personne d'autre ne propose : prenez la planche que vous venez de créer et placez-la dans un monde où l'on peut se promener — une petite île, une planète, un coin de rue sous la pluie. Chaque monde de ce site a été créé à partir d'une seule description écrite et publié sous forme de page jouable.

FAQ