Une sprite sheet, ce n'est que la moitié du travail. Le moteur doit aussi savoir où se trouve chaque frame et combien de temps elle dure. Ce créateur assemble vos frames en grille, en bande ou en atlas serré, et écrit ces données dans les formats que les moteurs importent vraiment : JSON TexturePacker/Phaser, JSON Aseprite, ressource SpriteFrames Godot 4, CSS et réglages de découpe Unity. Les frames sont triées comme vous les numéroteriez : walk_10 vient après walk_9.
Comment utiliser l'outil Créateur de sprite sheet
- Déposez tous vos PNG de frames d'un coup. Ils sont triés par nom dans l'ordre naturel. Vous pouvez en ajouter à tout moment.
- Réordonnez avec les flèches, retirez les frames en trop ou inversez l'ordre.
- Choisissez une disposition : Grille (colonnes auto ou fixes), une seule Ligne, une seule Colonne, ou Empaquetage serré avec rognage des bords transparents.
- Réglez la marge entre les frames, la marge extérieure et l'extrusion des bords. Activez la puissance de deux si votre cible exige des textures de 64, 128 ou 256 px.
- Vérifiez l'animation dans l'aperçu et réglez son FPS.
- Téléchargez le PNG et un fichier de données, ou un ZIP avec le PNG et tous les formats.
Ce que vous obtenez
- Planche PNG avec transparence, exactement comme dans l'aperçu.
- JSON Phaser / TexturePacker (hash et array), avec les décalages de rognage pour que les frames empaquetées serré restent alignées.
- JSON Aseprite avec un tag de frames et les durées.
- SpriteFrames Godot 4 .tres à base d'AtlasTextures, prêt pour un AnimatedSprite2D.
- Sprites CSS avec une classe par frame et une animation par étapes, plus les réglages d'import et de découpe Unity.
Moteurs compatibles
- Phaser 3 :
this.load.atlas(key, 'sheet.png', 'sheet.json'), puis créez l'animation à partir des noms de frames. - Godot 4 : placez le .tres à côté du PNG et assignez-le aux Sprite Frames d'un AnimatedSprite2D.
- Unity : les dispositions en grille se découpent avec Grid By Cell Size en reprenant les valeurs du fichier de réglages. Utilisez le filtrage Point et aucune compression.
- PixiJS, Defold, Cocos, Construct : lisent le JSON TexturePacker (hash) directement ou via leurs importeurs.
Conseils tirés de nos propres jeux
- Utilisez la Grille avec des frames uniformes pour l'animation de personnages. C'est ce qu'attendent les découpeurs en grille et les outils d'onion skin des moteurs.
- Utilisez l'Empaquetage serré avec rognage pour les atlas d'objets et d'UI contenant beaucoup d'images de tailles différentes.
- Ajoutez 1 à 2 px d'extrusion quand la planche est mise à l'échelle par un facteur non entier ou utilise des mipmaps. Cela empêche les frames voisines de déborder sur les bords.
- Donnez des noms parlants à vos frames (hero_walk_00…). Ils deviennent les clés des frames dans le JSON.
Cas d'usage
- Assembler en une seule texture des frames exportées depuis Aseprite, Blender ou Spine.
- Construire un atlas d'UI ou d'objets pour un jeu web.
- Transformer des frames générées par IA en planche que votre moteur peut animer.
- Créer une animation de sprites CSS pour une landing page.
FAQ
Quels formats de données sont exportés ?
JSON TexturePacker en version hash et array (lu par Phaser, PixiJS et de nombreux moteurs), JSON Aseprite, SpriteFrames Godot 4 .tres, classes de sprites CSS avec keyframes, et un fichier texte avec les réglages d'import et de découpe Unity.
À quoi sert l'empaquetage serré ?
Il rogne la bordure transparente de chaque frame et range les frames rognées en lignes triées par hauteur, en essayant plusieurs largeurs et en gardant la planche la plus petite. Le JSON enregistre la taille et le décalage d'origine de chaque frame pour qu'elle s'affiche au bon endroit.
Qu'est-ce que l'extrusion des bords ?
L'extrusion recopie la rangée de pixels extérieure de chaque frame vers l'extérieur sur 1 à 4 px. Quand un GPU échantillonne légèrement en dehors d'une frame (filtrage, mipmaps, zoom non entier), il lit le bord de la frame elle-même plutôt qu'une voisine.
Mes frames n'ont pas toutes la même taille. Que se passe-t-il ?
En disposition Grille, Ligne ou Colonne, chaque cellule a la taille de la plus grande frame, et les frames plus petites sont alignées en bas au centre, au centre ou en haut à gauche. L'Empaquetage serré garde chaque frame à sa propre taille.
Y a-t-il une limite de frames ?
Aucune limite fixe. Tout tourne dans votre navigateur, donc la limite pratique est la mémoire de votre appareil. Des centaines de frames de 64 px ne posent aucun problème.
Mes images sont-elles envoyées en ligne ?
Non. Les frames sont lues et assemblées localement. Rien n'est envoyé à un serveur.