Spine primjeri

Spine ide puno dalje od granica tradicionalne 2D animacije. Navedeni primjeri ilistriraju samo neke od načina na koji umjetnici, animatori i programeri mogu iskoristiti snagu poboljšanog tijeka rada i kapaciteta kojima Spine omogućava stvaranje nevjerojatnih igrica.

Svi navedeni primjeri su live primjeri, koji koriste naš spine-ts runtime za WebGL. Otkrijte kako smo koristili Spine Runtime u primjerima otkrivajući source code svakog primjera.

Spine versus sprite sheets

Spine
All animations, all frame rates
0.18 MB
Sprite sheet
1 second of animation @ 30FPS
3.39 MB = 18x larger!

Tradicionalna sprite animacija zahtjeva sliku za svaki okvir animacije, što rezultira velikim sprite sheetom. Svaka dodatna animacija znatno povećava zauzetost mjesta na disku i memorijske zahtjeve, pogotovo pri broju okvira potrebnim za glatku reprodukciju. To vrlo lako postane veliki posao za vaše umjetnike i završni projekt pati kada broj animacija mora biti smanjen kako bi se udovoljilo ograničenjima veličine.

Spine animacija pohranjuje samo kosti i animacijske podatke, uparenim sa jednim setom individualnih slika koji se ponovno koriste za svaku animaciju. Ovo omogućava da se igre ožive pakirajući ih u cijelosti u jedinstvenu animaciju. Također, Spine animaciju su interpolirane pa je reprodukcija uvijek savršeno glatka, bez obzira na broj okvira/frameova.

Usporedi memoriju i zahtjeve memorijskog diska Spinea prema sprite sheet animacijama.

Brzina animacije
 

Spine s animacijom temeljenom na frameovima/okvirima.

Dok Spine uvelike zamjenjuje potrebu za tradicionalanom okvir-za okvirom animacijom, slike se po potrebi još uvijek mogu zamijeniti. Na primjer, promjena perspektive za torzo ili klepetajuća krila, alternativni izrazi lica ili odbljesak pucnja iz puške.

Spine otvori, dodaci, redoslijed crtanja omogućavaju laku integraciju animacije okvir po okvir u vaše inače potpuno dinamične Spine animacije. Štoviše, Spine može manipulirati okvir-po-okvir slikama, prikazanim u ovom primjeru u mjerilu eksplodirajuće glave vanzemaljca.

Prijelazi i slojevitost

Smooth
Abrupt

Česti nedostatak 2D igrica je pomanjkanje glatkih animacijskih prijelaza. U 3D igricama, prijelazi između animacija mogu biti izračunati u hodu u runtimeu. Animacije mogu biti stopljene na primjer polu hodanje i polu trčanje. U 2D igricama bez Spinea, stapljanje je nemoguće i uglavnom je neskladno. Umjetnici mogu ručno stvoriti okvire za svaki mogući prijelaz, ali čak niti to ne pomaže kada je animacija prekinuta u pola reprodukcije.

Spine donosi prednosti 3D svijeta natrag u 2D. Spine runtimeovi glatko i dinamično prelaze iz jedne animacije u drugu, omogućujući liku prirodni izgled kretanja. Slojevitost omogućuje animacijama da se stope jedna povrh druge, na primjer reproducirajući animaciju pucanjave dok lik trči ili stapanje hodanja i šepanja sve više i više nakon ranjavanja.

Brzina animacije
 

Mesh deformacije

Spine lik napravljen od krutih 2D slika već može dati izvrsne rezultate, kao što pokazuje Spineboy u primjeru iznad. Da biste bolje oživjeli svoj lik, Sppine donosi više trikova iz 3D svijeta u formi mesheva i utega. S meshevima, likovi više nisu kruti i mogu se savijati i deformirati kako želite. Utezi povezuju mesheve i kosti, pa su slike deformirane automatski kako se kosti pomiču.

Meshevi isto poboljšavaju izvođenje igre smanjujući stopu korištenja ne iscrtavajući druge prozirne dijelove vaše slike. To je posebno važno kod mobilnih uređaja.

Nevjerojatna umjetnosti za ovaj prmjer ljubazno je omogućio Hwadock (a.k.a. dugy). Follow him on Twitter i njegov blog.

Pokaži kosti
Prikaži trokute

Skinovi

Spine skin značajka je idealna za prilagođavanje i različite varijante istovremeno zadržavajući razumni radni kapacitet. Sa skinovima, animiranje treba biti izvedeno samo jednom, a zatim se dodaju različiti izgledi vašim kosturima, dok se animacije ponovno koriste. Za krajnju fleksibilnost vaših animacija, Spine runtimeovi vam dozvoljavaju kombiniranje dijelova različitih skinova, pokrivajući sve potrebno za vaše prilagodbe.

Skinovi daju igračima mogućnost da dodaju svoj pečat vašim svjetovima igara na način da daju avatarima novi izgled, odjeću, oružje i ostale dodatke. Skinovi vam isto tako daju više za vaše animacije: mix and match umjetnost za neprijatelje, predmete i ostale igraće objekte koji prilično povećavaju varijante s vrlo malo truda.

