Convertisseur GIF vers feuille de sprites — Gratuit, dans le navigateur, sans envoi

La conversion d'un GIF en feuille de sprites semble triviale jusqu'à ce qu'on la fasse à la main. Un GIF est déjà une séquence d'images complètes avec une palette et des délais par image ; ce qu'il vous faut réellement, c'est un outil qui décode chaque image, compose correctement la transparence et dispose ces images sur un seul PNG dans une grille adressable par coordonnées de texture. Le convertisseur de Neta Studio effectue cette étape de décodage localement sur un élément canvas, donc votre fichier reste dans le navigateur et ne touche jamais un serveur. Vous déposez un GIF, choisissez les colonnes, les lignes et les FPS, puis téléchargez un unique atlas PNG.

Les parties difficiles ne sont pas le dessin. Ce sont la palette, le timing et le calcul de la grille. Le GIF stocke la transparence comme un index dans une table de couleurs, donc une image qui semblait propre dans une visionneuse peut arriver sur le canvas avec un fond noir ou blanc une fois composée. Les délais d'image dans un GIF sont exprimés en centièmes de seconde et varient souvent d'une image à l'autre, ce qui explique qu'un export naïf produise une feuille qui saccade. Cette page couvre les réglages qui comptent et les modes de défaillance que nous avons rencontrés en construisant l'outil.

Convertir un GIF en feuille de sprites

Le convertisseur est le premier élément de la page : une zone de dépôt, une bande de prévisualisation des images et quatre contrôles — colonnes, lignes, FPS et un bouton pour conserver le canal alpha. Lorsque vous déposez un fichier, le navigateur crée un ImageBitmap par image via le décodeur GIF, dessine chacune sur un canvas hors écran aux dimensions source, puis les transfère dans le canvas de l'atlas aux positions de cellule calculées. Le fichier source est lu avec la File API et conservé en mémoire. Aucune requête réseau transportant votre GIF n'est effectuée.

La sortie est toujours un PNG. Le PNG offre un canal alpha 8 bits, ce dont vous avez besoin pour le travail sur personnage ; le JPEG aplatirait chaque bord doux en un fond opaque. Si votre GIF n'a pas de transparence, l'atlas sera tout de même en RGBA et les octets alpha inutilisés ne coûtent que de la taille de fichier. Si votre GIF utilise la transparence, le décodeur doit demander l'image complète avec sa méthode de disposition plutôt qu'une mise à jour partielle, sinon les éléments en mouvement baveront sur la feuille.

Construisez la feuille en fonction de la façon dont votre moteur l'échantillonne, pas de son apparence dans un navigateur de fichiers. Une grille 4x4 d'images 64x64 est une texture 256x256 et adresse l'image n à la colonne n mod 4, ligne floor(n / 4). Gardez la taille de la feuille à une puissance de deux lorsque le moteur ou le shader cible attend un atlas de cette taille ; une feuille 320x320 sera complétée ou rééchantillonnée sur certains chemins et les bords des sprites s'adouciront.

GIF vers feuille de sprites pour VRChat

Le shader flipbook de VRChat lit une texture comme une bande horizontale, pas comme une grille. Si vous lui donnez une feuille 6x4, vous obtenez une bande de la première ligne répétée, car le calcul UV suppose que chaque image se trouve sur la même ligne et que l'index d'image n'avance que sur l'axe U. Réglez les colonnes sur le nombre d'images et les lignes sur 1. Une animation de 24 images devient une feuille 24x1.

Faites en sorte que la largeur totale de la bande soit une puissance de deux. Une bande de 24 images de 64 pixels fait 1536 pixels de large, ce qui n'est pas une puissance de deux ; la taille supérieure qui se divise proprement par 64 pixels est 2048, ce qui laisse la place pour 32 images. Vous pouvez remplir les cellules inutilisées avec des pixels transparents ou avec un duplicata de la dernière image. La puissance de deux compte parce qu'une texture non-PoT qui passe par la génération de mipmaps ou la compression au moment de l'envoi peut décaler l'échantillonnage d'un demi-texel, et un sprite d'un pixel de large le montrera.

Gérez l'alpha ici, dans la feuille, pas dans le shader. Un chemin cutout ou alpha-test dans un shader est un outil grossier ; les bords doux du contour antialiasé d'un GIF survivront ou disparaîtront selon le seuil, et le seuil n'est pas quelque chose que vous voulez régler avatar par avatar. Exportez le PNG avec un vrai alpha et un bord compatible avec le prémultiplié, et le shader se contente de l'échantillonner. Gardez un rythme de boucle constant : le flipbook de VRChat avance à pas de temps fixe, donc si votre GIF source avait des délais irréguliers par image, égalisez-les avant l'export, sinon l'animation tournera à une cadence uniforme qui ne correspond pas au timing d'origine.

Pour la liste complète des paramètres et la configuration de la texture, voir le guide de texture flipbook.

GIF vers grille d'images (« tableur »)

