Kreiranje pikseliziranog animiranog sprite-a u Photoshopu. Adobe Photoshop: Nacrtajte i animirajte lik pomoću Pixel Art-a

Dio 8: Konačno crtanje sprite-a

Dakle, sada kada ste pročitali prethodna poglavlja, napravili sopstvena zapažanja i došli do sopstvenih zaključaka o tome kako funkcionišu sprijtovi i sve to (ako niste uradili ništa na ovoj listi, onda sustignite, jer će to učiniti život vam je lakši kada dođe vreme da crtate sopstvene duhove)... Generalno, ovo vreme je došlo. Analizirat ćemo nekoliko stilova i, za početak, uzeti klasični i najrašireniji igranje uloga stil Final Fantasy 2. Čak i ako niste zainteresovani za pravljenje malih 16x16 sprijtova i želite da naučite kako da kreirate samo velike, biće vam korisno da pročitate ovaj tekst do kraja... Dok radite male projekte, možete naučiti mnogo korisnih stvari koje će vam dobro doći pri stvaranju velikih remek-djela. Učite u svakoj situaciji. Od uvodnih riječi, prijeđimo na FF2 sprite:

Prva stvar koju treba znati o FF2 sprijtovima je da koriste posebnu oznaku... Iznad teksta vidite kvadrat 16x16... Postoje obojene smjernice duž lijeve strane. U FF2 spriteu, struku se daju tri piksela (donja narandžasta linija), torzo - deo tela od vrata do struka - takođe uzima tri piksela (žuta linija), glava dobija celih 10 piksela (gore narandžasta linija). Kada govore o duhovima, poznati ljudi često pominju skraćenicu "SD"... Izraz SD je skraćenica za "Super Deformed" ("Strongly Deformed") i koristi se u animeima da opiše scene u kojima je lik, prethodno uobičajeno nacrtan. , smanjen je i izgleda kao lutka, a glava mu je iste veličine kao i ostatak tijela... Ovaj pristup je korišten u FF2 i u mnogim ranim RPG-ovima, jer su skoro svi kreirani u Japanu, a SD je tehnika iz japanskog animea, plus, ovaj stil je dobar za izražavanje emocija lika. Na Zapadu, mi naginjemo "realističnim" likovima sa malim glavama i dobro proporcionalnim tijelima. Međutim, u starim danima, vjerodostojnost se morala žrtvovati, jer bi na dodijeljenom prostoru od 16x16 realistična glava zauzimala dva piksela široka i četiri piksela visoka... Možda je ovo proporcionalno, ali izgleda loše - dobijaju se bezlični likovi , a lice je u ovom slučaju veoma važno, jer se igrač više identifikuje po svom licu nego po drugim znacima. Velike glave su bile toliko raširene jer imaju prostora za izražavanje osjećaja... Likovi velikih glava mogu klimati glavom, odmahivati ​​glavom s jedne strane na drugu, treptati od iznenađenja, raširiti oči od užasa, zatvarati oči, zijevati, vrištati itd. . Postaju "živi", pa samim tim i zanimljiviji... Na maloj "realističkoj" glavi možete promijeniti boje i sjene samo u šest piksela, a od toga nema nikakve koristi. Proporcionalno je crtanje likova na velikim sprijtovima (kao, na primjer, u igri Phantasy Star IV). Dakle, razumete zašto je SD stil trajao toliko dugo, heh... Međutim, ovo je samo moja spekulacija, možda grešim.

Počnimo sa osnovnom glavom. Ovo je piksel po piksel obris glave FF2 sprite-a... Mnogi umjetnici, kada im treba puno sprijtova u istom stilu, nacrtaju "model" tipičnog lika, koji zatim modificiraju za svaki lik. Ovo je zaista DOBRA IDEJA ako morate napraviti gomilu likova (npr. gradske NPC-ove)... Samo se pobrinite da ima dovoljno ličnosti u svakom duhu, izbjegavajte jednostavne promjene boja kao u Mortal Combat, na primjer heh... Dakle, osnovna glava: dva piksela između oči, i same su visoke dva piksela, između njih i ivica glave postoji razmak od jednog piksela, isti razmak do vilice. Zajedno izgledaju proporcionalno. Štaviše, još nije zauzet sav dodijeljeni prostor... Ostavljeno je dosta prostora za kosu, pošto su i one bitne, heh... Torzoi 16x16 sprijtova visine zauzimaju samo šest piksela i razlikuju se samo jedan od drugog u bojama i par piksela. Zbog toga, radi bolje vizuelne identifikacije, likovi dobijaju veoma različite frizure. Kosa može biti svašta - kratka, duga, sa razdjeljkom sa strane ili u sredini, vezana u rep, upletena, skupljena u punđu, može biti potpuno odsutna ili čak strši sa šiljcima, itd... Ovo je dobar način za razlikovanje karaktera, tako da kosa dobije puno prostora na figuri. Ako prebojite spriteove crnom bojom, odnosno ostavite siluete likova, moći ćete ih manje-više pouzdano razlikovati samo po obliku frizure. Idemo dalje - primijetite da se vilica spušta do kraja narandžaste linije?

Sada dodajmo tijelo... Navukao sam jednu šaku ispred, a drugu iza. U starijim igrama, spriteovi su se stalno prebacivali iz okvira gdje je lijeva noga ispred, u okvir gdje je desna noga ispred, i obrnuto... To je bio način da se riješimo trećeg "stajanja" okvir "noge zajedno, ruke po šavovima." Uzeo sam kadar u kojem se lik nalazi u sredini koraka - želim napomenuti neke suptilnosti trenutne poze. Prvo, nisam razdvajao ruku i tijelo. Bilo bi moguće (usput rečeno, ispalo bi kao neka vrsta prsluka), ali ja to nisam učinio ... Neka to bude običan lik u pantalonama i majici. Kao što se sjećate, žuta linija definira udaljenost od dna vilice do struka, tako da ćete imati dva piksela za grudi, drugi piksel će zauzeti liniju struka (osim kod haljine ili neuvučene majice itd. .) ... Spomenuo sam liniju, jer, gle, ramena su otišla dalje od narandžastog separatora. To je zato što naš pogled na svijet nije ni direktan frontalni pogled ni pogled odozgo. Imamo pogled odozgo prema dolje (ovaj termin se često koristi kada se opisuje igre poput Final Fantasy). Gledate dole pod uglom od oko 45 stepeni, tako da možete da vidite prednji deo i vrh zgrada (ugao od 45 stepeni se obično koristi u izometrijskim igrama kao što je Diablo, gde su šabloni raspoređeni dijagonalno umesto uobičajenih gornjih). Mnogi ljudi ne shvaćaju da to znači "izometrijski" (na ovaj koncept ste naišli na časovima crtanja, heh), pa kada razgovarate o FF stilu, itd. kažu "od vrha do dna" umjesto "45 stupnjeva "... Zbunjeni? Heheh...). Pošto smo u pogledu odozgo prema dolje, možemo vidjeti vrh ramena lika malo "iza" njegove glave... Zamislite obicna osoba koju gledate od vrha do dna. Što je viša visina sa koje ga gledate, to više područja ramena vidite i što dalje idu iza glave. Mnogi ljudi griješe crtajući likove u frontalnom prikazu za mape odozgo prema dolje... Da budem iskren, ne morate previše brinuti o prikazima... Biće dobro... Ali u ovim vremenima, treba obratiti više pažnje na takve tačke. Još u slavnim danima NES-a, programeri su se toliko petljali sa perspektivom da danas to izgleda smešno. U to vrijeme to nije bilo bitno zbog generalne nerazvijenosti grafike, ljudi su bili više zainteresirani za gameplay. Kad budete imali vremena, pogledajte mapu tamnice u Zeldi za igru ​​NES... Soba je napravljena sa pogledom pravo odozgo, heroj Link je nacrtan u pogledu odozgo prema dolje, a kipovi i ostalo okruženje su izvedeni frontalno, heh...

