Introduzione
I fogli di sprite esistono per permettere al gioco di disegnare molti fotogrammi da una singola texture. Ogni tanto, però, è necessario fare il contrario: ridipingere un fotogramma, recuperare vecchi elementi grafici da un gioco già pubblicato o ricostruire un foglio di sprite di cui nessuno ha conservato i file sorgente.
Ritagliare manualmente i fotogrammi in un editor di immagini funziona per tre sprite, ma diventa un'impresa ardua per trecento. Sprite Sheet Unpacker lo fa direttamente in una scheda del browser: basta indicargli il file di dati, se presente, oppure lasciarlo trovare gli sprite autonomamente.
Ecco come scegliere il metodo corretto per suddividere il foglio, cosa fare quando non si dispone di un file di dati e come verificare che i fotogrammi vengano riprodotti correttamente prima di scaricarli.
Quattro modi per tagliare una fetta
I fogli sono realizzati in modi diversi, quindi non esiste un unico modo corretto per tagliarli. Un foglio di tessere equidistanti di un vecchio gioco richiede una griglia. Un atlante con riquadri fittamente ravvicinati e ritagliati necessita del suo file di dati, perché senza di esso non c'è modo di sapere dove finisce un riquadro e inizia il successivo.
Il programma di decompressione offre quattro modalità. Ne seleziona una automaticamente in base al contenuto inserito, e puoi cambiarla in qualsiasi momento. L'immagine e qualsiasi file di dati vengono letti direttamente nel browser; non viene caricato alcun file.
- Automatico: individua ogni sprite cercando isole di pixel non trasparenti. Ideale per fogli di lavoro separati con spazi tra gli sprite.
- Configurato: legge il file di dati del foglio (JSON, plist, XML, .atlas e altri) e ritaglia ogni fotogramma esattamente nel punto indicato, con il relativo nome.
- Griglia: divide il foglio in celle uguali. È possibile impostare la dimensione, l'offset e la spaziatura delle celle.
- Manuale: disegna manualmente dei riquadri sul foglio, utile per i fogli di lavoro particolari che le modalità precedenti non gestiscono correttamente.
Dividere un foglio passo dopo passo
Inizia con l'immagine del foglio: PNG, JPG, WebP, GIF o BMP. Se disponi del file di dati associato, ad esempio un JSON o un file plist esportato da TexturePacker, inseriscilo contemporaneamente. Il programma di decompressione riconosce il formato e passa alla modalità Configurazione. I frame ritagliati vengono ricostruiti nelle loro dimensioni originali e quelli ruotati vengono raddrizzati, in modo che siano allineati come prima della compressione.
Nessun file di dati? Prova prima con la modalità Automatica. Se gli sprite si toccano o si trovano su uno sfondo uniforme, passa alla modalità Griglia e inserisci la dimensione delle celle. Controlla i contorni disegnati sul foglio, fai clic su un frame per osservarlo da vicino, quindi scaricalo.
- Inserisci l'immagine del foglio e il file di dati, se presente.
- Controlla la modalità selezionata (Automatica, Configurazione, Griglia o Manuale) e modificala se necessario.
- Esamina i contorni sul foglio e correggi eventuali errori.
- Scarica i riquadri come ZIP, oppure come file separati se ne servono solo alcuni.
Riproduci i fotogrammi prima di scaricarli
Estrarre i fotogrammi è metà del lavoro. L'altra metà consiste nell'assicurarsi che vengano animati correttamente. Attiva l'anteprima dell'animazione e l'estrattore riprodurrà i fotogrammi in sequenza, permettendoti di vedere l'intera sequenza in movimento.
Modifica la frequenza dei fotogrammi finché non appare come nel gioco. Un fotogramma mancante si manifesta come un'interruzione, mentre un fotogramma tagliato di qualche pixel si manifesta come un tremolio. Entrambi sono più facili da individuare qui che dopo aver importato tutto in un motore grafico.
- Riproduce i fotogrammi estratti in loop.
- Frequenza dei fotogrammi modificabile (12 fps per impostazione predefinita).
- Interruzioni e tremolii rivelano fotogrammi mancanti o disallineati.
Quale file di dati possiedi?
Un file di dati è semplicemente un elenco di nomi di fotogrammi e rettangoli, ma ogni motore grafico lo scrive in modo leggermente diverso. Se stai lavorando con un foglio creato da qualcun altro, sapere di che tipo si tratta rende più facile comprendere eventuali avvisi.
L'unpacker legge JSON sia in formato hash che array (Phaser, PixiJS e l'esportazione generica di TexturePacker), file plist da Cocos2d, XML da Starling e Sparrow, fogli sprite CSS, file di testo .atlas da Spine e libGDX e i metadati degli sprite YAML di Unity. Funzionano anche gli atlanti multipagina, a patto di inserire l'immagine di ogni pagina.
Cosa succede di solito dopo?
Una volta estratti i frame, di solito si procede in qualche modo. Se sono più pesanti del necessario, è possibile elaborarli con Image Compressor. Se desideri un nuovo foglio di texture più ordinato, caricalo in Texture Packer e ricompattalo. Se hai utilizzato la modalità di slicing Auto o Grid e desideri un file di dati per il risultato, il programma di decompressione può esportare solo i metadati anziché le immagini.
Tutte queste operazioni vengono eseguite direttamente nel browser, quindi puoi passare da un vecchio foglio di texture a uno nuovo e pulito senza che i file lascino il tuo computer.
Scritto da
Ankit Kumar
Ingegnere software senior e fondatore di ToolBuddy
Progettare utilità basate sul browser senza requisiti di caricamento utilizzando le tecnologie WebAssembly, Web Audio e Canvas.