Unitatea de animație bazată pe oase 2D Introducere

În acest tutorial, ne vom concentra pe instrumentele de animație 2D bazate pe os, furnizate de motorul Unity. Ideea principală este de a prezenta și de a preda fundamentele animației 2D pentru a le aplica la propriile jocuri. În acest post, vom configura proiectul, vom defini activele și vom face pregătirile inițiale pentru animație.

Înainte de a începe tutorialul, dorim să-i mulțumim lui Chenguang (DragonBonesTeam) că ne-a oferit arta jocului folosită pentru a produce această serie de tutori.

Cine este acest tutorial pentru?

Acest tutorial vizează în primul rând două grupuri de dezvoltatori de jocuri:

  • Cei care nu cunosc deloc Unitatea.
  • Cei care sunt familiarizați cu unitatea, dar nu cu motorul și uneltele Unity 2D.

Presupunem că aveți niște abilități de programare, deci nu vom acoperi codul în profunzime. Pentru a urma acest tutorial, va trebui, desigur, să descărcați Unity.

Pentru un început rapid folosind Unity, urmați tutorialul nostru anterior care vă introduce în mediul Unity 2D și în instrumentele și caracteristicile sale. Vă recomandăm cu insistență să faceți acest lucru dacă nu sunteți familiarizat cu Unitatea.

Vizualizare finală

Această demonstrație arată dragonul animat pe care îl urmărim:

Setarea proiectului

Lansați unitatea și creați un nou proiect selectând Proiect nou… de la Fişier meniul. Project Wizard va aparea. Acum, creați un nou 2D proiect, urmat de un nou dosar numit Sprites (în interiorul dvs. bunuri director). 

Acum, când aveți folderul proiectului organizat, este timpul să importați activele jocului. Puteți să le găsiți în dosarul Assets din repozitul GitHub al acestui tutorial. (Puteți să faceți clic pe Descărcați ZIP pe cea de-a doua pagină dacă nu sunteți familiarizat cu GitHub.) Rețineți că acest dosar include active pentru întreaga serie de tutorial, deci există unele pe care nu le veți folosi decât ulterior.

Animale osoase vs. Atlasuri Sprite

Înainte de a continua, comparați următoarele două imagini:

În prima imagine, balaurul este împărțit în mai multe părți ale corpului (cap, corp, brațe și așa mai departe). În al doilea rând, ninja este prezentată în mai multe poziții, cu o secvență de poziții pentru diferite acțiuni. Aceasta vă permite să vă imaginați în mod clar modul în care avionul se va mișca în joc.

Sprite-ul ninja este ceea ce noi numim a foaia de sprite sau Spiritele atlas. Acest tip de sprite a fost foarte popular pe jocurile clasice 2D și este încă foarte răspândit astăzi. 

Dragonul sprite necesită o tehnică mai recentă de animație 2D, numită în mod normal animație pe bază de oase. După cum sugerează și numele, animația va fi pe bază de oase, în care fiecare os din corp poate avea o acțiune sau o animație specifică. Având toate părțile principale ale corpului separat permite dezvoltatorilor să creeze animațiile direct în motor. Această tehnică nouă de animație este foarte asemănătoare cu cea utilizată în animația 3D.

În acest tutorial, ne vom concentra pe animația bazată pe oase. Cu toate acestea, rețineți că Unitatea nu face Adevărat animație pe bază de oase, așa că o vom simula.

Pregătirea Sprite pentru animație

Trageți fișierul sprite în editor și fixați-l pe Sprites dosar, după cum urmează:

Înainte ca orice personaj să fie pregătit pentru animație, trebuie să adăugați a Scenă la proiect. Creeaza o scene în dosarul dvs. bunuri director, apoi creați o nouă scenă și salvați-o ca Test.scene în acest dosar. La sfârșitul acestei etape, ar trebui să aveți ceva de genul:

Acum, încă în Proiect , selectați balaur sprite, apoi uita-te la Inspector panou:

După cum puteți vedea în Sprite Mode proprietate în Inspector, Sprite Mode este setat sa Singur. Acest lucru înseamnă că motorul va folosi întreaga textură în ansamblul său atunci când creează un nou sprite. Deoarece avem părțile corpului separate în balaur, nu vrem să se întâmple asta. Prin urmare, trebuie să schimbăm Sprite Mode din Singur la Multiplu

Când schimbați opțiunea, un nou buton etichetat Sprite Editor apare:

În prezent, Sprite Editor instrumentul de tăiere nu funcționează bine pe imaginile comprimate. Pentru a asigura cel mai bun rezultat pentru spritele animate, trebuie să schimbați Format în partea inferioară a paginii Inspector din fila implicită, comprimat, la Culoare adevarata. Apoi apasa aplica.