Sada su tu noge. Opet, izgleda da su u položaju hodanja, a ne u normalnom položaju... Želim da pokažem par tačaka... Nisam nacrtao crnu liniju duž dna stopala, jer mi treba donji deo red piksela koji predstavlja nogu, a vaše oko povlači iluzornu liniju ispod stopala od lijevog crnog piksela na desno (ovo već znate ako ste pročitali prethodno poglavlje... ako ne, onda pročitajte). Desna noga tipa (ona ispred) ne ide pravo dole, nego pod uglom... Ovo je za animaciju. Kada bi noge išle pravo dole kada su bile ispred tela, a bile ispravljene kada su bile pozadi, onda bi cela stvar izgledala kao da lik naizmenično gazi levom i desnom nogom umesto da hoda. Malo savijajući nogu, dajemo joj više prirodan izgled dok hodate. Noga koja je ostala iza je samo red piksela. Sad liči na nekakav panj... Pokazaćemo da je to zadnja noga kad dođemo do cvijeća. Takođe obratite pažnju da struk NIJE ravan, da je zaobljen i da noge ulaze u žuti razdelnik, spajajući se sa njim. To je također zbog pogleda odozgo prema dolje. Horizontalna linija struka je velika greška... Zbog toga lik postaje "tvrd" i izgleda nekako kartonski. Lagana zakrivljenost linije daje volumen cijelom obrisu, kao da gledamo u cilindar (zamislite trodimenzionalnu sliku).

Konačno, ima kosu. Vjerovatno ćete većinu vremena provoditi na njima... Jedan piksel može pokvariti ili poboljšati vašu frizuru, a vjerovatno ćete žonglirati s pikselima cijelo vrijeme pokušavajući da dobijete dobre obrise. Kosa našeg čovjeka je začešljana na jednu stranu. Dodao sam piksel koji nedostaje na vrhu za sliku razdjeljka, samo radi primjera, hehe... Primijetite da mu kosa ne prelazi preko lica punom crnom linijom... Da je linija puna, glava i kosa bi se previše odvojili (i izgledali bi nešto kao tijelo i noge), pa bi trebalo da koristite razdvajanje boja. Dodala sam malo crne ispod opuštenih dijelova kose jer sam htjela pokazati da visi, a ne zalizana gelom ili tako nečim. Glavna linija kose se proteže jednako daleko od očiju kao i vilica, sa jednim redom piksela između njih. Ovo nije neophodno jer će različiti likovi imati različite frizure, ovo je samo primjer, za početak. Verovatno ćete morati da poradite na kosi sa glavnom bojom i crnom istovremeno da shvatite gde crni pikseli nisu potrebni za razdvajanje... Pa, ja sam već nacrtao svojih milion sprajtova, uspevam da ih sakupim mentalno, heheh ... Ovaj tip ima kosu ravno do vrha sprite-a, drugi mogu biti drugačiji. Na primjer, kod niskih ljudi ili kod djece, kao i kod ćelavih ljudi, jer je sama glava na udaljenosti od jednog ili dva piksela od kose. Naravno, kada crtate djecu ili kratke, morat ćete eksperimentirati s proporcijama i, na primjer, uzeti ne šest, već samo četiri piksela po tijelu.

Ispunio sam sprite čvrstim bojama (bez senki). Uzmite u obzir njegovu kosu, majicu i čizme. Frizuru sam napravila crveno-smeđom kako bih istakla čelo sa desne strane, a kako na toj strani ispod kose nema crne, čini se da su ovi pramenovi bliže glavi nego čuperak sa druge strane. Ostavila sam i prazan piksel gdje se crna linija lomi zbog razdjeljka... Kad bih tu stavio tačku iste boje kao kosa, izgledalo bi da na vrhu glave viri čuperak... A crni piksel na ovom mestu bi učinio da je frizura previše glatka, a samo praznina stvara efekat pojedinačnih pramenova. Jedan piksel može napraviti veliku razliku u tome kako se sprite percipira. Njegova majica liči na majicu bez rukava... Da biste napravili prsluk, možete dodati crni obris, a da biste je pretvorili u običnu majicu potrebno je da stavite bijeli piksel na rame pored ostatak bijele mase. Ovaj pojedinačni piksel formira "rukav" na ruci. Za duge rukave, moram cijelu ruku ofarbati bijelom bojom osim posljednjeg piksela. Kasnije ću pokazati gomilu takvih čipova.

Sada dodajmo nijanse boja i dobijemo gotov sprite. Kada bacate senke, pokušajte da svetlost dolazi iz jedne tačke... Sada je izvor svetlosti u gornjem desnom uglu, tako da su se senke pojavile na levom i donjem delu sprite-a. Ovako opušten način je vrlo popularan među masama: lijeva i desna strana su zasjenjene, dok je srednji dio lijevo svjetlo... Ispada da se izvor svjetlosti nalazi tačno u centru. U principu, ovo je podnošljivo, ali sprite postaje malo dosadan, jer nema "desno i lijevo", postoji samo "centar"... Teško je objasniti, vjerovatno, stvar je u tome da su simetrični sprajtovi manje zanimljivo... Sa senčenjem na jednoj strani sprite ima dobro definisanu desnu i lijevu stranu. Međutim, ne postoji čvrsto pravilo koliko tamna treba da bude senka. Birajte dok ne izgleda dobro. Ipak, treba imati na umu nekoliko stvari... Ako imate jake izvore svjetlosti (na primjer, radnja se odvija usred dana, lik stoji pored vatre, itd.), sjene će biti vrlo tamna, u jakom kontrastu sa normalnim bojama. Ako je svjetlo slabo (unutar kuće, noću, itd.), bit će manji kontrast. Ne kažem da će vam nužno trebati različito osvjetljenje na sprijtovima ovisno o lokaciji, samo imajte na umu kakvi mogu biti efekti sjenčanja. Još jedan trik koji treba zapamtiti je da zaškiljite i gledate u duh: ako je nemoguće razlikovati svijetlu nijansu od tamne, možda će vam trebati više kontrasta za njih. Zašto nanositi ove sjene ako je razlika neprimjetna? Ovo se posebno odnosi na upotrebu žuta boja... Može biti teško uočiti razliku ako na nekom mjestu dodate malo tuposti. Lice, najvažniji deo lika, pokazuje osećanja i obično nema mnogo kontrasta sa ostatkom sprajta... Ako je kontrast veliki, srajt će se raspasti u obojene delove, što smeta oku . Međutim, pri crtanju takvih stvari nema uzorka. Zadrži ono što izgleda dobro. U nekim igrama lica su bila iste boje, pa su se detalji (oči, heh) dobro isticali. Napravio sam kožu našeg spritea dosta kontrastnom, i to je malo zbunjujuće. Hajde da pogledamo dno. Stražnja strana noge je potpuno tamna i stopalo se ne vidi. Donji crni obris pomaže da se još više pomakne... Ova linija bi mogla biti tamno smeđa, tada bi se činilo da podiže nogu. Bliža noga MORA dobiti više svjetla tako da izgleda kao da je noga ispred tijela. Njegova cipela je odvojena samo bojom, pogledajte i ruke... Da bi nam ruka izgledala bliže, dodat je samo jedan piksel senke... Što je više senke na nečem, to je dalje od nas... Zasjenila sam tamne boje cijelu površinu druge ruke kako bi je udaljila. Međutim, na šaci je manje senke, pa se čini da je ostatak ruke iza nje, što je dobro. Kao što sam rekao, jedan piksel može mnogo da se promeni, a sada ćemo videti ovo:

