Générateur de Coordonnées pour Feuille de Sprites | JSON et background-position CSS sur un même écran

Calculez les coordonnées (x, y, w, h) de chaque frame d'une feuille de sprites en grille uniforme et obtenez simultanément un tableau JSON et des règles CSS sprite .frame-N { background-position }. Padding (bordure extérieure) et margin (espace entre frames) sont indépendants : vous reproduisez ainsi les coordonnées des exports TexturePacker ou Aseprite avec extrude ou spacing.

💡 À propos de cet outil

Une feuille de sprites rassemble plusieurs images dans un seul PNG pour que le moteur de jeu ou la page web ne charge qu'un fichier. Phaser, PixiJS et Godot AnimatedSprite2D attendent les données de frame en JSON avec (x, y, w, h) ; les sprites CSS s'appuient sur background-position à valeurs négatives pour cadrer la région voulue dans la boîte de l'élément.

L'outil calcule ces nombres une seule fois à partir de la taille de l'image, des dimensions de la grille et des marges, puis affiche les deux formats à la demande. Le canvas d'aperçu superpose à chaque frame un rectangle cyan pour vérifier le découpage avant de transmettre les valeurs au code.

🧐 Questions fréquentes

Q : Quelle est la différence entre padding et margin ici ? A : Le padding est la bordure vide autour de la feuille (la même valeur sur les quatre côtés). Le margin est l'espace entre deux frames adjacentes. Ils correspondent au « border padding » et au « shape padding » de TexturePacker, et au « border » et « spacing » d'Aseprite.

Q : Pourquoi mon tableau de sortie est-il vide ? A : La largeur ou la hauteur calculée comme (taille - padding*2 - margin*(n-1)) / n est nulle ou négative : le padding et les margins consomment toute l'image. Diminuez padding / margin ou le nombre de colonnes / lignes.

Q : Que représente le champ frame du JSON ? A : Un index en ordre row-major (de gauche à droite, de haut en bas). frame: 0 correspond à la cellule en haut à gauche ; avec 4 colonnes, frame: 4 est la première cellule de la deuxième rangée. C'est la même indexation que celle utilisée par le loader spritesheet de Phaser.

Q : Pourquoi les background-position CSS sont-ils négatifs ? A : Les sprites CSS fonctionnent en décalant l'image source vers le haut et vers la gauche pour faire entrer la région voulue dans la boîte de l'élément. Une frame dont le coin est à (64, 0) exige de pousser l'image de 64 pixels vers la gauche : background-position: -64px 0px. Lorsque x ou y vaut exactement 0, la sortie conserve 0px plutôt que -0px.

Q : Pourquoi mon frameW comporte-t-il deux décimales ? A : La largeur moins padding et margins ne se divise pas en un entier par le nombre de colonnes. L'outil conserve deux décimales pour rendre visible l'erreur d'arrondi ; pour un rendu pixel-perfect, ajustez les dimensions de l'image ou de la grille afin que la division tombe juste.

📚 Grille uniforme et atlas empaqueté

Les feuilles de sprites se déclinent généralement en deux variantes. La grille uniforme (que cet outil traite) place chaque frame sur une trame rectangulaire à dimensions fixes : c'est le format classique pour les animations de personnages, les tilesets et les sets d'icônes où toutes les frames partagent la même boîte englobante. Les atlas empaquetés utilisent des algorithmes de bin packing (TexturePacker, ShoeBox) pour entasser des frames de tailles variées sans espace perdu, mais vous dépendez du JSON exporté par l'outil pour retrouver chaque frame.

Quand les frames partagent vraiment une même taille (cycles d'animation, tilesets, icônes à échelle fixe), un générateur comme celui-ci remplace un packer plus lourd. L'inconvénient : chaque cellule réserve la même boîte englobante, donc une petite icône dans une feuille à frames volumineuses gaspille de la mémoire texture. Pour des tailles inégales (icônes UI, décalcomanies, éléments de HUD), l'atlas empaqueté reste préférable.