Generatore di fogli di sprite

Unisci più immagini in un foglio di sprite con coordinate CSS, SCSS o JSON

👇 Scorri verso il basso per una rapida guida passo passo

Trascina qui i tuoi sprite

oppure fai clic in qualsiasi punto per sfogliare i file

PNGJPGWEBPGIF

Generato CSS

Carica immagini per generare codice

Le classi CSS e le coordinate JSON appariranno qui

Prima di iniziare con Generatore di fogli di sprite

Impacchetta più immagini in un foglio di sprite con controlli dei margini e output delle coordinate CSS, SCSS o JSON nel browser.

Ideale per

Unione di singoli fotogrammi di gioco o icone dell’interfaccia in un atlante PNG
Generazione di coordinate CSS, SCSS o JSON insieme al foglio
Creazione di un semplice foglio impacchettato per righe direttamente nel browser

Da sapere prima di iniziare

L’impacchettatore dispone per righe; non è un ottimizzatore generico di impacchettamento
Le scelte di margini e scala influenzano le dimensioni finali del foglio
I grandi lotti usano memoria del browser mentre ogni immagine viene decodificata

Continua il flusso di lavoro

Ritagliatore di fogli di spriteDividi un atlante esistente in fotogrammi separati.Ingranditore pixel artIngrandisci i fotogrammi pixel art prima di impacchettarli.Compressore immaginiRiduci il peso del foglio esportato per la consegna.Guida all’impacchettamento atlanti spriteScopri margini, dimensioni potenze di due e contaminazione.Guida agli sprite CSSDecidi quando uno sprite CSS ha ancora senso.Importazione di un foglio di sprite in UnityImporta l’atlante generato in Unity.

Come usare Generatore di fogli di sprite

1Aggiungi immagini

• Fai clic su «Aggiungi immagini» o trascina e rilascia immagini di sprite
• Supporta i formati PNG, JPG, JPEG e WebP
• Usa Ottimizza automaticamente per l’ottimizzazione automatica

2Configura la tela

• Tela: Imposta le dimensioni (modalità Personalizzato/Massimo)
• Ridimensionamento: Ridimensiona sprite con cursore percentuale
• Spaziatura: Regola i margini tra gli sprite

3Genera codice

• Formato: Scegli l’output CSS, SCSS o JSON
• Denominazione: Imposta lo schema dei nomi degli sprite
• Ordina: Ordina per dimensione o nome

4Scarica risorse

• Fai clic su «Scarica PNG» per l’immagine del foglio di sprite
• Fai clic su «Scarica codice» per le coordinate CSS/JSON
• Usa «Cancella» per ricominciare con nuovi sprite

Funzionalità principali:

Impacchettamento per righe con controllo dei margini

Ridimensiona gli sprite prima di impacchettarli

Output CSS, SCSS e JSON

Funziona nel browser, senza caricamenti

Domande sul Generatore di fogli di sprite

Cosa fa un generatore di fogli di sprite?

Impacchetta file immagine separati in un’unica immagine atlante. Tenere insieme sprite correlati facilita la distribuzione della risorsa, mentre le coordinate generate indicano al CSS o al codice del gioco dove si trova ogni sprite nel foglio.

Quali formati di codice posso esportare?

Lo strumento può generare dati delle coordinate in CSS, SCSS o JSON insieme al foglio di sprite PNG. Il JSON contiene le posizioni e le dimensioni dei fotogrammi, così puoi adattarlo al formato delle risorse richiesto dal tuo motore di gioco o dalla tua applicazione.

Le mie immagini vengono caricate su un server?

No. Le immagini vengono decodificate e impacchettate nel browser. File sorgente e foglio generato non vengono inviati a un server di caricamento ImageMint.

Perché la spaziatura conta in un atlante di sprite?

I margini lasciano spazio tra sprite vicini. Senza sufficiente separazione, filtraggio delle texture o rendering ridimensionato possono campionare uno sprite vicino e creare contaminazione cromatica al bordo.

Flussi sprite correlati

Per ritagliare un atlante esistente e ottenere nuovamente fotogrammi separati, usa il Ritagliatore di fogli di sprite . Il guida all’impacchettamento degli atlanti di sprite spiega spaziatura e contaminazione dei bordi. Per approfondimenti specifici sui motori, vedi il Guida all’importazione in Unity e Guida all’importazione Godot.