Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Cutout animation

Che cos'è?

Tradizionalmente, la `cutout animation <https://it.wikipedia.org/wiki/Cutout_animation`__ è un tipo di animazione passo uno in cui pezzi di carta (o altro materiale sottile) sono tagliati in forme particolari e disposti in rappresentazioni bidimensionali di personaggi e oggetti. I corpi dei personaggi sono solitamente composti da diversi pezzi. I pezzi vengono disposti e fotografati una volta per ogni fotogramma del film. L'animatore muove e ruota le parti con piccoli incrementi tra ogni ripresa per creare un'illusione di movimento quando le immagini sono riprodotte rapidamente in sequenza.

Oggi è possibile simulare la cutout animation tramite software come si vede in South Park e Jake e i pirati dell'Isola che non c'è.

Anche nei videogiochi questa tecnica è diventata popolare. Esempi ne sono Paper Mario o Rayman Origins .

Cutout animation in Godot

Godot fornisce strumenti per lavorare con rig cutout ed è ideale per il flusso di lavoro:

• Il sistema di animazione è totalmente integrato con il motore: ciò significa che le animazioni possono controllare molto più del solito movimento degli oggetti. È possibile animare e fondere texture, dimensioni degli sprite, punti perno, opacità, modulazione di colori e altro ancora.

• Combine animation styles: AnimatedSprite2D allows traditional cel animation to be used alongside cutout animation. In cel animation different animation frames use entirely different drawings rather than the same pieces positioned differently. In an otherwise cutout-based animation, cel animation can be used selectively for complex parts such as hands, feet, changing facial expressions, etc.

• Elementi su misura: È possibile creare forme personalizzate con Polygon2D consentendo animazioni sugli UV, deformazioni, ecc.

• Sistemi di particelle: un rig per cutout animation si può combinare con sistemi di particelle. Questo può essere utile per effetti magici, jetpack, ecc.

• Collisori personalizzati: imposta i collisori e le aree di influenza in diverse parti degli scheletri, ideali per boss e giochi di combattimento.

• Albero di animazione: consente combinazioni complesse e la fusione tra diverse animazioni, nello stesso modo in cui funziona in 3D.

E molto altro!

Creazione di GBot

Per questo tutorial, useremo come contenuto dimostrativo i pezzi del personaggio GBot, creato da Andreas Esau.

Ottieni le tue risorse: cutout_animation_assets.zip.

Preparare il rig

Crea un Node2D vuoto come radice della scena; ci lavoreremo al di sotto:

Il primo nodo del modello è l'anca. Generalmente, sia in 2D sia in 3D, l'anca è la radice dello scheletro. Questo lo rende più facile da animare:

Ora passiamo al torso. Il torso deve essere un figlio dell'anca, quindi crea uno sprite figlio e carica la texture del torso, per poi adattarlo correttamente:

Sembra a posto. Vediamo se la nostra gerarchia funziona come uno scheletro ruotando il busto. Possiamo farlo premendo E per entrare in modalità rotazione e trascinando con il pulsante sinistro del mouse. Per uscire dalla modalità rotazione premi ESC.

Il perno di rotazione è sbagliato e bisogna aggiustarlo.

Questa piccola croce al centro dello Sprite 2D è il perno di rotazione:

Aggiustare il perno

Il perno si può aggiustare modificando la proprietà offset dello Sprite2D:

Il perno si può aggiustare anche visivamente. Con il cursore sul perno desiderato, premi V per spostare il perno in quella posizione per lo Sprite2D selezionato. Nella barra degli strumenti c'è anche uno strumento con una funzione simile.

Continua ad aggiungere parti del corpo, partendo dal braccio destro. Assicurati di inserire ogni sprite al suo posto corretto nella gerarchia, in modo che le sue rotazioni e traslazioni siano relative al suo genitore:

Con il braccio sinistro c'è un problema. In 2D, i nodi figli appaiono davanti ai loro genitori:

