Extracteur de Sprites

Drop files here or click (max 12 MB)

Déposez une image ci-dessus pour commencer l'extraction des sprites.

À propos Extracteur de Sprites en Ligne

Besoin de transformer une feuille de sprites ou une image statique en sprites individuels ? Cet Extracteur de Sprites détecte automatiquement les régions des sprites, les rogne proprement (avec option de rognage et de marge intérieure) et exporte des PNG transparents prêts à l'emploi. 🚀 Idéal pour les projets Scratch, les prototypes de jeux 2D, les activités en classe et les jeux indépendants. Fonctionne parfaitement avec l'art pixel, les éléments d'interface, les icônes et les personnages.

Pourquoi utiliser cet extracteur de sprites ?

  • Détection automatique des sprites basée sur la transparence et des seuils configurables
  • Recadrage propre avec option de rognage des bordures transparentes autour de chaque sprite
  • Contrôle de la marge intérieure, de l'alignement (centre/bas) et de la taille de sortie uniforme optionnelle
  • Préserve la transparence (canal alpha) pour les exports PNG – idéal pour les tuiles et personnages
  • Galerie visuelle de tous les sprites détectés pour une inspection rapide avant téléchargement
  • Export ZIP côté client avec JSZip, conservant vos noms de fichiers et l'ordre des sprites
  • Compatible Scratch : transformez rapidement une feuille de sprites en plusieurs costumes ou ressources
  • Parfait pour réutiliser des ressources entre moteurs (Scratch, Godot, Unity 2D, Phaser, etc.)

🛠️ Comment extraire des sprites d'une feuille de sprites for sprite-extractor

1

1. Déposez votre image

Glissez-déposez une feuille de sprites ou une image dans la zone de dépôt, ou cliquez pour choisir un fichier. Pour de meilleurs résultats, utilisez un PNG avec fond transparent ou un contraste élevé entre les sprites et l'arrière-plan.

2

2. Lancez la détection automatique

L'outil envoie une représentation légère de votre image à un point de terminaison de détection, qui calcule les boîtes englobantes pour chaque sprite en fonction de la transparence et de la taille minimale. Les boîtes sont superposées à votre image pour que vous puissiez voir rapidement ce qui sera exporté.

3

3. Ajustez les options d'extraction

Ajustez la marge intérieure, le fond transparent ou la couleur unie, le rognage des bords transparents, l'alignement (centre ou bas) et la largeur/hauteur de sortie uniforme optionnelle. L'outil reconstruit chaque toile de sprite en conséquence.

4

4. Prévisualisez les sprites

Parcourez la galerie des sprites générés. Chaque aperçu est créé côté client à l'aide d'une toile hors écran et peut être renommé ou supprimé selon les options de l'interface.

5

5. Téléchargez les PNG ou un ZIP

Exportez des sprites PNG individuels ou téléchargez un seul fichier ZIP contenant tous les aperçus actuels. Le ZIP est créé côté client avec JSZip, et les noms de fichiers suivent un modèle séquentiel comme <code>sprite_0000.png</code>, <code>sprite_0001.png</code>, etc.

Spécifications techniques

Détection & Boîtes englobantes

La phase de détection s'exécute sur un point de terminaison backend dédié et renvoie des boîtes englobantes propres que le client utilise pour construire les sprites finaux.

AspectComportementNotes
Point de terminaison de détectionPOST /api/sprite-extractor/inspectAccepte une URL de données et des options de détection, retourne un tableau de boîtes de sprites.
Entrées de détectiontolérance, seuilAlpha, largeurMin, hauteurMinAjustez ces paramètres dans l'interface pour ignorer les petits bruits ou capturer uniquement les sprites significatifs.
Forme de la boîteRectangles alignés sur les axesChaque <code>SpriteBox</code> contient <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> dans les coordonnées de l'image source.
Gestion de la transparenceSensible à l'alphaLes pixels transparents influencent les décisions de rognage/découpe mais peuvent être préservés en sortie.
Gestion des erreursSystèmes de repli gracieuxSi la détection échoue, l'outil affiche une erreur lisible et ne bloque pas l'interface.

Rogner, Découper & Aligner

Une fois les boîtes connues, tout le rendu des sprites est effectué dans le navigateur en utilisant le canevas HTML.

ÉtapeImplémentationDétails
Rognage initialdrawImage(img, box.x, box.y, w, h, 0, 0, w, h)Chaque sprite est d'abord rogné de l'image originale sur un canevas temporaire.
Découpe transparentebalayer le canal alpha via getImageDataL'outil balaie les pixels pour calculer la boîte englobante minimale non transparente lorsque la découpe est activée.
Rembourrageconfigurable 0–256 pxUn rembourrage est appliqué autour du sprite découpé ou rogné pour réduire les artéfacts de bord dans les moteurs.
Alignementcentre / basLes sprites peuvent être centrés ou alignés en bas (utile pour les personnages debout sur une ligne de base).
Taille de sortie uniformespriteWidth / spriteHeight optionnelsLorsqu'activé, tous les sprites sont rendus dans un canevas de taille fixe pour standardiser les animations.
Arrière-plantransparent ou couleur unieSoit conserver la transparence totale, soit remplir le canevas avec une couleur RGBA d'arrière-plan choisie.

