Comment assembler une feuille de sprites : outils gratuits (2026)

Une feuille de sprites (sprite sheet) est une seule image qui contient de nombreuses images plus petites. Un atlas de textures reprend la même idée, avec en plus un fichier de données qui indique où se trouve chaque image : son nom, sa position, sa taille et, parfois, si elle a été rognée ou pivotée. En pratique, on emploie les deux termes pour désigner la même chose, et chaque moteur et chaque outil d'assemblage lui donne un nom légèrement différent.

Ce tutoriel explique comment assembler une feuille de sprites avec des outils gratuits, quels réglages décident du bon rendu dans le jeu, comment charger le résultat dans Phaser 3, Unity, Godot et en CSS pur, et quelles erreurs reviennent le plus souvent. Une courte section à la fin s'adresse à celles et ceux qui vendent des packs de sprites.

Pourquoi assembler des sprites

La raison est la même sur toutes les plateformes : moins d'éléments distincts à gérer pour le matériel ou le navigateur.

• Moins de draw calls dans un jeu. Un moteur de rendu peut généralement regrouper en un seul dessin les sprites qui partagent une même texture. Si chaque image de chaque personnage est un fichier à part, le moteur doit changer de texture en permanence et le regroupement échoue. Placez-les sur un seul atlas et des dizaines de sprites peuvent partir ensemble.
• Moins de requêtes sur le web. Charger quarante petites icônes sous forme de quarante fichiers, c'est quarante requêtes. Une feuille de sprites, c'est une requête et un décodage. HTTP/2 a rendu les nombreuses petites requêtes moins coûteuses qu'avant, mais une seule image reste plus simple à mettre en cache et à précharger.
• Moins de mémoire gaspillée. Les anciens GPU et certains pilotes mobiles arrondissent les textures à la puissance de deux supérieure. Une image de 130 par 70 pixels peut finir par occuper 256 par 128 en mémoire. Assembler beaucoup d'images dans un atlas bien dimensionné gaspille bien moins.
• Gestion des ressources simplifiée. Une paire de fichiers (image plus données) est plus facile à versionner, à livrer et à charger qu'un dossier de centaines d'images.

L'assemblage n'en vaut pas toujours la peine. Une image d'arrière-plan unique, ou un sprite déjà énorme, ne gagne rien à passer par un atlas. Le gain vient de nombreuses petites images dessinées ensemble.

Outils gratuits pour assembler des feuilles de sprites

Vous n'avez rien à payer pour obtenir un bon atlas. Le tableau ci-dessous présente les outils abordés ici. « Gratuit » signifie que vous pouvez produire un atlas exploitable sans acheter de licence ; certains proposent des offres payantes avec des fonctions supplémentaires.

Outil	Compatible avec	Sortie typique	Coût
TexturePacker	Phaser, Pixi, Unity, Godot, Cocos, CSS et bien d'autres	PNG + JSON, XML, fichiers propres à chaque moteur	Mode de base gratuit, fonctions Pro payantes
Free Texture Packer (free-tex-packer)	Phaser, Pixi, JSON générique, XML, CSS	PNG + JSON hash ou array, XML	Gratuit, open source
Aseprite	Tout moteur qui lit des données d'images en JSON	PNG + JSON hash ou array	Payant, code source disponible pour le compiler soi-même
Unity Sprite Atlas	Unity uniquement	Atlas interne généré à la compilation ou à l'exécution	Intégré à Unity
Godot AtlasTexture	Godot uniquement	Ressource qui pointe vers une région d'une texture	Intégré à Godot
Sprite CSS fait main	Navigateurs	Un PNG ou SVG + CSS background-position	Gratuit

Si vous ne deviez retenir qu'une chose de ce tableau : quand votre cible est un moteur JavaScript comme Phaser ou Pixi, Free Texture Packer couvre presque tout, gratuitement. Quand vous travaillez dans Unity ou Godot, utilisez d'abord le système d'atlas du moteur lui-même et ne recourez à un outil externe que si vous avez besoin de quelque chose qu'il ne fait pas.

Pas à pas : assembler avec Free Texture Packer

Free Texture Packer est une application de bureau (il existe aussi une version web) qui prend un dossier d'images et produit un atlas. C'est un bon choix par défaut pour les jeux web, car elle propose des préréglages d'export pour les moteurs JavaScript courants.

