Share
I denne opplæringen vil vi fokusere på de benbaserte 2D-animasjonsverktøyene som leveres av Unity-motoren. Hovedidéen er å presentere og undervise grunnleggende 2D animasjon, slik at du kan bruke den til dine egne spill. I dette innlegget vil vi sette opp prosjektet, definere eiendelene og gjøre de første forberedelsene til animasjonen.
Før vi starter opplæringen, vil vi gjerne takke Chenguang (DragonBonesTeam) for å gi oss spillkunst som brukes til å produsere denne opplæringsserien.
Denne opplæringen er primært rettet mot to grupper av spillutviklere:
Vi antar at du har noen programmeringsferdigheter, så vi vil ikke dekke koden i dybden. For å følge denne opplæringen må du selvsagt laste ned Unity.
For en rask start med Unity, følg vår tidligere veiledning som introduserer deg til Unity 2D miljøet og dets verktøy og egenskaper. Vi anbefaler på det sterkeste at du gjør dette hvis du ikke er kjent med Unity.
Denne demonstrasjonen viser den animerte dragen vi sikter på:
Start enhet og opprett et nytt prosjekt ved å velge Nytt prosjekt… fra Fil Meny. De Prosjektveiviseren vil dukke opp. Nå, opprett en ny 2D prosjekt, etterfulgt av en ny mappe som heter sprites (inne i din Eiendeler katalog).
Nå som du har prosjektmappen organisert, er det på tide å importere spillets eiendeler. Du finner dem i Assets-mappen i denne opplæringen GitHub repo. (Du kan bare klikke Last ned ZIP på den sistnevnte siden hvis du ikke er kjent med GitHub.) Merk at denne mappen inneholder ressurser for hele opplæringsserien, så det er noen som du ikke vil bruke til senere.
Før du går videre, kan du sammenligne følgende to bilder:
I det første bildet er dragen delt inn i flere kroppsdeler (hode, kropp, armer og så videre). I det andre er ninjaen vist i flere stillinger, med en sekvens av poser for forskjellige handlinger. Dette lar deg tydelig forestille deg hvordan avataren vil flytte i spillet ditt.
Ninja sprite er det vi kaller a sprite ark eller sprite atlas. Denne typen sprite var veldig populær på de klassiske 2D-spillene, og det er fortsatt veldig vanlig i dag.
Dragon-sprite krever en nyere 2D-animasjonsteknikk, vanligvis kalt beinbasert animasjon. Som navnet antyder, vil animasjonen ligge på ben, hvor hvert legeme kan ha en bestemt handling eller animasjon. Å ha alle hoveddelene av karakteren skilt, gjør at utviklerne kan lage animasjonene direkte i motoren. Denne nye animasjonsteknikken ligner veldig på det som brukes i 3D-animasjon.
I denne opplæringen skal vi fokusere på beinbasert animasjon. Vær imidlertid oppmerksom på at Unity ikke gjør det ekte beinbasert animasjon, så vi vil simulere det.
Dra sprite-filen til editoren og slipp den på sprites mappe, slik som:
Før et tegn er klart for animasjon, må du legge til en scene til prosjektet. Lage en scener mappe i din Eiendeler katalog, og opprett en ny scene og lagre den som Test.scene i denne mappen. På slutten av dette trinnet bør du ha noe slikt:
Nå, fortsatt i Prosjekt fanen, velg drage Sprite, så se på Inspektør panel:
Som du kan se i Sprite Mode eiendom i Inspektør, de Sprite Mode er satt til Enkelt. Dette betyr at motoren vil bruke hele tekstur som helhet når du oppretter en ny sprite. Siden vi har kroppsdelene skilt i drage, Vi vil ikke at det skal skje. Vi må derfor endre Sprite Mode fra Enkelt til multiple.
Når du endrer alternativet, merkes en ny knapp Sprite Editor vises:
For tiden er det Sprite Editor snittverktøy virker ikke bra på komprimerte bilder. For å sikre det beste resultatet for de animerte sprites, må du endre Format verdi på bunnen av Inspektør fanen fra standardalternativet, komprimert, til Ekte farge. Deretter klikker du Søke om.
Nå, velg drage sprite og klikk på Sprite Editor knapp. Et nytt vindu vil dukke opp:
I øverste venstre hjørne av vinduet finner du Skjære knapp. Klikk på den, og en annen meny vil dukke opp:
Denne menyen lar deg endre parametrene for hvordan sprite blir skåret av motoren. Hvis du setter skivene til Automatisk, Motoren vil prøve å oppdage de forskjellige delene av tegnet du har i bildet. Du kan definere en minimumsstørrelse for skiver, en sving (det punktet rundt hvilket skiven roterer) og en av tre metoder:
Du kan også stille inn Type parameter til Nett. Dette vil gi deg andre alternativer:
Som i automatisk modus kan du velge spidens pivotpunkt, men du har også mulighet til å definere pixelstørrelsen. Denne verdien bestemmer høyden og bredden på flisene i piksler.
For dette bestemte bildet, velg Automatisk modus og trykk på Skjære knapp. Resultatet skal likne dette:
Som du ser, redigerer redaktøren de forskjellige delene av sprite i forskjellige rektangler. Dette er de delene du skal bruke til å bygge din karakter. Som nevnt ovenfor vil dette ikke være en perfekt bein animasjon, men hver del vil bli animert separat.
Hvis du dobbeltklikker i en av de genererte rektanglene, åpnes et popup-panel med egenskapene til den aktuelle delen av sprite:
Du kan endre navnet på det genererte spritet, dets posisjon, dets størrelse og dets pivotpunkt. Du kan også endre posisjons- og størrelsesverdiene ved å dra de blå punktene på rektangulens hjørner. Den blå sirkelen i midten av det valgte rektangel angir dreiepunktet.
For denne sprite er det trygt å la Unity lage de individuelle sprites automatisk. Men i mer komplekse sprites kan du kanskje definere sprites manuelt. Du kan gjøre dette ved å klikke og dra venstre museknapp over bildet for å definere et rektangel.
Når du slipper museknappen, vil Unity opprette en sprite fra det rektangel.
Du kan trykke på trim knappen for å justere rektangelet til sprite. Så gjenta denne prosessen til alle sprites du vil generere.
Siden automatisk modus fungerer bra for dette bildet, trenger du ikke å definere sprites manuelt.
Den neste tingen å gjøre er å justere dreiepunktene på de forskjellige genererte sprites. Dette trinnet er veldig viktig for animasjonen.
I utgangspunktet må du dra pivotpunktet til området der sprite vil bli med i overordnet kroppsdel. For eksempel vil du flytte hodens pivot nær halsområdet. Dette vil sørge for at når du animerer tegnet, vil alle bevegelser, for eksempel rotasjonene, orientere seg rundt det punktet, slik at tegnet kan bevege seg på en realistisk måte. Hvis du forlot pivotpunktene i sine opprinnelige steder, vil du ende opp med merkelige animasjoner, siden karakteren ikke ville kunne bevege seg på en realistisk måte.
Tenk på svingpunktene til medlemmene som leddene til en dukke. For at dukken skal bevege seg, må leddene være riktig plassert, ikke sant? De samme regler gjelder for svingpunkter.
For å flytte pivotpunktet, dra den blå sirkelen midt på hver sprite til riktig sted (som er punktet der den skal koble til overordnet kroppsdel). I det følgende bildet kan du se hodepivot på riktig sted:
Hale delen skal se slik ut:
Fikk du ideen? Flott! Gjenta prosessen for de resterende delene. (Du kan forlate svingpunktet i senteret, vi vil forklare mer om dette i neste avsnitt.) Husk at du vil ha en drageanimasjon, ikke en Frankenstein-animasjon.
Når du er ferdig, klikk Søke om:
Hvis du tar en rask titt på mappen hvor du har sprites, vil du kunne se at drakenspriten nå har en pil ved siden av den:
Trykk på pilen, og du vil kunne se alle delene som består av vår dragen karakter separat:
Nå som du har karakteren din skåret inn i forskjellige sprites, kan du begynne å sette sprites inn i scenen. Siden dragen består av flere kroppsdeler, må du bygge tegnet.
Den første tingen å gjøre er å dra den sorte prikken til drakenspriten til scenen. Dette objektet vil fungere som en sentrum av massen for din karakter. Senere vil du fokusere oppmerksomheten der; Men for nå, bare vet at dette er grunnlaget for din karakter.
Ta nå dragen av dragen og legg den over den svarte prikken, slik som:
Gjenta denne prosessen til du har samlet din drage. På slutten bør det se slik ut:
Du har endelig din drage klar - men som du kanskje merker, ser det rart ut. Noen deler som skal være under kroppen er over det, eller omvendt. Det skjer fordi vi har lagt til dragondelene uten noen bestemt ordre.
Før vi løser det problemet, la oss slå drage sprite til et enkelt spillobjekt. Som du kanskje har lagt merke til, akkurat nå fungerer de forskjellige delene av dragen som individuelle spillobjekter - du må gruppere dem i et enkelt spillobjekt før du kan begynne å animere dem.
For å kunne gruppere alle sprites riktig, bruk sprite med den svarte prikken som hovedspillobjektet; alle de andre kroppsdelene skal grupperes under spritmassen. Bare dra en sprite til den svarte prikken i hierarki å gruppere den under den svarte prikken.
På neste bilde kan du se hvordan spritehierarkiet skal se ut etter at du har gruppert spillobjektene.
Før du går videre, endre navn på ditt base spillobjekt til Drage. Når du flytter Drage spillobjekt, kan du nå flytte alle delene av tegnet på scenen.
Men hva om du vil flytte bare en enkelt sprite? For eksempel, hvis du vil flytte bare hånden, vet du at armen er koblet til hånden, så hvis du flytter den, bør hele hånden bevege deg også, riktig? Hvis du prøver å gjøre dette, vil du se at det ikke er tilfelle. Når du velger armen og beveger den, forblir de resterende delene av kroppen stille. Så, for å flytte hele kroppen, må du opprette et hierarki inne i sprite.
For å gjøre denne prosessen mer intuitiv, endre navn på kroppsdelene (ved å høyreklikke og velge Gi nytt navn) med deres respektive navn, slik som:
Når det gjelder hierarkiet, tenk på tegnet som et tre med røtter, en koffert og grener. Den svarte prikken virker som roten av treet; Når du beveger den, beveger hele karakterkroppen seg. Etter roten kommer stammen; i dette tilfellet vil kofferten din være karossen av karakteren, så dette vil bli neste sprite i hierarkiet. Alle de andre kroppsdelene er grener av treet. Du kan imidlertid fortsatt ha grener av grener som for eksempel i halen Hale tips er en gren av Hale, og så videre…
Organiser sprites av karakteren din etter dette hierarkiet:
Nå, hvis du beveger overarmen, følger alle armene. Flott, er det ikke?
Før du kan begynne å animere tegnet, er det fortsatt en siste detalj vi må ta vare på. Som vi diskuterte, blir ikke sprite-delene trukket i riktig rekkefølge. For å løse dette må du endre verdien av Bestille i lag parameter for hvert enkelt sprite.
For å være sikker på at opplæringen er vellykket, bruk følgende verdier for hver Sprite:
Accentsconagua
0 3 4 4 5 4 5 1 2 1 2 4 5 Til slutt skal draken din se ut slik:
For å fullføre denne delen, bare senter din karakter til skjermen. Gjør dette ved å endre Forvandle verdier av senterposisjon til (0, 0, 0).
Dette avsluttes første del av serien. Du har nå et 2D-tegn med riktig ordreordre og hierarki.
Hvis du har spørsmål eller tilbakemelding på hva vi har dekket så langt, vær så snill å legge igjen en kommentar nedenfor.
