Générateur de sprite sheets — PNG + JSON + CSS

Qu'est-ce qu'un sprite sheet et à quoi sert-il

Un sprite sheet regroupe de nombreuses petites images — images d'animation, tuiles de jeu, icônes d'UI, emojis ou drapeaux — dans une seule image plus grande. Charger un fichier au lieu de plusieurs dizaines réduit les requêtes HTTP et les changements de texture, ce qui accélère le chargement et le rendu des pages web et des jeux. Chaque sprite est ensuite affiché en faisant référence à son rectangle dans la planche. Ce générateur de sprite sheets crée l'image et les coordonnées pour vous : déposez vos fichiers, choisissez une disposition et téléchargez un PNG accompagné d'un fichier de données JSON et d'une feuille de style CSS prête à l'emploi.

Tout se passe dans votre navigateur. Les images sont dessinées localement sur un canvas et les fichiers de coordonnées sont générés en JavaScript : vos illustrations ne sont donc jamais envoyées, et vous pouvez régénérer la planche autant de fois que vous le souhaitez en testant les réglages.

Grille ou disposition compacte

La grille uniforme attribue à chaque sprite une cellule aussi grande que la plus grande image et centre chaque sprite dans sa cellule. Cette structure prévisible est celle qu'attendent la plupart des systèmes d'animation : l'image n se trouve toujours à la colonne n modulo le nombre de colonnes. Les rangées compactes trient les sprites par hauteur et remplissent les rangées jusqu'à une largeur cible, ce qui gaspille beaucoup moins d'espace lorsque vos images ont des tailles différentes. Dans les deux modes, la valeur d'espacement ajoute une marge transparente autour de chaque sprite pour éviter le débordement des couleurs lors de la mise à l'échelle de la planche.

Utiliser la sortie JSON et CSS

Le fichier JSON liste chaque sprite sous un nom propre dérivé de son nom de fichier, avec sa position x et y, sa largeur et sa hauteur, ainsi que la taille totale de la planche. Des frameworks de jeu comme Phaser et PixiJS peuvent charger directement ce format hash, et il est facile à analyser dans n'importe quel langage. Le fichier CSS définit une classe de base qui applique la planche comme image de fond, et une classe par sprite avec sa taille et sa position de fond : une icône n'est donc qu'un span avec deux classes. Modifiez le préfixe des classes selon les conventions de nommage de votre projet, et placez le PNG à côté du fichier CSS ou ajustez l'URL.