Performance & Limites

Conçu pour une utilisation interactive dans le navigateur.

ParamètreComportement typiqueNotes
Taille d'entrée maximale~10 Mo d'imageLes fichiers plus volumineux peuvent fonctionner mais chargeront/détecteront plus lentement.
Nombre de spritesjusqu'à ~400 spritesDes nombres très élevés sont possibles, mais le rendu de l'aperçu et la création du ZIP prendront plus de temps.
Format d'exportationPNG dans un ZIP (Blob)Le ZIP est généré entièrement côté client en utilisant JSZip.
Opérations sur le canevasRognage et dessin par spriteRepose sur l'API 2D du canevas du navigateur ; les performances évoluent avec la résolution et le nombre.

Alternatives en Ligne de Commande

Pour les feuilles de sprites massives ou les pipelines automatisés, vous pouvez combiner des outils CLI comme ImageMagick avec des scripts.

Linux / 🍎 macOS

Rognage en grille uniforme avec ImageMagick

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

Découpe une grille régulière 64×64 en fichiers PNG individuels.

Zipper tous les sprites

zip sprites.zip sprite_*.png

Regroupe tous les sprites générés dans une seule archive.

Windows (PowerShell + ImageMagick)

Rognage basé sur une grille

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

Identique à ci-dessus, en utilisant la CLI <code>magick</code> sur Windows.

Cas d'Utilisation Pratiques

Développement de Jeux 2D

  • Extraire les images d'animation de personnages d'une feuille de sprites pour Godot, Unity 2D, Phaser ou Construct.
  • Isoler les éléments d'interface (boutons, icônes, barres de vie) d'une maquette de conception.
  • Décomposer les jeux de tuiles en tuiles individuelles pour les éditeurs de niveaux.
// Exemple Godot : charger plusieurs images\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Scratch et Projets Scolaires

  • Transformer une seule feuille de sprites en plusieurs costumes pour un personnage Scratch.
  • Préparer des packs d'assets thématiques (animaux, planètes, icônes) pour des ateliers de programmation.
  • Permettre aux élèves de concevoir des feuilles de sprites dans un outil de dessin puis de les extraire pour Scratch.
// Pseudocode de style Scratch pour une animation simple\nquand le drapeau vert cliqué\npour toujours\n  costume suivant\n  attendre 0,1 secondes

Pixel Art et Bibliothèques d'Assets

  • Divisez les anciennes feuilles de pixel art en une bibliothèque consultable de sprites individuels.
  • Extrayez uniquement les ressources dont vous avez besoin à partir de packs commerciaux ou open-source volumineux.
  • Normalisez le remplissage et l'alignement des sprites provenant de différentes sources.

❓ Frequently Asked Questions

❓La détection de sprites est-elle entièrement automatique ?

L'outil effectue une détection automatique basée sur la transparence et des seuils configurables (tolérance, seuil alpha, largeur/hauteur minimale). Dans de nombreux cas, cela « fonctionne tout simplement », mais pour les feuilles complexes, vous devrez peut-être ajuster les options ou effectuer une deuxième passe.

📏L'extracteur modifie-t-il mon image originale ?

Non. Votre image originale reste intacte. L'outil la lit uniquement dans un canvas en mémoire, recadre les régions dans de nouveaux canvas, puis exporte de nouveaux sprites PNG.

🎯Puis-je contrôler le remplissage et l'alignement ?

Oui. Vous pouvez configurer le remplissage (en pixels), choisir entre un fond transparent ou uni, activer la suppression des bords transparents et aligner les sprites centrés ou alignés en bas dans le canvas de sortie.

🔒Mes images sont-elles stockées sur le serveur ?

L'étape de détection envoie votre image (sous forme d'URL de données) à un point de terminaison dédié pour calculer les boîtes de sprites, mais les sprites eux-mêmes sont construits et compressés dans votre navigateur. Le service est conçu pour un traitement temporaire, pas pour un stockage à long terme. Comme toujours, évitez d'utiliser des outils tiers pour les ressources qui doivent rester strictement privées.

🧊La transparence sera-t-elle préservée dans les sprites exportés ?

Oui. Par défaut, le canvas de sortie reste transparent et vos sprites conservent leur canal alpha. Vous pouvez optionnellement choisir une couleur de fond uni si votre moteur cible préfère les ressources opaques.

Pro Tips

Best Practice

Utilisez une petite quantité de remplissage (2–4 px) autour de chaque sprite pour éviter le débordement des bords lors de la mise à l'échelle ou de la rotation dans votre moteur.

Best Practice

Nommez les sprites de manière cohérente (par exemple, <code>hero_run_0001.png</code>, <code>hero_run_0002.png</code>) pour simplifier les imports d'animation et le script.

Best Practice

En milieu scolaire, commencez avec des feuilles de sprites très simples (quelques grands sprites, fond clair) pour que les élèves voient des résultats immédiats.

Best Practice

Conservez le ZIP exporté à côté des fichiers source de votre projet pour pouvoir facilement régénérer ou ajuster les animations ultérieurement.

Additional Resources

Wiki Scratch – Sprites
Documentation
Documentation Godot – Animation de sprites 2D
Documentation
Manuel Unity – Sprites 2D
Documentation

Other Tools