Générateur de sprite sheet

Réunir beaucoup d'images sur une feuille

Une sprite sheet stocke de nombreuses petites images dans un seul fichier. Les jeux s'en servent pour les images d'animation et les tuiles, et les sites web les utilisent depuis longtemps pour charger des dizaines d'icônes en une seule requête. En assembler une à la main dans un éditeur d'image est lent et source d'erreurs.

Ce générateur dispose vos images dans une grille régulière, ligne par ligne, dans l'ordre d'ajout. Chaque case a la taille de la plus grande image, pour que les images s'alignent de façon prévisible, et la feuille est enregistrée en PNG, qui conserve la transparence.

Comment créer une sprite sheet

1. 1

   Étape 1: Ajoutez vos images

   Déposez jusqu'à 100 images, dans l'ordre où elles doivent apparaître.

2. 2

   Étape 2: Réglez les colonnes

   Choisissez de 1 à 20 colonnes ; les lignes s'ajoutent automatiquement.

3. 3

   Étape 3: Réglez marge et fond

   Ajoutez de 0 à 80 px de marge entre les cases et choisissez un fond transparent, blanc, noir ou personnalisé.

4. 4

   Étape 4: Téléchargez le PNG

   Vérifiez l'aperçu en direct et téléchargez sprite-sheet.png.

Réglages de la sprite sheet

À quoi servent les sprite sheets

• Animation de jeux 2D. Regroupez cycles de marche et effets pour des moteurs comme Phaser, Godot ou Unity.

• Sprites d'icônes CSS. Servez de nombreuses icônes en une image et placez-les avec background-position.

• Jeux de tuiles. Assemblez les tuiles d'une carte dans un seul atlas.

• Packs d'emojis et d'autocollants. Gardez une série de petits visuels dans un seul fichier bien rangé.

Retrouver la position de chaque sprite

Toutes les cases ayant la même taille, vous pouvez calculer les positions au lieu de lire un fichier de correspondance. Avec une largeur de case W et une hauteur H (les dimensions de la plus grande image) et une marge P, l'image en colonne c et ligne r (en comptant à partir de zéro) commence à x = c fois (W + P) et y = r fois (H + P).

Les images plus petites que la case sont placées dans son coin supérieur gauche, sans mise à l'échelle. Pour les animations, exportez toutes les images à la même taille afin que chacune tombe exactement dans sa case.

• x = colonne fois (largeur de case + marge).
• y = ligne fois (hauteur de case + marge).
• Les images sont numérotées de gauche à droite, puis de haut en bas.

Utiliser la feuille en CSS

Définissez la feuille comme background-image d'un élément de la taille d'une case, puis déplacez-la avec un background-position négatif, par exemple background-position: -64px 0 pour la deuxième icône de 64 px de la première ligne.

Pour les écrans haute densité, créez la feuille à partir d'images deux fois plus grandes que la taille d'affichage et réduisez le fond avec background-size.

Conseils pour les sprite sheets

• Numérotez vos images (01, 02, 03) et ajoutez-les dans cet ordre.
• Utilisez 1 à 2 px de marge pour les textures de jeu afin d'éviter les débordements sur les bords.
• Gardez des sprites de même taille pour les animations.
• Compressez le PNG final avec le compresseur en lot si le poids compte.

Questions sur le générateur de sprite sheet