Manchot qui marche
Six images sur une ligne, toutes posées au même niveau du sol.
Créer une sprite sheet
Déposez vos images PNG, icônes ou objets de jeu et obtenez une seule sprite sheet en quelques secondes : une grille régulière ou une disposition compacte, avec un atlas JSON ou XML, des sprites CSS et un GIF animé. Ce générateur de sprite sheet gratuit fonctionne dans votre navigateur : rien n’est importé.
Générateur de sprite sheetGratuit · dans votre navigateur
Déposez vos images ici
PNG, WebP, JPG, GIF ou AVIF, autant qu’il vous en faut. Tout reste dans votre navigateur.
- Gratuit, dans votre navigateur
- Grille ou disposition compacte
- JSON, XML et CSS
- Rognage, marge, puissance de deux
Exemples du générateur de sprite sheet
Huit séries d’images créées pour ces exemples, chacune assemblée en une seule planche par ce générateur de sprite sheet. Ouvrez-en une pour essayer chaque réglage.
Effet d’explosion
Huit images sur une grille carrée, de l’étincelle à la fumée.
Icônes d’application
Neuf icônes de tailles différentes, rognées et regroupées au plus serré.
Objets de jeu en pixel art
Huit objets regroupés et agrandis à 200 %, aux pixels nets.
Icônes de fruits pour le CSS
Six icônes sur une ligne, prêtes en sprites CSS pour une page web.
Stickers spatiaux
Six stickers sur trois colonnes, sur une planche en puissance de deux.
Chauve-souris en vol
Quatre images en une colonne, pour les moteurs qui lisent de haut en bas.
Pièces d’échecs
Six pièces de hauteurs différentes, regroupées avec un atlas XML.
Comment créer une sprite sheet
Trois étapes, et rien n’est importé.
Déposez, collez ou choisissez des fichiers PNG, WebP, JPG ou GIF, autant qu’il vous en faut. Triez-les par nom ou faites-les glisser dans l’ordre voulu.
Prenez une grille de cases égales pour des images d’animation, ou regroupez au plus serré des images de toutes tailles. Réglez le rognage, la marge, l’espacement et la taille.
Enregistrez la sprite sheet PNG avec un atlas JSON ou XML, des sprites CSS pour un site web, ou les images en GIF animé.
Les points forts de ce générateur de sprite sheet
Six atouts, d’un cycle de marche à une page d’icônes pour le web.
ImagesGrille ou disposition compacte
Une grille de cases égales garde les images d’animation dans l’ordre ; la disposition compacte loge des images de toutes tailles dans la plus petite planche qu’elle trouve.
Rognage des bords transparents
Les bords vides sont retirés pour gagner de la place, et l’atlas garde la taille et le décalage d’origine de chaque image : rien ne bouge dans votre jeu.
Un atlas pour chaque moteur
L’atlas JSON suit le format JSON Hash que lisent Phaser et PixiJS ; l’atlas XML suit le format Sparrow et Starling, lu par de nombreux frameworks de jeu.
Sprites CSS pour les sites web
Une classe par image avec sa taille et sa position : la page charge une seule image au lieu de plusieurs dizaines.
Aperçu de l’animation et GIF
Lisez les images dans l’ordre à la cadence choisie, et enregistrez-les en GIF animé pour les partager ou les tester.
Gratuit et privé
Ce générateur de sprite sheet fonctionne entièrement dans votre navigateur : aucun import, aucun compte, aucun filigrane, et l’outil reste utilisable hors ligne une fois la page chargée.
Guide : des sprite sheets adaptées à votre moteur
Cinq conseils rapides pour une sprite sheet propre.
Nommez vos fichiers dans l’ordre
Des fichiers nommés walk_1, walk_2 … walk_10 se rangent dans le bon ordre avec « Trier par nom », car les nombres sont lus comme des nombres ; faites glisser une image pour la déplacer.
Grille pour l’animation, compacte pour les séries
Utilisez une grille quand les images doivent garder la même taille et la même position ; regroupez au plus serré les icônes, objets et tuiles de tailles différentes pour gagner de la place.
Rognez et gardez les décalages
Le rognage réduit la planche, et les moteurs qui lisent l’atlas remettent chaque image à sa place. Pour une simple grille lue par taille de case, laissez le rognage désactivé.
Une marge contre les débordements
Ajoutez 1 à 2 px de marge ou d’espacement quand la planche est mise à l’échelle ou filtrée : aucune image voisine n’apparaît alors sur les bords.
Surveillez la taille de la planche
La taille s’affiche sous l’aperçu. Gardez chaque côté sous 4096 px pour les téléphones, et activez « Taille en puissance de deux » pour les moteurs qui la demandent.
Qui utilise un générateur de sprite sheet
Les raisons courantes de créer une sprite sheet à partir de nombreuses images.
Développeurs de jeux
Regroupez personnages, effets et objets dans une seule texture, avec un atlas pour le moteur.
Développeurs web
Réunissez des icônes dans une seule image avec des sprites CSS pour réduire le nombre de requêtes.
Artistes en pixel art
Disposez vos images d’animation et exportez une planche nette en taille 2× ou 4×.
Moddeurs et animateurs
Créez des planches avec atlas XML ou JSON pour vos mods, vos outils et vos logiciels d’animation.
Questions fréquentes sur les sprite sheets
Réponses sur la création de sprite sheets, les atlas et la confidentialité.
Ajoutez vos images, choisissez une grille ou une disposition compacte, puis téléchargez la sprite sheet PNG avec l’atlas ou le CSS dont vous avez besoin.
Oui. Il fonctionne entièrement dans votre navigateur, sans compte et sans filigrane.
Non. Vos images sont lues et disposées sur votre appareil ; rien n’est envoyé à un serveur.
Une grille donne à chaque image une case de même taille, l’idéal pour l’animation. La disposition compacte loge des images de tailles différentes au plus serré, l’idéal pour les icônes et les objets.
JSON pour Phaser, PixiJS et la plupart des moteurs web, XML pour les frameworks de type Sparrow et Starling, et CSS pour les pages web.
Non. L’atlas garde la taille et le décalage d’origine de chaque image : les moteurs qui le lisent dessinent chaque image à sa place.
Oui. Ouvrez le GIF dans « GIF en sprite sheet », qui lit chaque image avec sa durée et les place toutes sur une seule planche.
Jusqu’à 1 000 images sur un ordinateur et 400 sur un téléphone, sur une planche de 16 384 px maximum de chaque côté.
Créer une sprite sheet dès maintenant
Ajoutez vos images et téléchargez votre sprite sheet en quelques secondes, gratuitement et dans votre navigateur.
Ajouter des images