Vjerovatno razmišljate "Šta do...?" Na prvi pogled, svi ovi sprajtovi su slični... Ali imaju jednu razliku u pikselu... Pogledajte prednju pesnicu. I pokazaću vam šta jedna patetična tačka može da uradi... Osnovna pesnica na prvoj slici je samo krug, bez piksela u uglu. Kao rezultat toga, on izgleda kao neka vrsta nježne šake, poput osobe s malim rukama. Ne možete dobro opisati ove šake, kako god da ih zavrtite, one se neće promijeniti. U drugom slučaju je ugaoni piksel dole levo... Sada se čini da je pesnica pritisnuta uz nogu. Možda tip gazi, ili se penje po kamenju, ili tako nešto, sve je to zbog šake nadole... U trećem spriteu, ugaoni piksel je u gornjem levom uglu. Sada pokazuje na lice, inače, prstom, a ne laktom, jer je donji desni ugao zaobljen. Ispostavilo se da on pokazuje: "Ko, ja?" Četvrti sprajt ima piksel u gornjem desnom uglu, a pokret ruke pokazuje: "Pa probaj da me uhvatiš!"... Lakat se ne vidi, a prsti su blago usmereni prema glavi. To je kao da sam radi aperkat... ili psuje igrača, heh. Zadnji sprite ima piksel u donjem desnom kutu, koji izgleda kao lakat jer je to njegov prirodni položaj (u trećem spriteu ne možete zamijeniti taj piksel za lakat, jer bi bilo vrlo čudno vidjeti lakat tamo, pa naš mozak to uzima za prste) ... Sad izgleda kao da radi aperkat prema sebi. Možda je to početak pokreta "zmajevog udara" ili tako nešto, heheh. I čini se da samo JEDAN piksel.

Ovdje sam radio sa dva piksela... U prvom slučaju je ravna strana okrenuta prema unutra. Dva piksela su učinila šaku mnogo ravnijom, kao da njome nekoga šamara... Pa, izgleda kao da čvrsto stišće šaku. U prvom spriteu, šaka je pritisnuta prema unutra i izgleda sasvim normalno. Ali zamislite da drži nešto što liči na vazu - želi svima pokazati svoju snagu. I tako pomera piksele nagore... Sada je ravna strana na vrhu, kao da balansira lonac ili lampu na njoj. U trećem slučaju, ravne strane su sa strane, što izgleda kao... ne baš dobro. Huh... jedini način da se objasni ovaj položaj šake je ako ima nešto poput oklopne četvrtaste rukavice na ruci, to bi se onda moglo pokazati bojom... Ovaj drugi ima ravan dio na dnu, mogao bi igrati košarku ovom rukom ili udariti nekoga. A najzanimljivije je da su to samo DVA piksela, hehe... A sad da probamo sa tri:

Efekat tri piksela se razlikuje od efekta dva. Ovo trojstvo dodaje "težinu" pesnici... Jedan piksel stvara delikatnu pesnicu, dok tri čine nešto poput teške pesnice, poput ogra ili debelog kovača. U ovim duhovima, šake izgledaju isto kao i prethodne, samo što su sada dijelovi velikih mišićavih ruku spremnih da nešto zgnječe. Posljednji sprite, koji ima sva četiri ugla ispunjena pikselima, izgleda kao da nas pogađa. Pogledajmo sada na brzinu drugu ruku:

Proučimo ruku povučenu unazad. Na prvom spriteu nema piksele u uglu, a izgleda kao pipak ili tako nešto... Kao da je ruka opuštena, tako nešto... Visi tamo, kao nekakav rep. Na drugoj slici šaka je usmjerena prema tijelu, kao da je lik napeo mišiće i napravio neku vrstu polukruga od svoje ruke. Treći sprite ima piksel sa vanjske strane, zbog čega izgleda da je ruka malo pomjerena u stranu, za razliku od prethodne slike, gdje se ruka osjećala bliže tijelu. Čovjek na drugom sprite-u izgleda kao čvrst momak koji mlatara naprijed-nazad, a na trećem izgleda kao trkač sa rukama u odgovarajućem položaju. Lik u zadnjem sprite-u ima ravnu liniju na dnu šake kao da ponovo igra košarku, ili ima pištolj u ruci, ili je dio njegovog oklopa, ili samo ima veliku šaku, itd... Pogledajte još dva za drugog spritea:

Momak lijevo je okretan i brz, a ruke mu nisu toliko opterećene težinom šaka... Momak desno je moćniji, jer ima teške četvrtaste šake. Sada bi trebalo da shvatite značenje mog izraza "Jedan piksel može mnogo da promeni"... Ovo mi je najzanimljivije kada radim sa ovakvim malim srajtovima. Žongliranje piksela da vidite kako će se izraz lica, držanje ili pokret promijeniti sa samo jednim ili dva piksela. Nekoliko piksela može stvoriti vilu ili - s jednakim uspjehom - ogra. Ovih nekoliko tačaka razlike čine vaše sprijtove zanimljivijima i oživljavaju ih. Stoga, počevši od osnovnog "modela", zatim ga prilagodite kako biste dobili drugačiji rezultat. vizuelna percepcija karakter. Na primjer, eksperimentirao sam samo sa šakama, ali možete raditi s pojedinačnim pikselima na drugim dijelovima, posebno na izrazu lica. Probajte, odaberite šta će najbolje izgledati na spriteu. Vježbajte, heh... Vježbajte puno i kako treba, uskoro će ova vještina postati prirodna.

Dakle, imamo osnovni karakter karaktera, i ako naš heroj nije paralizovan i ima um, onda želi da se kreće i izvodi neke radnje u isto vreme.... Može jednostavno da šeta gradom gde god mu oči pogledaju, ponavljajući: "Dobrodošli u (grad takav i takav)!", heh. Dakle, potreban nam je drugi okvir za hodanje... Lako je za napraviti. Na lijevoj strani je naš prethodni sprite, au srednjem sprite-u sam uzeo komadić do kraja žute linije i okrenuo ga u horizontalnoj ravni. Vidite kako je lako? Naravno, postojao je problem sa inverznim osvetljenjem, jer se ispostavilo da sunce skače sa jedne strane neba na drugu. Ovo vjerovatno nije baš dobro, pa ćemo prilagoditi boje senki tako da osvjetljenje bude isto kao u prvom kadru. Sada imamo dva okvira za ovog mališana i možemo ga vidjeti animirano:

Ovo je jednostavna animacija hodanja u dva okvira. Ako izrezujete male sprijtove za malu rezoluciju, tada bi dva okvira mogla biti dovoljna za postizanje željenog efekta. U ranim Final Fantasies (na Game Boyu), likovi su se stalno prebacivali između svoja dva okvira, čak i kada su stajali na mjestu. Recimo da ne želite ovo... Želite da lik prestane da animira kada igrač ne pritisne nijedan taster. Pa, možete zaustaviti likove nakon što se prestanu kretati u položaju jedne noge naprijed ili nazad. Ako ne izgledaju napeto, to je u redu. Ali odjednom su vam potrebni uspravni likovi?

Da bih dobio ovaj snimak, jednostavno sam preuredio jednog od šetača tako što sam im skupio noge i savijao ruke sa strane. Ruke će izgledati opuštenije ako im se da "izbočenje"... Da su ostala tri vertikalna piksela, izgledao bi kao vojnik koji stoji na oprezu u redovima. Prilikom kreiranja stojećeg okvira za ove male sprajtove 16x16, postoji problem sa dvostrukim stupcem... Morate odabrati gdje će pikseli odvojiti noge. Napravio sam iste sjene na nogama (ona dva horizontalna piksela) kako bi noge izgledale točno ispod tijela. Da nema niti jednog svjetlosnog piksela na lijevoj nozi, činilo bi se da je malo iza desne. A da ih je puno, noga bi opet krenula naprijed, ali već naprijed. Sada imamo "stojeći" okvir, možemo ga koristiti kada igrač ništa ne radi. Postoji i druga upotreba za ovaj okvir... Možete ga dodati svojoj animaciji hodanja:

Dio 3. Gradijent je zao

Dio 8. Konačno crtanje sprite-a

Uvodni govor:

Pozdrav dragi korisnici stranice portala! U ovom članku ću vam reći kako nacrtati svoj sprite i napraviti animaciju za njega XNA GameStudio, kao i upoznati vas sa kretanjem sprite-a u dvodimenzionalnom prostoru. Sav kod ispod je testiran i radi dobro u verziji 3.1 . Ali, trebalo bi da radi i u drugim verzijama ( 3.0 i 4.0 ; na račun 2.0 nisam siguran). Prije nego što se upoznate s ovom lekcijom, preporučujem da je pročitate, jer je ova lekcija njen nastavak, što znači da će vam trebati znanje koje ste dobili iz prvog članka.

