Creați o foaie Sprite 2D pentru unitatea 4.3 în Inkscape

Actualizarea Unity 4.3 a fost o ușă mare mare care se deschidea pentru dezvoltatorii de jocuri 2D, cu multe instrumente noi și modalități de abordare a dezvoltării jocurilor 2D în acest motor deja puternic. În acest tutorial vă voi arăta cum să creați un personaj în Inkscape care să poată fi folosit în editorul uimitor al Unity 4.3.


Lucruri de luat în considerare

Câteva sfaturi despre crearea de caractere înainte de a începe:

  • Lucrați dintr-un concept gândit anterior sau o schiță - vă va economisi timp și dureri de cap!
  • Creați cât mai multe bucăți întregi posibil. Dezvoltatorii vor cere (frecvent) schimbări de culoare și variații. Crearea pieselor întregi care pot fi ușor schimbate va face munca mult mai ușoară pe termen lung.
  • Ecranul testează personajele dvs. prin plasarea lor pe fundalul pe care îl utilizați în timp ce lucrați la ele. (Sau, alternativ, lucrați pe un fundal neutru - dacă apare pe gri, va apărea pe orice.)
  • Fiți atenți la bugetul dvs. sprite. Mai multe articulații pot fi mai realiste, dar pot fi și mai complicate.

1. Creați caracterul

Pasul 1

Deschideți Inkscape și selectați Fișier> Nou . Din lista opțiunilor disponibile, selectați dimensiunea cea mai probabilă a rezoluției jocului. 640 x 480, 800 x 600, sau 1024 x 768 sunt soluții comune de joc pentru PC - pentru acest proiect pe care îl voi alege 800 x 600.


Dacă lucrați cu un dezvoltator, verificați-le împreună cu aceștia pentru rezolvarea corectă! Lucrul grozav despre lucrul cu arta vectorului este totuși că poți schimba întotdeauna dimensiunea personajului mai târziu.

Pasul 2

Creați un nou strat selectând Layer> Adăugați strat (Shift-Control-N) și numiți-o "Sketch". Setați-l la Sub stratul curent.


Lucrul în straturi vă păstrează fișierele curate și ușor de gestionat.
Denumiți straturile în mod corespunzător, astfel încât să vă puteți aminti ce este pe ele.

Pasul 3

Obțineți-vă conceptele împreună. În acest caz, am folosit doar o schiță simplă pe care am creat-o Sketchbook Pro. Am tendința de a crea cel puțin două vederi de acțiune ale personajului, pentru a putea obține o idee bună despre modul în care vreau să fie animat și ce piese trebuie să-l descompun.

Puteți să vă copiați și să inserați pur și simplu conceptul dintr-un alt program sau să trageți și să plasați fișierul în Inkscape.

Dacă trageți și fixați fișierul selectați încorporare, nu legătură. Veți arunca schița mai târziu oricum, deoarece nu este necesar pentru întregul proces.

Conceptele schițelor vă ajută să vă consolidați ideea, astfel încât să nu lucrați orbește.

Pasul 4

Redimensionați desenul la orice dimensiune vă recomandăm să lucrați cu mânerele de dimensionare.

Faceți clic pe schiță și blocare proporțiile imaginii făcând clic pe Blocați pictograma.

Blocarea proporțiilor împiedică denaturarea.

Pasul 5

Din moment ce paletele Inkscape Preset nu sunt, în general, foarte drăguțe pentru jocuri, am tendința de a-mi face propriile mele lucruri în prealabil.

Puteți să vă editați paleta Inkscape accesând folderul Inkscape sub Share> Palete sub-folder.

Fișierul poate fi într-o locație diferită, în funcție de sistemul dvs. de operare.

Pasul 6

Click dreapta "Inkscape.gpl" și selectați deschis cu editorul de text preferat. Tocmai am folosit-o WordPad.

Acum puteți adăuga propriul dvs. RGB și hex valori în listă și vor apărea în ordinea în care le-ați pus. Dacă nu sunteți familiarizați cu codurile Hex și RGB, există multe diagrame ușor accesibile pe care le puteți găsi în jurul internetului sau în selectorul de culori a oricărui program de editare a imaginilor.

Puteți găsi unul dintre ei aici:

  • Grafic HTML / Hex Color Chart

