Demo di Spine

Spine va ben oltre i limiti dell'animazione 2D tradizionale. Gli esempi di seguito illustrano alcuni dei modi in cui artisti, animatori e programmatori possono sfruttare i workflow migliorati e le capacità che Spine offre per creare giochi fantastici.

Tutte le demo seguenti sono in tempo reale, grazie al nostro runtime per WebGL spine-ts. Scopri ora come abbiamo usato i Runtime di Spine nelle demo esplorando il codice sorgente di ogni demo.

Confronto tra Spine e spritesheet

Spine
All animations, all frame rates
0.18 MB
Sprite sheet
1 second of animation @ 30FPS
3.39 MB = 18x larger

L'animazione sprite tradizionale richiede un'immagine per ogni fotogramma dell'animazione, risultando in enormi fogli di sprite. Ogni animazione aggiuntiva aumenta notevolmente lo spazio su disco e le esigenze di memoria dei tuoi giochi, soprattutto alle frequenze di fotogrammi necessarie per una riproduzione fluida. Diventa rapidamente un'enorme quantità di lavoro per i tuoi artisti e il tuo prodotto finito soffre quando il numero di animazioni deve essere ridotto per soddisfare i limiti di dimensioni.

Le animazioni Spine memorizzano solo i dati relativi alle ossa e all'animazione, insieme a un unico gruppo di singole immagini che vengono riutilizzate per ogni animazione. Ciò ti consente di dare vita ai tuoi giochi riempiendoli con animazioni uniche. Inoltre, le animazioni Spine sono interpolate in modo che la riproduzione sia sempre perfettamente uniforme, indipendentemente dalla frequenza dei fotogrammi.

Comparazione di spazio in memoria e su disco richiesto da Spine contro quello delle animazioni tramite sprite sheet.

Velocità dell'animazione
 

Spine con animazioni frame-by-frame

Mentre Spine sostituisce in gran parte la necessità di creare animazioni frame-by-frame tradizionali, le immagini possono ancora essere scambiate quando necessario. Ad esempio, un cambio di prospettiva per un busto o un'ala che sbatte, delle espressioni facciali alternative o il flash di un'esplosione.

Gli slot di Spine, gli allegati e i meccanismi di ordine di disegno consentono di integrare facilmente animazioni fotogramma per fotogramma nelle animazioni Spine altrimenti completamente dinamiche. Ancor meglio, Spine è in grado di manipolare le immagini frame-by-frame, come mostrato in questa demo scalando la testa in procinto di scoppiare dell'alieno.

Transizioni e stratificazione

Smooth
Abrupt

Uno svantaggio spesso sentito dei giochi 2D è la mancanza di transizioni fluide tra le animazioni. Nei giochi 3D, le transizioni tra animazioni possono essere calcolate al volo in fase di runtime. Le animazioni possono anche essere miscelate, ad esempio metà camminata e metà corsa. Nei giochi 2D senza Spine, la fusione è impossibile e in genere le transizioni sono stridenti. Gli artisti possono creare manualmente fotogrammi per ogni transizione possibile, ma anche questo non aiuta se le animazioni sono interrotte a metà riproduzione.

Spine riporta i benefici dal mondo 3D al 2D. I Runtimes Spine creano transizioni uniformi e dinamiche da un'animazione all'altra, dando ai tuoi personaggi fluidità naturale. La stratificazione consente di mescolare delle animazioni sopra le altre, ad esempio per riprodurre un'animazione mentre il personaggio corre o per miscelare la camminata con uno zoppicare sempre maggiore man mano che il danno ricevuto aumenta.

Velocità dell'animazione
 

Deformazione mesh

Un personaggio Spine composto da immagini 2D rigide può già dare risultati eccellenti, come Spineboy nella demo sopra. Per dare ai tuoi personaggi ancora più vita, Spine porta più trucchi dal mondo 3D sotto forma di mesh e pesature. Con le mesh, le immagini non sono più rigide e possono piegarsi e deformarsi come preferisci. I pesi legano le mesh alle ossa, quindi le immagini si deformano automaticamente quando le ossa vengono spostate.

Le mesh possono anche migliorare le prestazioni del tuo gioco, riducendo l'utilizzo del tasso di riempimento poiché porzioni trasparenti delle tue immagini non vengono disegnate. Questo è particolarmente importante per i dispositivi mobili.

L'incredibile arte per questa demo è stata gentilmente fornita da Hwadock (a.k.a. dugy). Seguilo su Twitter e sul suo blog.

Mostra ossa
Mostra triangoli

Skins

La funzionalità Skin di Spine è perfetta per fornire personalizzazione e varietà mantenendo un carico di lavoro ragionevole. Con le skin, il lavoro di animazione deve essere eseguito una sola volta, quindi è possibile assegnare diversi look agli scheletri mentre riutilizzi tutte le tue animazioni. Per la massima flessibilità,i Runtimes di Spine ti consentono di combinare parti di skin diverse in fase di runtime, coprendo tutte le possibili esigenze di personalizzazione.

Le Skin danno ai giocatori la possibilità di aggiungere il proprio tocco al mondo del gioco, allineando i loro avatar con nuovi look, abbigliamento, armi e altri accessori. Le skin offrono anche più potenzialità alle tue animazioni: mescola e abbina la tua arte a nemici, oggetti e altri oggetti di gioco per aumentare enormemente la varietà con poco sforzo.