Također, prije čitanja ove lekcije, morate imati osnovno znanje programskog jezika. C#, i imaju program Microsoft Visual C# Express verzija koja vam je potrebna (za XNA 3.1 - Microsoft Visual C# Express 2008, i za XNA 4. 0 - Microsoft Visual C# Express 2010) sa instaliranom bibliotekom XNA GameStudio.

Dakle, ako imate sve gore navedeno, onda hajde da počnemo!

Dio 1. Crtanje sprite-a.

malo teorije:

Prvo, hajde da shvatimo šta je sprite. Sprite je određeni objekt (slika) u 2D igrici. Vaš lik, protivnik, obično drvo ili platforma - sve su to duhovi. Čak će i pozadina koju smo nacrtali u prethodnom članku biti neka vrsta duha.

Odnosno, kao što ste vjerovatno pretpostavili, princip crtanja sprite-a će biti sličan principu crtanja pozadine. Ali, u ovom članku ćemo poboljšati renderiranje sprite-ova i kreirati nova klasa.

Ali, postoji još jedan važna tačka, što bih želio razmotriti u ovom dijelu članka. Za svaki sprite ćemo postaviti poziciju na ekranu monitora. Da biste to učinili, postoje dva načina (iako ih može biti više, ali najčešće se koriste samo dva). Možete jednostavno odrediti poziciju gornjeg lijevog ugla sprite-a ili možete nacrtati pravougaonik koji pokriva cijeli sprite i postaviti njegove koordinate. One. tako da gde god da se pravougaonik pomeri, duh će ga pratiti.
Svaka od metoda ima svoje prednosti i nedostatke. Određivanje položaja ugla sprite-a je lakše, ali je navođenje pravougaonika praktičnije. U članku ćemo govoriti o ova dva načina postavljanja koordinata. Za početak ćemo se pozabaviti jednostavnijom metodom (postavljanje koordinata ugla spritea), a zatim ćemo prijeći na složeniju metodu (kreiranje pravokutnika).

Pa počnimo!

Kreiranje klase za crtanje spritea:

Prvo, krenimo novi projekat(kako to učiniti je detaljno opisano u mom prethodnom članku) i nazovite ga DrawSprite.

Sada desnom tipkom miša kliknite naziv projekta (u Solution Exploreru) i odaberite naredbu: Dodaj -> Kreiraj element -> Klasa:

Nazovimo to sprites:

Jednom kreirana, naša klasa izgleda ovako:

200?"200px":""+(this.scrollHeight+5)+"px");">koristeći sistem;
koristeći System.Linq;
koristeći System.Text;

Imenski prostor DrawSprite
{
klasa Sprites
{
}
}

Kao što razumete, ovo je najstandardnija klasa za projekat u programskom jeziku. C#, tj. imenskih prostora XNA nema. Pošto ih se ne sećam napamet (a verovatno ih nijedan programer ne pamti sve), dodaćemo ih "kako budemo napredovali". Na primjer, kreirali smo varijablu za teksturu ( Texture2D, ako se neko ne sjeća), a kompajler javlja da nedostaje jedan imenski prostor (upisuje i njegovo ime). Tada ga dodajemo.

Dakle, sada se prisjetimo kako smo dodali našu pozadinu igri.

Kreirali smo varijable za teksture, učitali same teksture u metodu LoadContent() i nacrtao ih u metodi crtanje(). Odnosno, da kreiramo zasebnu klasu i nacrtamo duh u njoj (tačnije, obradimo duh u njoj, a mi ćemo ga nacrtati u Game1), trebamo kreirati varijablu u njemu (u našoj novoj klasi), kreirati metodu za učitavanje tekstura (poput metode LoadContent()) i kreirajte metodu za crtanje tekstura (poput metode crtanje()).

Sada možemo početi uređivati ​​naš novi razred. Kao što znate, sav kod klase je napisan u bloku (između vitičastih zagrada) klase. pa odmah nakon:

200?"200px":""+(this.scrollHeight+5)+"px");">klasa Sprites
{

napišimo:

200?"200px":""+(this.scrollHeight+5)+"px");">Texture2D

Kao što vidite, ako stavite kursor na " Texture2D“, tada je zadnji znak podvučen:

U našem slučaju to znači da nema dovoljno prostora imena. Pritisnite kombinaciju tastera " Alt+Shift+F10 i izaberite prvu. Biće dodato:

Ako je sve urađeno kako treba, na vrhu ekrana će se pojaviti sljedeća poruka:

200?"200px":""+(this.scrollHeight+5)+"px");">

ALI " Texture2D» će promijeniti svoju boju.

Pa da nastavimo. Zamijeni " Texture2D" na:

200?"200px":""+(this.scrollHeight+5)+"px");">

Sada napravimo konstruktor. Sada nam ne treba, ostavimo ga praznim:

200?"200px":""+(this.scrollHeight+5)+"px");">public Sprites()
{

Varijabla je kreirana, konstruktor je spreman. Sada idemo na postavljanje slike. Kreirajmo metodu LoadContent() odmah nakon konstruktora. U njegove parametre morate upisati dva objekta. Jedan objekat će biti klase content manager(usput, ovdje nedostaje i prostor imena, dodajmo ga), i druga klasa String. Prvi će nam omogućiti da pozovemo metodu opterećenje, da učitate sliku, a drugi će vam omogućiti da postavite putanju do ove slike. I tako, metoda izgleda ovako LoadContent():

200?"200px":""+(this.scrollHeight+5)+"px");">
{
spriteTexture = Content.Load (tekstura);
}

Kao što vidite, sprite se učitava na isti način kao i pozadina. Samo, sada u nastavi Game1 Potrebno je samo da unesete reč sadržaja i put do teksture. Ostalo je već napisano.

Dakle, idemo sada na sljedeći (i konačni) metod − crtanje(). Jedini parametar koji treba da prođe je spriteBatch. Sada ostaje samo da nacrtamo sprite na način koji znamo (baš kao što smo nacrtali pozadinu). Jedina stvar je da ovdje ne morate pozivati ​​metode. spriteBatch.Begin() i spriteBatch.End(), jer kako ne bismo pozivali ove metode za svaki sprite posebno, pozvaćemo ih jednom (u klasi Game1). I tako, ovako izgleda naša metoda crtanje():

200?"200px":""+(this.scrollHeight+5)+"px");">
{
spriteBatch.Draw(spriteTexture, Color.White);
}

Kao što vidite, drugi argument (posle spriteTexture) nismo snimali. Ovo je učinjeno jer još nismo postavili koordinate.
I tako, sada prelazimo na problem koji sam opisao na početku. Sada ćemo koristiti jednostavan način i postaviti koordinate gornjeg lijevog ugla sprite-a. Da biste to učinili, odmah nakon linije

200?"200px":""+(this.scrollHeight+5)+"px");">javna Texture2D spriteTexture;

(na samom početku časa)

Hajde da napišemo " Vector2” i dodajte potreban prostor imena. Pišemo i naziv pozicije:

200?"200px":""+(this.scrollHeight+5)+"px");">

A sada u metodi crtanje() Hajde da napišemo drugi argument.

Ovako metoda sada izgleda crtanje():

200?"200px":""+(this.scrollHeight+5)+"px");">public void Draw(SpriteBatch spriteBatch)
{
}

A ovako izgleda naš čas:

200?"200px":""+(this.scrollHeight+5)+"px");">koristeći sistem;
koristeći System.Collections.Generic;
koristeći System.Linq;
koristeći System.Text;
koristeći Microsoft.Xna.Framework.Graphics;
koristeći Microsoft.Xna.Framework.Content;
koristeći Microsoft.Xna.Framework;