Iată intervalele pe care le-am folosit pentru diferitele părți ale corpului Octopus pentru aceia dintre dvs. care doresc să colecteze palete:

Corpul principal

  • 110 4 84 # 6E0454
  • 164 0 92 # A4005C
  • 188 24 120 # BC1878
  • 220 68 112 # DC4470
  • 235 99 109 # EB636D
  • 243 147 131 # F39383
  • 250 201 172 # FAC9AC

Ochi

  • 57 33 49 # 392131

Cochilie de melc

  • 52 48 89 # 343059
  • 67 70 126 # 43467E
  • 62 87 150 # 3E5796
  • 90 105 192 # 5A69C0
  • 103 150 232 # 6796E8
  • 126 175 238 # 7EAFEE
  • 126 199 217 # 7EC7D9

Corpul de melci

  • 132 71 60 # 84473C
  • 165 103 79 # A5674F
  • 206 137 78 # CE894E
  • 243 180 107 # F3B46B
  • 249 246 100 # F9CE64
  • 248 229 122 # F9E57A
  • 251 251 158 # FBFB9E

Puteți să copiați și să inserați aceste coduri în fișierul .gpl și să le salvați și vor fi acolo data viitoare când rulați Inkscape.

Vă recomandăm să păstrați o copie a fișierului original .gpl în cazul în care ceva nu merge bine.

Adăugați codurile așa cum sunt ele afișate în fișier. Puteți să le plasați în ordinea în care doriți să apară totuși.

Pasul 7

Desenați mai întâi corpul principal. Eu folosesc doar o formă de cerc simplu pentru corpul caracatiței. Am stabilit accidentul 3.5px în editorul de obiecte (Shift-Control-F) dar poți face tot ce-ți place.


Pasul 8

Desenați picioarele ca niște bucăți separate pe un nou strat folosind Instrument Bezier Curve (Shift-F6).

Rețineți că, pentru a obține o curbă reală, trebuie să țineți apăsat butonul mouse-ului după ce faceți clic pentru a poziționa al doilea nod / punct și trageți-l în jurul.

Pasul 9

Mai degrabă decât reglarea manuală a cursei și a culorii pe picior, putem face clic pe un obiect care este similar (ca cercul) și îl copiați (Control-C) și du-te la Editați> Paste stil sau (Control-Shift-V) pentru a se potrivi cu stilul obiectului copiat.

Aceasta este o modalitate bună de a vă asigura că toate obiectele dvs. de umplere și lovituri sunt uniforme.

De asemenea, ați putea dori să desenați picioare în poziții diferite, astfel încât să poată fi refolosite pentru a face mai multe animații.

Alternativ, poate doriți să desenați întregul corp cu picioarele în poziții diferite, dacă nu doriți ca picioarele să se miște independent.

Amintiți-vă că puteți uni piesele împreună selectând ambele obiecte și combinându-le prin intermediul Cale> Uniunea sau Control-Shift-+ sau doar Control-+ cu NumPad.

Pasul 10

Pentru a obține o curbă mai lină, adesea adaug puncte suplimentare și apoi le șterg după ce obțin forma pe care o doresc.

Am oprit Corp strat folosind eye icon lângă numele stratului pe care vreau să îl dezactivez.

Intra Editați calea după noduri mod (F2) și faceți clic pe nodul pe care doriți să îl ștergeți, apoi apăsați pe Ștergeți cheia.

Puteți ajusta folosind mânerele de pe celelalte noduri dacă se întâmplă ceva sau dacă modificați tipul de nod din bara de instrumente.

Pasul 11

Deoarece vreau ca picioarele din stânga și din dreapta să fie aproape aceleași, voi copia pe stânga și o voi edita ușor.

Adu înapoi Corp prin trecerea la stratul din meniul derulant și făcând clic pe eye icon din nou, astfel încât să puteți poziționa piciorul în mod corespunzător. Selectați piciorul (care vă va duce înapoi la nivelul piciorului automat) și copiați-l (Control-C) apoi lipiți-o (Control-V).

Răsuciți imaginea utilizând butonul Flip orizontal sau prin apăsarea butonului H cheie.


Acest lucru va face, de asemenea, caracatița mai ușor de animat.

Deplasați piciorul în poziția dorită. De asemenea, l-am stropit orizontal ușor pentru perspectivă, folosind mânerele de dimensionare.

