Feuille de sprites expliquée : formats, outils et comment convertir n'importe quelle animation

Une feuille de sprites est une image matricielle qui contient chaque image d'une animation disposée dans une grille ou une bande fixe, de sorte qu'un moteur de rendu peut échantillonner une région par image au lieu de charger des dizaines de fichiers. Si vous avez déjà exporté des images d'une animation 3D et que vous avez dû comprendre pourquoi le personnage tremble ou pourquoi l'arrière-plan devient noir, la feuille de sprites est généralement là où se situe le problème.

Cette page couvre tout le parcours : ce qu'est réellement une feuille, en quoi elle diffère d'un atlas, quand utiliser une grille plutôt qu'une bande horizontale, quel format exporter, et comment convertir des sources GIF, image et vidéo en une feuille utilisable dans le navigateur. Les exemples font référence à nos propres outils et mondes — Agent Sprite Forge, The Cyclops' Island, Mini World et le créateur de jeux 3D — car c'est le pipeline que nous livrons et testons.

Qu'est-ce qu'une feuille de sprites

Une feuille de sprites est une image matricielle dans laquelle chaque image d'animation occupe une cellule de taille égale dans une grille régulière. La feuille elle-même ne contient aucune information sémantique sur la cellule qui correspond à quelle image ; ce mappage réside soit dans la convention de nommage des fichiers, soit dans un index JSON sidecar, soit dans les paramètres d'animation du moteur. Les quatre choses que vous devez connaître pour découper une feuille sont : la largeur et la hauteur de la cellule en pixels, le nombre de colonnes, le nombre de lignes et l'origine (en haut à gauche pour la plupart des moteurs, mais certains frameworks supposent en bas à gauche).

Si l'une de ces quatre valeurs est incorrecte, l'échec est immédiat et visible. Une largeur de cellule de 32 au lieu de 33 décale chaque image d'un pixel vers la droite au fur et à mesure que vous avancez dans la feuille, ce qui se lit comme une lente dérive horizontale. Une origine incorrecte retourne l'animation verticalement. Un nombre d'images incorrect supprime la dernière image, de sorte qu'un cycle de marche se termine par un à-coup au lieu d'une pose de contact. Ce ne sont pas des bugs de rendu ; ce sont des incohérences de métadonnées.

Anatomie d'une feuille

Considérez une feuille comme un tableau. Les colonnes et les lignes sont implicites dans les dimensions en pixels : la largeur totale divisée par la largeur de cellule donne le nombre de colonnes, et la hauteur totale divisée par la hauteur de cellule donne le nombre de lignes. Une feuille de 512 par 128 avec des cellules de 64 par 64 a 8 colonnes et 2 lignes, soit 16 images. Si vous ajoutez un pixel de padding entre les cellules, le calcul change : 512 pixels de large avec des cellules de 64 pixels et un padding de 1 pixel contient 7 cellules, pas 8, car le padding consomme 8 pixels. Le padding et l'espacement doivent être pris en compte avant d'écrire le code de découpage.

Où l'origine importe

La plupart des pipelines WebGL et canvas placent l'origine en haut à gauche de l'image, ce qui correspond au système de coordonnées utilisé par les outils d'édition d'image. Certains moteurs de jeu et frameworks plus anciens inversent l'axe Y et attendent l'origine en bas à gauche. Si votre sprite apparaît à l'envers, vérifiez l'origine avant de redimensionner quoi que ce soit. La correction est généralement une transformation d'une seule ligne ou une régénération avec l'ordre de lignes opposé, pas un réexport complet.

Feuille de sprites vs spritesheet vs atlas de sprites

L'orthographe n'est pas normalisée. « Sprite sheet » avec un espace est la forme anglaise courante et celle qu'utilisent la plupart de la documentation et des tutoriels. « Spritesheet » en un seul mot apparaît dans les identifiants de code, les noms de fichiers et certaines API de moteur, car les espaces sont peu pratiques dans ces contextes. Les moteurs de recherche les traitent comme des quasi-synonymes, vous trouverez donc la même technique sous les deux orthographes.

La vraie distinction est entre une feuille et un atlas. Une feuille de sprites est une image compactée sans index obligatoire. Un atlas de sprites est la même image compactée plus une description lisible par machine de ce qui se trouve où — généralement un fichier JSON, XML ou binaire qui nomme chaque région. Cet index est ce qui permet à un outil de trouver l'image d'attente, l'image de course et l'image d'attaque sans que vous codiez en dur les coordonnées en pixels. Si vos images sont uniformes et votre boucle simple, une feuille simple suffit. Si vous avez des régions irrégulières ou des états nommés, vous voulez un atlas.

• FeuilleUne grille ou une bande d'images de taille égale. Aucune métadonnée requise. Le découpage est arithmétique.
• SpritesheetLe même artefact, écrit en un seul mot. Courant dans le code et les noms de fichiers de ressources.
• AtlasDes images compactées plus un index qui associe des noms ou des ID à des rectangles. Permet une recherche par nom au lieu de calculs de coordonnées.

Feuille en grille vs bande d'images horizontale

Une feuille en grille dispose les images en lignes et en colonnes pour garder l'image proche du carré. C'est important car la mémoire de texture et l'échantillonnage GPU sont plus favorables aux dimensions carrées ou en puissance de deux sur certains matériels, et parce qu'une feuille carrée est plus facile à prévisualiser dans un éditeur d'image. Les grilles sont la valeur par défaut pour le découpage côté moteur : vous définissez la taille de cellule et le nombre d'images, et le moteur parcourt la grille ligne par ligne.

