Introduzione
Hai appena esportato un personaggio da Spine e vuoi sapere una cosa: il ciclo di corsa sembra corretto? Riaprire l'editor o collegare una scena di prova in Unity richiede un bel po' di tempo. Basta una scheda del browser.
Ecco a cosa serve il Spine Viewer. Gli animatori lo usano per verificare la correttezza di un'esportazione prima di consegnarla, gli sviluppatori lo usano per confermare che l'atlante corrisponda effettivamente allo scheletro e i produttori lo usano per visualizzare un personaggio senza installare nulla.
Di seguito vengono illustrate le istruzioni per caricare i file, cosa fare in caso di discrepanze di versione, come utilizzare le sovrapposizioni di debug e come creare una breve sequenza ed esportarla come GIF o video.
Ciò che lo spettatore controlla
I progetti Spine sopravvivono alle versioni dell'editor. È comune trovare un personaggio esportato dalla versione 3.8 di tre anni fa e un altro dalla versione 4.2 della settimana scorsa. Non è necessario scegliere un runtime. Il visualizzatore controlla la stringa della versione all'interno dello scheletro JSON e carica quella corrispondente. Se l'esportazione è precedente alla versione 3.6 o successiva alla 4.3, lo segnala invece di generare immagini inutilizzabili.
Tutto viene disegnato su una tela WebGL nel tuo browser. I file vengono letti localmente e non vengono mai inviati da nessuna parte, il che è importante quando il personaggio è un'illustrazione inedita soggetta ad un accordo di non divulgazione (NDA). Significa anche che le pagine di texture di grandi dimensioni vengono visualizzate alla massima velocità consentita dalla tua macchina, senza tempi di caricamento.
- Versioni runtime 3.6, 3.7, 3.8, 4.0, 4.1, 4.2 e 4.3, selezionate automaticamente dall'esportazione.
- Scheletro JSON più il file di testo .atlas e le relative pagine di texture (PNG, JPG, WebP o AVIF). I file .skel Binary devono prima essere convertiti in JSON; è presente una nota a riguardo nel FAQ.
- L'alfa premoltiplicato è attivato quando i nomi delle texture contengono "pma" (Spine lo aggiunge in fase di esportazione) ed è possibile invertirlo manualmente se i bordi appaiono scuri o con aloni.
Caricamento di uno scheletro, un atlante e delle texture
Una normale esportazione Spine produce tre tipi di file: lo scheletro .json, un file di testo .atlas e una o più immagini di texture a cui l'atlante fa riferimento. Sono necessari tutti. L'atlante è solo una mappa; Senza le immagini non c'è niente da disegnare.
Seleziona o trascina tutte le immagini contemporaneamente. Il visualizzatore associa ogni pagina dell'atlante alla sua immagine tramite il nome del file e posiziona il personaggio sulla tela. Da lì puoi cambiare le animazioni, provare diverse texture, modificare la velocità di riproduzione e spostarti o zoomare per osservare i dettagli.
- Esporta da Spine come JSON. Se hai solo un file .skel, convertilo prima.
- Trascina il file .json, il file .atlas e tutte le pagine delle texture nell'area di caricamento.
- Scegli un'animazione dall'elenco e scorri tra le texture per controllarle tutte.
- Cambia il colore di sfondo se il personaggio si mimetizza con esso, quindi zooma e spostati a seconda delle necessità.
Utilizzo delle sovrapposizioni di debug
Un personaggio può apparire perfetto a dimensioni normali e presentare comunque un problema che si può individuare solo nel motore di gioco: una mesh che si ripiega su se stessa in un fotogramma, un'attaccatura di ritaglio che taglia troppo, un vincolo di percorso che tira un osso in una posizione anomala. Le sovrapposizioni di debug disegnano questi elementi di supporto sull'immagine in modo che tu possa vederli.
Attiva solo ciò che stai controllando. Con tutti e otto i livelli di sovrapposizione attivi contemporaneamente, lo schermo si riempie rapidamente. Di solito, la prima cosa che si controlla sono ossa e mesh, mentre se qualcosa appare tagliato o si sposta, si passa a esaminare clipping e percorsi.
- Ossa e punti, per visualizzare il rig e la posizione degli accessori.
- Regioni, mesh, scafi e limiti, per controllare la deformazione e l'area coperta da ciascun accessorio.
- Clipping e percorsi, per maschere e vincoli di percorso che si comportano in modo anomalo durante il movimento.
Creazione di una sequenza ed esportazione di un GIF o video
Una singola animazione in loop non fornisce molte informazioni su come il personaggio si comporta durante il gioco. La timeline permette di allineare diverse clip in sequenza, ad esempio da inattività a corsa a attacco, e di osservare le transizioni. Ogni passaggio di scena ha una dissolvenza incrociata che puoi impostare in secondi, in modo da poter capire se la fusione predefinita è efficace o se è necessario un mixaggio più lungo prima che il team del motore grafico se ne accorga.
La sequenza riproduce le clip una dopo l'altra su una singola traccia. Non si tratta di un mixer multitraccia a più livelli, quindi se hai bisogno di vedere qualcosa come la mira mentre il personaggio corre contemporaneamente, provalo nel motore di gioco. Per verificare che le transizioni non siano brusche, la timeline è veloce e di solito sufficiente.
Quando la sequenza ti sembra corretta, puoi esportarla. L'esportazione GIF registra a 12 fps e limita il lato più lungo a 640 px, il che va bene per una discussione su Slack o un ticket. L'esportazione video registra a 30 fps in formato MP4 se il browser lo supporta, altrimenti in WebM. Entrambi i formati applicano il colore di sfondo corrente, quindi scegli quello più adatto al contesto in cui verrà utilizzata la clip. La registrazione avviene sul tuo computer; non viene caricato nulla.
- Metti in coda le clip in qualsiasi ordine e imposta la dissolvenza incrociata tra di esse.
- Riproduci l'intera sequenza per individuare scoppiettii, schiocchi o combinazioni anomale.
- Utile per le revisioni: invia un file GIF invece di una build quando qualcuno ha solo bisogno di vedere l'animazione.
- Esporta come GIF (12 fps, fino a 640 px) o come video MP4/WebM, utilizzando il colore di sfondo impostato.
Dove si inserisce nella pipeline
Il visualizzatore funge da punto di controllo tra l'esportazione e l'importazione. Se le pagine dell'atlante sono superflue, ricompattale con Texture Packer. Se hai ereditato un foglio sprite senza file di dati, Sprite Sheet Unpacker può suddividerlo nuovamente in fotogrammi. Quindi torna qui e verifica che il risultato sia ancora riproducibile.
Eseguire questo controllo in una scheda del browser richiede un minuto. Trovare lo stesso problema dopo che il personaggio è già in una build Unity, Phaser o Cocos di solito costa molto di più.
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.