Dacă aveți probleme cu ruperea imaginii atunci când o calibrați, mergeți la Vizualizare> Snap.

Pasul 12

Am de gând să fac picioarele din față în mai multe bucăți pentru a adăuga o adâncime mai mare. Creați un nou strat (Shift-Control-N) pentru a adăuga picioarele care vor fi în fața corpului.

Adăugați un oval cu Instrument Oval și copiați și lipiți stilul de pe picioare pe oval.

Vom putea adăuga o mișcare de bobbing la tentacul din față, dacă vrem.

Acum adăugați un al doilea oval și rotiți-l. Puteți roti obiecte făcând clic pe obiect de două ori și apoi folosind mânerele.

Acum această parte a tentaculei se poate mișca separat!

Pasul 13

Acum, puteți să copiați pur și simplu piciorul și să îl îndoiți pentru a umple celălalt picior

Nu vă faceți griji prea mult despre poziția tentaculelor pentru moment, se va ajusta în Unitate.

Pasul 14

Să adăugăm unele umbre și accente la caracatiță înainte de a trece la fața. Fac acest lucru prin crearea de ovale și apoi folosind un alt oval pentru a "scădea" părțile pe care nu le vreau.

Poziționați accentul în locul în care doriți.

Acum, copiați și lipiți cercul și ajustați-l acolo unde doriți să tăiați. Faceți-o o culoare diferită, astfel încât să fie mai ușor de văzut. Prefer sa-i fac aceeasi culoare ca si corpul principal.

Consider că această metodă este cea mai bună pentru baloane și alte obiecte rotunde, strălucitoare.

Acum Shift-Select ambele cercuri, asigurându-vă că selectați ultimul cerc al evidențierii și mergeți la Cale> Diferența.

O lumină frumoasă!

Selectați toate obiectele și grup lor (Control-G) pentru a vă asigura că nu se mișcă de unde vreți.

Notă: Încă puteți copia și lipi stilul dintr-un obiect utilizând calea directă de selectare / modificare după nod, chiar și atunci când sunt grupate.

Pasul 15

Desenează și câteva picioare pe picioare, folosind Instrumentul Bezier (Shift-F6). Asigurați-vă că desenați pe stratul cu tentacul adecvat și grupați-i cu piesa lor înrudită când ați terminat. Încercați să utilizați aceeași culoare de la culoarea precedentă.

Aveți posibilitatea să adăugați mai puține sau mai multe culori, la gustul dvs..

Pasul 16

Am desenat ochii folosind Instrumentul Circle (F5). Fac același lucru pe care l-am făcut cu tentaculele pentru a vă asigura că sunt la fel; copiați și lipiți ochiul stâng și reglați din nou poziția și perspectiva.

Acum are un simplu set de pepere.

Pasul 17

Desenați o gură simplă cu Bezier Curve Tool, și reglați setările din meniul de derulare și umplere (Shift-Control-F).


Am setat Accident vascular cerebral la 3,00 și capacul Round Cap. Puteți juca cu aceste setări pentru a le obține cum v-ați dori.

Pasul 18

Am decis să adaug câteva mai multe detalii pentru a-i oferi o profunzime mai mare. Dacă găsiți când adăugați mai târziu lucruri noi pe care apare pe obiectele anterioare atunci când le regrupați, selectați și tăiați obiectul care este în spatele (Control-X), dați clic pe obiectul pe care doriți să îl inserați peste cel care se află pe același strat și selectați Editați> Lipire pe poziție sau (Control-Alt-V).

Păstrarea grupurilor dvs. curate vă va ajuta să vă organizați foaia de sprite mai târziu.

Pasul 19

De asemenea, am adăugat o evidențiere secundară, folosind din nou Bezier Curves si Instrumentul pentru cercuri, numai de data asta folosesc # F39383 culoare.

În timp ce există câteva programe în continuă creștere, care permit adăugarea ușoară a iluminării dinamice în arta 2D (cum ar fi Sprite Lamp), acestea sunt încă foarte rudimentare și mai ales destinate artei pixelilor, așa că trebuie să le adăugăm noi acum!

Pasul 20

