Kandi Runner Creați un joc gata pregătit pentru animație Sprite

Există câteva proiecte mai distractive decât desenarea conceptelor de caractere ale jocurilor video. Culorile, îmbrăcămintea și designul general au puține limitări pentru artistul conceptual. Vom desena un personaj vectoric gata de animație în Adobe Illustrator și mai mult în acest tutorial cu trei părți, cu echipele After Effects și Game Development pe Tuts+.


Creați jocul Kandi Runner

Seria noastră Kandi Runner este distribuită în trei tutoriale. În această parte, veți învăța cum să creați sprite joc vector, dar ar trebui să verificați celelalte două tutoriale din serie, de asemenea.

  • Cum de a anima un joc vector Sprite Character Cycle Walk
  • Cum se creează un joc de deplasare laterală a personajului folosind o foaie Sprite

Lovit Spaţiu a sari.

Tutorial Asset

Dacă doriți să urmați împreună cu acest tutorial, puteți descărca schița.

  • sprite-sketch.zip

1. Pregătiți-vă designul

Sprite-ul nostru de joc va fi în profil, astfel încât componenta de animație a crucii poate conține un ciclu de mers pe jos. Ca atare, mi-am schițat designul Adobe Photoshop CC. Pornind de la linii rapide care denotă stilul general al caracterului și proporțiilor și se încheie cu un design întunecat, incins, pregătit pentru tratamentul Adobe Illustrator. Rețineți că proporțiile din această schiță se modifică puțin în timpul tutorialului. Ușurința la scalare permite schimbări rapide în dimensiunea capului și a corpului, comparativ cu redarea completă a acestuia.



2. Desenați capul și părul

Pasul 1

Pentru cap, am început cu un cerc desenat cu Instrument de elipsă (L). Partea inferioară a feței a fost trasată din schiță cu Instrument Pen (P). Uni ambele forme în deschizător de drumuri când sunteți mulțumit de profilul pe care l-ați creat.


Pasul 2

Parul se face în secțiuni mari, colorate. Am vrut ca ea să aibă păr absolut masiv (asemănător unei păpuși). Folosește Instrumentul Pen pentru a desena fiecare secțiune de păr. Zece sunt desenate în total aici, și în cele din urmă vor fi separate și prezentate în mod individual, astfel încât să poată fi animate. Între timp, Grup (Control-G) părul tău împreună.


Pasul 3

Unhide față în față straturi panou și asigurați-vă că sunteți mulțumit de modul în care părul se blochează în jurul capului, precum și că nu ascunde fața, care va fi trasată mai târziu.



3. Desenați picioarele și corpul

Pasul 1

Mutarea pe picioare și pe trunchi. Începeți cu coapsa și partea inferioară a personajului. Are o armură de felul ăsta (mi-am imaginat că este un fel de joc de puzzle-uri de acțiune. Poate că are un vehicul zburător și are nevoie de armura să o protejeze) și, ca atare, este o culoare violet-gri, mai degrabă decât gri. Deocamdată, corsetul costumului este luminos roz. Mai târziu o să fac asta. Aceste trei piese alcătuiesc trunchiul și coapsa, oprindu-se la genunchi.


Pasul 2

Pentru picioarele și genunchiul inferior, trageți o piesă de genunchi (ca un jumătate de cerc înclinat) și urmați schița pentru conturul gâtului și fundului piciorului. Am oprit porțiunea de picior de la vârful piciorului cu ideea costumului care conține vrăji vechi (gândiți-vă la designul de modă din anii 1920). Piciorul inferior este o formă separată.


Pasul 3

Pentru partea din spate a încălțămintei / încălțămintei, trageți o elipsă cu Instrumentul Ellipse, selectați piesa pentru picioare și folosiți butonul Shape Builder Tool, selectați porțiunea de elipsă care este în afara piciorului. Deselectați și ștergeți această piesă suplimentară.



4. Desenați brațul și mâna

Pasul 1

În partea stângă, vei vedea personajul până acum. Are un costum, dar are nevoie de gât, piept și braț. Urmați schița și trageți gâtul și partea din piept. Plasați acest lucru în spatele bucăților de trunchi din straturi panou.


Pasul 2

Pentru braț, am început cu o elipsă (care denotă umărul) și am adăugat un braț care se încadrează la cot. Dacă animați acest personaj, poate doriți să separați bicepul de antebraț pentru mai multă mișcare. Brațul se oprește puțin peste încheietura mâinii, unde am tras o formă care indică palma mâinii.


Pasul 3

Pentru mâna, am ascuns formele brațului, astfel încât să ne putem concentra pe adăugarea degetelor pe palmă. Utilizarea Instrumentul Pen, Am desenat o formă rotundă dreptunghiulară (aceasta are o latură plană și o latură curbată, deși) pentru degetul mare. Folosește Instrument rotunjit dreptunghi pentru celelalte degete. L-am dat afară, așa că mâna nu pare prea rigidă.



