Jeux / Images
Créateur, découpeur et animateur de sprite sheets
Assemblez des images dans une sprite sheet ou un atlas de textures, découpez une sheet en images distinctes et animez-les. Enregistrez des PNG, des métadonnées JSON au format hash, des classes CSS, des fichiers ZIP ou un GIF animé, sans téléverser vos images.
Créateur, découpeur et animateur de sprite sheets: Le mode Créer assemble des images PNG, JPG, WebP et des images GIF décodées dans une grille, une ligne, une colonne ou une sheet optimisée. Les cellules uniformes s’adaptent à l’image la plus grande, avec un alignement au centre ou en bas au centre, des marges internes, des espacements et, en option, des dimensions en puissances de deux. Le mode Découper segmente selon le nombre de cellules ou leurs dimensions en pixels, ou détecte les îlots séparés par la transparence ou une couleur d’arrière-plan de référence. Vous pouvez exclure des rectangles, ignorer les cellules vides et rogner les bords transparents avant d’enregistrer un ZIP ou d’envoyer les images au mode Animer. Le mode Animer lit une plage d’images sélectionnée à 1–60 FPS, en boucle ou en ordre ping-pong, avec zoom des pixels et, en option, une pelure d’oignon. Il enregistre un GIF ou une bande PNG horizontale. Commencez par l’outil de pixel art si vous devez d’abord dessiner vos images. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.
- Catégorie
- Jeux et fêtes
- Exécutions
- Dans votre navigateur
- Coût
- Gratuit · sans inscription
- Disponibilité
- Prêt à l'emploi
Fonctionne entièrement dans votre navigateur
Organisez les images sur une planche pour votre jeu.
Les cellules uniformes utilisent la plus grande image, avec une marge intérieure sur chaque côté. L'espacement sépare les cellules.
Ajoutez des images pour commencer. Vous pouvez aussi découper une planche dans Découper et envoyer ses images ici.
Vos images et vos exportations restent dans ce navigateur. Utilisez les fichiers enregistrés dans votre propre projet de jeu.
Sprite sheets et atlas de textures
Une sprite sheet stocke plusieurs images d’animation ou images de jeu dans une seule image. Une grille régulière décrit chaque image par la position de sa cellule. Un atlas de textures peut utiliser des rectangles de tailles différentes et nécessite des coordonnées décrivant chaque image. La documentation d’AtlasTexture de Godot (https://docs.godotengine.org/en/stable/classes/class_atlastexture.html) explique comment une région d’un atlas est utilisée comme texture.
L’alignement en bas au centre maintient les pieds d’un personnage sur la même ligne de base d’une image à l’autre. Les agencements en étagères conservent les dimensions d’origine de chaque image et évitent la rotation. Le dimensionnement en puissance de deux ajoute des pixels inutilisés à droite ou en bas ; il ne redimensionne pas votre illustration. PNG conserve toute la transparence alpha, tandis que GIF offre moins de couleurs et une transparence sur un seul bit.
Coordonnées JSON hash
L’export JSON hash utilise les noms des images comme clés sous frames. Chaque entrée contient un rectangle d’image avec x, y, w et h, un sourceSize, un spriteSourceSize, ainsi que les indicateurs rotated et trimmed. Les coordonnées comptent les pixels depuis le coin supérieur gauche de la feuille. L’objet meta enregistre le nom de fichier de l’image et la taille totale de la feuille. Le chargeur d’atlas JSON hash de Phaser (https://docs.phaser.io/api-documentation/class/loader-loaderplugin#atlasJSONHash) décrit ce format à images nommées.
Faites en sorte que les exports utilisent les limites de l’image d’origine plutôt que celles des cellules complétées, avec trimmed et rotated définis sur false. L’option Cut peut exporter une liste distincte des rectangles sélectionnés. Ne rognez les bords transparents que si vous souhaitez des cadrages serrés ; laissez cette option désactivée pour conserver des cellules d’animation régulières et leur point de référence. Comparez les rectangles enregistrés avec l’importateur de votre moteur avant d’utiliser l’atlas dans un projet.
Comment l'utiliser
- Choisissez Créer, Découper ou Animer ; chaque mode possède un lien que vous pouvez ajouter à vos favoris.
- Ajoutez des images ou une sheet, puis ajustez la disposition, la grille de découpe ou les paramètres de l’animation.
- Prévisualisez le résultat et téléchargez les fichiers pour votre projet de jeu.
Confidentialité et limitations
Vos fichiers restent dans votre navigateur. Rien n’est téléversé.
Outils associés
Questions fréquentes
Dois-je utiliser une grille ou un atlas de textures optimisé ?
Une grille attribue à chaque image la même taille de cellule et facilite la découpe ou l’importation comme animation régulière. Une sheet optimisée place les images de tailles différentes sur des rangées afin de gagner de l’espace. Les images optimisées ne sont pas pivotées et nécessitent les rectangles JSON exportés, ou des paramètres de régions équivalents, dans votre moteur de jeu.
Pourquoi utiliser des marges internes, des espacements ou l’extension des bords ?
Les textures filtrées peuvent échantillonner les pixels voisins et créer des raccords colorés, appelés bleeding de texture. Les marges internes laissent de l’espace à l’intérieur de chaque cellule ; les espacements créent un vide entre les cellules. Cet outil ajoute des pixels transparents ou de la couleur d’arrière-plan, et non des pixels copiés depuis les bords. L’extension reproduit les couleurs des bords d’un sprite dans sa bordure ; si votre projet en a besoin, notamment avec des mipmaps, utilisez les paramètres de texture de votre moteur ou un packer d’atlas prenant en charge l’extension.
Comment importer la sheet dans Godot, Unity ou Phaser ?
Dans Godot, utilisez des régions de la sheet comme textures d’atlas ou images d’animation. Dans Unity, traitez l’image comme plusieurs sprites et découpez une grille régulière ou définissez les rectangles. Phaser peut utiliser une spritesheet régulière ou un atlas JSON hash. Gardez le PNG et son JSON ensemble. Les paramètres d’importation varient : choisissez le filtrage nearest-neighbour pour conserver des pixels nets, vérifiez la transparence et les dimensions des cellules, et assurez-vous que les noms des images et le format JSON conviennent à votre projet.
Quelles sont les limites de transparence et de durée des GIF ?
Le format GIF prend en charge au maximum 256 couleurs dans sa palette et une seule entrée de palette transparente ; les pixels sont donc entièrement transparents ou opaques. Un alpha inférieur à 50 % devient transparent ; tout autre alpha devient opaque. Choisissez plutôt une couleur mate pour fondre les bords lissés. Les durées des images sont arrondies à 10 ms, avec un minimum de 20 ms ; 60 FPS ne peut donc pas être représenté exactement. Le GIF exporté se répète en continu ; le mode ping-pong ajoute les images du retour sans répéter les extrémités.
Mes fichiers quittent-ils le navigateur ?
Non. La lecture des images, l’assemblage des sheets, la détection des îlots et la création des exports se font entièrement sur votre appareil. Les grandes sheets et les longues animations nécessitent davantage de mémoire. Un avertissement s’affiche au-delà de 400 images ou de 8 192 pixels sur un côté. Les limites de fonctionnement sont de 1 000 images importées, 16 384 pixels par côté et 64 millions de pixels par image ou export d’animation.
Outil gratuit · dans votre navigateur exécutions · aucun compte requis