1. Préparez vos images. Exportez chaque image en PNG séparé avec transparence. Nommez-les pour qu'elles se trient correctement : run_00.png, run_01.png et ainsi de suite. Les numéros complétés par des zéros comptent ; sans eux, run_10 passe avant run_2.
2. Ajoutez le dossier. Faites glisser le dossier dans l'application. Les noms des sous-dossiers font généralement partie du nom de l'image, ce qui est pratique pour regrouper (hero/run_00.png).
3. Choisissez le format d'export. Pour Phaser 3, choisissez le préréglage Phaser 3 ou JSON hash. Le JSON array fonctionne aussi ; la différence est expliquée plus bas.
4. Réglez le padding et l'extrude. Commencez avec 2 pixels de padding et 1 pixel d'extrude. La section sur les réglages explique pourquoi.
5. Décidez du rognage et de la rotation. Le rognage supprime les bords transparents et fait gagner de la place. La rotation permet à l'outil de tourner les images de 90 degrés pour en faire tenir davantage. Laissez la rotation désactivée, sauf si votre moteur gère clairement les images pivotées avec ce format.
6. Fixez une taille maximale. 2048 par 2048 est un plafond sûr pour la plupart des cibles, téléphones compris. Si les images ne tiennent pas, répartissez-les sur plusieurs atlas plutôt que de relever la limite à l'aveugle.
7. Exportez. Vous obtenez une image et un fichier de données portant le même nom de base. Gardez-les ensemble.

TexturePacker suit le même déroulement : ajoutez des sprites, choisissez un format de données dans sa longue liste de frameworks, ajustez le padding et le rognage, puis publiez. Certaines options avancées sont marquées Pro, et l'application vous prévient quand un réglage choisi nécessite une licence. Pour un simple atlas PNG plus JSON, le mode gratuit suffit.

Exporter depuis Aseprite

Si vous dessinez du pixel art dans Aseprite, vous pouvez vous passer d'un outil d'assemblage distinct pour de nombreux projets. Utilisez File, Export Sprite Sheet. Dans la boîte de dialogue, vous choisissez la disposition (par lignes, par colonnes, compactée), les calques et les étiquettes à inclure, le padding de bordure et de forme, et le rognage éventuel. Dans l'onglet de sortie, vous pouvez écrire un fichier de données JSON à côté de l'image, sous forme de hash ou de tableau (array).

Le JSON contient aussi vos étiquettes d'animation avec leurs plages d'images et la durée de chaque image définie dans la timeline. Certains moteurs et plugins savent les lire directement, ce qui vous évite de saisir les numéros d'images à la main. Quand vous travaillez avec plusieurs fichiers, une organisation courante consiste à exporter chaque personnage depuis Aseprite sous forme d'images séparées ou de bande, puis à tout assembler avec un outil généraliste pour que l'ensemble du jeu partage moins de textures.

Les réglages qui comptent vraiment

La plupart des bugs visuels liés aux atlas viennent de quatre ou cinq réglages. Les maîtriser, c'est là toute la compétence.

Padding et extrude

Quand le GPU échantillonne une texture avec le filtrage activé, il mélange les pixels voisins. Au bord d'une image, le voisin peut appartenir à l'image suivante de l'atlas. Il en résulte une fine ligne de mauvaise couleur au bord d'un sprite, souvent visible seulement lorsque la caméra bouge ou que le sprite est mis à l'échelle. C'est ce qu'on appelle le bleeding (saignement).

Le padding ajoute un espace vide entre les images, de sorte qu'il n'y a rien d'étranger avec quoi se mélanger. L'extrude répète vers l'extérieur la rangée de pixels du bord de chaque image : si l'échantillonneur dépasse le bord, il récupère la couleur de l'image elle-même. Pour les tuiles qui doivent se toucher exactement, l'extrude est le réglage qui supprime les coutures visibles. Deux pixels de padding et un d'extrude constituent un point de départ raisonnable ; augmentez-les si vous utilisez des mipmaps ou si vous réduisez fortement les sprites.

Rognage

Le rognage supprime les bords transparents et enregistre la taille d'origine et le décalage dans le fichier de données. Le moteur replace ensuite l'image rognée à sa place. Cela fait gagner beaucoup de place pour les personnages entourés de vide. Le revers : si votre moteur ou votre chargeur ignore les données de rognage, les animations vont trembler, car chaque image a une taille différente. Phaser, Pixi et les outils d'assemblage courants gèrent cela correctement avec les formats JSON hash et array. Si un sprite tremble sur place, vérifiez d'abord le rognage.

Rotation