Pentru un punct de interes, adaug, de asemenea, un melc pe capul caracatitei. Voi face corpul mai întâi cu Instrumentul Bezier Curve (Shift-F6). Voi face melcul pe un nou strat, dar nu mai trebuie să fac unul pentru coajă atâta timp cât sunt grupate corespunzător. Puteți să le faceți pe straturi separate dacă preferați.

Ca și până acum, voi șterge orice noduri inutile și netezesc corpul cu Editați calea după nod (F2) Mod. De asemenea, puteți selecta mai multe noduri și le puteți muta în acest mod.

Pasul 21

Acum adăugați niște nuanțe mai deschise pentru a scoate volumul melcului. Din nou voi folosi Bezier Curve instrument (Shift-F6).


Asigurați-vă că grupați obiectele corpului când ați terminat!

Dacă aflați când faceți o curbă, ați făcut-o prea abruptă și nu o puteți conecta fără ca aceasta să se întâmple:


Curbele murdare nu sunt bune! Dacă îl conectați accidental, trebuie doar să loviți Control-Z pentru a reveni!

Poti Click dreapta pentru a ieși din curbă și apoi reconectați-o manual.


Ușor de fixat!

Pasul 22

Pentru a face baza cochiliei, trageți un cerc cu Instrumentul Circle (F5). obisnuiam # 5A69C0 ca accident vascular cerebral și # 7EC7D9F ca umplere.

Pasul 23

Folosește Bezier Curve (Shift-F6) pentru a crea "buza" inferioară a cochiliei.

Pasul 24

Folosește Instrument spiral pentru a adăuga forma corespunzătoare la coajă (F9) și setați transformă la 1,50.

Acum rotiți și poziționați spirala astfel încât să pară o cochilină reală. De asemenea, am fixat capacul pentru spirală Round Cap pentru a evita o margine aspra.

Pasul 25

Pentru punctul culminant al cochiliei melcului, vom folosi din nou curba Bezier. Voi folosi numai culoarea albă pentru culoare, dar voi stabili forma 50% Opacitate astfel încât să se amestece. Puteți ajusta opacitatea în Umplere și cursă (Shift-Control-F).


De asemenea, puteți utiliza glisorul de estompare pentru a înmuia aspectul, dar nu-l recomand pentru o coajă.

Pasul 26

Continuați cu restul celor mai importante. Puteți să copiați și să lipiți stilul primei evidențieri la celelalte subliniază și să copiați și să lipiți opacitatea, ceea ce o face mult mai ușor.

Merită să remarcăm că am făcut grupul separat de coajă și de corpul melcului. Le voi salva separat în cazul în care vreau să-i animez mai târziu.


2. Creați foaia Sprite

Pasul 1

Mai întâi să ștergem schița pentru ao elimina. Faceți clic pe "schiță" și apăsați pe Ștergeți tasta. Asigurați-vă că ați deblocat stratul înainte de a încerca să îl ștergeți sau nu veți putea. De asemenea, puteți șterge stratul real din Meniul de niveluri. Asigurați-vă că stratul pe care doriți să îl ștergeți este activ în momentul în care îl ștergeți.

Pasul 2

Asigurați-vă că salvați fișierul înainte de a face următoarea parte (deși merită menționat că ar trebui să economisiți frecvent oricum, doar în caz). Pentru a face acest lucru, du-te la Fișier> Salvare ca (Shift-Control-S).


În general, păstrez separat fișierul original și fișierul din foaia de sprite, așa că îmi amintesc cum a fost poziționat caracterul.

Pasul 3

Acum trebuie să separați bucățile de caracatiță, astfel încât acestea să fie suficient de îndepărtate pentru uneltele de feliere din Unity pentru a afla că acestea sunt bucăți separate. Există setări pe care le puteți modifica în Unity pentru a ajuta la acest lucru, dar o foaie organizată de sprite este întotdeauna mai bună.

Acesta va fi un test bun al abilităților dvs. de grupare. Dacă ați grupat toate piesele potrivite împreună, acest lucru ar trebui să fie relativ ușor. Puteți afla mai multe despre Gruparea în Inkscape grație unui tutorial util creat aici pe Tuts+. Faceți clic-tragere fiecare bucată pentru a le aranja cum vă place.

Pasul 4

