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

Une feuille de sprites est une image unique qui contient chaque frame d'une animation disposée dans une grille ou une bande fixe, afin qu'un moteur de rendu puisse échantillonner une région par frame au lieu de charger des dizaines de fichiers. Si vous avez déjà exporté des frames depuis une animation 3D et que vous avez ensuite dû comprendre pourquoi le personnage tremble ou pourquoi le fond devient noir, c'est généralement dans la feuille de sprites que 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 constructeur 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 raster dans laquelle chaque frame d'animation occupe une cellule de taille identique dans une grille régulière. La feuille elle-même ne contient aucune information sémantique indiquant quelle cellule correspond à quelle frame ; cette correspondance 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 éléments à connaître pour découper une feuille sont : la largeur et la hauteur de 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 erronée, l'échec est immédiat et visible. Une largeur de cellule de 32 au lieu de 33 décale chaque frame 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 erronée inverse l'animation verticalement. Un nombre de frames erroné supprime la dernière frame, si bien 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 comporte 8 colonnes et 2 lignes, donc 16 frames. 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 ligne ou une régénération avec l'ordre des lignes inversé, 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, utilisée par 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 considèrent comme 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. C'est cet index qui permet à un outil de trouver la frame d'attente, la frame de course et la frame d'attaque sans que vous ayez à coder en dur les coordonnées en pixels. Si vos frames sont uniformes et votre boucle simple, une simple feuille suffit. Si vous avez des régions irrégulières ou des états nommés, il vous faut un atlas.

• FeuilleUne grille ou une bande de frames de taille identique. Aucune métadonnée requise. Le découpage est de l'arithmétique.
• SpritesheetLe même artefact, écrit en un seul mot. Courant dans le code et les noms de fichiers d'assets.
• AtlasDes frames empaqueté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 de frames horizontale

Une feuille en grille répartit les frames 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 puissances 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 de frames, et le moteur parcourt la grille ligne par ligne.

Une bande de frames horizontale place chaque frame sur une seule ligne. C'est la disposition qu'attendent les shaders et les textures flipbook, car le décalage UV devient une simple multiplication : l'index de frame divisé par le nombre de frames donne le décalage X, et Y reste constant. Si vous passez une feuille en grille à un shader qui suppose une bande, l'animation échantillonnera sur plusieurs lignes et bouclera d'une manière non voulue. Si vous passez 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 frames se répètent dans le désordre. Avant de déboguer la logique d'animation, vérifiez que la disposition correspond au consommateur. Dans notre constructeur 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

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 contours nets et aux couleurs plates, PNG compresse bien. Pour les sprites photographiques ou fortement ombrés, WebP produit généralement un fichier plus petit à qualité visuelle égale, et tous les navigateurs actuels le prennent en charge. Utilisez WebP lorsque la taille de fichier compte et que vous pouvez vérifier que le runtime cible le décode. GIF est un format de diffusion, pas un format de création : 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 contours doux, GIF produira des franges.

Incluez un sidecar JSON lorsque vos frames ne forment pas une simple grille uniforme, lorsque vous avez besoin d'états nommés ou lorsque le consommateur attend un atlas. Le sidecar est petit et évite de devoir coder les coordonnées en dur. Si vos frames 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. JPEG est avec perte et n'a pas de canal alpha, donc la transparence devient soit noire, soit blanche, et les artefacts de compression tombent exactement sur les contours nets qui définissent la silhouette d'un sprite. Aucun réglage ne corrige cela.

Tous nos convertisseurs

Voici les chemins de conversion que nous livrons. Chacun s'exécute dans le navigateur : vous pouvez 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 décompresse chaque frame et l'empaquette dans une feuille ou une bande, en conservant les délais de frame 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 frames à 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 dont vous disposez et choisissez le convertisseur correspondant.

• GIF vers feuille de spritesDécompresse un GIF animé frame par frame et empaquette les frames 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 frames 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 empaqueter des frames de personnage dans des feuilles utilisées par le constructeur de jeux 3D.

Glossaire

Voici les termes qui apparaissent lorsque vous lisez de la documentation sur les feuilles de sprites, des réglages de moteur ou du code de shader. Les définitions sont volontairement courtes.

• AtlasUne image empaquetée de régions plus un index lisible par machine qui associe des noms ou des ID à des rectangles.
• CelluleLe rectangle d'une feuille qui contient une frame. Sa largeur et sa hauteur constituent la taille de cellule.
• Bande de framesUne feuille disposée en une seule ligne horizontale de frames, utilisée par les shaders et les textures flipbook.
• FlipbookUne texture échantillonnée région par région au fil du temps pour produire une animation, généralement à partir d'une bande de frames.
• IndexLes données sidecar qui nomment ou numérotent les régions d'un atlas. Sans elles, le découpage est de l'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 façon 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ù 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.