Cum de a crea o caracteristică de joc Sprite Foaie în designer de afinitate

Ce veți crea

Dacă ați dorit vreodată să încercați dezvoltarea jocului și designul de caractere, atunci acest tutorial este pentru tine! Astăzi vom crea o foaie de sprite pentru o creatură asemănătoare cu păsările pentru jocuri video și mobile, folosind diferite instrumente și funcții ale Affinity Designer. Vom trece prin întregul proces, de la schițarea schiței la colorare și crearea unui set de poziții care pot fi folosite pentru animație. Să începem!

1. Desenați părțile de bază ale caracterului

Pasul 1

De obicei, încep să fac un personaj prin schițarea și încercarea de a găsi imaginea potrivită, o formă interesantă și un aspect neobișnuit. Încercați să combinați câteva detalii fictive despre animale sau obiecte pe care le întâlniți în viața reală, căutând soluții originale și extraordinare. Puteți să vă inspirați prin navigarea prin intermediul caracterelor de joc sau a secțiunilor de joc sprites din Envato Market sau prin căutarea sprite de caractere pe Pinterest. Încercați să creați propriile idei originale, creând combinații neașteptate.

Când ați făcut mai multe variante, selectați cel mai mult și continuați să lucrați cu acesta. Încercați diferite poziții și expresii faciale.

Realizez o mulțime de schițe grosolane, care mă ajută să înțeleg cum se mișcă caracterul meu, fie că este interesant și original, dacă se potrivește mediului înconjurător sau conceptului viitorului nostru joc și așa mai departe.

În cele din urmă, sunt destul de mulțumit de aspectul misterios fantezist al acestui mic tip și aici este schița cu care vom lucra în acest tutorial. Puteți să o descărcați direct de aici - doar faceți clic dreapta pe mouse pe imagine și salvați-l pe PC.

Pasul 2

Vom lucra cu Desenul Persona al Affinity Designer, folosind caracteristicile sale vectoriale pentru a crea sprite de caractere pentru jocuri video, care pot fi ușor animate în diferite poziții.

Să creăm a Document nou de 600 x 800 px mărimea. Folosește Plasați instrumentul imagine să importăm schița și să o poziționăm în centrul pânzei.

Și să începem să subliniem caracterul. Luați Instrument de elipsă (M) și a face o formă, care se potrivește dimensiunii feței. Armați-vă cu Instrumentul pentru creioane (N) și desenează un cioc, urmărind schița. Puteți edita cursa utilizând Instrument de noduri (A) pentru ao face mai netedă și mai curgătoare.

Pasul 3

Selectați ambele forme pe care le-am creat și utilizați Adăuga operație în bara de instrumente din contextul superior. În acest fel am îmbinat ambele elemente într-o singură formă.

Acum folosiți Instrument de elipsă (M) pentru a face un ochi și a adăuga încă câteva elipse pentru ao face mai detaliată. Urmați liniile schiței, făcând ca formele să se potrivească cu schița.

Pasul 4

Folosește Instrumentul pentru creioane (N) pentru a desena o linie lungă, curbată pe fața și pentru a o edita, dacă este necesar, folosind Instrument de noduri (A). Putem schimba Stil, Lățime și alți parametri ai liniei noastre în Accident vascular cerebral (îl veți găsi într - una din filele de lângă Culoare panou). 

De aici, hai să setăm Lăţime la 11 pt și treceți în jos la Presiune fereastră de tip drop-down. Aici putem varia lățimea segmentelor separate ale liniei, utilizând graficul. Selectați punctul drept al curbei din grafic și glisați-l în jos pentru a face partea dreaptă a cursei (care este la nasul personajului) mai subțire.

Pasul 5

Acum ia-o Instrumentul dreptunghiular (M) și să trecem la corp. Faceți un dreptunghi, aliniați-l la corp, și Convertit aceasta la curbe în bara de instrumente pentru contextul de top. Treceți la Instrument de noduri (A) și începeți să mutați nodurile de la distanță unul de celălalt, făcând partea inferioară mai largă. 

Selectați ambele noduri superioare și trageți-le în sus pentru a acoperi capul personajului nostru. Apoi selectați nodul din dreapta sus și utilizați Convertit la Neted funcția din bara de instrumente de context de top, făcând partea dreaptă a dreptunghiului netedă și rotunjită.

Pasul 6

Acum folosiți Instrument de noduri (A) pentru a modifica partea stângă a corpului, adăugând mai multe noduri, făcând colțurile netede și făcând schița potrivită pentru schiță.

Pasul 7

Să adăugăm pene în partea de jos a corpului, formând un fel de fustă. Luați Instrument de elipsă (M) și formează o formă stinsă în partea stângă jos a corpului. presa Option-Shift și trageți forma spre dreapta, făcând o copie. Repetați aceeași acțiune, efectuați mai multe copii și completați partea inferioară.

În cele din urmă, selectați forma corpului și pene, mergeți la bara de instrumente pentru contextul de top și aplicați Adăugați operațiuni. Grozav! Acum am îmbinat elementele într-o singură formă.