Quand les gens cherchent gif vers tableur, ils ne veulent presque jamais dire un .xlsx. Ils veulent dire la grille d'images : les images disposées en lignes et colonnes pour que chacune soit adressable par un index. Le mot est utilisé parce qu'une grille ressemble à un tableur au premier coup d'œil. Cet outil produit cette grille, et la grille est la même chose qu'une feuille de sprites — la différence ne tient qu'au nom qu'on lui donne. Ce qui compte, c'est que la disposition soit régulière : taille de cellule fixe, colonnes fixes et un ordre d'images qui va de gauche à droite, de haut en bas.

L'alternative que les gens essaient parfois consiste à dessiner les images une par une dans un éditeur de pixel art, en empilant les calques jusqu'à ce que l'animation soit correcte. Ce flux de travail est bon pour des personnages créés à la main et mauvais pour un GIF que vous possédez déjà. Un éditeur de pixels ne lira pas les délais par image d'un GIF, et importer 24 images à la main dans 24 calques perd complètement le timing. Si votre source est déjà une animation, convertir la grille est le chemin le plus court. L'outillage de pixel art vaut la peine d'être utilisé quand vous créez, pas quand vous transcodez.

Pour le travail d'images dessinées à la main, les pages de pixel art couvrent le dessin et la palette.

Taille d'image, grille et fonds transparents

Quatre choses cassent la plupart des conversions. Chacune a un symptôme précis.

La transparence d'un GIF meurt dans la palette. Un GIF peut utiliser au maximum 256 couleurs et marque la transparence comme un index de palette. Quand une image est décodée avec la méthode de disposition 2, la zone qui était transparente dans une image peut être restaurée à la couleur de fond d'une image précédente. La solution est de composer chaque image sur un tampon transparent, et non sur du blanc. Si votre prévisualisation montre une forme noire ou grise autour du sprite, c'est l'index de fond de la palette, et ce sont désormais de vrais pixels.

La dernière ligne est partielle. Si votre nombre d'images est 23 et que vous choisissez 6 colonnes, vous obtenez trois lignes complètes et une dernière ligne de cinq cellules, pas six. La hauteur de l'atlas est tout de même arrondie à la hauteur d'une ligne complète. Si le calcul de flipbook de votre moteur suppose une grille complète et dérive l'index d'image en divisant le nombre total d'images par les colonnes, il lira une cellule vide à la fin de la boucle. Complétez la feuille en un rectangle complet avec des cellules transparentes, ou réduisez les colonnes pour que le nombre se divise uniformément.

La taille d'image doit diviser la feuille. Si vous extrayez un sous-rectangle de largeur 64 d'une feuille de 320 de large, vous obtenez exactement cinq colonnes. D'une feuille de 330 de large, vous obtenez cinq colonnes et un reste de 10 pixels qui n'est pas une image. Gardez les dimensions de la feuille égales à la taille d'image multipliée par les colonnes, et ce sur les deux axes.

Erreur d'un sur l'origine. Les coordonnées UV de texture vont généralement depuis le coin inférieur gauche, tandis que la grille d'images est disposée depuis le coin supérieur gauche. Si l'image 0 s'affiche comme la dernière image, votre moteur inverse le V. La cellule de sprite pour la colonne c, ligne r se trouve à x = c * width, y = r * height dans l'espace image, et convertir cela en UV inversé revient à une soustraction à partir de 1.

Où va la feuille ensuite

L'export est le même PNG dans tous les cas ; le moteur diffère dans la façon dont il attend que la texture soit découpée et dans ce qu'il fait de l'alpha. Utilisez ceci comme référence rapide.

Pour chaque cible, exportez une feuille à la grille que cette cible peut lire sans shader personnalisé. Si vous prenez en charge deux cibles, exportez deux feuilles : une bande horizontale pour VRChat et une grille pour le moteur. Réexporter depuis le même GIF prend moins de temps que d'écrire le calcul UV pour les réconcilier.

Voyez votre feuille s'animer en 3D

La plupart des convertisseurs s'arrêtent au PNG et vous laissent vérifier le résultat ailleurs. Le créateur de jeux 3D va plus loin : vous pouvez charger une feuille sur un plan en billboard et la regarder s'animer dans une vraie scène, ce qui est le seul test qui répond à la question de savoir si la grille et le timing sont corrects. Agent Sprite Forge est l'endroit où un sprite devient un personnage avec un contrôleur ; le sprite est le personnage, et le monde 3D est l'endroit où il vit.

The Cyclops' Island est la démo jouable de cette idée — une petite scène 3D dans laquelle vous pouvez vous déplacer, construite dans le navigateur, utilisant des sprites comme personnages. Déposez votre propre feuille et le même rig qui anime les images de la démo échantillonnera votre atlas. Si l'ordre des images est erroné, vous le voyez immédiatement : le personnage marche à reculons, ou saute sur une cellule vide à la fin de la boucle. Si l'alpha est incorrect, vous voyez un rectangle dur autour du corps. Ce sont les mêmes défaillances que vous trouveriez dans un moteur, visibles en cinq secondes environ.

Essayez la scène jouable The Cyclops' Island et remplacez l'atlas par le vôtre.

Plus d'outils de sprites gratuits

Le convertisseur n'est qu'une pièce. Ces trois outils couvrent le reste du flux de travail des sprites sur Neta Studio, et ils fonctionnent dans la même session de navigateur avec la même gestion locale des fichiers.

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 feuille 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é comme une page jouable.

FAQ