Share
Scrolling-ul Parallax este o modalitate simplă și eficientă de a crea iluzia profunzimii într-un joc 2D. Indiferent dacă dezvoltați un shooter vertical sau o platformă de derulare laterală orizontală, scrolling-ul parallaxului este un joc de jocuri de noroc încercat și adevărat, care va spori considerabil impactul imersiunii și grafic al proiectului dvs..
În acest tutorial, voi acoperi fundamentele scrolling-ului de parallax, împreună cu mai multe metode de implementare, astfel încât veți putea să introduceți în mod confident și cu succes parlaxarea în setul de calificări, indiferent de nivelul actual de calificare.
Încercați demo-ul de mai jos pentru a vedea scene care utilizează defilare orizontală, verticală, ambele și fără parallax. Faceți clic pe demo pentru ao activa, apoi utilizați tastele numerice pentru a comuta scenele și tastele săgeți pentru a muta nava spațială (pentru scenele corespunzătoare).
Parallaxul este definit ca deplasarea aparentă a unui obiect observat ca urmare a schimbării poziției observatorului. Cu parcurgerea paralaxelor 2D, poziția observatorului se schimbă numai de-a lungul axelor x și y. Numai viteza și locația unui obiect se vor schimba odată cu poziția observatorului, deoarece scalarea obiectului ar necesita o schimbare de-a lungul axei z.
Takashi Nishiyama Moon Patrol este larg creditat ca primul joc pentru parcurgerea paralaxelor 2D, însă tehnica a existat în animația tradițională încă din 1933. Folosind o cameră multiplană, animatorii au reușit să creeze un efect 3D non-stereoscopic care a creat iluzia profunzimii, permițând diferitelor obiectele de artă să se miște la viteze diferite în raport cu distanța percepută de obiectivul camerei. Acesta este modul în care parlaxarea scrolling este realizat în jocuri video moderne, dar în loc de o camera multiplane, scene sunt asamblate cu mai multe straturi și o singură cameră de joc sau vedere.
Prin împărțirea elementelor de fundal și a elementelor primare ale unui joc în straturi diferite, este posibil să se controleze viteza și poziția acestor elemente în funcție de straturile lor. Observatorul, în acest caz, este jucătorul și camera de joc rămâne concentrată asupra unui anumit punct sau obiect, în timp ce straturile de fundal și de prim plan se deplasează corespunzător.
Acest punct focal se mișcă la viteza "normală" sau viteza definită de gameplay. Obiectele de fundal se deplasează mai încet decât punctul focal, în timp ce obiectele din planul din față se mișcă mai repede decât punctul focal. Aceasta are ca rezultat o iluzie de adâncime care face o scenă 2D să se simtă mai degrabă imersivă.
În primul nostru exemplu, avem o scenă foarte simplă a unei străzi pe timp de noapte, care prezintă defilare orizontală fără elemente interactive. Diferitele straturi de fundal se deplasează la viteze predeterminate de-a lungul axei x. Pentru moment, să ne concentrăm asupra elementelor de bază ale derulării paralela fără să ne îngrijorăm despre mișcarea unui jucător sau despre schimbarea vederilor.
În primul rând, să distrugem elementele și atributele individuale ale scenei noastre. Fereastra jocului este de 600x300px, iar activitățile noastre de artă au fiecare o lățime de cel puțin 600 de pixeli. Prin utilizarea elementelor de fundal care sunt mai mari decât fereastra jocului, putem împiedica vizionarea întregului material în orice moment. Deoarece straturile sunt acoperite cu tigla, acest lucru va ajuta la prevenirea repetiției prea evidente, pe măsură ce acelasi lucru se deplasează pe o perioadă nedeterminată.
Cele patru straturi care alcătuiesc prima noastră scenă.Scena noastră este compusă din patru straturi. În acest exemplu, numărul stratului definește ordinea în care este atras activul pe ecran, precum și viteza de deplasare. Dacă acesta ar fi un platformer lateral-scrolling, atunci obiectul jucătorului ar exista în partea de sus a stratului 3. Acest strat ar fi punctul focal al observatorului și ar dicta și viteza straturilor de fundal și a straturilor primare.
Stratul 2 se mișcă mai lent decât cel al stratului 3, iar stratul 1 se mișcă mai lent decât stratul 2. Stratul 4 există ca strat prim-plan, deci se mișcă mai repede decât punctul focal pe stratul 3.
Există mai multe moduri în care puteți implementa acest tip de tehnică de derulare paralaxă. În acest exemplu, straturile se mișcă la viteze predeterminate fără a se referi unul la altul. Dacă intenționați să aveți scene multiple cu cantități diferite de straturi de fundal și de prim plan, atunci ar fi mai bine să definiți vitezele stratului prin citirea vitezei actuale a stratului focal. De exemplu, dacă punctul focal este Layer 3 și se mișcă la o viteză de 5, atunci fiecare strat de fundal succesiv s-ar mișca cu o viteză mai mică decât 5. Toate straturile primare se vor mișca cu o viteză mai mare decât 5.
// Variabile focal_point_speed = 5; layer_difference = 1; // Nivelul stratului focal layer3.hspeed = focal_point_speed; // straturi de fond layer2.hspeed = layer3.hspeed - layer_difference; layer1.hspeed = layer2.hspeed - layer_difference; // straturi primare layer4.hspeed = layer3.hspeed + layer_difference; layer5.hspeed = layer4.hspeed + layer_difference;
În timp ce derularea paralaxă este cea mai des utilizată cu fundaluri orizontale, ea poate fi utilizată și în scene verticale, ca în cazul acestui exemplu de spațiu. S-ar putea să existe mai multe modalități eficiente de a crea un câmp de stele, dar derularea paralaxelor face treaba.
Cel mai important lucru pe care trebuie să-l luăm de la acest exemplu vertical este acela că derularea paralaxelor funcționează în toate cele patru direcții de-a lungul axelor x și y. (Vom vedea cât de important este acest lucru în cel de-al treilea și ultimul exemplu.)
Această scenă prezintă patru straturi de fundal: un fundal negru static și trei colecții de stele de dimensiuni diferite. Fundalul static nu se mișcă și fiecare strat succesiv de stele crește și se mișcă mai repede, stratul final de stele determinând în cele din urmă viteza verticală a punctului focal, nava spațială a jucătorului. Acest tip de derulare paralaxă ne permite să simulăm adâncimea spațiului simulând în același timp mișcarea înainte. Nava jucătorului nu se mișcă niciodată în sus pe ecran, dar totuși aveți o senzație de spațiu în ritm rapid.
Acum că avem o mai bună înțelegere a ceea ce facem despre parallax scrolling, putem începe să construim o scenă în care sunt implementate defilarea orizontală și verticală, împreună cu o vizualizare de joc care urmărește mișcarea unui obiect controlat de jucător.
În demonstrația din partea de sus a tutorialului, această scenă este împărțită în două exemple. Prima versiune arată cum este scena fără parlaxare. Cea de-a doua versiune prezintă parlaxarea verticală și orizontală paralaxă și ilustrează cu adevărat modul în care derularea paralaxelor poate adăuga o mulțime de imersiune și profunzime la ceea ce inițial a fost o scenă foarte plată și lipsită de viață.
Cel mai important aspect al acestui exemplu este mișcarea jucătorului și viziunea jocului. Deoarece fondul nostru nu mai este blocat într-o poziție predeterminată a vitezei sau ecranului, trebuie să calculam viteza și poziția fiecărui strat în raport cu fereastra de vizualizare pe măsură ce se mișcă jucătorul.
Originea ferestrei noastre de vizualizare este în colțul din stânga sus la (X Y). Fiecare origine a activului stratului de fond este în colțul din stânga sus al sprite-ului (0,0). Prin găsirea coordonatelor actuale x și y ale ferestrei de vizualizare în raport cu lumea jocurilor, putem efectua un calcul pentru a determina locul unde ar trebui plasat originea unui strat de fond în scenă. Această poziție se modifică pe măsură ce fereastra de vizualizare se deplasează pe baza acestui calcul.
Folosind valori diferite în calculul fiecărui strat, putem să mutăm fiecare strat la viteze diferite, în funcție de cât de repede se mișcă jucătorul.
Codul pentru a desena stratul care stă direct în spatele obiectului jucătorului este în următorul format: draw_background_tiled_horizontal (strat, x, y) Unde draw_background_tiled_horizontal () este o funcție simplă de a desena un activ de țiglă într - o anumită locație și bg_ex_3_2 este stratul nostru activ.
// Stratul 3 draw_background_tiled_horizontal (bg_ex_3_2, view_xview [view_current] / 2.5, (view_yview [view_current] / 10) + 300);
Valoarea X a stratului în acest caz este definită de valoarea X a vederii curente împărțită la o valoare de 2.5, creând o mișcare orizontală care se mișcă ușor mai încet decât mișcarea vizuală însăși.
În mod similar, valoarea Y a stratului este definită de valoarea Y a vederii curente împărțită la 10. Valoarea Y a stratului este apoi mărită cu 300 să o poziționeze corect în legătură cu lumea jocurilor. Fără această adăugare suplimentară de 300, activul ar apărea aproape de partea de sus a lumii jocului, în loc de lângă partea de jos unde dorim să fie.
Aceste valori vor diferi în mod evident în proiectul dvs., dar este important să vă amintiți că viteza mișcării stratului va crește odată cu creșterea numărului divizării, dar numai până la un anumit punct. Prin utilizarea divizării, stratul se poate deplasa numai cu aceeași viteză sau mai lent decât viteza playerului.
Cele două straturi din spatele acestui strat se mișcă mai încet, deci numărul de diviziuni este mai mic:
// Layer 1 draw_background_tiled_horizontal (bg_ex_3_0, vedere_xview [view_current] / 1.5, (view_yview [view_current] / 2.5) + 175); // Layer 2 draw_background_tiled_horizontal (bg_ex_3_1, vizualizare_vizualizare [view_current] / 2, (view_yview [view_current] / 5) +250);
Pentru a realiza un strat care se mișcă mai repede decât punctul focal, cum ar fi un strat al primului plan, trebuie să se facă o ușoară modificare. Nu există niciun strat de prim plan în acest exemplu, iar stratul de puncte focale este de fapt vizibil numai în partea de jos a ecranului. Jucătorul este capabil să zboare în sus și deasupra punctului focal, care este la sol, astfel încât nava însăși devine punctul focal. Referindu-ne la teren ca punct focal în acest exemplu, deoarece solul este singurul strat care se mișcă la aceeași viteză percepută ca și nava spațială. Aici obținem adevăratul sens al vitezei în scenă.
Stratul de bază se mișcă mai repede decât vizualizarea în sine, astfel încât codul pentru a desena acest strat este ușor diferit de celelalte straturi de fundal:
// Stratul focal (ground) draw_background_tiled_horizontal (bg_ex_3_3, -view_xview [view_current] * 1.5, -view_yview [view_current] + 700);
Cu straturi care se mișcă mai repede decât vederea, luăm negativ X și Y ale vizualizării curente și le înmulțesc cu o anumită valoare. Nu există o diviziune implicată în calcularea vitezei straturilor primare. În acest exemplu, stratul de bază se deplasează cu o viteză orizontală de unu și jumătate mai repede decât viteza ferestrei de vizualizare. Nu se face o multiplicare a vitezei verticale a stratului, deci se mișcă la aceeași viteză ca și vedere. O valoare suplimentară de 700 se adaugă la valoarea Y a stratului pentru ao plasa în locația dorită în apropierea fundului lumii jocului.
Parallaxul este o modalitate simplă, dar foarte eficientă de a adăuga iluzia profunzimii unui joc 2D. Sper ca exemplele din demonstrație să fi demonstrat cât de eficientă poate fi și sper că tutorialul însuși a dovedit cât de simplu este implementarea!
Accentsconagua