Imenski prostor DrawSprite
{
klasa Sprites
{
public Texture2D spriteTexture;
public Vector2 spritePosition;

Javni sprijtovi()
{

Public void LoadContent (ContentManager Content, String texture)
{
spriteTexture = Content.Load (tekstura);
}

Public void Draw (SpriteBatch spriteBatch)
{
spriteBatch.Draw(spriteTexture, spritePosition, Color.White);
}
}
}

Uređivanje klase Game1:

Pa sada uredimo klasu Game1 prema klasi sprites.

Prvo, kreirajmo objekt klase sprites. Nazovimo to heroj.

200?"200px":""+(this.scrollHeight+5)+"px");">Sprite heroj;

Sada u konstruktoru Game1 inicijalizirati objekt:

200?"200px":""+(this.scrollHeight+5)+"px");">hero = new Sprites();

Nakon toga u metodu LoadContent() hajde da postavimo sliku. pre-folder sadržaja kreirajte folder Teksture i dodajte mu sliku svog heroja (sve je to opisano u mom prvom članku) (ja sam ga nazvao idle). I tako, u metodi LoadContent() pisati:

200?"200px":""+(this.scrollHeight+5)+"px");">hero.LoadContent(Content, "Textures//idle");

Stoga smo metodu nazvali " LoadContent“ iz razreda sprites i dodajte mu argumente.

Pa, na cilju smo. Ostaje prijeći na metodu crtanje() i pozovi tamo spriteBatch.Begin(), hero.Draw i spriteBatch.End(). Kao što ste razumeli hero.Draw zvaćemo iz razreda sprites, tj. potreban je samo jedan argument - spriteBatch(ostalo je napisano u razredu sprites). Ovako izgleda metoda crtanje() klasa Game1:

Sada počnimo igru F5) i vidimo šta ćemo dobiti. Imam ovu sliku:

Sve radi dobro, ali ovaj kod treba doraditi. Pošto nismo eksplicitno naveli koordinate, kompajler je postavio podrazumevane koordinate za gornji lijevi ugao sprite-a. A ove standardne koordinate su nula. Zašto je duh nacrtan na vrhu, pitate se? Sve je vrlo jednostavno. Uostalom, u kompjuterskoj grafici koordinate su obrnute. A ako u matematici koordinatna ravan izgleda ovako:

Zatim se na ekranu monitora, kao što rekoh, invertiraju koordinate, tj. koordinatni sistem nastaje u gornjem lijevom uglu:

To znači da su koordinate ( 0, 0 ) (uključeno X i Y) će biti u gornjem lijevom uglu.

Sada promijenimo naš kod i zapišemo naše koordinate. Svaka podjela koordinatne skale jednaka je jednom pikselu. Odnosno, ako imate veličinu ekrana 600x600 piksela zatim tačka 300x300će biti sredina vašeg ekrana.

Dakle, nacrtajmo našeg sprite-a u sredini ekrana. Prvo, promijenimo veličinu prozora igre (ovo je detaljno opisano u mom prvom članku). Da biste to učinili, u konstruktoru klase Game1 pisati:

200?"200px":""+(this.scrollHeight+5)+"px");">graphics.PreferredBackBufferHeight = 600; //Širina ekrana
graphics.PreferredBackBufferWidth = 600; //Visina ekrana

To je to, sada možemo postaviti koordinate. U metodi Inicijaliziraj() unesite:

200?"200px":""+(this.scrollHeight+5)+"px");">hero.spritePosition = novi Vector2(300, 300);

Tako smo inicijalizirali objekat spritePosition i dodijelio svojim koordinatama vrijednosti 300 duž osi X i Y.

Sada počnimo igru. dobio sam ovako:

Kao što vidite, sprite nije nacrtan tačno u centru ekrana, ali možete biti sigurni da je njegov gornji levi ugao (ovde je providan) nacrtan tačno u centru. Tako možete eksperimentisati i stvoriti heroja tačno u sredini prozora igre. I tako, ovim ću završiti ovaj dio članka. U sljedećem dijelu ćemo shvatiti kako napraviti animaciju za vaš sprite.

Pixel grafika (u daljem tekstu jednostavno pixel art) postaje sve istaknutija ovih dana, posebno kroz indie igre. To je razumljivo, jer na ovaj način umjetnici mogu ispuniti igru ​​velikom raznolikošću likova i ne provode stotine sati modelirajući trodimenzionalne objekte i ručno crtajući složene objekte. Ako želite da naučite pixel art, prvo što ćete morati da uradite je da naučite kako da nacrtate takozvane „sprajtove“. Zatim, kada vas sprijtovi više ne plaše, možete prijeći na animaciju, pa čak i na prodaju svog rada!

Koraci

Dio 1

Prikupite sve što vam treba

Preuzmite dobre grafičke uređivače. Možete, naravno, stvarati remek-djela u Paintu, ali to je teško i nije baš zgodno. Bilo bi bolje raditi u nečemu poput:

• photoshop
• paint.net
• Pixen

1. Kupite grafički tablet. Ako ne volite da crtate mišem, onda su tablet i olovka ono što vam treba. Wacom tableti su, inače, najpopularniji.

   Omogućite "mrežu" u svom grafičkom uređivaču. Zapravo, ako vaš grafički uređivač ne podržava prikaz mreže, onda biste trebali razmisliti o pronalaženju drugog programa. Mreža će vam omogućiti da jasno vidite gdje i kako će se svaki pojedinačni piksel nalaziti. Po pravilu, brojanica se uključuje preko menija „Prikaz“.

   • Možda ćete morati malo podesiti postavke prikaza kako bi svaki segment mreže zapravo prikazao piksel. Svaki program to radi drugačije, pa potražite odgovarajuće savjete.