Acum, selectați sprite dragon și faceți clic pe Sprite Editor buton. O fereastră nouă va apărea:

În colțul din stânga sus al ferestrei, veți găsi Felie buton. Dați clic pe el și se va afișa un alt meniu:

Acest meniu vă permite să modificați parametrii modului în care sprite va fi tăiat de motor. Dacă setați felii la Automat, motorul va încerca să detecteze diferitele părți ale caracterului pe care îl aveți în imagine. Puteți defini o dimensiune minimă pentru felii, un pivot (punctul în jurul căruia se rotește felia) și una din cele trei metode:

  • Ștergeți existența va înlocui felii existente.
  • Inteligent va încerca să creeze noi felii în timp ce păstrează sau ajustează cele existente.
  • Sigur va adăuga noi felii fără modificarea celor existente.

De asemenea, puteți seta Tip parametru pentru Grilă. Acest lucru vă va oferi alte opțiuni:

Ca și în modul automat, puteți selecta punctul de pivotare al sprite, dar aveți de asemenea o opțiune pentru a defini dimensiunea pixelilor. Această valoare determină înălțimea și lățimea plăcilor în pixeli. 

Pentru această imagine particulară, selectați Automat și apăsați butonul Felie buton. Rezultatul ar trebui să fie similar cu acesta:

După cum puteți vedea, editorul a tăiat diferitele părți ale spritei în diferite dreptunghiuri. Acestea sunt părțile pe care le veți folosi pentru a vă construi caracterul. După cum sa menționat mai sus, aceasta nu va fi o animație osoasă perfectă, dar fiecare parte va fi animată separat.

Dacă faceți dublu clic pe unul din dreptunghiurile generate, se va deschide un panou pop-up cu proprietățile respectivei părți a spritei:

Puteți schimba numele sprite-ului generat, poziția, dimensiunea acestuia și punctul său de pivotare. De asemenea, puteți schimba valorile poziției și dimensiunii tragând punctele albastre de pe vârfurile dreptunghiurilor. Cercul albastru din centrul dreptunghiului selectat indică punctul de pivotare.

Pentru acest sprite, este în siguranță să lăsăm Unitatea să creeze automat spritele individuale. Cu toate acestea, în spritele mai complexe, este posibil să doriți să definiți spritele manual. Puteți face acest lucru dând clic și trasând butonul stâng al mouse-ului peste imagine pentru a defini un dreptunghi.

Odată ce eliberați butonul mouse-ului, Unity va crea un sprite din acel dreptunghi.

Puteți apăsa butonul Tunde pentru a regla dreptunghiul în sprite. Apoi repetați acest proces tuturor spritelor pe care doriți să le generați.

Deoarece modul automat funcționează bine pentru această imagine, nu este necesar să definiți spritele manual.

Ajustarea punctelor de pivotare

Următorul lucru pe care trebuie să-l faceți este să ajustați punctele de pivotare pe diferitele sprite generate. Acest pas este foarte important pentru animație. 

Practic, trebuie să trageți punctul de pivotare în zona în care sprite se va alătura părții corpului părinte. De exemplu, doriți să mutați pivotul capului în apropierea zonei gâtului. Acest lucru vă va asigura că, atunci când animați caracterul, toate mișcările, de exemplu rotațiile, se vor orienta în jurul acelui punct, permițând personajului să se miște într-un mod realist. Dacă ați lăsat punctele de pivotare în locurile lor originale, ați termina cu animații ciudate, deoarece personajul nu ar fi capabil să se miște într-un mod realist.

Gândiți-vă la punctele pivot ale membrilor ca articulații ale unei păpuși. Pentru ca papusa să se miște, articulațiile trebuie plasate corect, nu? Aceleași reguli se aplică și pentru punctele pivot.

Pentru a muta punctul de pivotare, glisați cercul albastru în centrul fiecărui sprite în locul corect (care este punctul în care ar trebui să se conecteze la partea părintelui corpului). În următoarea imagine puteți vedea pivotul capului în locul său corect:

Partea coada ar trebui să arate astfel:

Ai luat ideea? Grozav! Repetați procesul pentru piesele rămase. (Puteți lăsa pivotul pentru locul negru în centrul său, vom explica mai multe despre acest lucru în secțiunea următoare.) Amintiți-vă că doriți o animație dragon, nu o animație Frankenstein.

După ce ați terminat, faceți clic pe aplica:

Dacă veți arunca o privire rapidă asupra dosarului în care aveți spritele, veți putea vedea că sprite-ul dragonului are acum o săgeată de lângă el:

Apăsați pe săgeată și veți putea vedea separat toate părțile care conțin caracterul dragonului nostru:

Asamblarea caracterului

Acum, când personajul tău a fost tăiat în diferite sprite, poți să-i pui spritele în scenă. Deoarece balaurul este compus din mai multe părți ale corpului, trebuie să construiți caracterul. 

