GIF vers texture flipbook — Empaquetez n'importe quel GIF dans une bande de frames pour Unity et VRChat

Un GIF est une chronologie. Une texture flipbook est cette même chronologie empaquetée dans une seule image, afin qu'un shader la parcoure par index au lieu qu'un lecteur recherche des frames. Vous déposez un GIF dans l'outil, il détecte le nombre de frames, les dimensions et le délai, puis écrit une bande à une seule ligne ou en grille avec les métadonnées de lignes et de colonnes que vous collez dans votre matériau.

Cette page couvre ce que produit réellement une conversion gif vers flipbook pour Unity, Godot et VRChat — les quatre nombres dont un shader flipbook a besoin, ce qu'il faut régler sur un matériau Poiyomi, et quand une bande de frames est préférable à une grille. La sortie est un PNG avec un arrière-plan transparent et les nombres de lignes et de colonnes en texte brut à côté.

Déposez un GIF

Le corps de l'outil occupe le premier écran. La zone de dépôt se trouve en haut ; tout ce qui se trouve en dessous est la sortie. Faites glisser un GIF dessus et l'outil lit le nombre de frames, le délai par frame, la taille du canevas et la méthode de disposition. Il indique ce qu'il a trouvé avant d'écrire quoi que ce soit, car les GIF du monde réel ne s'accordent sur aucun de ces quatre points.

Deux points demandent généralement une décision. D'abord, les délais de frames irréguliers : la plupart des shaders flipbook avancent à un FPS constant, donc un GIF aux délais mixtes doit être rééchantillonné à un taux fixe ou exporté à son temps de frame commun le plus lent. Ensuite, la disposition : un GIF qui ne redessine que les régions modifiées entre les frames produira des rémanences si vous empilez les frames naïvement. L'outil composite chaque frame sur un canevas complet avant l'empaquetage, de sorte que les redessins partiels deviennent des frames complètes.

Une fois la composition terminée, l'empaqueteur écrit une seule image. Un GIF de 24 frames en 128x128 devient une bande de 3072x128. Les mêmes frames en grille 6x4 deviennent 768x512. Ce sont les mêmes pixels ; la différence réside dans ce que le shader fait des UV.

Ce qu'est une texture flipbook

Un shader flipbook lit quatre nombres : lignes, colonnes, l'index courant et le FPS. Il prend une coordonnée UV dans l'intervalle 0 à 1, la divise en une cellule ligne/colonne, et décale cette cellule selon l'index courant. La texture elle-même est statique. Rien ne s'anime tant que l'index ne bouge pas.

L'index est généralement dérivé du temps. Avec une bande à une ligne, l'index équivaut à floor(temps multiplié par FPS), et la coordonnée U est décalée de l'index divisé par les colonnes. Avec une grille, l'index donne aussi une ligne : la ligne équivaut à floor(index divisé par colonnes), la colonne équivaut à index modulo colonnes. C'est pourquoi la bande à une ligne est le cas le plus simple — il n'y a qu'une seule dimension à parcourir.

Les lignes et les colonnes doivent correspondre exactement à l'image. Une bande de 3072x128 avec 24 colonnes et 1 ligne déclarées s'échantillonne correctement. Déclarez 23 colonnes et chaque frame se décale d'une fraction de cellule, ce qui se lit comme une traînée diagonale. Déclarez 1 colonne et vous obtenez une image statique. Ces deux erreurs expliquent la plupart des flipbooks cassés.

Le FPS est distinct du nombre de frames. Une bande de 24 frames à 12 FPS boucle deux fois par seconde. Une bande de 24 frames à 24 FPS boucle une fois par seconde. Les données de texture sont identiques ; seule l'horloge change. Gardez le FPS au même endroit que les nombres de lignes et de colonnes pour qu'ils ne divergent jamais.

Lignes, colonnes, index, FPS. Les lignes et les colonnes décrivent la texture. L'index et le FPS décrivent le temps. Les lignes et les colonnes sont fixées à l'export. L'index est dynamique et appartient au shader ou au script. Le FPS est fixe pour la plupart des shaders mais peut être piloté par un paramètre lorsque vous voulez contrôler la vitesse.

Si votre shader possède un paramètre de vitesse ou de taux de lecture, il multiplie le terme de temps, pas la constante FPS. Conservez le FPS exporté comme taux de base pour que les métadonnées restent pertinentes lorsque la vitesse vaut 1.

Texture flipbook pour Unity

Dans Unity, le flipbook est généralement un matériau sur un quad ou une particule. Importez le PNG avec sRGB activé, sans mipmaps si les frames sont petites, et alpha est transparence. Le mode d'enroulement doit être Clamp, pas Repeat — un flipbook en Repeat fait passer la dernière frame dans la première au bord UV et affiche une couture d'un pixel.