Autoriser l'outil à faire pivoter les images de 90 degrés peut en faire tenir davantage sur la même feuille. Le moteur doit les remettre à l'endroit au moment du dessin, et tous les chargeurs ne le font pas. Si des images apparaissent de côté, désactivez la rotation. La place gagnée justifie rarement le temps de débogage.

Puissance de deux et taille maximale

Les GPU de bureau modernes gèrent sans problème les textures dont les dimensions ne sont pas des puissances de deux, et WebGL 2 aussi. Les tailles en puissance de deux (512, 1024, 2048, 4096) restent le choix sûr quand vous avez besoin de mipmaps sur des cibles anciennes, quand vous utilisez des formats de texture compressés qui les exigent, ou quand vous avez un doute sur le matériel. Pour la taille maximale, 2048 par 2048 est pris en charge presque partout. 4096 par 4096 fonctionne sur la plupart des appareils actuels, mais sur les téléphones d'entrée de gamme, l'envoi peut être lent ou simplement refusé. Si votre jeu vise le mobile, gardez des atlas de 2048 et utilisez-en plusieurs.

Pixel art et filtrage

Le pixel art doit être affiché avec un échantillonnage au plus proche voisin, et non avec un filtrage linéaire, sinon il devient flou. Dans Phaser, activez pixelArt: true dans la configuration du jeu. Dans Unity, réglez le mode de filtre de la texture sur Point et désactivez la compression pour les petites feuilles. Dans Godot, réglez le filtre de texture sur Nearest sur le nœud ou dans les paramètres du projet. Avec l'échantillonnage au plus proche voisin, le bleeding est moins fréquent, mais le padding reste utile quand les sprites se déplacent à des positions fractionnaires.

Formats d'export : JSON hash, JSON array, XML

L'image est presque toujours un PNG. C'est dans le fichier de données que les formats diffèrent.

• Le JSON hash stocke les images sous forme d'objet indexé par le nom de l'image : "frames": { "run_00.png": { ... } }. Facile à consulter par nom.
• Le JSON array stocke les images sous forme de liste, chacune avec un champ filename. Il garantit un ordre, ce que certains outils préfèrent.
• Les formats XML, comme le style Starling / Sparrow, listent chaque sous-texture avec des attributs x, y, largeur et hauteur. Phaser peut charger ce style avec load.atlasXML.

Phaser 3 lit le JSON hash comme le JSON array avec le même appel load.atlas ; pour Phaser, le choix n'a donc guère d'importance. Choisissez-en un et gardez-le dans tout le projet.

Charger un atlas dans Phaser 3

Voici une scène minimale qui charge un atlas, y place un sprite et construit une animation de course à partir d'images numérotées.

class GameScene extends Phaser.Scene {
  preload() {
    // image and data file exported by the packer
    this.load.atlas('hero', 'assets/hero.png', 'assets/hero.json');
  }

