Generatore di sprite sheet — PNG + JSON + CSS

Cos'è uno sprite sheet e perché è utile

Uno sprite sheet raccoglie molte piccole immagini — fotogrammi di animazione, tile di gioco, icone UI, emoji o bandiere — in un'unica immagine più grande. Caricare un solo file invece di decine riduce le richieste HTTP e i cambi di texture, così pagine web e giochi si caricano e vengono renderizzati più velocemente. Ogni singolo sprite viene poi mostrato facendo riferimento al suo rettangolo all'interno del foglio. Questo generatore di sprite sheet crea per te l'immagine e le coordinate: trascina i tuoi file, scegli un layout e scarica un PNG insieme a un file di dati JSON e a un foglio di stile CSS pronto all'uso.

Tutto avviene nel tuo browser. Le immagini vengono disegnate localmente su un canvas e i file di coordinate sono generati in JavaScript, quindi le tue grafiche non vengono mai caricate e non c'è alcun limite al numero di volte in cui puoi rigenerare il foglio mentre sperimenti con le impostazioni.

Griglia o layout compatto

La griglia uniforme assegna a ogni sprite una cella grande quanto l'immagine più grande e centra ogni sprite nella sua cella. Questa struttura prevedibile è ciò che si aspetta la maggior parte dei sistemi di animazione: il fotogramma n si trova sempre nella colonna n modulo il numero di colonne. Le righe compatte ordinano gli sprite per altezza e riempiono le righe fino a una larghezza di destinazione, sprecando molto meno spazio quando le immagini hanno dimensioni diverse. In entrambe le modalità, il valore di spaziatura aggiunge spazio trasparente attorno a ogni sprite per evitare sbavature di colore quando il foglio viene ridimensionato.

Usare l'output JSON e CSS

Il file JSON elenca ogni sprite con un nome pulito derivato dal nome del file, con la sua posizione x e y, larghezza e altezza, oltre alle dimensioni complessive del foglio. Framework di gioco come Phaser e PixiJS possono caricare direttamente questo formato hash, ed è facile da analizzare in qualsiasi linguaggio. Il file CSS definisce una classe base che imposta il foglio come immagine di sfondo e una classe per ogni sprite con la sua dimensione e la posizione dello sfondo, così un'icona è semplicemente uno span con due classi. Cambia il prefisso delle classi per adattarlo alla nomenclatura del tuo progetto e tieni il PNG accanto al file CSS oppure modifica l'URL.