Share
In questo tutorial, ci concentreremo 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 post, imposteremo il progetto, definiremo le risorse e faremo i preparativi iniziali per l'animazione.
Prima di iniziare il tutorial, vorremmo ringraziare Chenguang (DragonBonesTeam) per averci fornito l'arte del gioco usata per produrre questa serie di tutorial.
Questo tutorial è principalmente rivolto a due gruppi di sviluppatori di giochi:
Supponiamo che tu abbia alcune capacità di programmazione, quindi non approfondiremo il codice in modo approfondito. Per seguire questo tutorial, dovrai ovviamente scaricare Unity.
Per iniziare rapidamente con Unity, segui il nostro precedente tutorial che ti introduce all'ambiente Unity 2D e ai suoi strumenti e caratteristiche. Ti consigliamo vivamente di farlo se non hai familiarità con Unity.
Questa demo mostra il drago animato a cui miriamo:
Avvia Unity e crea un nuovo progetto selezionando Nuovo progetto… dal File menu. Il Progetto guidato apparirà. Ora crea un nuovo 2D progetto, seguito da una nuova cartella chiamata sprites (dentro il tuo Risorse directory).
Ora che hai organizzato la cartella del progetto, è tempo di importare le risorse di gioco. Puoi trovarli nella cartella Risorse del repository GitHub di questo tutorial. (Puoi semplicemente fare clic Scarica ZIP su quest'ultima pagina se non hai familiarità con GitHub.) Nota che questa cartella include risorse per l'intera serie di tutorial, quindi ci sono alcune che non userai più tardi.
Prima di proseguire, confronta le seguenti due immagini:
Nella prima immagine, il drago è diviso in diverse parti del corpo (testa, corpo, braccia e così via). Nel secondo, il ninja viene mostrato in diverse pose, con una sequenza di pose per azioni diverse. Questo ti consente di immaginare chiaramente come si muoverà l'avatar nel tuo gioco.
Lo sprite ninja è ciò che chiamiamo a foglio sprite o atlante dello sprite. Questo tipo di sprite era molto popolare nei classici giochi 2D ed è ancora molto diffuso oggi.
Lo sprite del drago richiede una tecnica di animazione 2D più recente, normalmente chiamata animazione a base di ossa. Come suggerisce il nome, l'animazione sarà su base ossea, in cui ogni osso del corpo può avere un'azione o un'animazione specifica. Separare tutte le parti principali del corpo del personaggio consente agli sviluppatori di creare le animazioni direttamente nel motore. Questa nuova tecnica di animazione è molto simile a quella utilizzata nell'animazione 3D.
In questo tutorial, ci concentreremo sull'animazione basata sull'osso. Tuttavia, nota che Unity non funziona vero animazione a base di ossa, quindi la simuleremo.
Trascina il file sprite sull'editor e rilasciatelo sul sprites cartella, in questo modo:
Prima che qualsiasi personaggio sia pronto per l'animazione, devi aggiungere un Scena al progetto. Creare un scene cartella nel tuo Risorse directory, quindi creare una nuova scena e salvarla come Test.scene all'interno di questa cartella. Alla fine di questo passaggio, dovresti avere qualcosa di simile a questo:
Ora, ancora nel Progetto scheda, selezionare il Drago sprite, quindi guarda il Ispettore pannello:
Come puoi vedere nel Modalità Sprite proprietà nel Ispettore, il Modalità Sprite è impostato per singolo. Ciò significa che il motore utilizzerà l'intera trama nel suo complesso quando si crea un nuovo sprite. Dal momento che abbiamo le parti del corpo separate nel Drago, non vogliamo che ciò accada. Abbiamo quindi bisogno di cambiare il Modalità Sprite a partire dal singolo a multiplo.
Quando si modifica l'opzione, viene visualizzato un nuovo pulsante Sprite Editor appare:
Attualmente, il Sprite Editor lo strumento slicing non funziona bene su immagini compresse. Al fine di garantire il miglior risultato per gli sprite animati, è necessario modificare il Formato valore sul fondo del Ispettore scheda dall'opzione predefinita, compressa, a Colore vero. Quindi, fare clic Applicare.
Ora seleziona lo sprite del drago e clicca il Sprite Editor pulsante. Verrà visualizzata una nuova finestra:
Nell'angolo in alto a sinistra della finestra, troverai il Fetta pulsante. Fare clic su di esso e verrà visualizzato un altro menu:
Questo menu consente di modificare i parametri di come lo sprite verrà affettato dal motore. Se imposti le fette Automatico, il motore cercherà di rilevare le diverse parti del personaggio che hai nell'immagine. È possibile definire una dimensione minima per le fette, un pivot (il punto attorno al quale ruota la sezione) e uno dei tre metodi:
Puoi anche impostare il genere parametro a Griglia. Questo ti darà altre opzioni:
Come nella modalità automatica, puoi selezionare il punto di pivot dello sprite, ma hai anche un'opzione per definire la dimensione dei pixel. Questo valore determina l'altezza e la larghezza delle tessere in pixel.
Per questa particolare immagine, seleziona il Automatico modalità e premere il tasto Fetta pulsante. Il risultato dovrebbe essere simile a questo:
Come puoi vedere, l'editor ha suddiviso le varie parti dello sprite in diversi rettangoli. Queste sono le parti che userete per costruire il tuo personaggio. Come accennato in precedenza, questa non sarà un'animazione ossea perfetta ma ogni parte sarà animata separatamente.
Se fai doppio clic su uno dei rettangoli generati, si aprirà un pannello pop-up con le proprietà di quella particolare parte dello sprite:
È possibile modificare il nome dello sprite generato, la sua posizione, la sua dimensione e il suo punto di rotazione. Puoi anche modificare i valori di posizione e dimensione trascinando i punti blu sui vertici dei rettangoli. Il cerchio blu al centro del rettangolo selezionato indica il punto di rotazione.
Per questo sprite, è sicuro lasciare che Unity crei automaticamente i singoli sprite. Tuttavia, negli sprite più complessi potresti voler definire manualmente gli sprite. Puoi farlo cliccando e trascinando il tasto sinistro del mouse sull'immagine per definire un rettangolo.
Una volta rilasciato il pulsante del mouse, Unity creerà uno sprite da quel rettangolo.
È possibile premere il tagliare pulsante per regolare il rettangolo sullo sprite. Quindi, ripeti questo processo con tutti gli sprite che vuoi generare.
Poiché la modalità automatica funziona correttamente per questa immagine, non è necessario definire manualmente gli sprite.
La prossima cosa da fare è regolare i punti di rotazione sui vari sprite generati. Questo passaggio è molto importante per l'animazione.
Fondamentalmente, è necessario trascinare il punto di rotazione sull'area in cui lo sprite si unirà alla parte del corpo genitore. Ad esempio, si desidera spostare il perno della testa vicino all'area del collo. Ciò assicurerà che, quando animerai il personaggio, tutti i movimenti, ad esempio le rotazioni, si orienteranno intorno a quel punto, permettendo al personaggio di muoversi in modo realistico. Se hai lasciato i punti di rotazione nelle loro posizioni originali, ti ritroverebbero con strane animazioni, poiché il personaggio non sarebbe in grado di muoversi in modo realistico.
Pensa ai punti di perno dei membri come alle articolazioni di una bambola. Affinché la bambola si muova, le articolazioni devono essere posizionate correttamente, giusto? Le stesse regole si applicano ai punti di rotazione.
Per spostare il punto di rotazione, trascinare il cerchio blu al centro di ciascun sprite nel punto corretto (che è il punto in cui dovrebbe connettersi alla parte del corpo genitore). Nell'immagine seguente è possibile vedere il perno della testa nella sua posizione corretta:
La parte della coda dovrebbe apparire così:
Hai avuto l'idea? Grande! Ripeti il processo per le parti restanti. (Puoi lasciare il perno per il punto nero nel suo centro, spiegheremo di più su questo nella prossima sezione.) Ricorda, vuoi un'animazione di drago, non un'animazione di Frankenstein.
Al termine, fai clic su Applicare:
Se dai una rapida occhiata alla cartella in cui hai gli sprite, sarai in grado di vedere che lo sprite del drago ora ha una freccia accanto ad esso:
Premi la freccia e sarai in grado di vedere tutte le parti che compongono il nostro personaggio del drago separatamente:
Ora che hai il tuo personaggio affettato in diversi sprite, puoi iniziare a posizionare gli sprite nella scena. Poiché il drago è composto da diverse parti del corpo, è necessario costruire il personaggio.
La prima cosa da fare è trascinare il punto nero dello sprite del drago sulla scena. Questo oggetto funzionerà come un centro di Massa per il tuo personaggio. Più tardi, concentrerai la tua attenzione lì; tuttavia, per ora, sappi solo che questa è la base per il tuo personaggio.
Ora prendi il corpo del drago e posizionalo sopra il punto nero, in questo modo:
Ripeti questo processo fino a quando non avrai assemblato il tuo drago. Alla fine dovrebbe assomigliare a questo:
Hai finalmente pronto il tuo drago, tuttavia, come puoi notare, sembra strano. Alcune parti che dovrebbero essere sotto il corpo sono sopra di esso, o viceversa. Ciò accade perché abbiamo aggiunto le parti del drago senza alcun ordine specifico.
Prima di risolvere il problema, trasformiamo lo sprite del drago in un singolo oggetto di gioco. Come avrai notato, in questo momento le diverse parti del drago funzionano come oggetti di gioco individuali: devi raggrupparli in un singolo oggetto di gioco prima di poterli animare.
Per raggruppare correttamente tutti gli sprite, usa lo sprite con il punto nero come oggetto principale del gioco; tutte le altre parti del corpo dovrebbero essere raggruppate sotto la massa dello sprite. Basta trascinare uno sprite sul punto nero sprite all'interno del Gerarchia per raggrupparlo sotto il punto nero.
Nell'immagine successiva puoi vedere come dovrebbe apparire la gerarchia dello sprite dopo aver raggruppato gli oggetti del gioco.
Prima di proseguire, rinomina il tuo oggetto di gioco base in Drago. Quando muovi il Drago oggetto del gioco, ora puoi spostare tutte le parti del personaggio sulla scena.
Ma cosa succede se si desidera spostare solo un singolo sprite? Ad esempio, se vuoi muovere solo la mano, sai che il braccio è collegato alla mano, quindi, se lo muovi, anche tutta la mano dovrebbe muoversi, giusto? Se provi a farlo, vedrai che non è il caso. Quando si seleziona il braccio e lo si sposta, le parti rimanenti del corpo rimangono ferme. Quindi, per spostare la parte completa del corpo, devi creare una gerarchia all'interno del tuo sprite.
Per rendere questo processo più intuitivo, rinominare le parti del corpo (facendo clic con il pulsante destro del mouse e selezionando) Rinominare) con i rispettivi nomi, in questo modo:
Per quanto riguarda la gerarchia, pensa al personaggio come a un albero, con radici, un tronco e rami. Il punto nero agisce come la radice dell'albero; quando lo sposti, tutto il corpo del personaggio si muove. Dopo la radice arriva il tronco; in questo caso, il tuo tronco sarà il corpo del personaggio, quindi questo sarà il prossimo folletto nella gerarchia. Tutte le altre parti del corpo sono rami dell'albero. Tuttavia, puoi ancora avere rami di rami come, ad esempio, nella coda-il Punta di coda è un ramo del Coda, e così via…
Organizza gli sprite del tuo personaggio seguendo questa gerarchia:
Ora, se muovi la parte superiore del braccio, seguiranno tutte le parti del braccio. Grande, non è vero??
Prima di poter iniziare a animare il personaggio, c'è ancora un ultimo dettaglio di cui dobbiamo occuparci. Come discusso, le parti sprite non vengono disegnate nell'ordine corretto. Per risolvere questo, è necessario modificare il valore del Ordine nel livello parametro per ogni singolo sprite.
Per essere sicuro che il tutorial abbia successo, usa i seguenti valori per ogni Sprite:
Accentsconagua
0 3 4 4 5 4 5 1 2 1 2 4 5 Alla fine, il tuo drago dovrebbe assomigliare a questo:
Per finire questa parte, basta centrare il tuo personaggio sullo schermo. Fai questo cambiando il Trasformare valori della posizione centrale a (0, 0, 0).
Questo conclude la prima parte della serie. Ora hai un carattere 2D con l'ordine e la gerarchia degli sprite corretti.
Se hai domande o commenti su ciò che abbiamo trattato finora, sentiti libero di lasciare un commento qui sotto.