De asemenea, alinierea marginilor obiectelor pe partea exterioară a colii. În timp ce computerele sunt atât de rapide acum, este posibil să nu observați prea mult, este întotdeauna mai bine să salvați spațiul pe care îl puteți și să faceți foaia cât mai mică posibil. Deschide-ți Alinia meniul (Shift-Control-A) și asigurați-vă Relativ la este setat la Ultima selectată mai degrabă decât pagina, deoarece obiectele vor fi ceea ce este exportat și nu pagina.

Aceasta înseamnă că primul obiect și toate obiectele selectate ulterior vor fi aliniate pe baza poziției ultimului obiect plasat.


Puteți să-l setați Mai întâi selectat dacă aceasta este preferința dvs..

Alinierea nu trebuie să fie perfectă. Aici încercați doar să reduceți cât mai mult spațiul alb și alinierea este o modalitate ușoară de a face acest lucru. Principalul lucru este să vă asigurați că un obiect nu va extinde foaia mai mult decât este necesar.


În acest fel, nu veți mări dimensiunea foii
Cu toate acestea, va crește mărimea fișierului, chiar dacă nu utilizați tot spațiul suplimentar.

Pasul 5

Împachetați foaia cât mai strâns posibil. Există programe pentru a face acest lucru, dar mulți consideră că este mai rapid să o luați cu ochiul în Inkscape.

Cu toate acestea, dacă preferați să utilizați una (sau ați exportat fiecare imagine separat pentru utilizarea în alte motoare de jocuri), puteți descărca Texture Packer aici:

  • Texture Packer Download

Este disponibil gratuit pentru Mac, Windows și Linux!

Pasul 6

Salvați foaia ca fișier separat, din nou pentru a avea compoziția originală (puteți, de asemenea, păstrați-le pe ambele în același fișier, dacă doriți).

Veți observa că ochii par în mod inutil departe de ambalarea texturii. Acest lucru se datorează faptului că am optat să le tratez ca pe un singur obiect, în loc să aibă fiecare ochi să funcționeze independent. Puteți face acest lucru și apoi să le împărțiți în unitate ca ochi separați.

Pasul 7

Selectați toate obiectele simultan făcând clic și tragând întreaga zonă ca și cum ați încerca să le rețineți într-o cutie (a se vedea imaginea de mai jos).


"Foaia" mea.

Pasul 8

Acum, pentru a vă exporta foaia! Selectați Fișier> Export (Shift-Control-E). Puteți exporta foaia ca dimensiune care se potrivește nevoilor dvs., dar tocmai am păstrat-o la aproape aceeași dimensiune ca cea pe care am început-o cu Inkscape.


Un lucru minunat despre vectori este că, dacă se pare că se simte greșit pentru joc, pot pur și simplu să reexport la o dimensiune mai mare sau mai mică.

Puteți edita numele fișierului în caseta de nume de fișier astfel încât să fie ceva ușor de recunoscut. În caz contrar, va fi numit de Inkscape ca ultima cale sau grup care a fost selectat (de exemplu. g720.png).

Este posibil să observați Loturi de export în serie opțiune. De fapt, puteți exporta totul ca fișier propriu în acest fel, dar țineți cont de forma pe care o are în Inkscape dimensiunea sa exportată, deci este posibil să trebuiască să o ajustați manual.

Notă: În prezent există un bug în Inkscape. Dacă denumiți fișierul atunci când toate obiectele sunt selectate și încercați să exportați lotul, acesta va exporta numai ultimul obiect așa cum sunt acum toate numite același lucru.

Pasul 9

Dacă te uiți la fișierul exportat acum, ar trebui să vezi foaia, inclusiv transparența.


3. Aduceți-o în unitate

Pentru această parte a tutorialului am să vă presupun că știți cum să deschideți Unitatea și să începeți un proiect. Dacă nu sunteți familiarizați cu Unitatea, există o mulțime de documentații pentru începători pe site-ul Unity. Voi explica procesul de obținere a unei foi de sprite în unitate și de tăiere pentru a fi folosit într-un joc.

Pasul 1

Deschideți-vă proiectul și asigurați-vă că editorul dvs. este în modul 2D (pentru a face lucrurile mai ușoare), mergând la Editați> Setări proiect> Editor și selectarea 2D dupa cum Modul implicit de comportament.


Puteți modifica oricând această setare dacă sunteți mai confortabil în modul 3D.