2. Crtajte olovkom s veličinom kista od 1 piksel. Svaki grafički uređivač trebao bi imati alat Pencil. Odaberite ga, postavite veličinu četkice na 1 piksel. Sada možete slikati... pikselirano.

   Dio 2

   Vježbanje osnova

   Kreirajte novu sliku. Budući da učite crtati u stilu pixel arta, ne biste trebali ciljati na epska platna. Ako se sjećate, u Super Mario Bros. cijeli ekran je bio 256 x 224 piksela, a sam Mario se uklapao u prostor od 12 x 16 piksela!

   1. Priblizi. Da, inače jednostavno ne možete vidjeti pojedinačne piksele. Da, morat ćete ga jako povećati. Recimo da je 800% sasvim normalno.

      Naučite crtati ravne linije.Čini se da je jednostavno, ali ako odjednom drhtavom rukom nacrtate liniju debljine 2 piksela negdje u sredini, razlika će vam udariti u oči. Crtajte ravne linije dok ne morate aktivirati alat za crtanje pravih linija. Morate naučiti kako crtati ravne linije rukom!

      Naučite crtati zakrivljene linije. U zakrivljenoj liniji treba da postoje, recimo, ujednačeni „prelomi linija“ (što je jasno vidljivo na slici malo više). Recimo, počevši da crtate zakrivljenu liniju, nacrtajte liniju od 6 piksela, ispod nje - liniju od tri, ispod nje - liniju od dva, a ispod nje - od jednog piksela. Na drugoj strani nacrtajte istu stvar (naravno u ogledalu). Upravo se ova progresija smatra optimalnom. Krive nacrtane u uzorku "3-1-3-1-3-1-3" ne zadovoljavaju standarde pikselske umjetnosti.

      Ne zaboravite da obrišete greške. Alat „Eraser“ mora biti podešen slično kao olovka, čineći veličinu četkice jednakom 1 pikselu. Što je gumica veća, teže je ne obrisati višak, tako da je sve logično.

      dio 3

      Kreiranje prvog sprite-a

      1. Razmislite kojoj će svrsi služiti sprite. Hoće li biti statična? Animirani? Statički sprite može biti zasićen detaljima do prelivanja, ali je bolje da animirani sprite bude jednostavniji kako kasnije ne biste trošili sate na precrtavanje svih detalja na svim okvirima animacije. Usput, ako bi vaš sprite trebao biti korišten s drugima, onda bi svi trebali biti nacrtani u istom stilu.

         Saznajte postoje li posebni zahtjevi za sprite. Ako crtate za, recimo, projekat, razumno je očekivati ​​zahtjeve boje ili veličine datoteke. Međutim, ovo će biti važnije nešto kasnije, kada počnete da radite velikih projekata sa mnogo različitih duhova.

         • Objektivno govoreći, ovih dana rijetko se postavljaju zahtjevi za veličinom ili paletom sprijtova. Međutim, ako crtate grafiku za igru ​​koja će se igrati na starijim sistemima za igre, tada ćete morati uzeti u obzir sva ograničenja.

      2. Napravite skicu. Skica na papiru je osnova svakog sprite-a, jer ćete na taj način moći razumjeti kako će sve izgledati i, ako je potrebno, možete nešto unaprijed ispraviti. Osim toga, možete i precrtati preko papirne skice (ako još uvijek imate tablet).

         • Ne štedite na detaljima skice! Nacrtajte šta god želite da vidite na konačnom crtežu.

      3. Prenesite skicu u grafički uređivač. Možete iscrtati papirnu skicu na tabletu, možete sve precrtati rukom, piksel po piksel - nije važno, izbor je na vama.

         • Prilikom praćenja skice, koristite 100% crnu kao boju konture. Ako ništa drugo, kasnije ćete ga ručno promijeniti, ali za sada će vam biti lakše raditi s crnom.

      4. Pročistite obris skice. U ovom kontekstu, možete, naravno, reći drugačije - obrišite sve suvišno. U čemu je poenta - obris bi trebao biti debeo 1 piksel. U skladu s tim, zumirajte i obrišite, obrišite višak ... ili popunite nedostajuće olovkom.

         • Kada radite na skici, nemojte se ometati detaljima - doći će red na njih.

      dio 4

      Bojanje duha

      1. Osvježite teoriju boja. Pogledajte paletu da vidite koje boje koristiti. Tu je sve jednostavno: što su boje udaljenije jedna od druge, to više nisu slične jedna drugoj; što su boje bliže jedna drugoj, to su sličnije i bolje izgledaju jedna pored druge.

         • Odaberite boje koje će vaš duh učiniti lijepim i ne iritantnim. I da, pastele treba izbjegavati (osim ako je cijeli projekat urađen u ovom stilu).

      2. Odaberite više boja.Što više boja koristite, to će vaš sprite više "odvlačiti pažnju", da tako kažem. Pogledajte klasike piksel umjetnosti i pokušajte izbrojati koliko se boja tamo koristi.

         • Mario - samo tri boje (ako govorimo o klasičnoj verziji), pa čak i one se nalaze na paleti gotovo blizu jedna drugoj.
         • Sonic - iako je Sonic nacrtan sa više detalja od Maria, i dalje je baziran na samo 4 boje (i sjene).
         • Ryu je gotovo klasik sprite-ova, kako ih shvaćaju u borbenim igrama, Ryu jeste velike parcele, ispunjen jednostavnim bojama, plus malo sjene za razgraničenje. Ryu je, međutim, malo složeniji od Sonica - već ima pet boja i sjenki.

      3. Obojite sprite. Obojite svoj sprite alatom Fill i ne brinite da će sve izgledati ravno i beživotno - ništa drugo se ne očekuje u ovoj fazi. Princip Fill alata je jednostavan - ispunit će bojom koju odaberete sve piksele boje na koju kliknete dok ne dođe do ivica.

      dio 5

      Dodavanje senki

      Odlučite se za izvor svjetlosti. Zaključak: morate odlučiti pod kojim će uglom svjetlost pasti na sprite. Imajući to na umu, možete napraviti realistične sjene. Da, bukvalno neće biti "svetla", poenta je zamisliti kako će pasti na crtež.

      • Najjednostavnije rješenje je pretpostaviti da je izvor svjetlosti vrlo visoko iznad sprite-a, malo lijevo ili desno od njega.

      1. Počnite nanositi sjene koristeći boje koje su nešto tamnije od osnovnih. Ako svjetlost dolazi odozgo, gdje će biti sjena? Tako je, tamo gdje direktna svjetlost ne pada. U skladu s tim, da biste dodali sjenu, jednostavno dodajte još nekoliko slojeva spriteu s pikselima odgovarajuće boje iznad ili ispod obrisa.

         • Ako smanjite postavku "Contrast" osnovne boje blagim povećanjem postavke "Brightness", možete dobiti dobru boju za prikazivanje sjene.
         • Nemojte koristiti gradijente. Gradijent je zlo. Gradijent izgleda jeftino, hakovano i neprofesionalno. Efekt sličan efektu gradijenata postiže se tehnikom stanjivanja (vidi dolje).

      2. Ne zaboravite polusjenu. Odaberite boju između osnovne boje i boje sjene. Upotrijebite ga da napravite još jedan sloj - ali već između slojeva ove dvije boje. Dobićete efekat prelaska iz tamnog područja u svetlo.

         Nacrtajte naglaske. Vrhunac je mjesto na sprite-u gdje pada najviše svjetla. Naglasak možete nacrtati ako uzmete boju koja je nešto svjetlija od osnovne. Glavna stvar je da se ne zanosite odsjajem, on odvlači pažnju.

U ovoj lekciji ćete naučiti kako crtati i animirati likove koristeći ovu tehniku Pixel Art. Sve što vam treba za ovo je Adobe Photoshop. Rezultat je GIF sa astronautom koji trči.

Program: Adobe Photoshop Težina: početnici, srednji Potrebno vrijeme: 30 minuta - sat

I. Postavljanje dokumenta i alata

Korak 1

Odaberite Olovka (olovka) na alatnoj traci - ovo će biti glavni alat za našu lekciju. U postavkama odaberite tip Hard Round četkica, a ostale vrijednosti postavite isto kao na slici. Naš cilj je da vrh olovke bude što oštriji.

Korak 2

U postavkama alata Eraser Tool (gumica), odaberite način rada Pencil Mode i postavite ostale vrijednosti prikazane na slici.

Korak 3

Uključite mrežu piksela (Prikaz > Prikaži > Mreža piksela). Ako u meniju nema takve stavke, idite na podešavanja i omogućite grafičko ubrzanje Preferences > Performance > Graphic Acceleration.

Napomena: Mreža će biti vidljiva na novokreiranom platnu samo kada je uvećana na 600% ili više.

Korak 4

U Preferences > General (Control-K) promenite režim interpolacije slike u režim Nearest Neighbor. Ovo će omogućiti da granice objekata ostanu što jasnije.

U postavkama Jedinice i ravnala, postavite jedinice za ravnala u pikselima Preference > Jedinice i ravnala > Pikseli.

II. Stvaranje karaktera

Korak 1

I sada, kada je sve postavljeno, možemo preći direktno na crtanje lika.

Skicirajte svoj lik jasnim obrisom, pritom pazite da ga ne preopterećujete sitnim detaljima. U ovoj fazi boja nije bitna, glavna stvar je da je obris jasno nacrtan i da razumijete kako će lik izgledati. Evo skice pripremljene posebno za ovu lekciju.

Korak 2

Smanjite sličicu na 60 piksela u visinu koristeći prečicu na tastaturi Control+T ili komandu Uredi > Slobodna transformacija.

Veličina objekta je prikazana na informativnoj tabli. Imajte na umu da su postavke interpolacije iste kao što smo uradili u koraku 4.

Korak 3

Uvećajte sličicu za 300-400% da biste olakšali rad s njom i smanjite neprozirnost sloja. Zatim kreirajte novi sloj i ocrtajte obrise skice pomoću alata Pencil Tool. Ako je lik simetričan, kao u našem slučaju, možete ocrtati samo polovinu, a zatim duplirati i okrenuti nacrtano ogledalo (Edit> Transform> Flip Horizontal).

Ritam: Da biste nacrtali složene elemente, razbijte ih na dijelove. Kada pikseli (tačke) u liniji formiraju "ritam", kao što je 1-2-3 ili 1-1-2-2-3-3, skica ljudskom oku izgleda glatko. Ali, ako forma to zahtijeva, ovaj ritam se može prekinuti.