5. Editarea și adăugarea corpului

Pasul 1

Înainte de a ajunge la conturul și umbrirea personajului, să ne concentrăm mai întâi pe unele editări și adăugiri. Selectați bucățile de trunchi și picior, grup împreună pentru moment, și mărește un pic. Consultați mai jos comparația dintre corpul mărit și cel mai mic. În acest fel, are o torsă mare și picioare lungi pentru a echilibra capul său mare (și probabil greu).


Pasul 2

Caracterul din spate este un pic mic și superficial, așa că am scos punctul de ancorare din dreapta din forma originală. În plus, am adăugat o cămașă de înaltă cămăși pentru ca ea să poarte prin tragerea peste forma toracelui, cu o formă de violet închis, selectând atât pieptul, cât și forma cămășii și, cu Shape Builder Tool selectarea porțiunii care nu intersectează forma cămășii. Deselectați ambele și ștergeți piesele în exces. Plasați cămașa deasupra piesei de verificare în straturi panou.


Pasul 3

În loc de o mănușă completă, am optat pentru unul care are o linie inferioară a încheieturii mâinii. Pentru a face acest lucru, schimbați culoarea mănușii curente în tonul pielii personajului. Atunci, Copiați (Control-C) și Lipiți (Control-V) mâna, aliniați-o cu cea originală și trageți un cerc cu Instrumentul Ellipse. Selectați noua mână și elipsă și Minus Front în deschizător de drumuri.


Pasul 4

Să construim niște inimi. Desenați un cerc cu Instrumentul Ellipse și folosind Instrumentul de selecție directă (A), trageți punctul de ancorare inferior astfel încât să aveți o jumătate de inimă. Copie și Pastă jumătatea inimii și o răsturnați pe o axă verticală. Odată aliniat la centru, Uni în deschizător de drumuri.


Pasul 5

Copie și Pastă trei inimi de-a lungul coapsei personajului. Acestea ar trebui să fie în culoarea pielii. Adăugați o inimă mai mică, îndoită, și la mănușă.



6. Creați detaliile feței

Pasul 1

Pentru ochi, concentrați-vă pe patru bucăți: genele de sus și genele inferioare, o formă albă de picătură lacrimă pentru partea laterală a ochiului și o elipsă subțire pentru iris. Toate au fost desenate cu Instrumentul Pen, cu excepția irisului care a fost făcut cu Instrumentul Ellipse.

Celelalte caracteristici faciale necesare sunt o sprânceană, o buză superioară (atât albastru închis), o nară și un nas nazal (o formă), și o buză inferioară (aceeași culoare ca și nara). Puteți să faceți mai multe detalii pe față dacă doriți, dar acest lucru îi oferă suficiente caracteristici pentru a crea un anumit caracter fără a copleși designul general.


Pasul 2

Pentru conturul capului și părului, dacă animați acest design, veți dori să evidențiați capul și fiecare bucată de păr separat. De dragul acestei porțiuni a tutorialului, am arătat procesul de mai jos ca și cum ați ține capul și părul împreună ca o singură bucată.

grup împreună grupurile de cap și păr, Copie și Pastă, Uni în deschizător de drumuri, și Alinia cu capul principal / grup de păr și puneți-l în spatele capului / grupului de păr din straturi panou. Repetați procesul pentru grupul de păr (fără cap). Fiecare formă de contur trebuie să aibă a Greutatea accidentală de 1 până la 2 puncte.


Pasul 3

Pentru umbra aruncată de coafura ei masivă, desenează o formă care urmează conturul feței ei și se extinde între podul nasului și partea laterală a feței. Selectați forma capului și a umbrei și folosiți Shape Builder Tool, selectați partea din forma umbrei care nu se intersectează cu capul. Deselectați ambele și ștergeți forma care nu se intersectează. Plasați umbra deasupra capului, dar sub elementele faciale din straturi.



7. Detalii despre cap și păr

Pasul 1

Pentru ureche, este o formă de capital rotund "D". Interiorul urechii poate fi o formă "C", "S" sau un ciudat ciudat ca cel pe care l-am desenat. grup împreună și plasați-o sub păr, deasupra bucăților de cap și față.


Pasul 2

Înainte de a intra în umbrirea părului, conturăm fiecare secțiune a părului. Puteți fie să adăugați o curbă ponderată subțiri fiecărei secțiuni sau să urmați procesul din secțiunea a șase, pasul doi pentru fiecare secțiune de păr.


Pasul 3