Pasul 8

Acum mergem la picior. Să facem o simplă: trageți o linie dreaptă verticală cu un picior mic în partea de jos. Deplasați-vă la Accident vascular cerebral panou și să adăugăm mai multă dimensiune piciorului făcându-l mai gros. Seteaza Lăţime valoare pentru 60 pt și utilizați Presiune pentru a face partea inferioară mai subțire, așa cum se arată în imaginea de mai jos.

Pasul 9

Acum trebuie să transformăm cursa într-o formă astfel încât să putem să o editați, să adăugăm detalii, schițe și așa mai departe. Ținând piciorul selectat, mergeți la Layer> Expand Stroke. Forma pare destul de bună, deși ar putea avea o grămadă de noduri.

În timp ce forma pare încă netedă, poate deveni foarte dificilă și consumatoare de timp să ștergeți manual toate nodurile care nu sunt necesare. Avem două opțiuni aici: fie să lăsăm forma ca și cu o grămadă de noduri, fie, dacă sunteți special în ceea ce privește calitatea, să faceți o nouă formă. 

Putem folosi unul dintre instrumentele de desen aici - fie Instrument creion (N) sau Instrument Pen (P). Prefer preferința Instrument Pen (P). Doar urmați piciorul creat de mai sus, făcând o formă netedă, rotunjită și folosind Instrument de noduri (A) pentru a muta nodurile în jur.

Copiați piciorul pentru a adăuga altul.

Pasul 10

Avem o "fustă" de pene cu două straturi pe schița noastră, deci să adăugăm un al doilea strat de corp cu fețe. Copiați forma corpului și extindeți-o, făcând forma înaltă, astfel încât să se potrivească schiței. Ștergeți partea superioară a formei extinse, lăsând doar fusta. Puteți face acest lucru cu ajutorul Instrument de noduri (A) selectând toate nodurile superioare care nu sunt necesare și ștergându-le. 

Ca opțiune, puteți șterge și partea superioară a formei cu Vector Crop Tool. Cu toate acestea, eu prefer prima metoda, deoarece Vector Crop Tool lasă partea ascunsă ascunsă într-o mască de tăiere. Acest lucru poate fi foarte util în multe cazuri, când trebuie să restabiliți forma, dar nu va trebui să o facem.

Pasul 11

Acum să formăm un braț stilizat sau o aripă pentru caracterul nostru de pasăre. Faceți o elipsă, potrivind aripa pe schiță și Convertit aceasta la curbe. Glisați ambele părți laterale de ancorare în jos, făcând forma mai lată în partea de jos. Adăugați o altă elipsă, făcând brațul îndoit la cot.

Pasul 12

Continuați Conversia a doua elipsă la curbe, și utilizați Instrument de noduri (A) pentru a muta liniile în jurul lor, făcându-le să se potrivească cu schița. Folosește Adăugați o operație pentru a fuziona formele și pentru a face toate nodurile netede.

Pasul 13

În cele din urmă, utilizați Instrumentul pentru creioane (N) latrageți un mic trunchi de pene la cot și îmbinați-l împreună cu brațul.

Grozav! Contururile sunt gata. Acum, să adăugăm culorile!

2. Aplicarea culorilor și pozițiilor variabile

Pasul 1

Vom lucra cu o paletă purpuriu-închisă. De obicei, aleg culorile cu ajutorul Culoare panou și Eyedropper Tool, care poate fi găsit chiar deasupra roții de culoare din Culoare panou.

Încercați să faceți părțile superioare ale caracterului mai ușoare decât părțile de jos, pentru a separa elementele unul de celălalt, făcându-le să iasă. Faceți lumina feței bej, creând un contrast izbitoare pentru a deveni elementul principal al personajului, care atrage atenția telespectatorului.

Pasul 2

Acum hai să lucrăm cu fața. Aplicați culorile la toate cele trei elipse ale ochiului, făcând partea interioară mai întunecată, creând o gaură. Și să editați linia roșie de-a lungul feței. Faceți-o mai groasă, mărind-o Greutatea accidentală în Accident vascular cerebral panou. Cut (Command-X) linia, selectați forma bej a feței și mergeți la Editați> Lipire interioară. Grozav! Acum, linia se află în interiorul formei feței, ca și cum ar fi în interiorul unei măști de tăiere, iar noi o putem edita, dacă este necesar.

Pasul 3

Să adăugăm niște umbre personajului nostru, făcându-l mai detaliat. Luați Instrumentul pentru creioane (N) și începeți să desenați o formă, acoperind parțial partea stângă a corpului. Nu trebuie să fie perfect, pentru că vom merge Cut (Command-X) și apoi Editați> Lipire interioară a formei corpului. Asigurați-umbra un pic mai întunecat decât corpul.

Pasul 4

Folosește Instrument de elipsă (M) pentru a adăuga un grup de cercuri mici de-a lungul marginii umbrei, suprapunându-se reciproc și făcând umbra texturată. Ține-te jos Schimb pentru a face cercurile perfect perfect.