Primul lucru pe care trebuie să-l faceți este să trageți punctul negru al sprite-ului dragonului în scenă. Acest obiect va funcționa ca a centrul de masă pentru caracterul tău. Mai târziu, vă veți concentra atenția acolo; totuși, pentru moment, știți doar că aceasta este baza personajului tău.

Acum, luați corpul balaurului și puneți-l peste punctul negru, după cum urmează:

Repetați acest proces până când vă asamblați dragonul. Până la urmă ar trebui să arate ceva de genul:

În sfârșit, aveți pregătiți-vă dragonul - totuși, după cum puteți observa, pare ciudat. Unele părți care ar trebui să fie sub corp sunt peste ele sau invers. Acest lucru se întâmplă deoarece am adăugat părțile dragonului fără o comandă specifică. 

Înainte de a rezolva problema, să transformăm sprite-ul dragon într-un singur obiect de joc. După cum probabil ați observat, chiar acum câteva părți ale dragonului funcționează ca obiecte de joc individuale - trebuie să le grupați într-un singur obiect de joc înainte de a putea să le animați. 

Pentru a grupa corect toate spritele, utilizați sprite-ul cu punctul negru ca obiect principal al jocului; toate celelalte părți ale corpului ar trebui grupate sub masa de sprite. Doar trageți un sprite pe sprite punct negru în interiorul Ierarhie pentru al grupa sub punctul negru.

Pe următoarea imagine puteți vedea cum ar trebui să arate ierarhia sprite după ce ați grupat obiectele jocului.

Înainte de a vă deplasa, redenumiți obiectul de joc de bază balaur. Când mutați balaur obiect de joc, puteți muta acum toate părțile personajului de pe scena. 

Dar dacă vrei să muți doar un singur sprite? De exemplu, dacă doriți să mutați doar mâna, știți că brațul este conectat la mână, deci, dacă mutați-l, toată mîna trebuie să se miște, corectă? Dacă încercați să faceți acest lucru, veți vedea că nu este cazul. Când selectați brațul și mutați-l, părțile rămase ale corpului rămân în continuare. Deci, pentru a muta întreaga parte a corpului, trebuie să creați o ierarhie în sprite.

Pentru a face acest proces mai intuitiv, redenumiți părțile corpului (făcând clic dreapta și selectând Redenumiți) cu numele lor, cum ar fi:

În ceea ce privește ierarhia, gândiți-vă la caracterul de copac, cu rădăcini, trunchi și ramuri. Punctul negru acționează ca rădăcina copacului; atunci când o mutați, tot corpul caracterului se mișcă. După rădăcină vine trunchiul; în acest caz, trunchiul va fi corpul personajului, deci acesta va fi următorul sprite în ierarhie. Toate celelalte părți ale corpului sunt ramuri ale copacului. Cu toate acestea, puteți avea în continuare ramuri ale ramurilor, cum ar fi, de exemplu, în coadă - Sfat de coadă este o ramură a Coadă, si asa mai departe…

Organizați spritele personajului dvs. în urma acestei ierarhii:

Acum, dacă mișcați brațul, toate părțile brațului vor urma. Mare, nu-i așa??

Re-comandarea Sprites

Înainte de a putea începe animarea personajului, există încă un ultim detaliu pe care trebuie să-l ocupăm. Așa cum am discutat, părțile sprite nu sunt desenate în ordinea corectă. Pentru a rezolva acest lucru, trebuie să modificați valoarea Comandați în Layer parametru pentru fiecare sprite.

Pentru a vă asigura că tutorialul are succes, utilizați următoarele valori pentru fiecare Sprite:

  • balaur: 0
  • Corp: 3
  • Cap: 4
  • Piciorul stâng: 4
  • Stânga braț superior: 5
  • Bratul stang: 4
  • Mâna stângă: 5
  • Piciorul drept: 1
  • Brațul superior superior: 2
  • Bratul drept: 1
  • Mana dreapta: 2
  • Coadă: 4
  • Sfat de coadă: 5

Până la urmă, dragonul tău ar trebui să arate așa:

Pentru a termina această parte, doar centrează personajul pe ecran. Faceți acest lucru schimbând Transforma valorile poziției centrale la (0, 0, 0).

Data viitoare

Aceasta incheie prima parte a seriei. Acum aveți un caracter 2D cu ordinea corectă și ierarhia corectă.

Dacă aveți întrebări sau feedback despre ceea ce am acoperit până acum, vă rugăm să lăsați un comentariu mai jos.

Referințe

  • Dragon Sprite foaie: folosit cu permisiunea de la Chenguang de la DragonBonesTeam
  • Japoneză ninja / Shinobi foaie sprite de la 36peas.