Animazione 2D Unity Bone-based Mecanim e Scripting

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, utilizzeremo l'eccellente strumento Mecanim di Unity per unire le animazioni e aggiungeremo alcuni script semplici per dimostrare il risultato finale.

Prima di iniziare il tutorial, vorremmo ringraziare Chenguang (DragonBonesTeam) per averci fornito l'arte del gioco usata per produrre questa serie di tutorial.

Da dove siamo partiti

Nelle esercitazioni precedenti, abbiamo impostato il progetto, assemblato un personaggio dragone 2D e creato tre diverse animazioni. Se non hai ancora completato i tutorial precedenti, ti consigliamo vivamente di farlo prima di continuare.

Anteprima finale

Questa demo mostra il drago animato che miriamo a colpire Spazio per farlo saltare:

Mecanim

A questo punto, hai il tuo drago completamente assemblato con tre animazioni definite. Tuttavia, non c'è alcuna connessione tra di loro. Quindi, il nostro obiettivo iniziale è quello di collegare le diverse clip di animazione e fonderle insieme. Per questo, Unity fornisce uno strumento fantastico chiamato Mecanim che fa esattamente ciò di cui hai bisogno.

Mecanim è un sistema di animazione potente e flessibile. Dal momento che è integrato con Unity stesso, non c'è bisogno di software di terze parti. Puoi animare facilmente qualsiasi cosa, dagli sprite alle forme miste o persino alle luci. Mecanim ti consente di creare macchine a stati e mescolare alberi per controllare il tuo personaggio.

Ma, prima di andare oltre, parliamo un po 'di miscelazione di animazioni e macchine di stato in modo da avere una migliore comprensione di ciò che stiamo per fare.

Cos'è una macchina a stati?

In Unity, puoi unire due o più movimenti simili: ad esempio, potresti voler fondere animazioni in esecuzione e in movimento a seconda della velocità corrente del personaggio. Fondamentalmente, hai due diversi modi per fondere le animazioni in Unity. In alcune situazioni potresti voler usare transizioni; in altri dovrai usare Mescolare alberi:

  • transizioni sono utilizzati per la transizione uniforme tra le animazioni. Questo di solito funziona bene se la transizione è veloce.
  • Mescolare alberi consente di combinare più animazioni senza intoppi, incorporando parti di esse in quantità variabili. Queste quantità sono controllate da parametri numerici. Per dare un esempio pratico, immagina di avere un gioco sparatutto; potresti volere che il personaggio si accenda e scorra allo stesso tempo. Gli alberi di fusione ti permettono di fondere insieme le due animazioni, permettendo al personaggio di scattare e scattare allo stesso tempo, senza dover creare una terza animazione per quella specifica miscela di azioni.

Una macchina a stati memorizza lo stato di un'entità in un dato momento e può reagire a un input per cambiare lo stato di quell'entità o per provocare un'azione o un output. Per ulteriori informazioni, vedere Macchine a stati finiti: teoria e implementazione.

In Unity, usi le macchine di stato per controllare lo stato dei personaggi del gioco. Ad esempio, potrebbe essere uno stato per un personaggio Camminare, e un altro potrebbe essere Saltare. Il personaggio può cambiare da Camminare stato al Saltare stato basato sull'input del player (probabilmente premendo il pulsante Jump). 

Qui puoi vedere un esempio di una macchina a stati (più complessa) dalla documentazione di Unity. Ogni riquadro rappresenta uno stato e le frecce rappresentano le possibili transizioni tra di loro:

Creeremo una macchina a stati con le nostre animazioni esistenti e quindi useremo le transizioni per unirle.

Costruire la nostra macchina statale

Se controlli il animazioni cartella in cui hai salvato il tuo .anim file, troverai a Dragon.controller file. Questo è il file mecanim associato al personaggio che Unity ha generato automaticamente quando hai salvato la tua prima animazione.

Fare doppio clic sul Dragon.controller file e Unity aprirà a Animatore visualizza la scheda accanto al tuo Scena e Gioco schede.

Come puoi vedere, Unity ha già aggiunto le tre animazioni al file. Poiché le animazioni sono già in atto, non è necessario aggiungerle, ma, se si desidera aggiungere un'animazione aggiuntiva al controller, tutto ciò che si deve fare è trascinare il .anim file al Animatore vista. Allo stesso modo, se si desidera rimuovere un'animazione esistente dal controller, è sufficiente selezionare su Animatore guarda e premi Elimina. Sentiti libero di provare questo per te stesso.

Abbiamo quattro diverse scatole nel Animatore:

  • Qualsiasi stato
  • Inattivo
  • Saltare
  • Autunno

Qualsiasi stato è lo stato predefinito creato da mecanim e non lo userai. Puoi trascinarlo in qualsiasi angolo del Animatore finestra e lasciarlo lì.