Korak 4

Kada je obris spreman, možete odabrati glavne boje i slikati velike oblike. Uradi to poseban sloj ispod obrisa.

Korak 5

Izgladite obris crtanjem senke duž unutrašnje ivice.

Nastavite sa dodavanjem senki. Kao što ste možda primijetili tokom crtanja, neki oblici se mogu korigirati.

Korak 6

Kreirajte novi sloj za istaknute dijelove.

Izaberite režim mešanja Overlay sa padajuće liste na panelu Slojevi. Obojite svijetlom bojom područja koja želite istaknuti. Zatim izgladite naglasak primjenom Filter > Blur > Blur.

Završite sliku, a zatim kopirajte i preslikajte gotovu polovinu slike, a zatim spojite slojeve sa polovicama da dobijete cijelu sliku.

Korak 7

Sada astronaut treba da doda kontrast. Upotrijebite postavke Nivoa (Slika > Prilagodbe > Nivoi) da biste ga učinili svjetlijim, a zatim prilagodite nijansu pomoću opcije Balans boje (Slika > Prilagodbe > Balans boje).

Lik je sada spreman za animaciju.

III. Animacija likova

Korak 1

Napravite kopiju sloja (Layer > New > Layer Via Copy) i pomaknite je 1 px gore i 2 px udesno. Ovo je ključna tačka u animaciji likova.

Smanjite neprozirnost originalnog sloja za 50% kako biste mogli vidjeti prethodni okvir. To se zove “Oguljenje luka” (način množine).

Korak 2

Sada savijte ruke i noge lika kao da trči.

● Istakni lijeva ruka Laso alat
● Koristeći FreeTransformTool (Edit > FreeTransform) i držeći pritisnut Control taster, pomerite granice kontejnera tako da se ruka pomeri unazad.
● Prvo odaberite jednu nogu i malo je ispružite. Zatim, naprotiv, stisnite drugu nogu tako da se osjeća kao da lik hoda.
● Koristite olovku i gumicu da popravite dio desna ruka ispod lakta.

Korak 3

Sada morate ponovo nacrtati novu poziciju ruku i nogu kao što je prikazano u drugom dijelu ovog vodiča. To je neophodno kako bi slika izgledala oštro, jer transformacija uvelike izobličuje linije piksela.

Korak 4

Napravite kopiju drugog sloja i okrenite ga vodoravno. Sada imate 1 osnovnu pozu i 2 u pokretu. Vratite neprozirnost svih slojeva na 100%.

Korak 5

Idite na Window > Timeline za prikaz panela Timeline i kliknite na Kreiraj animaciju okvira.

Na vremenskoj liniji uradite sljedeće:

1. Postavite vremensko odlaganje na 0,15 sek
2. Kliknite na DuplicatesSelectedFrames da kreirate još 3 kopije
3. Postavite petlju ponavljanja na Zauvijek

Korak 6

Da biste odabrali željeni sloj za svaki okvir, kliknite na ikonu Eye pored naziva sloja na panelu slojeva. Redoslijed bi trebao biti ovakav:

Osnovni stav→Trčanje desnom nogom→Osnovni stav→Trčanje lijevom nogom.

povezani

Dio 9: Kreiranje sprite-ova za borbene igre

Radili smo na stvaranju malih 16x16 sprijtova: oni su jednostavni, slatki i tradicionalni za konzolne RPG igre. "Ali želim da napravim akcionu igru: nešto sa velikim srajtovima! Znate, nešto poput borbene igre Capcom." Možda ste zbog želje da crtate cool, velike srajtove preskočili prethodne odeljke tutorijala i niste kreirali male uredne srajtove. Ako sam u pravu, vratite se i pročitajte šta ste propustili. Iako se veličina spriteova ipak promijenila osnovni principi prethodno opisani ostaju na snazi. U redu, pretpostavimo da ste pročitali prethodna poglavlja i da ste sada zaista spremni da kreirate duh koji će se "boriti".

Prvo, dozvolite mi da istaknem da tehnika koju ću opisati nije samo za borbene igre. Koristim ovaj izraz posvuda jer su poze i položaji za trening duhove različiti borbeni stavovi. Ali sama tehnika i koncepti mogu se primijeniti na različite vrste igara: Earthworm Jim je vjerovatno napravljen sa istim pristupom. Učite iz svega što možete i prilagodite ono što naučite svojim potrebama. Ali skrećemo pažnju, sada pogledajmo nekoliko primjera iz Street Fighter Alpha 3.

Ovo je zaista vješto nacrtano. Svaki lik ima svoj jedinstveni izgled. Na primjer, Zangrif je velika planina mišića, a Sakura je mala mršava u poređenju. Također obratite pažnju na značajnu razliku u širini spriteova ova dva. To znači da umjetnici nisu bili ograničeni na neke maksimalne dimenzije sprites. Sakura je 76x87 sprite, Zangrif je 116x111. Ali zapamtite to obično standardne veličine smatra se visokim 100 piksela. Širina će obično biti manja.

Metoda koju koristi Capcom nije poznata. Nemaju tutorijale ili druga pojašnjenja u vezi sa procesom kreiranja sprite-ova, što nije iznenađujuće, jer imaju toliko drugih stvari o kojima treba brinuti. Ipak, dobio sam neke informacije analizirajući njihove sprijtove i tu i tamo pokupio isječke korisnih informacija. Pogledajmo slike Chun-Li iz Street Fighter 3:

(kliknite za povećanje)

Svi okviri su ručno nacrtani, zatim skenirani i digitalizirani piksel po piksel. Možda Capcom ima poseban program koji radi praćenje zraka. Pošto nemamo takav program, sve ćemo raditi piksel po piksel. Ovo je dugotrajno. Teško je zamisliti da su programeri igre poput SF3 obrađivali svaki kadar na ovaj način. Ali opet, nemam pojma kako su to uradili, tako da se nagađanje zasniva na onome što vidimo. U svakom slučaju, radili su praćenje zraka - svaki sprite je savršen. Mišićna linija je široka jedan piksel. Nema pikselskih "tačaka" (pojavljuju se kada crtate linije mišem i prevučete dugme miša), niti anti-aliasing na linijama (obično se to dešava kada se slika smanji na potrebnu veličinu sprite-a). To sve znači da su morali sve ispraviti olovkama da bi dobili tako sjajne srajtove. Možda japanski natpisi na ovoj velikoj slici kažu "Ovo su uputstva za tačno kako smo nacrtali naše duhove", ali ja ne znam japanski. :)

Najvažniji dio slike je veliki Chun-Li u gornjem desnom uglu. Obratite pažnju na nedostatak detalja u njemu. Kada napravite sprite, morate pokazati određenu količinu karakteristične karakteristike. Kada crtate malo lice 8x8, neće biti moguće prikazati, na primjer, nozdrve, pa zašto gubiti vrijeme na njih kada crtate na papiru? Te zakrivljene linije na njenoj odeći biće predstavljene žutim linijama od jednog piksela u duhu. Na odjeći će biti mala žuta visilica: ali ona će biti dodana samo u fazi izrade piksela. Stoga, na početku odaberite pojednostavljeni stil za crtanje okvira animacije na papiru.

Trebao bih skrenuti pažnju i objasniti šta zaista postoji razne načine kreiranje sprite-ova. Odabir metode ovisi samo o nivou vaših vještina, vještine i veličine stvorenih sprijtova. Ako pravite 16x16 RPG sprite, nema razloga da ih prvo nacrtate na papiru, skenirate, itd. Radite odmah u pikselima. U nedostatku vještine crtanja na papiru, pametnije je odmah prijeći na crtanje pikselima. Dvije druge metode primjenjive u nedostatku skenera ili vještine crtanja slobodnom rukom:

