Générateur de planches de sprites
Réunir les images en planche avec coordonnées CSS, SCSS ou JSON
👇 Faites défiler pour un guide rapide étape par étape
Déposer vos sprites ici
ou cliquez n’importe où pour parcourir les fichiers
Généré CSS
Chargez des images pour générer le code
Les classes CSS et coordonnées JSON apparaîtront ici
Avant de commencer avec Générateur de planches de sprites
Regroupez plusieurs images dans une planche de sprites avec des réglages d’espacement et une sortie de coordonnées CSS, SCSS ou JSON dans le navigateur.
Idéal pour
- Réunir des images de jeu ou icônes dans un atlas PNG
- Générer des coordonnées CSS, SCSS ou JSON avec la planche
- Créer une planche en rangées dans le navigateur
À savoir avant de commencer
- L’outil dispose les images en lignes ; ce n’est pas un optimiseur général de bin packing
- L’espacement et les choix d’échelle influencent les dimensions finales de la planche
- Les lots utilisent la mémoire au décodage
Poursuivre le flux
Utiliser le générateur de planches
1Ajouter des images
- • Cliquez sur « Ajouter des images » ou déposez les images de sprites
- • Prend en charge PNG, JPG, JPEG et WebP
- • Utilisez Optimisation automatique pour l’optimisation automatique
2Configurer le canevas
- • Canevas : Définir les dimensions (mode Personnalisé/Max)
- • Redimensionner : Redimensionner les sprites avec le curseur de pourcentage
- • Espacement : Ajuster l'espacement entre sprites
3Générer le code
- • Format : Choisir la sortie CSS, SCSS ou JSON
- • Nommage : Définir le modèle de nommage des sprites
- • Trier : Trier par taille ou par nom
4Télécharger les ressources
- • Cliquez sur « Télécharger le PNG » pour l’image de la planche de sprites
- • Cliquez sur « Télécharger le code » pour les coordonnées CSS/JSON
- • Utilisez « Effacer » pour recommencer avec de nouveaux sprites
Fonctions principales :
Questions sur le Générateur de planches de sprites
Que fait un générateur de planches de sprites ?
Il empaquette des fichiers d’image séparés dans un atlas unique. Regrouper les sprites apparentés facilite leur distribution ; les coordonnées générées indiquent au CSS ou au code du jeu où chacun se trouve dans la planche.
Quels formats de code puis-je exporter ?
L’outil peut générer les coordonnées CSS, SCSS ou JSON avec la planche PNG. Le JSON contient les positions et dimensions des images ; vous pouvez donc l’adapter au format d’assets attendu par votre moteur ou application.
Mes images sont-elles envoyées à un serveur ?
Non : les images et la planche sont décodées/empaquetées localement, pas envoyées à ImageMint.
Pourquoi l’espacement est-il important dans un atlas de sprites ?
L’espacement laisse de la place entre les sprites voisins. Sans séparation suffisante, le filtrage de texture ou le rendu redimensionné peut échantillonner un sprite proche et créer un débordement de couleur sur le bord.
Méthodes de travail sur les sprites connexes
Pour séparer un atlas existant en images, utilisez le Découpeur de planches de sprites . Le guide de placement dans un atlas de sprites explique l’espacement et les débordements de contour. Pour la suite propre aux moteurs, consultez les Guide d’import Unity et Guide d'import Godot.