Le altre tre caselle si riferiscono alle tre animazioni che abbiamo creato. Come puoi notare, Inattivo è colorato con arancio, mentre gli altri due sono grigi. È perché Inattivo è l'animazione di root; è l'animazione che il personaggio sta per riprodurre di default. Se premi il pulsante di riproduzione sul tuo editor e testalo, vedrai che il personaggio lo fa Inattivo animazione. In questo caso particolare, questo è esattamente il comportamento che vogliamo; tuttavia, se si desidera, ad esempio, il Autunno l'animazione come animazione di root, tutto quello che dovresti fare è selezionarlo con il tasto destro del mouse Imposta come predefinito.

Come puoi vedere, il Autunno l'animazione ora è arancione e il Inattivo è grigio.

Dal momento che vuoi Inattivo per essere l'animazione di root, basta ripetere il processo per renderlo di nuovo arancione.

È giunto il momento di collegare le animazioni. Pulsante destro del mouse Inattivo e selezionare Effettua la transizione.

Questo creerà una piccola freccia da cui inizia Inattivo. Clicca sul Saltare animazione per fare in modo che la freccia colleghi le due animazioni.

Se selezioni la freccia che hai appena creato, vedrai che le nuove proprietà appaiono nel Ispettore linguetta.

Come puoi vedere, hai una linea del tempo e le animazioni Inattivo e Saltare. C'è una banda blu sopra le animazioni che inizia Inattivo ma poi cambia in Saltare. Inoltre, c'è un periodo di tempo durante il quale le due animazioni si sovrappongono.

Dal momento che il Anteprima l'area è vuota, anche se fai clic sul pulsante di riproduzione sopra l'anteprima, non puoi vedere cosa sta succedendo.

Per vedere in anteprima la transizione su cui stai lavorando, basta selezionare il Drago oggetto del gioco dal Gerarchia scheda e trascinala sul Anteprima la zona. Ora puoi vedere il personaggio nell'anteprima e, se premi play, puoi vedere la transizione tra le due animazioni.

Nel Ispettore, l'area da cui cambia la banda blu Inattivo a Saltare è la nostra transizione:

Puoi modificare le transizioni trascinando le due frecce blu sulla timeline che limitano l'area di transizione. Cambiando la loro posizione, puoi rendere la transizione più veloce o più morbida.

La prossima cosa che devi fare è definire quando vuoi che questa transizione accada. Per fare ciò, crea un nuovo parametro cliccando sul + accedi parametri elenco.

Quindi, selezionare il Galleggiante opzione e chiamalo VerticalMovement:

Ora, torna al Ispettore, e sotto condizioni la variabile VerticalMovement apparirà. Selezionalo.

Hai appena definito la condizione per determinare quando cambiare lo stato nella macchina a stati: se il valore di VerticalMovement è più grande di 0, allora il personaggio inizierà il Saltare animazione. 

Vogliamo anche una transizione tra il Saltare animazione e il Autunno animazione:

Il valore massimo che VerticalMovement sta per raggiungere è 1, così, per la transizione tra Saltare e Autunno, possiamo attivarlo quando quel valore è inferiore a 0.5.

Ora dobbiamo far tornare il personaggio al Inattivo animazione dopo la caduta. Da Inattivo dovrebbe giocare quando il personaggio è sul pavimento, dovresti creare una transizione tra Autunno e Inattivo.

Per finire, devi assicurarti che si attivi quando il personaggio è a terra. Puoi farlo impostando il parametro di transizione di VerticalMovement a meno di 0.1-questo in pratica significa che il VerticalMovement è 0, il che significa che il personaggio è a terra.

Ora dobbiamo assicurarci di non vederne Inattivo animazioni mentre il personaggio è in aria tra il Saltare e Autunno animazioni. Per fare ciò, crea un nuovo parametro, questa volta a Bool.

Chiamalo A terra.

Seleziona la transizione tra Saltare e Autunno. Vuoi che questa transizione avvenga quando il personaggio è ancora nell'aria, giusto? Quindi vai al Ispettore, clicca il +, e aggiungi un nuovo parametro alla transizione. Fondamentalmente, vuoi che questo accada quando il valore di A terra è falso.

Successivamente, sulla transizione da Autunno a Inattivo, aggiungi il parametro A terra e impostare il valore su vero:

Il nostro lavoro con Mecanim è terminato. Ora è il momento di passare allo scripting.

Animazioni di script

Nella tua directory degli asset, crea una nuova cartella chiamata Script. Quindi, creare un nuovo script C # chiamato CharacterMove.cs. Si noti che lo script che si sta per creare è molto semplice, l'obiettivo principale è mostrare come è possibile modificare le animazioni del personaggio in base al codice. 

La migliore pratica è usare la fisica di Unity quando vuoi creare giochi robusti. Tuttavia, per ragioni di semplicità e comprensione, creeremo una piccola simulazione.

Crea quattro variabili nello script: una per fare riferimento a Animatore componente, un altro per la velocità della caduta, un terzo per la quantità di movimento verticale e una bandiera per verificare se il personaggio è a terra.

public class CharacterMove: MonoBehaviour // Variables public Animator anim; // Refrerence to the animator private float fallSpeed; // La velocità in cui il personaggio cade il movimento verticale verticalMovement; // La quantità di movimento verticale private bool onGround; // Flag per verificare se il personaggio è a terra

