Chat en pixel art qui marche
Un GIF en sprite sheet sur une ligne de six images, la disposition que la plupart des moteurs lisent comme une bande.
Convertir un GIF en sprite sheet
Déposez un GIF animé et récupérez chaque image sur une seule sprite sheet PNG, avec un atlas JSON et une animation CSS. Ce convertisseur GIF en sprite sheet gratuit lit aussi les WebP et PNG animés et les courts clips vidéo, le tout dans votre navigateur.
GIF en sprite sheetGratuit · dans votre navigateur
Déposez un GIF ici
GIF, WebP ou PNG animé, ou un court clip MP4 ou WebM. Tout reste dans votre navigateur.
- Gratuit, dans votre navigateur
- GIF, WebP, PNG et vidéo
- Lignes, colonnes et marges
- PNG, atlas JSON et CSS
Exemples de GIF en sprite sheet
Huit animations créées pour ces exemples, chacune transformée en sprite sheet par le convertisseur de cette page. Ouvrez-en une pour essayer chaque réglage.
Oiseau bleu qui bat des ailes
Quatre images sur une sprite sheet en puissance de deux, 1024 × 1024, pour les moteurs qui la demandent.
Torche qui vacille
Six images à mi-taille, une petite sprite sheet pour un jeu en tuiles.
Indicateur de chargement
Huit images sur une sprite sheet carrée, prête pour une animation de chargement en CSS.
Fantôme qui flotte
Quatre images en une colonne, pour les moteurs qui lisent les sprite sheets de haut en bas.
Icône de cœur qui bat
Quatre images avec 4 px de marge, pour que les bords ne débordent jamais sur l’image voisine.
Robot qui salue
Quatre images sur une ligne, avec 4 px d’espacement entre elles.
Flamme de fusée
Quatre images d’une flamme qui vacille, sur une sprite sheet presque carrée.
Comment créer une sprite sheet à partir d’un GIF
Trois étapes, et rien n’est importé.
Déposez, collez ou choisissez un GIF, WebP ou PNG animé, ou un court clip MP4 ou WebM. Chaque image est lue sur votre appareil.
Gardez toutes les images ou une plage, prenez une image sur n, retirez les répétitions, puis réglez les colonnes, la marge, l’espacement et la taille des images.
Enregistrez la sprite sheet PNG, l’atlas JSON avec la durée de chaque image, une animation CSS, ou les images en PNG dans un ZIP.
Les points forts de ce convertisseur GIF en sprite sheet
Six atouts, d’un cycle de marche en pixel art à une animation de chargement pour le web.
- Animation
GIF, WebP, PNG et courts clips
Ouvrez un GIF animé, un WebP ou PNG animé, ou un court clip MP4 ou WebM. Les images sont lues telles qu’un lecteur les affiche : les images de GIF qui se superposent sortent entières.
Seulement les images utiles
Gardez une plage, prenez une image sur deux ou sur trois et retirez les images répétées. La durée d’une image sautée passe à l’image précédente : l’animation garde sa vitesse.
Une disposition pour chaque moteur
Une sprite sheet presque carrée, une ligne, une colonne ou le nombre de colonnes de votre choix, avec marge, espacement et tailles en puissance de deux, pour transformer chaque GIF en sprite sheet sur mesure pour votre moteur.
Atlas JSON et animation CSS
L’atlas JSON indique la place et la durée de chaque image au format lu par Phaser et PixiJS ; le fichier CSS joue la sprite sheet sur n’importe quelle page web.
Taille des images et pixel art
Réduisez les images au quart ou à la moitié pour des sprite sheets plus légères, ou agrandissez le pixel art 2× ou 4× avec des pixels nets. La taille de la sprite sheet s’affiche avant le téléchargement.
Gratuit et privé
Tout se passe dans votre navigateur : aucun import, aucun compte, aucun filigrane, et l’outil continue de fonctionner hors ligne une fois la page chargée.
Guide : des sprite sheets nettes à partir de toute animation
Cinq conseils rapides pour une sprite sheet propre à partir de n’importe quelle animation.
Choisissez la disposition que lit votre moteur
Une ligne convient à la plupart des outils d’animation et au CSS ; une sprite sheet presque carrée garde les grandes animations dans la taille de texture maximale ; une colonne convient aux moteurs qui lisent de haut en bas.
Gardez les bonnes images
Réglez « De l’image » et « À l’image » pour garder une seule boucle, et « Une sur » pour réduire de moitié une longue animation. « Retirer les images répétées » supprime les pauses que certains GIF stockent sous forme de copies.
Marge et espacement
Ajoutez 1 à 4 px de marge quand les images sont mises à l’échelle dans un jeu : les images voisines restent hors des bords. L’espacement laisse de la place entre les cases pour retoucher.
Surveillez la taille de la sprite sheet
La taille s’affiche sous la sprite sheet. Pour les téléphones, une taille d’image plus petite ou plus de colonnes garde chaque côté sous 4096 px ; activez « Taille en puissance de deux » pour les moteurs qui la demandent.
Utilisez l’atlas ou le CSS
Chargez le PNG avec l’atlas JSON dans votre moteur pour obtenir chaque image par son nom et sa durée. Pour un site web, liez le fichier CSS et donnez sa classe à un élément.
Qui transforme des animations en sprite sheets
Les raisons courantes de convertir un GIF en sprite sheet.
Développeurs de jeux
Intégrez des GIF animés et des clips dans un moteur de jeu sous forme d’une seule texture aux images nommées.
Designers web
Remplacez un GIF lourd par un seul PNG et une courte animation CSS.
Créateurs d’interfaces et d’applications
Transformez indicateurs de chargement et icônes animées en sprite sheets pour vos applications et interfaces.
Animateurs et moddeurs
Rassemblez toutes les images d’une animation sur une seule sprite sheet pour la retoucher, la partager ou la modder.
Questions fréquentes sur les sprite sheets
Réponses sur la conversion d’animations en sprite sheets, les fichiers et la confidentialité.
Ouvrez le GIF, choisissez les images et les colonnes, puis téléchargez la sprite sheet PNG, ainsi que l’atlas JSON ou le CSS si besoin.
Oui. Il fonctionne entièrement dans votre navigateur, sans compte et sans filigrane.
Non. Votre animation est lue et transformée en sprite sheet sur votre appareil ; rien n’est envoyé à un serveur.
Oui. Les WebP et PNG animés s’ouvrent dans Chrome, Edge et Safari, et les courts clips MP4 ou WebM sont lus à 12 images par seconde.
La durée de chaque image est conservée dans l’atlas JSON et dans le CSS. Quand vous sautez des images, leur durée passe à l’image précédente : la boucle dure aussi longtemps que le GIF.
Une ligne est la plus courante pour les animations, une sprite sheet carrée garde les longues animations compactes, et une colonne convient aux moteurs qui lisent de haut en bas.
Le format JSON Hash est lu par Phaser, PixiJS et de nombreux autres moteurs et outils ; il indique le nom, la position sur la sprite sheet et la durée de chaque image.
Oui. « Images (ZIP) » enregistre chaque image gardée dans son propre PNG, nommé et numéroté dans l’ordre.
Convertir un GIF en sprite sheet dès maintenant
Ouvrez une animation et téléchargez sa sprite sheet en quelques secondes, gratuitement et dans votre navigateur.
Ouvrir un GIF