Pasul 2

Trageți foaia de sprite de la dvs. Explorator de fișiere în tine bunuri pliant.

Pasul 3

Selectați foaia de sprite și deschideți Inspectorul prin Fereastră> Inspector (Control-3).

Pasul 4

Schimba Sprite Mode la Multiplu. Aceasta vă va permite să deschideți editorul de sprite.

Culoare adevarata este o alegere bună pentru Format deoarece este cel mai bine pentru imagini frumoase, curate, în special atunci când se ocupă cu sprite de artă pixel. Celelalte setări pot depinde de proiectul individual.

Pasul 5

Deschideți Sprite Editor.

De asemenea, puteți să îl accesați de la Inspector

Pasul 6

Clic Felie. În mod normal, aș alege Automat și lăsați-l așa cum este, cu toate acestea nu pot face acest lucru în acest caz, deoarece ar împărți ochii în două părți, cum ar fi:

Pentru a remedia acest lucru, faceți clic pe una dintre casetele delimitate și Șterge aceasta. Acum întindeți cealaltă casetă delimitată pentru a include ambii ochi și faceți clic aplica.

Dacă pierdeți o cutie sau trebuie să faceți una nouă, deoarece nu le-a tăiat corect, click-tragere într-un spațiu gol.

Clic Reveni pentru a anula orice modificări pe care nu le-ați aplicat.

De asemenea, puteți observa că caseta din dreapta jos are un loc pentru a numi fiecare piesă. Acest lucru este foarte important pentru organizare, ca și cum ați trage pe oricare dintre sprites pe ecran, acestea vor fi denumite automat indiferent de Nume caseta indică. Un alt parametru pe care îl puteți modifica aici este Pivot care indică punctul principal de ancorare al spritei. Când rotiți sprite în animator, acesta se va roti în jurul acestui punct.

Pasul 7

Ajustați toate pivoții acolo unde doriți dând clic și tragând cercul din mijlocul fiecărui sprite sau introducându-le manual Pivot câmp.

Clic aplica cand e gata.

Acum vă puteți vedea toate spritele ca obiecte individuale în Proiect> Folder pentru active.

Pasul 8

Acum putem trage piesele pe scena pentru a le crea Obiecte de joc. Cu toate acestea, mai întâi să creem un gol Obiectul jocului (Control-Shift-N) și o numesc "Octopus".

Faceți clic pe Obiectul jocului în Ierarhie și du-te la Inspector pentru ao redenumi.

Pasul 9

Acum puteți trage celelalte părți ale corpului pe Octopus Obiectul jocului în Ierarhie și aranjați-le cum vreți, dar asigurați-vă că acestea sunt centrate pe gol Obiectul jocului.

Există o mică problemă ...

Pasul 10

Așa cum ați fi observat, tentaculele de caracatiță nu sunt chiar în ordinea în care ne dorim. Putem rezolva asta Sortarea straturilor în Inspector. În mod normal, aș putea să creez un nou strat de sortare pentru Octopus, dar deocamdată o voi lăsa ca implicită și să ajustez numerele.

Cu cât este mai mare numărul cu cât este mai aproape obiectul față de cameră.

Pasul 11

Acum să salvăm o scenă de testare și proiectul (Fișier> Salvați scenă). Unitatea se poate prăbuși atunci când începeți să faceți mai multe acțiuni în profunzime, așadar vă recomand să economisiți des.

Din moment ce nu fac un proiect real de joc, voi numi doar acest "testcene" pentru moment.

Awesome Work, esti gata pentru animatie!

Acest personaj nu are încă animații, deci este greu "gata de joc". Animatorul din Unitate este extraordinar de puternic, dar există o mică curbă de învățare!

Este bine pentru artiști să știe cum va arăta arta lor în motor și cum pot fi animați pentru a face grafica mai potrivită pentru dezvoltarea jocurilor. Merită să rețineți că, chiar și după ce ați ajuns la acest punct, puteți să vă actualizați cu ușurință foaia și să o reintroduceți în folderul de active (Unitatea implicită în dosarul proiectului din "Documente") și jocul se va actualiza automat. Trebuie doar să știți dacă schimbați dimensiunile sprite în orice fel, chiar dacă adăugați "extra", poate fi necesar să re-slice foaia.