Na lijevoj strani vidimo siluetu. Jedan od osnovna pravila animacija navodi da gledalac treba da bude u stanju da razlikuje akcije vašeg lika, čak i ako je prikazan u silueti. Međutim, u video igrama, za razliku od klasične animacije, pri kreiranju animiranih sprijtova koriste se posebni uglovi, o čemu također treba voditi računa. Ipak, osnovni princip radi sa istom snagom, tako da silueta može stvoriti osnovu za buduće spriteove. Ovakvim crtanjem svakog okvira možete biti sigurni da će animacija biti ugodna oku. Silueta je brz, grub oblik za figuru. Koristi se za dobijanje opšta ideja o pozi lika, o tjelesnoj građi itd.

Na desnoj strani je skica čovjeka. Princip je jednostavan - skiciran je opći oblik sprite-a, sa linijama udova, itd. Ova metoda ima istu svrhu kao i silueta, ali se može koristiti za dobivanje više detalja, kao što je pokazivanje koja je ruka ispred, ili određivanje strukture mišića. Ova metoda, naravno, nije ništa bolja od siluete: samo njena alternativa. Pokušajte i eksperimentirajte dok ne pronađete metodu koja vam odgovara.

U ovom vodiču koristiću Photoshop 4.0, ali ću pokušati da koristim njegove najjednostavnije karakteristike. Kada govorimo o anti-aliasingu i sličnim stvarima, mislim da su implementirane iu drugim programima za crtanje. I mislim da znate kako da koristite jedan od njih. Ipak, treba napomenuti da Photoshop općenito nije pogodan za kreiranje sprite-ova. Razlog je taj što Photoshop modificira i organizira paletu na poseban način, koji nije pogodan za kreiranje igara sa datom paletom. To je zato što su ove vrste aplikacija dizajnirane za obradu fotografija i ilustracija. Manipulacija paletama u ovim slučajevima ne igra bitnu ulogu, za razliku od slučaja sa spritovima. Ako pravite igru ​​koja ne koristi paletu (što je većina igara za PC, za razliku od njihovih pandana na konzoli), i ne morate da brinete o broju upotrijebljenih boja, onda bi Photoshop mogao biti pravi način. . Volim ga koristiti za vježbanje crtanja sprijtova, jer. ne morate da brinete o odabiru i odabiru boja, što bi bio slučaj u uređivaču koji koristi paletu. Ok, napravimo sprite. Za početak koristim rukom nacrtanu sliku, tj. Ići ću putem Capcoma:

Nacrtao sam lik rukom (na četvrtini običnog A4 papira), obojio ga, zatim skenirao (podešavanja - 300dpi, crno-bijeli način): prije smanjivanja veličine, trebali biste promijeniti mod slike u RGB ili Grayscale za anti -aliasing to work) . Na kraju sam dobio prilično veliku sliku, a ovdje pokazujem manju verziju. Postoje neke male nesavršenosti, kao što je čudno zakrivljena prednja noga, itd.: to će biti potrebno ispraviti kada radite s pikselima, neće biti teško. Primijetite da sam udvostručio obris za jaknu i košulju. Slučajno je izašlo, stani: čekaj, htio sam pokazati do kakvih problema će ovo dovesti. U redu, ne možemo raditi s tako velikom slikom, pa hajde da smanjimo veličinu na 100 piksela. Nacrtana je na bijeloj pozadini i sveukupno će imati nešto manje od 100px, jer sam ostavio prazan prostor oko oblika u slučaju da joj želim produžiti kosu. O da, koristio sam bilinearni filter za smanjenje. Pored njega, Photoshop ima još dva filtera, od kojih svaki djeluje drugačije:

(kliknite za povećanje)

Filter "Nearest Neighbor" potpuno onemogućava anti-aliasing. Ovo je posebno korisno ako trebate povećati već završeni sprite za faktor četiri i pokazati ga ljudima koji razumiju.

"Bilinearni" i "Bicubic" filteri rade skoro istu stvar: čini se da bikubični daje više anti-aliasinga. Naša slika je relativno mala, tako da u ovom slučaju neće biti velike razlike, ali ako smanjimo sliku visine 800px, efekat je značajan. Problem sa bikubičnim filterom je previše anti-aliasing. Uporedite njenu desnu potkoljenicu na bikubičnoj slici i na bilinearnoj. Prvi je mutniji. Ista stvar se desila sa rukom i licem. Ovo može ometati praćenje zraka, tako da obično koristim bilinearni filter da dobijem manje anti-alizijskog. Dakle, imamo naš sprite (95px visok):

Lijepa strana Photoshopa (i glavni razlog njegova upotreba u ovoj tehnici) je njegova sposobnost rada sa slojevima. Oni su neophodni za praćenje zraka, možete crtati linije bez dodirivanja originalne skenirane slike. Ako vaš program ne podržava slojeve, možete reći da ste malo zaglavili. Možete trace zraka u Photoshopu, a zatim prenijeti rezultat u svoju matičnu aplikaciju.

Pogledajte donji dio njene majice, na manjoj verziji slike. Na ručno nacrtanoj verziji na ovom mjestu su bile dvostruke konture, njima sam označio mjesto za bijele boješto sam upravo hteo da dodam. Na manjoj verziji, to je samo mrlja. Isto i sa rukom. Zbog toga su detalji na Chun-Liovoj odjeći bili označeni tanke linije, ostali programeri su dodali u fazi rada na pikselima.

Evo brz način postavite Photoshop da radi jednostavno praćenje zraka. Originalna slika će biti pozadina (uvjerite se da ste u RGB modu), pa napravite novi sloj. napuni to određene boje(na primjer, plava). Postavite ovaj sloj na "screen" i vidjet ćete sprite, samo crne linije postaju plave. Zatim uskladite slojeve. Ovo je neophodno kako bi novoizvučene linije bile na vrhu sloja originalne slike. Sada kreirajte još jedan sloj i popunite ga bijelom bojom. Postavite ga na "množenje" mod. Zapravo, sprite će crtati upravo u ovom sloju. Mogli biste samo učiniti sloj transparentnim, ali biste tada morali stalno prelaziti na alat "gumicu" da biste nešto izbrisali, što je naravno nezgodno. U našem slučaju, pozadina će biti bijela, iako je ne možete vidjeti. Lako će se prebaciti sa bijele na crnu (pod pretpostavkom da se početna postavka nije promijenila) pritiskom na dugme X. Ako želite da očistite sliku sačinjenu od plavih linija, promijenite mod zadnjeg sloja u "normal" i bijela pozadina će prekriti originalnu sliku.

Korištenje pozadine prilikom crtanja značajno skraćuje vrijeme rada. Međutim, zapamtite da je pozadina tu samo da vodi vašu ruku. Obično je lice zamućeno, sa pikselima razbacanim posvuda, tako da ga morate ponovo kreirati sa pikselima. Možete popraviti i veći komad originala (na primjer, ja ću popraviti nogu) ako nešto izgleda loše u pikselima. Pokušajte izbjeći velike "mrlje" piksela kao na primjer na njenoj ruci. Ove mrlje su uočljive u uglovima, pa i negde drugde. Pokušajte ih se riješiti. Grupa od četiri crna piksela može uvelike pokvariti vizualnu percepciju sprite-a. Da biste ih se riješili, možete malo ispraviti pozu lika: na primjer, ako se na slici ruka i noga preklapaju, a kao rezultat preklapanja, pojavljuju se mrlje crnih piksela, trebali biste pomaknuti ili nogu ili ruku. Ove mrlje, "mrljice", mogu se ukloniti u većini slučajeva. Nastavljamo:

Završio sam praćenje linija u crnoj boji. Ostaje dodati neke detalje i razraditi lice, posebno oči, ali to je najbolje učiniti već kada radite s bojom. Počnimo bojati sprite, ispunjavajući njegova glavna područja bojom, a ne dodajući sjene u ovoj fazi:

Dakle, dodao sam boje: radije ne radim na bijeloj pozadini, bolje je uzeti neke meka boja. Bijela pozadina, čini boje tamnijim (posebno njen top). Ovo je trik kojim se naše oči igraju s nama. U redu, dodajmo neke sjene.

Povratak