Share
Ce veți creaMulți dezvoltatori de jocuri sunt mai întâi programatori și artiști secund. Indiferent dacă folosiți arta pixelilor pentru că preferați aspectul "retro" sau pur și simplu nu aveți timp sau experiență pentru a vă duce arta la nivelul următor, acest efect simplu poate crește considerabil atracția vizuală a jocului dvs..
Acest stil de pixeli micșorat este realizat prin prima extindere a artei dvs. de pixeli de 1: 1, menținând în același timp raportul original al aspectului. Apoi, printr-un proces foarte simplu care poate fi aplicat în timpul creării de active sau în timpul rulării, puteți transforma arta pixelului standard în ceva care arată excelent chiar și la rezoluțiile HD. Efectul este atât de simplu încât poate fi aplicat în aproape orice limbaj de programare, mediu de dezvoltare și motor. În acest tutorial, vă voi prezenta pixeli înclinați astfel încât să puteți implementa în mod confident acest efect în propriul proiect de joc.
Deci, exact ce este un pixel înclinat? Un singur pixel este cel mai mic element grafic care este folosit pentru a reprezenta arta în formă digitală - deci, într-un fel, vă puteți gândi la pixeli ca blocuri de construcție 2D. Un pixel înclinat se extinde doar pe conceptul blocului de construcție prin introducerea unei adâncimi artificiale.
Lucrurile devin un pic derutante cand realizezi ca pixelii conturati sunt alcatuiti din multiplii "obisnuiti" de pixeli, dar de fapt nu este acolo unde aproape cat de complicat pare. Pentru a înțelege pe deplin procesul, vom începe de la început cu o înțelegere de bază a pixelilor.
În primul rând, să vorbim despre dimensiunile și rapoartele pixelilor. Imaginea de mai sus arată aceeași sprite la dimensiunea originală și apoi mărite până la cinci ori mai mare decât dimensiunea. Pentru fiecare extindere, blocul original de pixeli "crește", de asemenea, în mărime. Atunci când un pixel standard este mărit de cinci ori (500%), acesta devine un bloc de pixeli de 5x5. Acum ai rămas cu un sprite care are un raport de 1: 5 pixeli. Acest număr înseamnă pur și simplu că fiecare 1x1 pixel din sprite original este acum reprezentat de un bloc de pixeli de 5x5. Întregul sprite, care măsoară inițial 14x15 pixeli, are acum o dimensiune de 70x75 pixeli.
Acum că sprite-ul nostru este compus din "blocuri" de pixeli mult mai mari, putem vedea cât funcționează pixelii înclinate.
Imaginea de mai sus arată aceeași sprite utilizând pixeli standard pe stânga și pixeli înclinați în dreapta. Cu pixeli standard, fiecare bloc de 5x5 este compus din aceeași culoare. În exemplul de pixeli conturați, putem vedea că blocul 5x5 constă acum în mai multe nuanțe de aceeași culoare.
Primul pătrat din fiecare versiune este blocul de 5x5 pixeli care reprezintă standardul 1x1 pixel din imaginea originală. Cel de-al doilea set de pătrate este o versiune mărită a acestui bloc 5x5 pentru a arăta compoziția blocului pixelului mărunțit. Acești pixeli sunt aranjați astfel încât să dea iluzia profunzimii, cu accente în colțul din dreapta sus al blocului 5x5 și umbrele din colțul din stânga jos. Când se combină pentru a crea imaginea finală, rezultă o sprite care pare să fie alcătuit din blocuri mici, înclinate, în loc de pixuri 2D plane.
Acum că înțelegeți elementele de bază ale pixelilor conturați, să rezumăm pe scurt modul în care se realizează acest efect.
În primul rând, trebuie să stabiliți dacă intenționați să implementați acest efect în timpul rulării în jocul dvs. real sau să vă generați materialele de artă cu pixelii "coapte" în pixeli. În ambele cazuri, efectul pixelului înclinat se realizează în aproximativ aceeași manieră.
Începeți prin a crea un sprite îngust, care are aceeași dimensiune ca mărimea finală extinsă a blocului de sprite. De exemplu, dacă lucrarea dvs. de artă finală va fi 1: 4 (extinsă de patru ori), atunci veți crea un bloc 4x4 conic. Această teșitură este apoi aplicată pe partea superioară a ferestrei sprite sau a jocului și este repetată pentru a umple întregul ecran. Jucând în jur cu modurile de amestecare și opacitatea, puteți obține rezultate diferite.
Voi acoperi ambele metode în detaliu mai târziu, dar pentru moment trebuie să fim atenți la câteva reguli și linii directoare critice.
În timp ce acest efect este ușor de atins prin aplicarea unei suprapuneri simple, există mai multe lucruri majore care pot împiedica pixelii conturați să se alinieze corect.
Problema cea mai evidentă este mărimea sprite față de dimensiunea suprapusului tăiat. Toate activele dvs. trebuie să urmeze rata de extindere dictată de dimensiunea blocului tău conic sau liniile înclinate nu vor fi consecvente.
De asemenea, este important să decideți dimensiunea ferestrei de joc înainte de a mări oricare dintre activele dvs. Dacă dimensiunea ferestrei de joc este de 640x480px și doriți să utilizați un efect de înclinare 4x4 (1: 4), atunci activele originale ar trebui proiectate la 160x120px. Când extindeți obiectele de artă, amintiți-vă că totul trebuie să fie "X" ori mai mare decât dimensiunea originală, unde "X" este un număr întreg.
Orice modificare a vizualizării jocului sau a poziționării sprite individuale trebuie, de asemenea, să fie luată în considerare cu atenție atunci când încercați să desenați suprapunerea cu teșitură. Acest lucru ne duce la cea mai importantă regulă care trebuie urmată:
Mutarea pe bază de rețea este obligatorie! În imaginea de mai sus, avem un exemplu corect de deplasare pe grilă pe stânga și un exemplu incorect în partea dreaptă. Deoarece activele originale au fost mărite de patru ori, toate mișcările verticale și orizontale ar trebui să ajungă la o grilă de 4x4. Sprite-ul de pisici, din partea dreaptă, a mutat un pixel în dreapta și un pixel în jos, ducând la ruperea curgerii chiar a blocurilor de înclinare.
Acesta a fost un exemplu de efect de pixel înclinat care a fost "ars" în active. Următorul exemplu arată ce se întâmplă atunci când nu urmați mișcarea bazată pe grilă în timp ce implementați efectul la rulare:
Observați cum suprapunerea cu pixeli înclinate este puțin greșită în întreaga imagine. Acest lucru se datorează faptului că suprapunerea teșitură acoperă întreaga fereastră a jocului și nu se mișcă, în timp ce spritele de dedesubt se mișcă, dar nu se rup în grila 4x4. Sa nu uiti asta toate mișcarea în mișcare trebuie să se conformeze rețelei dictate de dimensiunea blocului tău conic, determinată de rata de extindere a activului.
Da, este mai logic să implementați acest efect în cadrul codului dvs. de joc, decât în timpul creării activelor. Aplicarea acestui efect în timpul creării de active vă permite să aveți mai multă libertate de a experimenta rapid și de a găsi stilul perfect care se potrivește proiectului dvs. Puteți aplica diferite suprapuneri utilizând diferite stiluri de amestecare, reglați saturația și contrastul artei de bază și înlocuiți culorile pentru a găsi exact echilibrul înainte de a decide asupra aspectului final.
Acesta este un exemplu extins de bloc 6x6 înclinat. Veți dori să vă păstrați blocurile înclinate pe un fundal transparent, dar am folosit albastru aici pentru a vedea diferența de opacitate.
Pentru a crea acest bloc înclinat, am început cu o pânză care se potrivește cu mărimea mea de artă finală. În acest exemplu particular, am creat o imagine 6x6 destinată artei de 1: 6 pixeli (mărire de 600%). Apoi, cu o perie cu un pixel, am pornit în colțul din stânga jos și am aplicat trei pixeli de negru la opacitate de 75%. Pe măsură ce m-am îndepărtat de colț, am redus opacitatea periei mele la 50% și, în final, la 25%. Apoi am oglindit aceeași tehnică, dar cu alb, începând din colțul din stânga sus.
Multe instrumente comune, cum ar fi Photoshop și GIMP, vă permit să creați și să definiți modele personalizate. Aceasta este cea mai rapidă și mai ușoară modalitate de a umple întreaga pânză cu o suprapunere cu pixeli înclinate. Pentru exemplul de mai sus, am eliminat fundalul albastru și am salvat blocul ascuțit ca model. Acum, ori de câte ori doresc să aplice această suprapunere pentru arta mea, tot ce trebuie să fac este să folosesc instrumentul pentru vopsea de vopsea pentru a plasa modelul pe stratul superior.
După ce definiți câteva modele personalizate de blocuri înclinate, puteți începe să experimentați diferite stiluri. Mai sus, avem patru stiluri diferite de înclinare aplicate aceleiași imagini. Observați cum schimbările subtile ale construcției și opacitatea diferitelor blocuri teșite pot modifica foarte mult forma și vibrația spritelor rezultate. Experimentați cu diferite dimensiuni și stiluri pentru a găsi tipul de teșitură care complimentează arta pixelilor.
Diferitele moduri de amestecare oferite de majoritatea instrumentelor de desenare pot avea, de asemenea, efecte drastic diferite.
În imaginea de mai sus, se aplică același stil conic folosind trei moduri de amestecare diferite. Modul standard de suprapunere creează o imagine foarte izbitoare și vibrantă, cu un contrast intens între zonele luminoase și întunecate ale teșitului. Modul Color Burn întrerupe complet zonele luminoase ale înclinării, creând o teșitură aproape triunghiulară și separată. Modul de Lumină Soft este perfect pentru culori dezactivate, creând o margine mai puțin pronunțată.
În loc să inserați active în jocul dvs. care au acest efect copiat, puteți genera în schimb suprapunerea pixelilor consolați în timpul execuției. Acest lucru va duce la un joc mult mai scalabil și mai adaptabil dacă vreți să schimbați mai târziu activele, miscarea rețelei sau dimensiunea ferestrei jocului.
În timp ce nu vă pot spune exact cum să implementați acest efect în proiectul dvs. specific, vă pot îndrepta cu siguranță în direcția cea bună. Majoritatea IDE-urilor de jocuri au funcționalitatea generală necesară pentru acest efect, deci nu ar trebui să aveți nicio problemă care să integreze o suprapunere pixelă în proiect. Utilizatorii Flash și ActionScript, de exemplu, pot utiliza ColorMatrixFilter pentru a aplica modurile de îmbinare la suprapunerea cu teșitură, iar utilizatorii de jocuri de joc pot utiliza instrumentele de primă clasă încorporate sau chiar pot crea un obiect suprapus înclinat care se bazează pe un strat specific deasupra artei bunuri.
În primul rând, trebuie să decideți cum veți gestiona extinderea inițială a activelor. Vă recomandăm să folosiți arta de 1: 1 pixeli și să scalați totul înainte de ao desena pe ecran, apoi să aplicați suprapunerea cu teșitură ca efect postprocesare.
În al doilea rând, trebuie să vă gândiți să creați un meniu de depanare care vă va permite să testați diferite dimensiuni ale șuruburilor și moduri de amestecare. Niciodată nu știți cât de diferite culori și mișcări vor reacționa la anumite suprapuneri, așa că jucați în siguranță și experimentați cu cât mai multe combinații posibil. S-ar putea să constatați că este necesar să modificați opacitatea sau modul de amestecare în anumite scene ale jocului dvs., astfel încât posibilitatea de a le testa în timp real va fi cu siguranță utilă.
De asemenea, ar trebui să planificați modul în care vă veți ocupa de HUD sau GUI pentru jocul dvs. Doriți ca aceste elemente să se situeze deasupra sau dedesubtul suprapunerii pixelului?
Efectul pixelizat aplicat la câteva jocuri familiare vechi.Acest efect este un mod minunat de a-ți îmbogăți arta jocului fără a fi nevoie de algoritmi, shadere sau de un artist talentat. Sunteți grăbit pentru timp într-un joc gem? Aceasta este o modalitate rapidă și ușoară de a adăuga un pic mai mult lustruire vizuală la munca ta.
Cel mai important aspect al acestui efect este totuși că vă încurajează să vă murdăriți și să experimentați mâinile, ceea ce vă va conduce, fără îndoială, la o serie de alte descoperiri de-a lungul drumului.
Accentsconagua