Qu'est-ce que Générateur de sprite sheet ?

Le Générateur de feuille de sprites combine plusieurs images individuelles en une seule feuille de sprites optimisée. Importez vos images ou icônes — ou déposez un GIF animé dont chaque image est extraite automatiquement —, choisissez une disposition (grille, bande horizontale, bande verticale ou compacte), sélectionnez un fond transparent ou uni, puis exportez l'image combinée avec les données de position en JSON, tableau JSON, XML TextureAtlas ou CSS.

Le mode grille dispose tout selon une grille uniforme de N sur M, idéale pour les cycles d'animation où chaque image a la même taille. Les bandes horizontale et verticale alignent les images sur une seule ligne ou colonne — la disposition standard pour les animations 2D simples. Le mode compact effectue un placement par cases pour que des icônes de tailles différentes s'imbriquent avec un minimum de perte. Déposez un GIF animé et chaque image est décodée dans la feuille, sans avoir à exporter les images au préalable. La sortie conserve un fond transparent par défaut, ou vous pouvez choisir une couleur unie en remplissage chroma. Les métadonnées existent en quatre formats — hash JSON, tableau JSON, XML TextureAtlas et CSS — à intégrer directement dans Phaser, PixiJS, Unity, Godot ou un background-position CSS. Un aperçu d'animation permet de faire défiler les images de 1 à 60 FPS pour régler le rythme avant le téléchargement. Avancez image par image pour repérer un sprite mal aligné, rognez la bordure transparente de chaque image pour garder une planche compacte, et téléchargez la séquence en GIF animé pour partager le résultat sans moteur de jeu.

Comment utiliser

1. Importez les images individuelles que vous souhaitez combiner en sprite sheet.
2. Choisissez la disposition (grille, horizontale, verticale ou compacte), réglez l'espacement et fixez le fond en transparent ou en couleur unie.
3. Téléchargez l'image de la sprite sheet accompagnée des données de position CSS ou JSON.

Quand l'utiliser

• Empaqueter un cycle de marche ou une animation d'explosion dans une seule image pour un moteur de jeu.
• Réunir un set d'icônes d'UI dans un seul fichier pour que la page fasse une requête HTTP au lieu de quarante.
• Préparer des sprites de tilemap avec un padding constant pour éviter le bleeding entre tuiles voisines.

Résultat

Un développeur de jeux importe 16 frames d'animation de personnage (64×64 chacun). L'outil les agence en grille 4×4, produisant une sprite sheet de 256×256 avec les coordonnées JSON des frames pour le moteur de jeu.

FAQ

Quand choisir la disposition compacte plutôt que la grille ?

Utilisez la grille quand toutes les images font la même taille, comme une animation de personnage 32×32. Utilisez la bande horizontale ou verticale pour une séquence sur une seule rangée ou colonne, le format le plus simple à charger pour la plupart des moteurs. Utilisez compact quand les icônes varient, par exemple un set d'UI avec du 16×16 et du 48×48 mélangés ; cela donne la feuille la plus petite mais les métadonnées sont plus difficiles à lire à la main.

À quoi sert le paramètre padding ?

Le padding ajoute des pixels transparents autour de chaque frame. Sans lui, un rendu en filtrage linéaire peut faire baver les couleurs des frames voisines sur les bords de celle qu'il dessine. 1 ou 2 pixels de padding suffisent à éviter cet artefact.

Quel format de métadonnées dois-je exporter ?

JSON (hash) est le format TexturePacker que la plupart des moteurs chargent, chaque image étant indexée par son nom. Le tableau JSON stocke les images dans une liste ordonnée, ce que Phaser 3 et certains flux préfèrent. XML correspond au TextureAtlas de Starling/Sparrow utilisé par Unity, Godot et Friday Night Funkin. CSS fournit des classes background-position pour les jeux d'icônes web. Choisissez celui qu'attend votre moteur de rendu.

La sortie préserve-t-elle la transparence ?

Oui par défaut. La feuille est exportée en PNG avec canal alpha intact, les fonds transparents de vos PNGs sources passent donc tels quels. Si vous avez besoin d'une feuille opaque, choisissez une couleur de fond unie à côté des contrôles de disposition ; utile pour le chroma keying ou les moteurs qui ignorent l'alpha. Évitez les JPGs en source si la transparence compte, le format aplatit l'alpha en blanc avant même l'envoi.

Combien de frames peut-on mettre dans une seule feuille ?

En pratique, les GPU mobiles limitent une texture à environ 2048 ou 4096 pixels par côté, donc une feuille 4096x4096 avec des frames 64x64 héberge 4096 frames. Pour l'animation, scinder en deux feuilles 2048x2048 est plus sûr sur les vieux appareils.

Outils similaires