Estrattore di Sprite

Drop files here or click (max 12 MB)

Rilascia un'immagine qui sopra per iniziare l'estrazione degli sprite.

Informazioni Estrattore di Sprite Online

Devi trasformare uno sprite sheet o un'immagine statica in sprite individuali? Questo Estrattore di Sprite rileva automaticamente le regioni degli sprite, le ritaglia in modo pulito (con ritaglio e padding opzionali) ed esporta PNG pronti all'uso e trasparenti. 🚀 Ideale per progetti Scratch, prototipi di giochi 2D, attività in classe e giochi indie. Funziona benissimo con pixel art, elementi UI, icone e personaggi.

Perché Usare Questo Estrattore di Sprite?

  • Rilevamento automatico degli sprite basato sulla trasparenza e soglie configurabili
  • Ritaglio pulito con opzionale eliminazione dei bordi trasparenti attorno a ogni sprite
  • Controllo del padding, allineamento (centro/inferiore) e dimensione di output uniforme opzionale
  • Mantiene la trasparenza (canale alfa) per le esportazioni PNG – ideale per tilemap e personaggi
  • Galleria visiva di tutti gli sprite rilevati per un'ispezione rapida prima del download
  • Esportazione ZIP lato client utilizzando JSZip, mantenendo stabili i nomi dei file e l'ordine degli sprite
  • Adatto a Scratch: trasforma rapidamente un singolo sprite sheet in più costumi o risorse
  • Perfetto per riutilizzare risorse tra motori (Scratch, Godot, Unity 2D, Phaser, ecc.)

🛠️ Come Estrarre Sprite da uno Sprite Sheet for sprite-extractor

1

1. Carica la tua immagine

Trascina e rilascia uno sprite sheet o un'immagine nell'area di destinazione, o clicca per scegliere un file. Per i migliori risultati, usa PNG con sfondo trasparente o alto contrasto tra sprite e sfondo.

2

2. Esegui il rilevamento automatico

Lo strumento invia una rappresentazione leggera della tua immagine a un endpoint di rilevamento, che calcola i rettangoli di delimitazione per ogni sprite in base alla trasparenza e alla dimensione minima. I rettangoli sono sovrapposti alla tua immagine per vedere rapidamente cosa verrà esportato.

3

3. Regola le opzioni di estrazione

Regola il padding, sfondo trasparente vs colore solido, eliminazione dei bordi trasparenti, allineamento (centro o inferiore) e larghezza/altezza di output uniforme opzionale. Lo strumento ricostruisce ogni canvas degli sprite di conseguenza.

4

4. Anteprima degli sprite

Scorri la galleria degli sprite generati. Ogni anteprima è costruita sul client utilizzando un canvas fuori schermo e può essere rinominata o scartata a seconda delle opzioni dell'interfaccia utente.

5

5. Scarica PNG o un ZIP

Esporta singoli sprite PNG o scarica un unico file ZIP contenente tutte le anteprime attuali. Il ZIP è costruito lato client utilizzando JSZip, e i nomi dei file seguono uno schema sequenziale come <code>sprite_0000.png</code>, <code>sprite_0001.png</code>, ecc.

Specifiche Tecniche

Rilevamento e Rettangoli di Delimitazione

La fase di rilevamento viene eseguita su un endpoint backend dedicato e restituisce rettangoli di delimitazione puliti che il client utilizza per costruire gli sprite finali.

AspettoComportamentoNote
Endpoint di rilevamentoPOST /api/sprite-extractor/inspectAccetta un URL di dati e opzioni di rilevamento, restituisce un array di riquadri sprite.
Input di rilevamentotolleranza, sogliaAlpha, larghezzaMin, altezzaMinRegola questi parametri nell'interfaccia utente per ignorare piccoli rumori o catturare solo sprite significativi.
Forma del riquadroRettangoli allineati agli assiOgni <code>SpriteBox</code> contiene <code>x</code>, <code>y</code>, <code>larghezza</code>, <code>altezza</code> nelle coordinate dell'immagine sorgente.
Gestione della trasparenzaConsapevole dell'alfaI pixel trasparenti contribuiscono alle decisioni di ritaglio/trim ma possono essere preservati nell'output.
Gestione degli erroriFallback elegantiSe il rilevamento fallisce, lo strumento mostra un errore leggibile e non interrompe l'interfaccia utente.

Ritaglio, Trim e Allineamento

Una volta noti i riquadri, tutto il rendering degli sprite viene effettuato nel browser utilizzando canvas HTML.

PassoImplementazioneDettagli
Ritaglio inizialedrawImage(img, box.x, box.y, w, h, 0, 0, w, h)Ogni sprite viene prima ritagliato dall'immagine originale su un canvas temporaneo.
Trim trasparentescansiona il canale alfa tramite getImageDataLo strumento scansiona i pixel per calcolare il riquadro di delimitazione minimo non trasparente quando il trim è abilitato.
Spaziaturaconfigurabile 0–256 pxLa spaziatura viene applicata attorno allo sprite tagliato o ritagliato per ridurre gli artefatti di bordo nei motori.
Allineamentocentro / fondoGli sprite possono essere centrati o allineati al fondo (utile per personaggi in piedi su una linea di base).
Dimensione output uniformeopzionale larghezzaSprite / altezzaSpriteQuando abilitato, tutti gli sprite vengono renderizzati in un canvas di dimensione fissa per standardizzare le animazioni.
Sfondotrasparente o colore solidoMantieni la trasparenza completa o riempi il canvas con un colore di sfondo RGBA scelto.

