Créateur de feuilles de sprites : générateur gratuit de feuilles et d'atlas en ligne
Créez votre propre créateur de feuilles de sprites
Combinez des images en une seule feuille — définissez les colonnes, la marge et l'échelle, exportez un PNG et un atlas JSON — ou générez une feuille animée complète à partir d'une seule invite.
Un créateur de feuilles de sprites a une seule fonction : prendre un ensemble d'images individuelles et les assembler dans une seule image à des coordonnées connues. Vous lui fournissez des fichiers PNG, JPG ou WebP, vous choisissez les colonnes, la marge et l'échelle, et il renvoie un PNG accompagné d'un atlas JSON qui associe le nom de chaque image à un rectangle x, y, largeur et hauteur. Ce rectangle est tout ce dont votre moteur de rendu a besoin pour dessiner la bonne cellule.
Le terme recouvre deux outils différents. Le premier est un assembleur : vous avez déjà les images et vous voulez les regrouper sur une seule feuille. Le second est un générateur : vous saisissez une invite et obtenez une feuille de personnage animé complète dans un style cohérent. Le constructeur de mondes 3D dans le navigateur de Neta Studio gère les deux, et le résultat s'intègre directement dans une scène Three.js sans étape de conversion.
Créez une feuille de sprites à partir de vos images
Voici le cas de l'assemblage. Vous déposez vos images et la feuille est construite de manière déterministe : de gauche à droite, de haut en bas, dans l'ordre où vous les avez fournies. La première image occupe la cellule (0,0), la deuxième se place une cellule à droite, et ainsi de suite jusqu'à ce que la ligne soit pleine, moment où l'assemblage passe à la ligne suivante.
L'ordre compte plus que tout ici. L'assembleur ne trie pas par nom de fichier et ne déduit pas les groupes d'animation à partir des noms. Si vos images sont nommées frame_1.png à frame_8.png et que vous les déposez dans le désordre, la feuille exportée est erronée et l'atlas JSON enregistrera fidèlement le mauvais ordre. Triez avant de déposer, ou vérifiez la bande de vignettes avant d'exporter.
La sortie se compose de deux fichiers. Le PNG est l'image assemblée. Le JSON est un petit objet indexé par nom d'image, chaque valeur contenant le rectangle et la taille d'origine. La plupart des moteurs peuvent consommer ce JSON directement ; si le vôtre ne le peut pas, les valeurs sont assez simples pour être remappées à la main.
01
Exportez vos images en PNG avec transparence, ou en JPG/WebP si vous n'avez pas besoin de canal alpha. Conservez des dimensions en pixels identiques pour toutes les images.
02
Déposez les images dans l'assembleur dans l'ordre de lecture. Vérifiez que la bande de vignettes se lit de gauche à droite comme l'animation doit se jouer.
03
Définissez le nombre de colonnes. Laissez sur auto pour obtenir une feuille à peu près carrée, ou fixez-le au nombre d'images pour une seule bande large.
04
Définissez la marge et l'échelle. La marge ajoute des pixels transparents entre les cellules ; l'échelle multiplie chaque image par un facteur entier avec interpolation au plus proche voisin.
05
Exportez ensemble le PNG et l'atlas JSON. Vérifiez un rectangle du JSON par rapport à la feuille visible avant de le connecter à votre moteur de rendu.
Générez une feuille de sprites à partir d'une invite
Le second sens de créateur de sprites n'a rien à voir avec l'assemblage en grille. Vous décrivez un personnage et obtenez une feuille complète en retour — un ensemble complet de poses rendues dans un style cohérent, déjà disposées en grille. Il n'y a aucune illustration source à déposer, puisque l'illustration est le résultat.
L'aspect utile, c'est la cohérence. Générer les huit directions d'un cycle de marche en une seule passe maintient la silhouette, la palette et les proportions alignées d'une cellule à l'autre. Générer chaque image dans une requête séparée ne le fait pas, et la dérive se voit : le personnage semble changer de masse entre les images.
Neta Studio génère des cycles de marche à 8 directions, ainsi que des ensembles repos, attaque et incantation. Agent Sprite Forge est l'asset du studio qui produit ces feuilles ; vous pouvez déposer une feuille générée dans un monde du constructeur de jeux 3D et l'animer avec le même atlas JSON que celui qu'aurait produit l'assembleur.
- Marche à 8 directionsUne seule feuille couvrant les huit directions de la boussole, de sorte que tourner le personnage dans la scène corresponde à une lecture de ligne plutôt qu'à une nouvelle génération.
- Repos, attaque, incantationDes ensembles d'actions distincts générés dans le même style que la marche, que vous pouvez échanger à l'exécution sans rupture de style visible.
- Report de styleDécrivez le personnage une fois et les ensembles de poses héritent de la palette et des proportions : c'est précisément ce qui échoue habituellement quand vous générez les images une par une.
Colonnes, marge, échelle et atlas JSON
Quatre réglages déterminent si une feuille est exploitable. Réglez-les correctement au moment de l'export, car les corriger ensuite implique de réassembler la feuille et de retester chaque animation qui référençait les anciennes coordonnées.
L'atlas JSON est le contrat entre la feuille et votre code. Il stocke, pour chaque image, la position et la taille de la cellule. Si vous modifiez la feuille sans régénérer l'atlas, les sprites échantillonnent la mauvaise région et vous obtenez une bande d'images voisines qui débordent dans la cellule.
- ColonnesFixe le nombre de cellules par ligne avant le retour à la ligne. Une bande large utilise un nombre de colonnes égal au nombre d'images ; une grille utilise une valeur plus proche de la racine carrée.
- Marge et espacementInsèrent des pixels transparents entre les cellules. C'est important lorsque votre moteur de rendu échantillonne avec un filtrage quelconque, car les pixels de bord d'une image voisine peuvent déborder sur une frontière avec une marge nulle.
- ÉchelleMultiplie chaque image par un facteur entier avec interpolation au plus proche voisin. Une mise à l'échelle non entière avec un filtre lissé adoucit les bords des pixels et détruit l'aspect net pour lequel vous avez exporté les images.
- Atlas JSONAssocie le nom de chaque image à x, y, largeur et hauteur. Considérez l'origine comme les pieds du personnage, et non le coin supérieur gauche de l'image, afin que le placement sur le plan du sol ne nécessite aucun décalage par image.
Qu'est-ce qu'un atlas de textures
Un atlas est une texture unique contenant de nombreuses images plus petites, accompagnée d'une table décrivant l'emplacement de chacune. Une feuille de sprites est le cas courant où ces images plus petites sont les images d'animation d'un même sujet.
La raison d'être des atlas, ce sont les appels de dessin. Lier une texture distincte par image force le moteur de rendu à changer d'état entre chacune, et les changements d'état dominent le temps de frame dès que vous avez de nombreux sprites à l'écran. Tout regrouper sur une seule texture signifie une seule liaison pour l'ensemble du groupe. La géométrie est toujours dessinée par sprite, mais la texture ne change pas.
Le compromis, c'est que la modification reste grossière. Changer une image implique de réassembler la feuille et de mettre à jour l'atlas, et tout code conservant un ancien rectangle devient erroné. C'est pourquoi l'atlas est exporté sous forme de données plutôt que de coordonnées codées en dur. Notre guide des feuilles de sprites approfondit les décisions d'assemblage.
Générateur de feuilles de sprites pour RPG, jeu de plateforme et isométrique
La disposition souhaitée est surtout déterminée par le genre. Les RPG indexent par direction et par phase d'animation, donc une grille se lit naturellement. Les jeux de plateforme exécutent généralement une seule action à la fois, donc une bande large est plus simple. Les mondes isométriques exigent des dimensions de cellule qui correspondent à la projection en losange, sinon les sprites se chevauchent.
Choisissez la disposition avant de définir les colonnes, et écrivez le code de lecture en fonction de cette disposition. Adapter après coup une grille à un indexage par bande est un changement mécanique mais fastidieux, et il touche chaque site d'appel d'animation.
| Genre | Disposition typique | Remarques |
|---|---|---|
| RPG | Grille à 4 directions | Les lignes sont les directions, les colonnes les images. Indexez par direction puis par phase. |
| Jeu de plateforme | Bande large unique | Une action par feuille. La lecture est un index linéaire, sans calcul de ligne. |
| Isométrique | Cellules en losange | La taille de cellule doit correspondre à la projection. Ajoutez plus de marge que d'habitude pour éviter le débordement des bords. |
Feuilles de sprites de personnages
Maintenir un casting cohérent est la difficulté principale dès que vous avez plus d'un personnage. Des feuilles individuellement plausibles échouent ensemble quand les palettes dérivent, que les proportions changent ou que la direction de la lumière s'inverse entre des personnages présents dans la même scène.
Générez l'ensemble complet des actions d'un personnage en une seule passe plutôt qu'une action à la fois. La palette et les proportions se propagent d'une pose à l'autre au sein d'une même passe ; d'une passe à l'autre, non, et la différence est visible dès que deux personnages partagent une image.
Conservez une taille de cellule identique pour tous les personnages du casting, même si l'illustration ne remplit pas la cellule. Des cellules uniformes permettent à la scène de placer n'importe quel personnage dans n'importe quel emplacement sans table de décalage par personnage. Le cas d'usage du créateur de sprites de personnages détaille cette approche pour tout un casting.
Découpez une feuille existante
Si vous avez déjà une feuille et que vous devez en extraire les images, il s'agit de découpage, non d'assemblage, et c'est l'opération inverse. Le convertisseur et animateur GIF gère ce cas — vous fournissez la feuille, définissez la grille de cellules ou les limites des images, et récupérez les images individuelles.
Deux choses font échouer le découpage. Les feuilles à marge irrégulière ne se divisent pas uniformément selon une taille de cellule devinée : mesurez donc une cellule connue plutôt que de diviser la largeur de l'image par votre nombre estimé de colonnes. Les feuilles exportées depuis un format avec perte portent des artefacts de compression le long des limites de cellules, et ces artefacts deviennent visibles une fois les cellules séparées et agrandies.
Entrez dans le monde auquel il appartient
Un sprite est un personnage sans endroit où se tenir. La dernière étape est celle que personne d'autre ne propose : prenez la feuille que vous venez de créer et placez-la dans un monde où l'on peut se promener — une petite île, une planète, un coin de rue sous la pluie. Chaque monde de ce site a été créé à partir d'une seule description écrite et publié sous forme de page jouable.
FAQ
Quels formats de fichier puis-je utiliser pour les images sources ? +
PNG, JPG et WebP. Le PNG est le seul des trois à porter un canal alpha de manière fiable, utilisez-le donc pour tout ce qui comporte de la transparence.
Pourquoi ma feuille de sprites est-elle floue lorsqu'elle est agrandie ? +
Vous avez mis à l'échelle selon un facteur non entier, ou le moteur de rendu applique un filtre lissé. Mettez à l'échelle uniquement par nombres entiers et réglez le filtre de texture sur plus proche voisin.
Ai-je besoin d'une marge entre les images ? +
En général, oui. Avec une marge nulle et un filtrage de texture quelconque, les pixels de bord d'une image sont échantillonnés dans la cellule voisine, ce qui produit une couture visible pendant l'animation.
Que contient réellement l'atlas JSON ? +
Une entrée par image, contenant ses x, y, largeur et hauteur sur la feuille. Certains exportateurs enregistrent aussi la taille d'image d'origine et l'origine, qui pour les personnages se situe généralement aux pieds.
Puis-je modifier le nombre de colonnes après l'export ? +
Pas sans réassembler. Modifier les colonnes déplace chaque image sur la feuille, donc les anciens rectangles de l'atlas ne pointent plus vers les bonnes cellules et chaque animation qui les référence casse.
Quelle est la différence entre un créateur de feuilles de sprites et un générateur de feuilles de sprites ? +
Un créateur assemble des images que vous possédez déjà dans une grille. Un générateur crée les images à partir d'une invite — par exemple un ensemble complet de marche à 8 directions dans un style cohérent — de sorte que l'illustration est le résultat plutôt que l'entrée.
Retour au constructeur de jeux 3D
Les 31 mondes 3D, jeux et scènes terminés sont réunis sur une seule page — tous jouables.
Partir d'un modèle de bibliothèque
Chaque asset de cette bibliothèque est un PNG transparent, prêt pour le jeu, accompagné d'une invite enregistrée — Bibliothèque de ressources de sprites et Feuilles de sprites gratuites, classées par action, style et sujet. Libres à consulter et à télécharger.