In questa serie, ci stiamo concentrando sugli strumenti di animazione 2D basati sull'osso forniti dal motore Unity. L'idea principale è quella di presentare e insegnare i fondamenti dell'animazione 2D per poterla applicare ai tuoi giochi. In questo tutorial, aggiungeremo le animazioni di inattività, di salto e di caduta.
Prima di iniziare il tutorial, vorremmo ringraziare Chenguang (DragonBonesTeam) per averci fornito l'arte del gioco usata per produrre questa serie di tutorial.
Nel precedente tutorial, abbiamo importato uno sprite 2D che rappresenta il personaggio del gioco, lo abbiamo affettato con Unity Sprite Editor e costruito la base del personaggio. Se non hai completato il tutorial precedente ti consigliamo vivamente di farlo, dal momento che avrai bisogno del personaggio 2D per seguire questo tutorial.
Questa demo mostra il drago animato che miriamo a colpire Spazio per farlo saltare:
Ci sono diversi concetti importanti che devi tenere a mente durante l'animazione. Ai fini di questo tutorial, assumeremo che non hai esperienza con l'animazione (2D o 3D) e che non hai mai lavorato con il software di animazione prima.
L'animazione, come la conosciamo, si è evoluta dalla pittura al digitale. Esistono dozzine di tecniche di animazione ibride, ma tutte condividono gli stessi principi di base, come i cicli di sincronizzazione labiale, di squash o di camminata.
Per comprendere l'animazione, devi prima imparare il concetto di a telaio. Una cornice è una delle tante immagini fisse che compongono un'animazione. Se metti in pausa un cartone animato, l'immagine mostrata dal televisore sarà di un singolo fotogramma.
La principale differenza tra animazione tradizionale e animazione del computer risiede negli strumenti utilizzati. L'animazione tradizionale è un processo molto pratico, in cui gli artisti dovrebbero disegnare o comporre migliaia di fotogrammi individuali. L'animazione al computer rimuove la necessità di molti strumenti e, in generale, semplifica l'intero processo.
Ad esempio, mentre con l'animazione tradizionale l'artista dovrebbe disegnare quasi ogni fotogramma di un'animazione, con l'animazione del computer l'artista può utilizzare ciò che chiamiamo punti chiave del telaio. Questi punti chiave del fotogramma, come specificato dal nome, sono fasi chiave dell'animazione. Fondamentalmente, l'artista crea quei punti chiave del fotogramma e il computer si interpola tra di essi per creare i fotogrammi mancanti. Come puoi immaginare, questo tipo di processo è molto meno laborioso.
È possibile definire un fotogramma chiave come una singola immagine fissa in una sequenza animata che si svolge in un punto importante in tale sequenza. Un buon esempio potrebbe essere un'animazione del rock che cade: la posizione originale della roccia nell'aria sarebbe un fotogramma chiave, e la posizione finale della roccia sul terreno sarebbe un'altra. Il computer avrebbe quindi generato tutti gli altri frame. Chiamiamo i frame tra i fotogrammi chiave interpolato cornici, e sono i responsabili della creazione dell'illusione del movimento.
La cornice può anche essere utilizzata come unità di tempo. Ad esempio, puoi dire che un'animazione dura 20 fotogrammi. La durata reale di ogni animazione dipende dalla frequenza dei fotogrammi, che può variare in base al formato dell'animazione. In Nord America e Giappone lo standard è di 30 fotogrammi al secondo (fps), mentre in tutto il resto del mondo lo standard è solitamente di 25 fps.
Poiché ora conosci le basi dell'animazione e dell'animazione computerizzata, torniamo ora a Unity per avviare l'animazione del nostro personaggio.
Il primo passo è creare una cartella nel Risorse directory chiamata animazioni
, in cui salvi le animazioni dei tuoi personaggi.
Quindi, apri il Animazione panel in Unity (Finestra > Animazione):
Come puoi vedere, il pannello contiene una linea temporale orizzontale, un pulsante di registrazione, un pulsante di riproduzione e un paio di pulsanti per navigare tra i frame.
Prendi il Animazione finestra e agganciarlo accanto al consolle scheda (si noti che si sta utilizzando il Layout 2D creato nel tutorial Unity 2D Arkanoid). In questo modo, puoi lavorare sulla scena con il pannello di animazione ancora aperto.
Creerai tre diverse animazioni per il drago: un'animazione inattiva, un'animazione di salto e un'animazione di caduta.
Per creare la prima animazione, seleziona il Drago
oggetto del gioco e clic Aggiungi curva sul Animazione pannello. Una nuova finestra ti chiederà di nominare il file di animazione e la cartella di destinazione in cui salvarlo. I file di animazione Unity hanno .anim
estensione, e li salverete nel animazioni cartella creata in precedenza. Crea il Idle.anim
file.
Come puoi notare, una volta salvato il file, diverse cose cambiano nel layout dell'editor:
Se dai un'occhiata ai pulsanti di riproduzione nella parte superiore della scena, noterai che sono diventati rossi. Nel Animazione pannello il pulsante di registrazione ora è rosso, e vedrai una linea rossa sulla timeline. Questo significa che sei dentro disco modalità. Inoltre, se guardi il Ispettore, vedrai che Unity ha aggiunto automaticamente un nuovo componente al tuo oggetto di gioco: il Animatore.
Il Animatore componente è un riferimento a un Controller animatore che è usato per impostare il comportamento su un personaggio. Questo include un setup per Macchine di stato, Mescolare alberi ed eventi che possono essere controllati tramite script. Fondamentalmente, il Animatore è il collegamento tra il personaggio e il suo comportamento.
Copriremo il Animatore componente con più profondità in seguito; per ora, concentriamoci solo sull'animazione. Nel tuo Drago oggetto del gioco, selezionare il Capo:
Sul Animazione linea del tempo, trascinare la linea rossa su 01:00
(un minuto in).
Ora, sul Ispettore, impostare il Rotazione Z a 7.9
. Come potresti notare, ora hai alcune piccole forme sulla tua timeline. Questi segni indicano i fotogrammi chiave dell'animazione.
Sposta la linea rossa a 02:00
e impostare il Rotazione Z della testa a 0
.
Premere di nuovo il pulsante di registrazione per disattivare la modalità di registrazione. Ora puoi premere il pulsante di riproduzione per testare l'animazione. Se tutto ha funzionato, la testa del tuo drago dovrebbe essere su e giù.
La testa del drago sembra ruotare un po 'troppo. Dato che vogliamo solo un piccolo cenno, dobbiamo modificare l'animazione.
Attivare nuovamente la modalità di registrazione premendo il tasto e spostare la linea rossa su 01:00
minuto. Alterare il Rotazione Z valore a 2.05
.
Premere il pulsante di registrazione per uscire dalla modalità di registrazione e testare di nuovo l'animazione.
Come puoi vedere, per modificare un'animazione, devi solo selezionare il fotogramma chiave desiderato e cambiarlo. Se è necessario modificare i tempi di un'animazione, ad esempio se l'animazione è troppo veloce o troppo lenta, è possibile trascinare il segno nella timeline sul fotogramma desiderato.
Ok, ora hai la testa animata, ma vuoi animare tutto il corpo. Poiché hai costruito il tuo personaggio come una gerarchia invece di oggetti di gioco isolati, non è necessario creare una singola animazione per ogni parte del corpo; invece, basta premere il pulsante contrassegnato Aggiungi curva e selezionare una parte del corpo diversa. Fai clic sul pulsante e seleziona la coda del drago.
Cerca di far andare la coda su e giù. Proprio come hai fatto prima, usa il Rotazione Z asse e la timeline tra zero e due minuti.
Grazie alla gerarchia che hai creato, quando muovi la coda il motore sposta automaticamente anche la punta. Tuttavia, puoi anche animare individualmente il tip se lo selezioni.
Grande! Ora anima il resto delle parti del corpo per l'animazione inattiva. Prenditi il tempo necessario per modificare l'animazione finché non sei completamente soddisfatto. L'animazione richiede tempo e non ottieni mai i risultati desiderati al primo tentativo. Alla fine, la sequenza temporale dovrebbe essere simile a questa:
Si noti che, per il Inattivo animazione, non cambi alcun valore del centro di massa del drago (il punto nero).
Per il Saltare animazione, è necessario creare un nuovo file di animazione. Per farlo, nel Animazione pannello, fare clic sull'etichetta che dice Inattivo
e selezionare Crea una nuova clip.
Nominalo Jump.anim
e salvalo nel animazioni cartella.
Per questa animazione, vuoi far alzare il tuo drago mentre salti. Dal momento che abbiamo già trattato le basi della creazione di animazioni utilizzando Unity, ti forniremo solo alcuni suggerimenti anziché guidarti attraverso il processo.
Come hai fatto prima, devi selezionare il Drago oggetto del gioco e inizia aggiungendo le curve. Iniziamo con la testa; questa animazione sarà breve, quindi 00:30
secondi farà. Ruota la testa sull'asse Z per cercare.
Per evitare che la testa sia completamente statica, puoi aggiungere un piccolo movimento ad essa. Puoi ottenere questo aggiungendo una piccola rotazione.
Ripeti il processo per le restanti parti del corpo. Tieni presente che l'animazione dovrebbe apparire come se il personaggio fosse a mezz'aria.
Ti insegneremo come fare il salto completo più tardi. Per riferimento, cerca di mettere il tuo personaggio in pose simili al seguente:
L'hai fatto? Bello!
Ora concentriamoci sull'animazione finale: l'animazione autunnale.
Ora il tuo personaggio può saltare, ma due parti compongono un salto completo: il salto stesso, in cui il personaggio viene sollevato dal pavimento, e l'autunno, quando il personaggio torna indietro di nuovo. In questo momento ti manca la seconda parte del salto, il Autunnoanimazione.
Proprio come prima, nel Animazione pannello, fare clic sull'etichetta con il nome dell'animazione corrente e selezionare Crea una nuova clip.
Salva la nuova animazione nel animazioni cartella con il nome Fall.anim
.
Questa volta, vuoi che il personaggio guardi giù mentre cade. Per fare ciò, è necessario premere il tasto Aggiungi curva pulsante e inizia a posare il drago. Proprio come il Saltare
animazione, 30 secondi funzionerà per questo caso.
Ripeti il processo di selezione delle parti del corpo e creazione dei rispettivi fotogrammi chiave per l'intero personaggio (ad eccezione del punto nero). Ancora una volta, puoi aggiungere i fotogrammi chiave di mezzo solo per assicurarti che il personaggio non sia statico durante la caduta.
Questo conclude il secondo tutorial che spiega come creare un'animazione 2D basata sull'osso con Unity. Ora hai imparato le basi dell'animazione e hai utilizzato i fotogrammi chiave per creare tre tipi di animazioni. La prossima volta collegherai le diverse animazioni, le mescolerai e le chiamerai per script.
Se hai domande o commenti su ciò che abbiamo trattato finora, ti preghiamo di lasciare un commento qui sotto.