Prestazioni e Limiti

Progettato per l'uso interattivo nel browser.

ParametroComportamento TipicoNote
Dimensione massima input~10 MB immagineFile più grandi potrebbero funzionare ma caricheranno/rileveranno più lentamente.
Numero di spritefino a ~400 spriteConteggi molto elevati sono possibili, ma il rendering dell'anteprima e la creazione del ZIP richiederanno più tempo.
Formato di esportazionePNG all'interno di un ZIP (Blob)Il ZIP viene generato interamente lato client utilizzando JSZip.
Operazioni canvasRitaglio e disegno per spriteSi basa sull'API canvas 2D del browser; le prestazioni scalano con risoluzione e quantità.

Alternative da Rig di Comando

Per sprite sheet enormi o pipeline automatizzate, puoi combinare strumenti CLI come ImageMagick con script.

Linux / 🍎 macOS

Ritaglio a griglia uniforme con ImageMagick

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

Taglia una griglia regolare 64×64 in singoli file PNG.

Comprimi tutti gli sprite

zip sprites.zip sprite_*.png

Raccoglie tutti gli sprite generati in un singolo archivio.

Windows (PowerShell + ImageMagick)

Ritaglio basato su griglia

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

Come sopra, utilizzando la CLI <code>magick</code> su Windows.

Casi d'Uso Pratici

Sviluppo Giochi 2D

  • Estrai i frame di animazione dei personaggi da una sprite sheet per Godot, Unity 2D, Phaser o Construct.
  • Isola elementi UI (pulsanti, icone, barre della salute) da un mock-up di design.
  • Scomponi tileset in singoli tile per editor di livelli.
// Esempio Godot: carica più frame\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Scratch e Progetti in Classe

  • Trasforma una singola sprite sheet in più costumi per un personaggio Scratch.
  • Prepara pacchetti di asset a tema (animali, pianeti, icone) per laboratori di programmazione.
  • Permetti agli studenti di progettare sprite sheet in uno strumento di disegno e poi estrarle per Scratch.
// Pseudocodice in stile Scratch per animazione semplice\nwhen green flag clicked\nforever\n  next costume\n  wait 0.1 seconds

Pixel Art e Librerie di Asset

  • Dividi vecchi fogli di pixel art in una libreria ricercabile di sprite individuali.
  • Estrai solo le risorse di cui hai bisogno da grandi pacchetti commerciali o open-source.
  • Normalizza spaziatura e allineamento tra sprite provenienti da diverse fonti.

❓ Frequently Asked Questions

❓Il rilevamento degli sprite è completamente automatico?

Lo strumento esegue il rilevamento automatico basato sulla trasparenza e soglie configurabili (tolleranza, soglia alfa, larghezza/altezza minima). In molti casi "funziona e basta", ma per fogli complessi potrebbe essere necessario modificare le opzioni o eseguire un secondo passaggio.

📏L'estrattore modifica la mia immagine originale?

No. La tua immagine originale rimane intatta. Lo strumento la legge solo in una canvas in memoria, ritaglia le regioni in nuove canvas e poi esporta nuovi sprite PNG.

🎯Posso controllare spaziatura e allineamento?

Sì. Puoi configurare la spaziatura (in pixel), scegliere tra uno sfondo trasparente o solido, abilitare il taglio dei bordi trasparenti e allineare gli sprite centrati o allineati in basso all'interno della canvas di output.

🔒Le mie immagini sono memorizzate sul server?

Il passo di rilevamento invia la tua immagine (come URL dati) a un endpoint dedicato per calcolare le caselle degli sprite, ma gli sprite stessi sono costruiti e compressi nel tuo browser. Il servizio è progettato per elaborazioni temporanee, non per archiviazione a lungo termine. Come sempre, evita di utilizzare strumenti di terze parti per risorse che devono rimanere strettamente private.

🧊La trasparenza sarà preservata negli sprite esportati?

Sì. Per impostazione predefinita, la canvas di output viene lasciata trasparente e i tuoi sprite mantengono il loro canale alfa. Puoi opzionalmente scegliere un colore di sfondo solido se il tuo motore di destinazione preferisce risorse opache.

Pro Tips

Best Practice

Usa una piccola quantità di spaziatura (2–4 px) attorno a ogni sprite per prevenire lo sfarfallamento dei bordi durante il ridimensionamento o la rotazione nel tuo motore.

Best Practice

Dai nomi coerenti agli sprite (es. <code>eroe_corsa_0001.png</code>, <code>eroe_corsa_0002.png</code>) per semplificare l'importazione delle animazioni e lo scripting.

Best Practice

In contesti didattici, inizia con fogli sprite molto semplici (pochi sprite grandi, sfondo chiaro) in modo che gli studenti vedano risultati immediati.

Best Practice

Conserva il ZIP esportato insieme ai file sorgente del tuo progetto per poter rigenerare o modificare facilmente le animazioni in seguito.

Additional Resources

Scratch Wiki – Sprite
Documentation
Documentazione Godot – Animazione Sprite 2D
Documentation
Manuale Unity – Sprite 2D
Documentation

Other Tools