Il y a deux façons de piloter l'index. Sur un shader Unlit ou Particles avec un nœud flipbook intégré, vous réglez le tiling sur les lignes et les colonnes et lui fournissez une valeur de mélange de 0 à 1. Sur un shader personnalisé, vous écrivez vous-même le calcul UV et exposez les lignes, les colonnes et le FPS comme propriétés de matériau pour pouvoir les modifier sans recompiler.

Les métadonnées à coller : lignes, colonnes, nombre de frames, FPS exporté. Si votre shader utilise un mélange normalisé plutôt qu'un index entier, la plage de mélange va de 0 à nombre de frames divisé par le total des cellules de la grille — pour 24 frames en une seule ligne, cela fait 0 à 1 ; pour une grille 6x4 avec 24 frames sur 24 cellules, cela fait aussi 0 à 1. Les grilles partielles sont le cas qui piège les gens : une grille 6x4 avec 20 frames se termine à 20 divisé par 24, soit environ 0,833. Au-delà, vous échantillonnez des cellules vides.

Flipbook Poiyomi pour VRChat

Poiyomi fournit un nœud flipbook, et c'est la voie habituelle pour une bouche qui parle, un écran défilant ou un basculement à deux frames sur un avatar. Le nœud prend une texture, une paire lignes et colonnes, et une valeur de mélange. VRChat n'exécute pas de code de shader personnalisé depuis un script à l'exécution, donc l'index doit provenir d'une propriété de matériau animée ou d'un paramètre piloté par un animator.

Le maillage compte autant que le matériau. Un flipbook sur un quad plat se lit correctement ; la même texture sur une surface courbe affichera des cellules étirées là où les UV sont répartis inégalement. Gardez les matériaux flipbook sur des maillages planaires ou quasi planaires.

Travaillez en disposition bande pour Poiyomi lorsque l'animation est une boucle, car le calcul UV se réduit à une multiplication et une addition. Utilisez la disposition en grille lorsque l'animation est un ensemble d'états discrets entre lesquels vous voulez sauter — une bouche à quatre formes est plus facile à concevoir comme une grille 4x1 avec un index entier que comme un défilement.

Bande de frames ou grille : que faut-il exporter

Les données de pixels sont identiques. Le choix dépend de ce qui les consomme. Les shaders veulent une bande. Les moteurs et les systèmes de sprites veulent une grille. Choisissez en fonction du consommateur, pas de la taille du fichier — une bande est plus large et une grille plus carrée, et les deux se compressent de la même façon à nombre total de pixels égal.

Une bande n'a qu'une ligne, donc la coordonnée V est inutilisée et le shader ne décale que U. Cela fait moins d'instructions et moins d'occasions de se tromper dans le calcul. Une grille utilise les deux axes, ce qu'attendent les systèmes basés sur les atlas. En cas de doute, exportez la bande et ne réexportez en grille que lorsqu'un importateur de moteur en demande une.

Un autre cas est l'animateur de sprites qui attend des frames individuelles. Certains moteurs veulent un dossier de PNG, pas un atlas. L'outil peut écrire les frames séparément, mais l'image sur disque est alors la somme de toutes les frames plutôt qu'un seul fichier, et les réglages d'import sont par frame.

Testez-le en 3D

Une texture flipbook sur un plan statique ne prouve rien. Les affirmations que vous devez vérifier sont celles qui n'apparaissent qu'en mouvement : si la couture boucle correctement, si l'alpha tient à distance, si le FPS est convaincant quand la caméra bouge. The Cyclops' Island est une scène jouable construite dans le 3D game builder où les surfaces s'animent en temps réel, de sorte que vous pouvez observer une boucle flipbook à côté de la géométrie plutôt que dans un inspecteur.

Ouvrez-la, parcourez la surface et observez le point de bouclage. Si un flipbook a une frame de moins ou une colonne de trop, vous le voyez là — un accroc visible ou une traînée diagonale — avant même d'envoyer un asset. C'est tout l'argument de la scène jouable : l'échec est visuel, et les échecs visuels ont besoin d'une fenêtre de rendu.

La même scène sert de référence pour la façon dont le défilement des frames se lit à différentes distances et sous différents angles de caméra. Des frames qui semblent correctes à 128 pixels de près crénelleront à distance sans contrôle des mipmaps ; des frames qui semblent correctes de loin peuvent être trop floues de près. Les deux sont plus faciles à juger en mouvement.

Entrez dans le monde auquel elle appartient

Un sprite est un personnage sans endroit 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