  create() {
    this.anims.create({
      key: 'run',
      frames: this.anims.generateFrameNames('hero', {
        prefix: 'run_',
        start: 0,
        end: 7,
        zeroPad: 2,
        suffix: '.png'
      }),
      frameRate: 12,
      repeat: -1
    });

    const player = this.add.sprite(200, 300, 'hero', 'run_00.png');
    player.play('run');
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  pixelArt: true,
  scene: GameScene
};

new Phaser.Game(config);

Les noms d'images dans generateFrameNames doivent correspondre exactement à ceux du JSON, extension comprise si l'outil l'a conservée. Ouvrez le JSON une fois pour vérifier ; la plupart des avertissements « missing frame » viennent d'un préfixe ou d'un suffixe qui ne correspond pas.

Unity Sprite Atlas et Godot AtlasTexture

Dans Unity, créez un Sprite Atlas depuis le menu Create, sous 2D, puis faites glisser des dossiers ou des sprites individuels dans sa liste d'objets pour les assembler. L'inspecteur de l'atlas propose le padding, une option pour autoriser la rotation et une option d'assemblage serré (tight packing). L'assemblage serré suit le contour du sprite plutôt que son rectangle et fait gagner de la place, mais il peut rogner les sprites de forme inhabituelle ; vérifiez donc le résultat. Vos sprites conservent leurs propres références dans les scènes et les prefabs ; Unity substitue l'atlas lors de la compilation. Assurez-vous que l'assemblage de sprites est activé dans les paramètres de l'éditeur du projet, sinon vous ne verrez pas l'effet en mode jeu.

Dans Godot, un AtlasTexture est une ressource qui pointe vers une région rectangulaire d'une autre texture. Vous pouvez en créer un dans l'inspecteur, lui assigner la grande feuille comme atlas et définir la région. Pour les personnages animés, l'éditeur SpriteFrames utilisé par AnimatedSprite2D peut découper une feuille en grille et ajouter directement les images, ce qui est souvent plus rapide que de créer de nombreuses ressources AtlasTexture à la main. Pour les cartes de tuiles, l'éditeur de TileSet travaille à partir de la feuille elle-même et dispose de ses propres réglages de séparation et de marge.

Sprites CSS pour le web

Pour les icônes d'un site web, un sprite est une seule image contenant toutes les icônes, accompagnée d'un CSS qui affiche la bonne partie. De nombreux outils peuvent exporter une feuille de style ; vous pouvez aussi l'écrire à la main.

.icon {
  width: 32px;
  height: 32px;
  background-image: url('/img/icons.png');
  background-repeat: no-repeat;
}
.icon-cart   { background-position: 0 0; }
.icon-search { background-position: -32px 0; }
.icon-user   { background-position: -64px 0; }

Pour les écrans haute densité, exportez la feuille au double de la taille et réglez background-size sur les dimensions d'origine afin que chaque icône reste nette. Pour de simples icônes monochromes, un sprite SVG avec des éléments <symbol> et <use> est souvent un meilleur choix qu'un PNG, car il s'adapte à toutes les tailles sans fichiers supplémentaires.

Erreurs courantes

• Fines lignes sur les bords des sprites. Bleeding dû au filtrage. Ajoutez du padding et de l'extrude, ou passez le pixel art en échantillonnage au plus proche voisin.
• L'animation tremble sur place. Images rognées dont le chargeur ne lit pas les décalages de rognage, ou images exportées avec des tailles de canevas différentes. Gardez le même canevas pour chaque animation ou assurez-vous que les données de rognage sont utilisées.
• Les images apparaissent pivotées. L'outil les a tournées et le chargeur ne les remet pas à l'endroit. Désactivez la rotation.
• L'atlas fonctionne sur ordinateur, mais reste vide sur un téléphone. La feuille dépasse la taille de texture maximale de l'appareil. Découpez-la en feuilles de 2048.
• Avertissements « Frame missing ». Les noms ne correspondent pas à cause d'un préfixe, d'un suffixe, d'un sous-dossier ou de zéros de remplissage manquants.
• Réassembler change tout. Les positions dans la feuille se décalent quand vous ajoutez une image. Chargez toujours les images par nom, jamais par coordonnées codées en dur, et le prochain réassemblage ne cassera rien.
• Un seul atlas géant pour tout le jeu. Regrouper par niveau ou par écran réduit la mémoire utilisée, puisque vous ne chargez que ce dont la scène courante a besoin.

Si vous vendez des packs de sprites

Les acheteurs utilisent des moteurs et des outils d'assemblage différents ; le pack le plus utile est donc celui qui fonctionne avec tous. Quelques habitudes rendent un pack plus facile à acheter et à utiliser :

• Livrez les deux formes. Incluez les images séparées en fichiers PNG distincts et un atlas assemblé avec son JSON. Ceux qui réassemblent avec leurs propres réglages veulent les images séparées ; ceux qui veulent simplement l'intégrer et démarrer préfèrent l'atlas.
• Indiquez les faits dans la fiche produit. Taille des images en pixels, nombre d'images par animation, padding et extrude utilisés dans l'atlas, rognage ou non des images, format de données (JSON hash, JSON array, XML) et cadence d'images pour laquelle le pack a été conçu.
• Gardez un nommage prévisible. Numéros complétés par des zéros, minuscules, un préfixe par animation. Les acheteurs écriront du code en s'appuyant sur ces noms.
• Incluez un aperçu. Un GIF animé ou une courte vidéo de chaque animation répond à la question principale avant l'achat.
• Soyez clair sur la licence. Précisez si le pack peut être utilisé dans des jeux commerciaux.

Si vous voulez voir comment d'autres créateurs présentent leurs packs, ou mettre les vôtres en vente, la catégorie des sprites 2D sur Getly est un endroit où l'on vend des packs de sprites.

Assembler une feuille de sprites prend quelques minutes une fois les réglages bien compris : des noms d'images cohérents, un peu de padding et d'extrude, un usage prudent du rognage, pas de rotation sauf si vous savez que le chargeur la gère, et une taille d'atlas acceptée par le matériel cible. Si tout cela est en place, l'atlas se fait oublier, et c'est exactement son rôle.