Ajouter une image
Déposez des PNG, JPG, WebP ou GIF, une sprite sheet à découper ou un ZIP de frames. Ajoutez-en autant que vous voulez, placez-les et assemblez-les en une sprite sheet.
Créateur de sprite sheets gratuit : combinez vos images en une sheet
Combinez un lot d'images en vrac en une seule sprite sheet. Déposez autant de frames que vous voulez, en PNG, JPG, WebP ou GIF, et elles arrivent sur une timeline dans l'ordre reçu. La disposition est à vous. Grille, bande horizontale ou verticale, avec espacement, échelle entière et arrière-plan transparent ou uni. Réordonnez les frames en les glissant, masquez celles à laisser de côté, et appuyez sur lecture pour voir l'animation avant d'assembler. Exportez un PNG seul, ou la sheet avec un atlas JSON à côté pour Phaser, Pixi et TexturePacker. Tout tourne dans votre navigateur. Rien n'est envoyé, pas de compte, pas de filigrane sur ce que vous exportez. Dans l'autre sens, d'une sheet finie vers des frames, c'est la découpe de sprite sheet.
Comment créer une sprite sheet
Créer une sprite sheet prend cinq étapes, et l'aperçu est la sheet elle-même tout du long.
- Déposez vos frames, autant à la fois que vous voulez
- Placez-les en ordre sur la timeline. Glissez pour réorganiser, masquez celles à laisser de côté, et appuyez sur lecture pour vérifier le mouvement
- Choisissez une grille, une bande horizontale ou verticale, puis réglez colonnes, espacement, échelle et arrière-plan
- Regardez l'aperçu, qui est la sheet elle-même, donc ce que vous voyez est ce qui se télécharge
- Téléchargez la sheet en PNG, ou la sheet avec un atlas JSON à côté dans un ZIP
En voici une vraie. Huit frames d'une animation d'attente de fille au katana, déposées en PNG 64x64 en vrac et assemblées en bande horizontale, la disposition classique d'une sheet d'animation.
Qu'est-ce qu'un atlas de textures
Un atlas de textures, c'est une image qui contient plusieurs petits graphiques, plus un fichier de données qui note où chacun se trouve. Les moteurs adorent ça, parce que charger une texture et adresser des sous-rectangles coûte bien moins cher que charger quarante fichiers. Une sprite sheet est la version art de jeu de la même idée, et l'atlas JSON que cet outil exporte en est la moitié coordonnées. Il utilise le format JSON hash que lisent Phaser, Pixi et TexturePacker, donc votre moteur demande une frame par son nom au lieu de rectangles codés en dur.
Les atlas ne servent pas qu'à l'animation. Voici huit sprites d'objets assemblés en une texture de 256x128, la forme de tous les menus d'artisanat et écrans d'inventaire que vous avez déjà vus. Le moteur la charge une fois et va chercher le chaudron dans son rectangle quand la boutique en a besoin.
Ce que fait le créateur de sprite sheets
Le côté créateur assemble. L'outil importe, découpe et prévisualise aussi.
- Combine un lot d'images PNG, JPG et WebP en une seule sheet, dans l'ordre que vous fixez
- Accepte un ZIP plein de frames en vrac, donc un dossier de dessins devient une sheet d'un seul coup
- Les GIF animés et vos animations Sprite-AI enregistrées arrivent en frames séparées, déjà en ordre
- Timeline avec glisser pour réordonner, supprimer, et un bouton masquer qui sort une frame de la sheet sans la perdre
- Aperçu en lecture, pour regarder l'animation tourner avant de choisir une disposition
- Grille, bande horizontale ou verticale, plus espacement, échelle entière et arrière-plan
- Les frames de tailles différentes passent. Chacune est centrée dans une cellule à la taille de votre plus grande image
- Exporte un PNG, ou un PNG et un atlas JSON ensemble en ZIP
- Tourne entièrement dans votre navigateur. Aucun envoi, pas de compte, pas de filigrane
À quoi servent les sprite sheets
Presque tous les moteurs 2D veulent les sprites animés livrés en une seule image assemblée, et ça façonne chaque tâche de cette liste.
- Assembler un cycle de marche dessiné à la main en une sheet pour Unity, Godot, Phaser ou GameMaker
- Transformer un dossier de sprites générés par IA en une seule texture que le moteur charge une fois. Générez-les avec le générateur de sprites IA de Sprite AI (sprite-ai.art) et cette page est la deuxième moitié de ce flux de générateur de sprite sheets
- Combiner des icônes d'interface en un atlas pour qu'un jeu aille chercher un fichier au lieu de quarante
- Reconstruire des sprite sheets après avoir modifié les frames ailleurs
- Disposer une animation en bande horizontale, ce que la plupart des moteurs importent le plus facilement
- Ajouter de l'espacement entre les cellules pour empêcher les frames voisines de baver à un zoom non entier
Autres outils pixel art gratuits
OutilDécoupe de sprite sheet
Découpez une sprite sheet en frames. Grille détectée automatiquement. Chaque frame se télécharge en PNG, dans un ZIP.
OutilGIF en sprite sheet
Convertissez un GIF animé en sprite sheet PNG. Réglez colonnes, espacement et échelle. Atlas Phaser en option.
OutilSprite sheet en GIF
Convertissez une sprite sheet PNG en GIF animé. Aperçu en direct, curseur FPS, espacement géré.
FAQ
Déposez vos images sur la zone d'importation, ou cliquez dessus et sélectionnez-en plusieurs à la fois. Elles arrivent sur la timeline dans l'ordre reçu, et vous pouvez les glisser à partir de là. Choisissez une grille, une bande horizontale ou verticale, réglez colonnes, espacement et échelle, puis téléchargez. Vous obtenez un PNG assemblé, et l'aperçu montre exactement le résultat tout du long.
Oui, et la [découpe de sprite sheet](/tools/sprite-sheet-cutter) est la page faite pour ça. Déposez une sheet finie, la grille est détectée pour vous, et chaque frame ressort en PNG dans un ZIP. Déposer une sheet seule ici mène à la même étape de découpe, donc vous ne perdez rien en partant de cette page.
PNG, JPG, WebP et GIF pour les images. Les GIF animés sont séparés en frames automatiquement, donc un seul GIF peut remplir une sheet au complet. Vous pouvez aussi déposer un ZIP contenant une sheet et son atlas, ou un tas de frames en vrac, et un atlas .json seul se rattache à la sheet à laquelle il appartient.
Non. La taille de cellule vient de votre plus grande frame, et chaque frame plus petite est centrée dans cette cellule avec de l'espace transparent autour. La grille reste régulière et les rectangles de l'atlas restent exacts, ce qui compte pour le moteur qui la lit. Si vous ressortez les frames en ZIP, vous récupérez les originaux, pas les versions centrées dans leur cellule.
Oui. La timeline en bas est la même que dans l'Éditeur de pixel art. Glissez une frame pour la déplacer, supprimez celles que vous ne voulez pas, ou utilisez l'icône d'œil pour masquer une frame. Elle reste disponible, mais sort de la sheet. Appuyez sur lecture à tout moment pour vérifier que l'ordre est bon avant d'exporter.
Il enregistre le rectangle en pixels et la durée de chaque frame au format JSON hash que lisent Phaser, Pixi et TexturePacker, et que Godot et Unity acceptent via une extension. Choisissez le téléchargement ZIP pour obtenir le PNG et le JSON ensemble. Votre moteur appelle alors les frames par leur nom au lieu de coordonnées codées en dur.
Oui. Un PNG simple, cellules régulières et sans espacement, c'est ce qu'attendent l'éditeur de sprites d'Unity et l'AtlasTexture de Godot, et c'est le réglage par défaut ici. Pour Phaser et Pixi, prenez l'option PNG plus atlas JSON et chargez la paire directement. L'espacement est là pour les moteurs et shaders qui font baver les bords entre cellules.
Oui, gratuit, sans compte et sans filigrane. L'assemblage et la découpe se font dans votre navigateur, sur votre machine. Vos images ne quittent jamais votre ordinateur et il n'y a aucun envoi à attendre.
Jusqu'à 256 frames, chacune jusqu'à 4096 par 4096 pixels et 25 Mo par fichier. Ça couvre largement un jeu d'animations de personnage complet, un tileset ou un lot d'icônes. Au-delà de la limite, les extras sont refusés avec un avis plutôt que perdus en silence, donc vous savez toujours ce qui est entré.