GIF en sprite sheet

Comment transformer un GIF en sprite sheet

1. 1

   Choisissez le sens

   « GIF vers sheet » dispose toutes les images sur une grille. « Sheet vers GIF » fait l’inverse : vous indiquez la grille et l’animation est reconstruite.

2. 2

   Ouvrez votre fichier

   Un GIF, WebP animé, APNG ou AVIF animé dans un sens ; une sheet en PNG, WebP ou JPG dans l’autre.

3. 3

   Réglez la grille

   Laissez les colonnes à zéro pour une grille presque carrée, ou fixez-les. Ajoutez un espacement entre cellules si votre moteur en a besoin, et réduisez la taille des images si la sheet serait trop grande.

4. 4

   Téléchargez

   Avec les métadonnées activées, vous récupérez le PNG et le JSON dans un ZIP, car le JSON désigne l’image par son nom : les séparer casse le lien.

Ce qui change ici

• Les durées survivent

  Une sprite sheet nue perd précisément ce qui en faisait une animation : la durée de chaque image. Le JSON porte toutes les durées, l’animation peut donc être reconstruite à l’identique, dans un moteur ou ici même.

• Le format d’Aseprite, pas le nôtre

  Les métadonnées utilisent le format qu’exporte Aseprite, déjà lu par Phaser, PixiJS et les importateurs de Godot et Unity. En inventer un aurait voulu dire que vous écriviez un adaptateur.

• La taille est annoncée avant la construction

  L’aire de la sheet vaut le nombre d’images multiplié par leur taille, quelle que soit la grille : une longue animation ne tient tout simplement pas dans une seule image. Les dimensions obtenues s’affichent pendant que vous réglez, calculées par le code qui la construit.

• À la découpe, une dernière ligne incomplète ne gêne pas

  Cinq images dans une grille 3×2 laissent une cellule vide. Indiquez le nombre réel d’images et cette cellule est ignorée, au lieu de voir une image blanche arriver à la fin de votre animation.

• L’espacement dont les moteurs ont vraiment besoin

  Le padding entre cellules empêche le filtrage bilinéaire d’aspirer des pixels de l’image voisine, cause habituelle des fines coutures autour des sprites. La marge autour de la sheet est là aussi.

Formats acceptés

Vers une sheet : GIF animé, WebP animé, APNG et AVIF animé. En sortie : une sheet PNG, transparente sauf si vous choisissez un fond, plus le JSON facultatif. Dans l’autre sens, toute sheet PNG, WebP ou JPG donne un GIF animé.

Questions fréquentes

À quoi sert une sprite sheet ?

Les moteurs de jeu dessinent les animations depuis une seule texture plutôt qu’un fichier par image : un seul envoi vers le GPU, une seule image à gérer. C’est la façon standard de livrer de l’animation 2D dans Godot, Unity, Phaser et les autres.

Ai-je besoin du JSON ?

Si votre moteur lit le JSON d’Aseprite, oui : il vous évite de saisir à la main les rectangles et les durées. Si vous posez la sheet sur une grille uniforme et fixez la vitesse dans le code, le PNG suffit.

Pourquoi ne puis-je pas faire une sheet d’une seule longue ligne ?

Vous pouvez, en fixant les colonnes au nombre d’images, mais cela aide rarement : l’aire est la même, et les textures très larges atteignent les limites des GPU anciens. Une grille presque carrée est le choix sûr.

Pourquoi dit-il que la sheet serait trop grande ?

Parce que l’aire vaut images × largeur × hauteur, et aucune grille n’y change rien. Une animation de 200 images en 400×400 fait 32 mégapixels en une seule image. Réduisez la taille des images, ou raccourcissez l’animation.

Les images découpées sont décalées d’un pixel. Que s’est-il passé ?

La grille ne divise pas la sheet exactement. L’outil refuse une grille qui demanderait des pixels fractionnaires plutôt que de l’arrondir, car l’erreur grandit à chaque colonne ; revoyez les chiffres, ou décrivez la grille par la taille d’image.

Puis-je obtenir les images en fichiers séparés ?

Oui, mais depuis le découpeur de GIF : ouvrez-y l’animation et exportez les images en PNG dans un ZIP.