Spine Viewer En línia: Previsualitza les animacions de Spine en un navegador

Els projectes Spine sobreviuen a les versions de l'editor. És habitual que un caràcter s'exporti de la versió 3.8 fa tres anys i un altre de la 4.2 la setmana passada. No cal triar un temps d'execució. El visor mira la cadena de versió dins de l'esquelet JSON i carrega la que coincideix. Si l'exportació és anterior a la 3.6 o posterior a la 4.3, ho indica en comptes de representar errors.

Tot es dibuixa en un llenç WebGL al navegador. Els fitxers es llegeixen localment i no s'envien enlloc, cosa que importa quan el personatge és una il·lustració inèdita sota un acord de confidencialitat. També significa que les pàgines de textures grans apareixen tan ràpid com el vostre ordinador les pot descodificar, sense barra de càrrega.

Una exportació Spine normal us proporciona tres tipus de fitxers: l'esquelet .json, un fitxer de text .atlas i una o més imatges de textura a les quals apunta l'atles. Les necessiteu totes. L'atles només és un mapa; sense les imatges no hi ha res per dibuixar.

Seleccioneu-les o arrossegueu-les totes alhora. El visor fa coincidir cada pàgina de l'atles amb la seva imatge pel nom del fitxer i col·loca el personatge al llenç. Des d'allà podeu canviar d'animacions, provar diferents aspectes, canviar la velocitat de reproducció i desplaçar-vos o fer zoom per veure els detalls.

Un personatge pot semblar correcte a mida normal i encara tenir un problema que només detectaríeu al motor: una malla que es plega sobre si mateixa en un fotograma, un fitxer adjunt de retall que talla massa, una restricció de ruta que estira un os en algun lloc estrany. Les superposicions de depuració dibuixen aquests ajudants sobre l'il·lustració perquè els pugueu veure.

Activa només el que estiguis comprovant. Amb les vuit superposicions activades alhora, la pantalla s'omple ràpidament. Els ossos i les malles són el primer que es veu habitualment, i el retall i els camins vénen després si alguna cosa sembla tallada o es desvia.

Una animació en bucle no et diu gaire sobre com se sent el personatge en joc. La línia de temps et permet alinear diversos clips en ordre, per exemple, des del ralentí fins a la cursa i l'atac, i observar les transicions. Cada entrega té una transició encreuada que configures en segons, de manera que pots saber si la barreja predeterminada destaca o si necessita una barreja més llarga abans que l'equip del motor ho descobreixi per la via difícil.

La seqüència reprodueix els clips un darrere l'altre en una sola pista. No és un mesclador multipista amb capes, així que si necessiteu veure alguna cosa com apuntar a sobre d'executar-se al mateix temps, proveu-ho al motor. Per comprovar que les transicions no destaquin, la línia de temps és ràpida i normalment suficient.

Quan la seqüència sembli correcta, la podeu exportar. L'exportació GIF captura a 12 fps i limita el costat més llarg a 640 px, cosa que està bé per a un fil de Slack o una incidència. L'exportació de vídeo grava a 30 fps com a MP4 on el navegador ho admet, o WebM en cas contrari. Tots dos es curen amb el color de fons actual, així que trieu-ne un que s'adapti a on vagi el clip. L'enregistrament es fa al vostre ordinador; no es carrega res.

El visor és un punt de control entre l'exportació i la importació. Si les pàgines de l'atles són un malbaratament, torneu-les a empaquetar a Texture Packer. Si heu heretat un full de sprite solt sense fitxer de dades, Sprite Sheet Unpacker el pot dividir de nou en fotogrames. A continuació, torneu aquí i confirmeu que el resultat encara es reprodueix.

Fer aquesta comprovació en una pestanya del navegador triga un minut. Trobar el mateix problema després que el personatge ja estigui en una compilació Unity, Phaser o Cocos normalment costa molt més que això.