Umjetnost za ovaj primjer može se naći na 2D Anim Heroes paket likova za Unity.

Nasumični skin

Inverse kinematics

Spineova podrška za inverse kinematics omogućava realističan i dinamičan pokret koji bi inače bilo teško ili nemoguće animirati. Isto tako omobućava naprednije rigging gdje komplicirane poze mogu biti lakše kontrolirane s manjim brojem kostiju.

S obzirom da Spine ne koristi "baking" niti "plotting", IK dolazi do punog izražaja u runtimeu. Dinamičnim pozicioniranjem kostiju u runtimeu, IK constraints omogućavaju vašem liku da jednostavno reagira u okruženju, kao što su ciljanje u neprijatelja, da stopala prate udubine i izbočine na terenu i još puno više. U ovom primjeru Spineboy je balansiran na korisničkom hoverboardu dok se animacija istovremeno reproducira.

Isprobajte! Povucite crveni krug okolo kako biste dinamično pozicionirali Spineboya. Tipke za pucanje i skakanje i ciljanje checkbox sloja animacije povrh animacije u praznom hodu.

Ciljanje
Pokaži kosti

Additive animation blending

When playing animations on separate tracks, normally the pose from lower tracks is overridden by higher tracks. With an additive track, its pose is added to the result of the lower tracks. This enables blending the poses from multiple independent animations with varying influences, such as different facial expressions like 50% happy, 20% mad, and 30% excited.

The owl in this demo has 4 animations, one for each direction. The independent poses of each of these animations are blended together depending on the mouse cursor's position relative to the center of the canvas.

Krivulja ograničenja

Lik često prati otvorenu ili zatvorenu krivulju. Radije nego ručno označavanje ovog pokreta, Spine krivulja se može koristiti tako da kosti automatski prate krivulju. Složena Bézier krivulja je napravljea od niza mešu povezanih točaka koji omogućavaju savijanje i oblikovanje krivulje. Sama krivulja može se animirati i biti dodana kao uteg kostima, pa se krivulja automatski deformira kako se kosti pomiču.

U ovom primjeru mreža loze je ograničena kostima koji su ograničeni krivuljom. Što je više vrhunac u mreži, to će se ona glađe savijati.

Krivulje ograničenja se isto tako mogu koristiti za velike efekte u runtimeu. Pomaknite crvenu polugu za dinamično modificiranje krivulje i gledajte kako ga loza neprimjetno prati.

Prikaži kosti & krivulje

Krivulje ograničenja omogućavaju snažni "rigging" efekt, koji pokazuje Stretchyman u ovom primjeru. Za noge i ruke, mreže su otežane za puno malih kostiju koje su onda ograničene kako bi slijedile jednostavnu krivulju udova. Ova postavka omogućava da se veliki broj kostiju kontrolira s tek nekoliko kostiju. Ne samo da ovo olakšava animaciju, nego u runutimu treba samo podesiti nekoliko kosti za dinamičnu pozu.

Pomaknite crvene poluge i npravite da Stretchyman pleše!

Prikaži kosti & krivulje

Izrezivanje

Ponekad dijelovi krivulje moraju biti djelomično skriveni, kao u ovom primjeru gdje Spineboy izlazi iz portala. Izrezivanje je praktično u takvim slučajevima gdje se ograničuje renderiranje na poligonalne dijelove. Samo dijelovi unutranjeg kostura su ponovno definirani, a dijelovi za animiranje su prikazani. Ovo omogućuje mnoge efekte koji inače nebi bili mogući poput prozora, svjetlosnih efekata i više. Isto tako, moguće je napraviti da izrezivanje ima utjecaj samo na jedan dio kostura. Na primjer, animacija gdje lik prolazi kroz rentgen uređaj.

Prikaži trokute

Transformiraj ograničenja

Animiranje složenih kostura s puno ovisnih dijelova može biti naporno. Spineova transformirajuća ograničenja uklanjaju taj problem otključavajući puno snažniji rigging. Ograničavanjem transformiranja kostiju u transformaciju u drugu kost, samo trebate animirati jednu od kostiju, a ostale će se automatski prilagoditi. Naizgled jednostavno na površini, napredni rigging može poslužiti u tome kako se automatizirani kostur ponaša u trenu dok je postavljen.

Transformirajuća ograničenja su također sjajna za mašineriju, kao što je tenk u ovom videu. Umjesto označavanja/keyeing rotacije svakog pojedinačnog kotača, jedan kotač je animiran dok ostali slijede putem transformirajućih ograničenja. Offsetting i mixing cmogu dodati individualnost natrag ograničenim dijelovima.

Utori na gumama na tenku su u pogonu, jer koriste krivulje ograničenja, što bi bilo nemoguće animirati bez krivulja. Krivulje su otežane na gume, pa se krivulja automatski savija kako se kotači pomiču gore dolje.

Prikaži kosti & krivulje

U ovom primjeru, toracija dvaju manjih kotača je ograničeno rotacijom velikog kotača. Isto tako, prijenos velikog kotača je ograničeno tako da ostaje između dva manja kotača.

Rotacijski offset
 
Miks prijenosa