Pentru umbrele de pe păr, recolorează fiecare secțiune de păr ca o versiune mai închisă a acelei nuanțe. Apoi, folosind Instrumentul Pen, trageți evidențiați forme pe marginea exterioară a fiecărei blocări de păr. Ștergeți cu Shape Builder Tool, așa cum ați făcut anterior.



8. Adăugați Umbre corporale

Pasul 1

Din moment ce cea mai mare parte a pieptului nu se mai arată, și există o mulțime de păr în jurul gâtului, recolor bucata de piept pentru a mauvei umbra utilizate anterior. Desenați o formă pe partea dreaptă a umărului. Vom folosi această umbră ca un ghid pentru celelalte umbre ale corpului în ceea ce privește locația. Selectați umărul și forma umbrei, utilizați Shape Builder Tool pentru a selecta porțiunea care nu se intersectează cu forma umbrei, deselectați-o și ștergeți pentru o umbră curată pe umăr. Plasați forma umbrei sub haine în straturi panou.


Pasul 2

Umbra de pe braț urmărește aceeași linie ca și cea de pe umăr și tălpile din cot. Dacă bratul dvs. este în două grupuri, puteți separa cele două piese selectându-le cu ajutorul Shape Builder Tool și piesele principale ale brațului selectate. Urmați aceiași pași pentru umbrele de pe mănușă.


Pasul 3

Am adaugat cateva dungi pe partea de sus a maneca cu Instrumentul Pen setat ca a 0,25pt greutate accident vascular cerebral. Extinde fiecare banda in Obiect, și ștergeți porțiunile dungilor care se suprapun peste partea superioară a manșonului și linia trasată peste manșon cu Shape Builder Tool.


Pasul 4

Umbra de pe torsă este un gri violet închis cu Opacitate la 40%. Modelele de evidențiere au fost adăugate și pe partea stângă a trunchiului. Din moment ce acest caracter este cel umbrit, nu sunt folosite gradienti, deși dacă doriți un design mai complex, mergeți la el!



9. Umbre pe corpul inferior

Pasul 1

Continuați să desenați forme de umbră pe corpul inferior. Începeți cu coapsa (celelalte părți ale corpului au fost ascunse în straturi panou) și urmați curba piciorului. Deseneaza forme umbrite transparente pentru fiecare inima. Ștergeți secțiunile care nu intersectează umbra cu Shape Builder Tool. Adăugați contururi pentru fiecare inimă.


Pasul 2

Pentru piciorul inferior, am vrut să adaug pantaloni roz strălucitori. Forma izbucnește în spate și are un arc spectaculos până la partea din față a piciorului. Ștergeți partea care nu se intersectează din partea din față a piciorului / piciorului (lăsați-o pe spate, deoarece face parte din design). Adăugați niște forme darts întunecate de culoare roz pentru un aspect plisat pe spatele. Desenați umbrele și evidențiați piciorul inferior, asemănător celor din coapsă și din tors.


Pasul 3

Din moment ce acest lucru va fi animat, trebuie să adaug un picior și un braț suplimentar. Copie și Pastă grupul de brațe și grupul de picior. Ștergeți detaliile manșonului, umbre și evidențiază și recolorați totul pentru a umbra culorile.



10. Creați o mână suplimentară

Pasul 1

Pentru o mână suplimentară, aceasta fiind împachetată în pumn, Copie și Pastă prima mână și Degrupeaza componentele. Deplasați porțiunea de mănușă în lateral și remodelați degetul mare pentru a fi o mică ciocnire pe partea stângă. Mutați degetele în palmă.


Pasul 2

Uni noua mână deschizător de drumuri, și să creați o mănușă nouă în același mod în care a fost desenată prima. Adăugați o inimă cu umbra (am folosit aceeași, doar am redimensionat pentru mai puțin spațiu), linia care denotă sfârșitul mănușii și umbra se conectează la umbra de pe mâna. Adăugați un contur care să corespundă celui de pe braț.


Pasul 3

Pentru mâna de cealaltă parte, Copie și Pastă pumnul, ștergeți detaliile mănușilor și recolorați-le într-o învelitoare întunecată. Utilizarea Instrument rotunjit dreptunghi trage degetele mici și degetul mare cu a 0,75pt greutate accident vascular cerebral în aceeași culoare închisă pentru alte contururi.



Acum sunteți pregătit pentru acțiune!

La sfarsit, spritul este gata sa plece. Fiecare grup care se va muta (sau poate fi mutat) în timpul animației este grupat și etichetat pentru organizare în straturi panou. Am adăugat un fundal și o schiță suplimentară pentru fiecare componentă pentru imaginea finală, dar nu va fi prezentă pentru următoarele două tutoriale. Sper că v-ați bucurat să desenați cu mine acest sprite de joc umbrite și să continuați cu următoarele două secțiuni ale acestui proiect.