Impacchettare uno sprite sheet
Sprite Sheet Packer
Impacchetta molte immagini in un unico atlante e produce accanto la mappa dei fotogrammi in CSS o in JSON.
Un atlante e le coordinate che lo rendono utilizzabile, perché uno sprite sheet senza una mappa dei fotogrammi è soltanto la fotografia di qualche icona. L'impacchettatore riporta il proprio grado di riempimento, che è il numero da cui si capisce se l'atlante valga la pena.
Trascina qui le icone da impacchettare
Un atlante più la mappa dei fotogrammi che lo rende usabile.
Come si usa
Trascinare le icone
I nomi dei file diventano i nomi degli sprite, e quindi i nomi delle classi CSS o le chiavi del JSON.
Lasciare almeno due pixel di margine fra gli sprite
È quello che impedisce allo sprite vicino di sbavare dentro quando il foglio viene disegnato in scala o con filtro bilineare: la linea lungo il bordo di un'icona che nessuno sa spiegare.
Scegliere il formato della mappa
Il CSS è l'unico che non richiede JavaScript. Il JSON segue la forma a hash di TexturePacker, che i motori di gioco più diffusi leggono già.
Impostare il rapporto di pixel se la grafica è @2x
Divide ogni numero della mappa, così il CSS descrive pixel CSS e non pixel del dispositivo.
Domande frequenti
Che cosa vuol dire il grado di riempimento?
Quanta parte dell'atlante è sprite invece che spazio vuoto. Sotto la metà circa, l'impacchettamento sta lottando con sprite di forme molto diverse e si sta scaricando parecchia trasparenza; dividerli in due fogli di solito conviene di più.
Con HTTP/2 conviene ancora uno sprite sheet?
Sul web per lo più no: il costo delle richieste che giustificava gli atlanti è quasi sparito, e uno sprite SVG o i file singoli si mantengono meglio. Per un gioco su canvas o WebGL resta la risposta giusta, perché legare una texture sola batte legarne cinquanta.
Perché l'atlante non è una potenza di due?
Perché costa spazio e quasi nessuna GPU attuale lo richiede. Conviene attivare l'opzione se si usano le mipmap o si punta a un percorso di texture più vecchio, e accettare l'area sprecata.
Può ricevere da
Dividere un’immagine
Image Splitter
Taglia un’immagine in una griglia N × M o in fette di altezza fissa e impacchetta i pezzi in uno zip.
Editor di pixel art
Pixel Art Editor
Disegna su una griglia di pixel con matita, secchiello, gomma, contagocce, tavolozza e simmetria a specchio, importa una foto riducendola alla griglia ed esporta PNG a scala intera o SVG.
Comprimere PNG
PNG Compressor
Riduce la tavolozza e riscrive il flusso deflate per far dimagrire un PNG senza cambiarne le dimensioni in pixel.
Comprimere JPEG
JPEG Compressor
Ricodifica un JPEG alla qualità che scegli, mostrando dal vivo il peso prima e dopo e la vista delle differenze.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Ridimensionare le immagini
Image Resizer
Ridimensiona per pixel, per percentuale o fissando il lato lungo, con il blocco delle proporzioni e preimpostazioni per lavorare a lotti.
Comprimere PNG
PNG Compressor
Riduce la tavolozza e riscrive il flusso deflate per far dimagrire un PNG senza cambiarne le dimensioni in pixel.
Togliere lo sfondo
Background Remover
Elimina uno sfondo piatto o di un colore solo lavorando in OKLab e restituisce un PNG trasparente, con un pennello per rifinire i bordi.
Togliere i dati EXIF
EXIF Remover
Elimina dalle foto i metadati di fotocamera, GPS e modifica, lasciando i pixel intatti.
Generatore di favicon
Favicon Generator
Produce l’intero corredo di favicon — ICO, PNG, icona per Apple touch, manifesto web — più l’HTML da incollare.