L'arte di questa demo è disponibile nel character pack per Unity2D Anim Heroes.

Skin casuali

Cinematiche inverse

Il supporto di Spine per le cinematiche inverse consente movimenti realistici e dinamici che altrimenti sarebbero difficili o impossibili da animare. Permette anche un rigging più avanzato, dove le pose complesse possono essere facilmente controllate da un ridotto numero di ossa.

Poiché Spine non usa baking o plotting, le cinematiche inverse brillano davvero in fase di esecuzione: posizionando dinamicamente le ossa in fase di runtime, i vincoli IK consentono al tuo personaggio di reagire facilmente all'ambiente, ad esempio puntando i nemici, con i piedi che seguono pendenze e dossi sul terreno e molto altro ancora. In questa demo Spineboy è in equilibrio su un'hoverboard controllata dall'utente mentre un'animazione è in esecuzione allo stesso tempo.

Provalo! Trascina i cerchi rossi per posizionare dinamicamente Spineboy. Le opzioni Spara, salto e mira aggiungono un livello di animazione combinandola a quella base.

Mira
Mostra ossa

Mix di animazioni additive

Quando si riproducono animazioni su tracce separate, normalmente la posa delle tracce inferiori viene sovrascritta dalle tracce superiori. Con una traccia additiva, la sua posa viene aggiunta al risultato delle tracce inferiori. Ciò consente di fondere le pose di più animazioni indipendenti con influenze diverse, come diverse espressioni facciali come 50% felice, 20% pazzo e 30% sorpreso.

Il gufo in questa demo ha 4 animazioni, una per ogni direzione. Le pose indipendenti di ciascuna di queste animazioni vengono fuse insieme a seconda della posizione del cursore del mouse rispetto al centro dell'area di disegno.

Vincoli di Tracciato

Spesso una parte di un personaggio segue un percorso aperto o chiuso. Piuttosto che digitare manualmente questo movimento, i vincoli di tracciato di Spine possono essere utilizzati per far sì che le ossa seguano automaticamente un percorso. Il percorso composito di Bézier è costituito da una serie di punti interconnessi che consentono di piegare e modellare il percorso. Il percorso stesso può essere animato e persino pesato sulle ossa, cosicché il percorso si deformi automaticamente quando le ossa vengono mosse.

In questa demo la mesh di una pianta di vite è legata alle ossa che sono vincolate a un tracciato. Più vertici sono presenti nella mesh, più questa sarà liscia nel piegarsi.

I vincoli di tracciato possono anche essere utilizzati con grande efficacia in fase di esecuzione. Sposta le maniglie rosse per modificare dinamicamente il percorso e osserva la vite seguirla senza problemi!

Mostra ossa e tracciati

I vincoli di tracciato consentono un potente rigging, mostrato da Stretchyman in questa demo. Per le braccia e le gambe, le maglie sono pesate su molte piccole ossa che vengono poi costrette a seguire semplici percorsi per gli arti. I percorsi vengono quindi pesati sulle ossa che possono essere spostati per controllare gli arti. Questa configurazione consente di controllare un numero elevato di ossa con poche ossa. Ciò non solo rende più semplice l'animazione, ma in fase di runtime solo alcune ossa devono essere regolate per essere posizionate dinamicamente.

Muovi le maniglie rosse e fai ballare lo Stretchyman!

Mostra ossa e tracciati

Maschera di ritaglio

A volte parti di un'animazione devono essere parzialmente nascoste, come in questo esempio in cui Spineboy esce da un portale. Il ritaglio è utile in questi casi limitando il rendering a un'area poligonale. Vengono visualizzate solo le parti dello scheletro all'interno dell'area animabile predefinita. Questo abilita molti effetti che altrimenti non sarebbero possibili, come finestre, effetti di luce e altro. È anche possibile avere una maschera di ritaglio solo su un sottoinsieme dello scheletro. Ad esempio, un'animazione in cui un personaggio passa attraverso una radiografia.

Mostra triangoli

Vincoli di trasformazione

Animare scheletri complessi con molti pezzi interdipendenti può essere noioso. I vincoli di trasformazione di Spine rimuovono questo dolore sbloccando rigging più potenti. Vincolando le trasformazioni ossee alla trasformazione di un altro osso, è sufficiente animare una delle ossa e le altre vengono regolate automaticamente. Anche se apparentemente semplice in superficie, il rigging avanzato può fare un grande uso di questo per automatizzare il modo in cui si comporta uno scheletro.

I vincoli di trasformazione sono ottimi anche per le macchine, come il carro armato in questa demo. Invece di digitare la rotazione di ogni singola ruota, una ruota viene animata mentre le altre la seguono tramite un vincolo di trasformazione. Compensazione e mescolamento possono aggiungere individualismo alle parti costrette.

I battistrada del carro armato vengono fatti circolare mediante un vincolo di tracciato, che sarebbe impossibile da animare senza tracciati. Il tracciato è pesato sulle ruote, per cui il tracciato si piega automaticamente quando le ruote si muovono su e giù.

Mostra ossa e tracciati

In questa demo la rotazione delle due ruote più piccole è vincolata dalla rotazione della ruota grande. Inoltre, la traslazione della ruota grande è vincolata in modo da rimanere tra le due ruote più piccole.

Offset rotazione
 
Mix di traslazione