Importez plusieurs images, ordonnez-les, définissez la grille (colonnes, espacement, padding, fond) et générez une spritesheet PNG + un JSON de coordonnées prêt à être utilisé dans vos jeux, interfaces ou animations. Traitement 100 % local via Canvas.
Ce générateur de spritesheet regroupe vos petites images (sprites, icônes, éléments d’UI, frames d’animation, etc.) dans un seul fichier PNG, accompagné d’un fichier JSON décrivant la position de chaque élément. C’est une approche classique en jeu vidéo 2D et en front-end web pour réduire le nombre de requêtes HTTP et simplifier l’affichage.
Vous importez simplement vos images, vous les réorganisez si besoin, puis vous choisissez la structure de la mosaïque : nombre de colonnes (ou calcul automatique), espacement entre les cellules, padding interne et fond transparent ou couleur unie. L’outil calcule la taille finale de la spritesheet et centre chaque sprite dans sa cellule.
Le JSON généré adopte une structure simple avec un bloc meta (informations globales sur l’image) et un bloc frames contenant une entrée par sprite. Chaque frame fournit les coordonnées x, y, la largeur w et la hauteur h dans la spritesheet, ainsi que la taille originale sourceSize. Il est ainsi très simple de brancher ce format dans un moteur maison ou dans un canvas custom.
Pour des pipelines avancés (multi-atlas, formats propriétaires, packing optimisé, compression spécifique), il est possible de combiner cette spritesheet simple avec des scripts de build (Node.js, Python, etc.). Cet outil reste parfait pour le prototypage, les petits jeux web, les POCs ou les interfaces front-end nécessitant un atlas simple.
Chargez le PNG comme texture, puis utilisez les coordonnées du JSON pour dessiner la bonne portion. Avec Canvas, cela revient à appeler{" "} drawImage(image, x, y, w, h, ...) où{" "} x, y,{" "} w, h viennent de{" "} frames[nom].frame. Sur d’autres moteurs, on parle d’“atlas de textures”.
Oui. La taille de cellule est basée sur le plus grand sprite (plus le padding). Les sprites plus petits sont centrés dans leur cellule, ce qui garantit une grille régulière. Les coordonnées du JSON indiquent la zone exacte à dessiner dans la spritesheet.
Oui. Modifiez l’ordre des sprites (↑ / ↓), ajustez les paramètres (colonnes, espacement, padding, fond, préfixe de nom), puis relancez la génération. Vous obtiendrez un nouveau PNG et un JSON cohérent avec ces réglages.
La limite dépend surtout de la mémoire disponible et de la taille maximale supportée par Canvas dans votre navigateur. Pour des spritesheets énormes (très hautes résolutions ou milliers de sprites), il peut être préférable d’utiliser un outil de build côté serveur. Pour un usage web classique, cet outil en ligne suffit largement.