Nel Inizio() metodo, è necessario assicurarsi che la velocità sia impostata su 0.03 (o qualunque altro valore tu ritieni adatto alle tue animazioni) e che il personaggio sia radicato.

void Start () // Il personaggio inizia a terra onGround = true; // Imposta la velocità di caduta fallSpeed ​​= 0.03f; 

Ora, sul Aggiornare() metodo, ci sono molte cose che devi controllare. In primo luogo, è necessario rilevare quando il Barra spaziatrice viene premuto, per far saltare il personaggio. Quando viene premuto, imposta il movimento verticale su 1 e il a terra bandiera a falso.

void Update () // Se viene premuta la barra spaziatrice e il carattere si trova sul terreno se (Input.GetKeyDown (KeyCode.Space) == true && onGround == true) verticalMovement = 1f; onGround = falso; 

Cosa succede quando il Barra spaziatrice non viene premuto? Bene, devi controllare se il personaggio è nell'aria e il suo movimento verticale è maggiore di 0; se è così, è necessario ridurre il movimento verticale sottraendo la velocità di caduta.

void Update () // Se viene premuta la barra spaziatrice e il carattere si trova sul terreno se (Input.GetKeyDown (KeyCode.Space) == true && onGround == true) verticalMovement = 1f; onGround = falso;  else // Controlla se il personaggio è nell'aria e il movimento verticale maggiore di 0 se (onGround == false && verticalMovement> 0) // Riduci movimento verticale verticalMovement - = fallSpeed; 

Come ricorderai, una volta verticalMovement scende al di sotto 0.5, il Autunno l'animazione inizierà a giocare. 

Tuttavia, non vogliamo sottrarre fallSpeed a partire dal verticalMovement per sempre, dal momento che il personaggio atterrerà ad un certo punto. Se il valore di movimento verticale è uguale o inferiore a 0, diremo che significa che il personaggio ha colpito il terreno.

void Update () // Se viene premuta la barra spaziatrice e il carattere si trova sul terreno se (Input.GetKeyDown (KeyCode.Space) == true && onGround == true) verticalMovement = 1f; onGround = falso;  else // Controlla se il personaggio è nell'aria e il movimento verticale maggiore di 0 se (onGround == false && verticalMovement> 0) // Riduci movimento verticale verticalMovement - = fallSpeed ​​// Se il movimento verticale è minore o uguale a 0, il personaggio si trova sul pavimento se (verticalMovement < 0)  verticalMovement = 0; onGround = true;    

Per terminare il Aggiornare() metodo, è necessario passare i valori di verticalMovement e a terra al Animatore componente:

void Update () // Se viene premuta la barra spaziatrice e il carattere si trova sul terreno se (Input.GetKeyDown (KeyCode.Space) == true && onGround == true) verticalMovement = 1f; onGround = falso;  else // Controlla se il personaggio è nell'aria e il movimento verticale maggiore di 0 se (onGround == false && verticalMovement> 0) // Riduci movimento verticale verticalMovement - = fallSpeed; // Se il movimento verticale è minore o uguale a 0, il personaggio si trova sul pavimento se (verticalMovement < 0)  verticalMovement = 0; onGround = true;    // Update the animator variables anim.SetFloat("VerticalMovement", verticalMovement); anim.SetBool("OnGround", onGround); 

Lo script è finito. Ora devi aggiungerlo al Drago oggetto di gioco e aggiungere il riferimento al Animatore componente. Per fare ciò, una volta aggiunto lo script, trascina il Animatore nel campo corretto della sceneggiatura.

Se premi play e testalo, le animazioni dovrebbero cambiare come dovrebbero. Il drago inizia Inattivo, ma una volta premuto il tasto Barra spaziatrice lo farà Saltare e poi inizia a suonare il Autunno animazione prima di tornare a Inattivo.

Strumenti e tecnologie esterne

Anche se in questa serie di tutorial abbiamo utilizzato solo gli strumenti predefiniti forniti con Unity, ci sono un sacco di fantastici strumenti 2D su Unity Asset Store che possono aiutarti a rendere questo processo ancora più facile e veloce. Due buoni esempi sono Smooth Moves e Puppet 2D, ognuno dei quali può aiutarti a definire i personaggi, la gerarchia e le animazioni in modo intuitivo e semplice. 

Plug-in come questi offrono alcuni extra, come la possibilità di aggiungere "ossa" 2D, rendendo più semplice l'intero processo di animazione e le deformazioni più realistiche. Se la tua idea è di usare animazioni 2D con diversi gradi di dettaglio, ti consigliamo vivamente di controllare quei plugin.

Conclusione

Questo conclude la nostra serie di tutorial su come creare un'animazione 2D basata sull'osso con Unity. Abbiamo coperto molti aspetti di questa breve serie e ora dovresti sapere abbastanza per iniziare con le tue animazioni 2D. Se avete domande o commenti, come sempre, sentitevi liberi di mandarci una riga nei commenti.

Riferimenti

  • Foglio sprite del drago: usato con il permesso di Chenguang da DragonBonesTeam