Vogliamo che il braccio sinistro appaia dietro l'anca e il torso. Potremmo spostare i nodi del braccio sinistro dietro l'anca (sopra il nodo dell'anca nella gerarchia della scena), ma poi il braccio sinistro non si troverebbe più nel suo posto adeguato nella gerarchia. Ciò significa che non sarebbe influenzato dal movimento del torso. Risolveremo questo problema con i nodi RemoteTransform2D.

Nota

Puoi anche risolvere eventuali problemi di ordinamento della profondità regolando la proprietà Z di qualsiasi nodo che eredita da Node2D.

Nodo RemoteTransform2D

Il nodo RemoteTransform2D trasforma i nodi che si trovano altrove nella gerarchia. Questo nodo applica la propria trasformazione (inclusa qualsiasi trasformazione ereditata dai suoi genitori) al nodo remoto di destinazione.

Ciò ci consente di correggere l'ordine di visibilità dei nostri elementi, a prescindere dal posto di tali parti nella gerarchia di cutout.

Crea un nodo RemoteTransform2D come figlio del torso. Chiamalo remote_arm_l. Crea un altro nodo RemoteTransform2D all'interno del primo e chiamalo remote_hand_l. Usa la proprietà Remote Path dei due nuovi nodi per puntare rispettivamente agli sprite arm_l e hand_l:

Spostando i nodi RemoteTransform2D ora si spostano gli sprite. Quindi possiamo creare animazioni cambiando le trasformazioni dei RemoteTransform2D:

Completare lo scheletro

Completa lo scheletro seguendo gli stessi passaggi per le parti restanti. La scena risultante dovrebbe apparire simile a questa:

Il rig risultante sarà facile da animare. Selezionando i nodi e ruotandoli, potrai animare efficientemente la cinematica diretta (FK).

For simple objects and rigs this is fine, but there are limitations:

• Selezionare gli sprite nella viewport principale può diventare difficile nei rig complessi. Si finisce per utilizzare l'albero di scene per selezionare le parti, il che può risultare più lento.

• La cinematica inversa (IK) è utile per animare le estremità come mani e piedi, ma non può essere utilizzata con il nostro rig nel suo stato attuale.

Per risolvere questi problemi useremo gli scheletri di Godot.

Scheletri

In Godot esiste un aiuto per creare "ossa" tra i nodi. I nodi collegati da queste ossa sono chiamati scheletri.

Ad esempio, convertiamo il braccio destro in uno scheletro. Per creare uno scheletro, è necessario selezionare una catena di nodi dall'alto verso il basso:

Quindi, clicca sul menu Scheletro e seleziona Make Bones.

Questo aggiungerà ossa che coprono il braccio, ma il risultato potrebbe sorprendere.

Perché la mano non ha un osso? In Godot, un osso collega un nodo al suo genitore. E al momento non c'è alcun figlio del nodo della mano. Detto questo, riproviamo.

Il primo passo consiste nel creare un nodo di punto finale. Qualsiasi tipo di nodo va bene, ma Marker2D è preferibile perché è visibile nell'editor. Il nodo di punto finale garantirà che l'ultimo osso abbia un orientamento.

Ora seleziona l'intera catena, dal punto finale al braccio, e crea le ossa:

Il risultato assomiglia molto di più a uno scheletro, e ora è possibile selezionare e animare il braccio e l'avambraccio.

Crea punti finali per tutte le estremità importanti. Genera le ossa per tutte le parti articolabili del cutout, con l'anca come collegamento centrale tra tutte.

Potresti notare che viene creato un osso in più quando colleghi l'anca e il busto. Godot ha collegato il nodo dell'anca alla radice della scena con un osso, e non lo vogliamo. Per risolvere questo, seleziona la radice e il nodo dell'anca, apri il menu Scheletro e clicca su clear bones.

Il tuo scheletro finale dovrebbe assomigliare a questo:

Potresti aver notato una seconda serie di punti finali nelle mani. Questo avrà senso presto.

Ora che l'intera figura è stata collegata, il passo successivo è impostare le catene IK. Le catene IK consentono di controllare più naturalmente gli arti.

Catene IK

IK sta per cinematica inversa. È una tecnica utile per animare la posizione di mani, piedi e altre estremità di rig come quello che abbiamo creato. Immagina di voler posizionare il piede di un personaggio in una posizione specifica sul terreno. Senza le catene IK, ogni movimento del piede richiederebbe di ruotare e posizionare diverse altre ossa (almeno la tibia e la coscia). Questo sarebbe piuttosto complesso e porterebbe a risultati imprecisi. L'IK ci permette di muovere direttamente il piede mentre la tibia e la coscia si autoregolano.

Nota

Le catene IK in Godot attualmente funzionano solo nell'editor, non in fase di esecuzione. Sono pensate per semplificare il processo di impostazione dei fotogrammi chiave, e al momento non sono utili per tecniche come l'animazione procedurale.

Per creare una catena IK, seleziona una catena di ossa che va dal punto finale alla base della catena. Ad esempio, per creare una catena IK per la gamba destra, seleziona quanto segue:

Quindi abilita questa catena per l'IK. Vai su Modifica > Crea catena IK.

Di conseguenza, la base della catena diventerà Gialla.

Una volta impostata la catena IK, prendi un qualsiasi figlio o nipote alla base della catena (ad esempio un piede) e muovilo. Vedrai il resto della catena adattarsi man mano che ne modifichi la posizione.

Suggerimenti per l'animazione

La sezione seguente sarà una raccolta di suggerimenti per creare animazioni per i propri rig cutout. Per ulteriori informazioni su come funziona il sistema di animazione in Godot, consulta Introduzione alle funzionalità d'animazione.

Impostare i fotogrammi chiave ed escludere le proprietà

Nella barra degli strumenti in alto, appaiono elementi contestuali speciali quando la finestra dell'editor di animazione è aperta:

Il pulsante chiave inserisce i fotogrammi chiave di posizione, rotazione e scala per gli oggetti o le ossa selezionati nella posizione attuale della testina di riproduzione.

Gli interruttori "loc", "rot" e "scl" a sinistra del pulsante chiave ne modificano la funzione, consentendo di specificare per quale delle tre proprietà saranno creati i fotogrammi chiave.

Ecco un'illustrazione di come ciò possa essere utile: immagina di avere un nodo che ha già due fotogrammi chiave che animano solo la sua scala. Vuoi aggiungere un movimento rotatorio sovrapposto allo stesso nodo. Il movimento rotatorio dovrebbe iniziare e terminare in momenti diversi dal cambio di scala già impostato. Puoi usare gli interruttori per aggiungere solo le informazioni di rotazione quando aggiungi un nuovo fotogramma chiave. In questo modo, puoi evitare di aggiungere fotogrammi chiave di scala indesiderati che rovinerebbero l'animazione di scala esistente.

Creare una posa di riposo

Pensa alla posa di riposo come una posa predefinita che il rig cutout dovrebbe assumere quando nessun'altra posa è attiva nel gioco. Crea una posa di riposo come segue:

1. Make sure the rig parts are positioned in what looks like a "resting" arrangement.

2. Crea una nuova animazione, rinominarla "rest".

3. Seleziona tutti i nodi del rig (la selezione a riquadro dovrebbe funzionare bene).

4. Make sure the "loc", "rot", and "scl" toggle buttons are all active in the toolbar.

5. Press the key button. Keys will be inserted for all selected parts storing their current arrangement. This pose can now be recalled when necessary in your game by playing the "rest" animation you've created.

Modificazione della rotazione solamente

Quando si anima un rig cutout, spesso è solo la rotazione dei nodi che deve cambiare. Posizione e scala sono raramente utilizzate.

Quindi, quando si inseriscono le chiavi, potrebbe risultare comodo tenere attivo per la maggior parte del tempo solo l'interruttore "rot":

Ciò eviterà la creazione di tracce di animazione indesiderate per la posizione e la scala.

Keyframing IK chains

Quando si modificano le catene IK, non è necessario selezionare l'intera catena per aggiungere fotogrammi chiave. Selezionando il punto finale della catena e inserendo un fotogramma chiave, verranno automaticamente inseriti fotogrammi chiave anche per tutte le altre parti della catena.

Spostare visivamente uno sprite dietro il suo genitore

A volte, durante un'animazione, è necessario che un nodo cambi la sua profondità visiva rispetto al nodo genitore. Si pensi a un personaggio rivolto verso la telecamera, che prende qualcosa da dietro la schiena e lo tiene davanti a sé. Durante questa animazione, l'intero braccio e l'oggetto nella sua mano dovrebbero cambiare la loro profondità visiva relativa al corpo del personaggio.

Per aiutare con questo, è disponibile la proprietà animabile "Behind Parent" (dietro il genitore) su tutti i nodi che ereditano da Node2D. Quando si progetta il rig, è importante considerare i movimenti che dovrà effettuare e come utilizzare "Behind Parent" e/o i nodi RemoteTransform2D. Le loro funzionalità si sovrappongono.

Setting easing curves for multiple keys

To apply the same easing curve to multiple keyframes at once:

1. Select the relevant keys.

2. Clicca sull'icona della matita in basso a destra nel pannello Animazione. Si aprirà l'editor di transizioni.

3. Nell'editor di transizioni, clicca sulla curva desiderata per applicarla.

Deformazione scheletrica 2D

La deformazione scheletrica si può utilizzare per migliorare un rig cutout, consentendo ai singoli pezzi di deformarsi organicamente (ad esempio, antenne che oscillano mentre un personaggio di insetto cammina).

Questa procedura è descritta in un tutorial separato.