Une bande d'images horizontale place chaque image sur une seule ligne. C'est la disposition que les shaders et les textures flipbook attendent, car le décalage UV devient une simple multiplication : l'index d'image divisé par le nombre d'images donne le décalage X, et Y reste constant. Si vous donnez une feuille en grille à un shader qui suppose une bande, l'animation échantillonnera à travers les lignes et bouclera d'une manière non prévue. Si vous donnez une bande à un découpeur de moteur qui suppose une grille, il traitera soit la bande comme une seule ligne très large, soit ne trouvera aucune ligne.

Le mode de défaillance est généralement subtil au début : l'animation se joue, mais le timing semble incorrect ou les images se répètent dans le désordre. Avant de déboguer la logique d'animation, vérifiez que la disposition correspond au destinataire. Dans notre créateur de jeux 3D, les personnages à base de sprites utilisent une grille car le moteur gère le découpage ; les effets pilotés par shader comme le feu ou l'eau utilisent une bande car le matériau l'échantillonne directement.

Quel format exporter

Le PNG est la valeur par défaut sûre. Il prend en charge l'alpha complet, il est sans perte, et tous les moteurs et navigateurs le décodent. Pour les sprites aux bords nets et aux couleurs plates, le PNG se compresse bien. Pour les sprites photographiques ou fortement ombrés, le WebP produit généralement un fichier plus petit à qualité visuelle égale, et tous les navigateurs actuels le prennent en charge. Utilisez le WebP lorsque la taille du fichier compte et que vous pouvez vérifier que l'environnement d'exécution cible le décode. Le GIF est un format de diffusion, pas un format d'édition : il ne prend en charge qu'une transparence sur un bit, donc chaque pixel semi-transparent devient soit totalement opaque, soit totalement transparent. Si votre source a des bords doux, le GIF créera des franges.

Incluez un sidecar JSON lorsque vos images ne forment pas une simple grille uniforme, lorsque vous avez besoin d'états nommés, ou lorsque le destinataire attend un atlas. Le sidecar est petit et il élimine le besoin de coder en dur les coordonnées. Si vos images sont uniformes et que l'animation est une simple boucle, vous pouvez l'omettre et laisser le moteur calculer les rectangles. N'exportez jamais de sprites en JPEG. Le JPEG est avec perte et n'a pas de canal alpha, donc la transparence devient soit noire, soit blanche, et les artefacts de compression atterrissent exactement sur les bords nets qui définissent la silhouette d'un sprite. Aucun paramètre ne corrige cela.

Tous nos convertisseurs

Voici les chemins de conversion que nous proposons. Chacun s'exécute dans le navigateur, vous pouvez donc déposer un fichier et obtenir une feuille de sprites sans rien installer. Ils couvrent les sources courantes : GIF animés, images fixes et clips vidéo.

Pour les GIF animés, le convertisseur extrait chaque image et les assemble dans une feuille ou une bande, en préservant les délais d'image dans un sidecar si vous en demandez un. Pour les images fixes, le convertisseur recadre et dispose une séquence d'images que vous fournissez dans une grille. Pour la vidéo, le convertisseur échantillonne des images à une cadence choisie et les écrit dans une feuille ; vous contrôlez l'intervalle d'échantillonnage et la taille de cellule. Si vous créez un personnage pour The Cyclops' Island ou un accessoire pour Mini World, partez du format source que vous avez et choisissez le convertisseur correspondant.

• GIF vers feuille de spritesExtrait un GIF animé image par image et assemble les images dans une grille ou une bande horizontale.
• Image vers feuille de spritesPrend une séquence d'images fixes et les dispose dans une grille uniforme avec une taille de cellule cohérente.
• Vidéo vers feuille de spritesÉchantillonne des images d'une vidéo à un intervalle choisi et les écrit dans une feuille ou une bande.
• Agent Sprite ForgeNotre outil dédié aux sprites pour générer et assembler des images de personnage dans des feuilles utilisées par le créateur de jeux 3D.

Glossaire

Voici les termes qui reviennent lorsque vous lisez la documentation sur les feuilles de sprites, les paramètres de moteur ou le code de shader. Les définitions sont courtes à dessein.

• AtlasUne image compactée de régions plus un index lisible par machine qui associe des noms ou des ID à des rectangles.
• CelluleLe rectangle dans une feuille qui contient une image. Sa largeur et sa hauteur constituent la taille de cellule.
• Bande d'imagesUne feuille disposée en une seule ligne horizontale d'images, utilisée par les shaders et les textures flipbook.
• FlipbookUne texture qui est échantillonnée une région à la fois au fil du temps pour produire une animation, généralement à partir d'une bande d'images.
• IndexLes données sidecar qui nomment ou numérotent les régions d'un atlas. Sans cela, le découpage est arithmétique.
• OrigineLe coin de l'image ou de la cellule à partir duquel les coordonnées sont mesurées, généralement en haut à gauche ou en bas à gauche.
• PaddingPixels supplémentaires entre les cellules d'une feuille, utilisés pour éviter le saignement de texture. Le padding modifie le nombre de cellules qui peuvent tenir.
• EspacementLa distance entre les cellules, souvent utilisée de manière interchangeable avec le padding, mais parfois comptée séparément.

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ù quelqu'un peut se promener — une petite île, une planète, un coin de rue pluvieux. Chaque monde sur ce site a été créé à partir d'une description écrite et publié sous forme de page jouable.