Adăugați o elipsă întunecată-purpurie pentru umbra de sub fața (apăsați Comanda-[ de mai multe ori pentru a muta elipsa sub forma fetei). Faceți mai multe detalii, formând o umbră întunecată pe "fusta" inferioară și adăugați un accent albastru cu cercuri rotunjite în partea dreaptă a corpului personajului. În cele din urmă, faceți brațul mult mai ușor decât corpul, separându-l de restul elementelor.

Nu uitați să adăugați două picături mici, rotunjite la picioare, făcându-le mai tridimensionale.

Pasul 5

Coborâți Opacitate din culoarea albastru-strălucitor din straturi pentru a face acest lucru mai subtil.

Dacă doriți să jucați cu culorile, făcându-le mai vii, utilizați Eyedropper Tool pentru a alege culoarea dintr-un element și a aplica-o celeilalte. Dacă nu ați încercat acest instrument în Afinitate Designer totuși, poate fi un pic dificil, dar încă foarte convenabil. 

Găsi Pipetă pictograma în Culoare și trageți-l direct pe imaginea dvs. Veți vedea o lupă care vă ajută să selectați culoarea dorită, care apare lângă Pipetă pictograma în Culoare panou. Acum, puteți să o aplicați la orice formă selectată, pur și simplu făcând clic pe cercul colorat mic din Culoare panou.

Pasul 6

Să adăugăm mai multe detalii tipului nostru fantezist. Adăugați umbrele la toate părțile corpului, inclusiv capul și brațul (dacă nu ați adăugat încă) și faceți mai multe pete pe față pentru ao face mai texturată.

Așezați încă câteva elipse în interiorul ochiului, strălucind treptat culorile pentru a face să pară strălucitoare. Îmi puteți vedea straturi în ecranul de mai jos, care demonstrează toate părțile grupului de ochi.

Pasul 7

Personajul nostru arată deja bine în această etapă, dar dacă ne imaginăm că îl punem deasupra unui fundal video detaliat, se poate amesteca cu fundalul dacă paletele de culori ale elementelor sunt similare. Trebuie să facem caracterul nostru mai distinct de orice fel de fundal. Trebuie să fie atractivă și clar vizibilă la prima vedere. Și aici este o modalitate simplă de separare vizuală a caracterului: ar trebui să folosim schițe! Cu cât conturul este mai gros în jurul personajului, cu atât devine mai distinct!

Selectați brațul, mergeți la Culoare și aplicați un negru Accident vascular cerebral cu 3 pt Lățime valoare. Adăugați conturul și pe față și pe picioare. Este posibil să fie necesar să selectați elementele interior grupul care utilizează straturi panou, pentru a aplica Accident vascular cerebral.

Pasul 8

În ceea ce privește corpul, vreau să aplic un singur contur întregii forme. Cu toate acestea, corpul este format din două elemente, așa că vom face un mic truc. Selectați ambele părți ale corpului și duplicați-le (Command-C> Command-V). Veți vedea copiile în dvs. straturi panou. Selectați copiile și îmbinați-le într-o singură formă folosind Adăugați o operație.

Acum putem seta Completati culoarea formei fuzionate la nici una în Culoare panou și aplică o grosime frumos 4 pt Accident vascular cerebral, păstrând forma conturului deasupra corpului.

Pasul 9

Să vedem ce avem până acum. Am creat un personaj fantezist, care constă din corpul (împreună cu fața), o pereche de brațe înaripate și o pereche de picioare amuzante. Și asta este de fapt tot ce trebuie să facem o sprite de joc în mișcare! Asigurați-vă că ați fost Grupat (Command-G) toate părțile în mod corespunzător în straturi pentru a vă menține munca clară și consecventă.

Acum putem face un anumit set de poziții care pot fi efectuate de personajul nostru în timpul jocului. Aveți posibilitatea să răsfoiți secțiunea foaie de caractere pentru jocul de tip sprite de la GraphicRiver pentru a vedea ce reprezintă cel mai adesea jocurile sau pentru a crea propriile dvs..

Aici am prezentat pozițiile de bază prin simpla mișcare a părților spritei noastre, făcând-o să stea, să alerge, să sară sau să cadă. Observați că am înlăturat ochii strălucitori în poarta slabă pentru a face să pară mai inconștient.

Victorie! Jocul nostru Fantasy Sprite este gata!

Buna treaba! Tocmai am terminat să creăm creatura noastră de păsări fantastică și am făcut o foaie de sprite de câteva posibile simple care pot fi folosite pentru animație. Sper că ați găsit câteva sfaturi și trucuri utile care vă vor ajuta să cunoașteți mai bine aplicația de designer Affinity Designer sau vă va inspira să creați noi caractere unice și foi de sprite pentru PC, browser sau jocuri mobile.

Dacă doriți să obțineți un fișier EPS vectorial gata de utilizare cu pasărea noastră fantezie, inclusiv cadrele detaliate pentru fiecare poza, verificați această foaie de sprite de creaturi de păsări. Poate fi folosit pentru animație simplă.

Distreaza-te sa proiectezi caractere noi si nu uita sa-ti imparti rezultatele!