Adăugați adâncime la jocul dvs. cu Parallax Scrolling

De două ori pe lună, revizuim câteva postări preferate ale cititorilor noștri de-a lungul istoriei Activetuts +. Acest tutorial a fost publicat pentru prima oară în octombrie 2009 (și a dus la invitarea lui Michael să fie Activetuts + Tech Editor!)

Aceasta este o tehnică foarte simplă pe care o puteți folosi pentru a adăuga iluzia profunzimii la orice joc lateral-scroller. În timp ce vă explic cum este realizat, vom analiza, de asemenea, realizarea de fundaluri infinit repetate.


Introducere

Puteți vedea elementele de bază parlaxa scrolling efect la locul de muncă în demo. Prin ajustarea vitezelor cu care se derulează anumite obiecte, putem schimba cât de aproape sau de departe par să fie.

Acest tutorial va explica modul de codificare a efectului, precum și modul în care aparatul foto al jocului pare să urmeze mașina. În cele din urmă, acesta va explica modul de a crea fundaluri infinite repetat, la fel ca în Scooby Doo.


Pasul 1: Configurarea

Dacă utilizați Flash, creați un nou fișier Flash ActionScript 3.0. Setați mărimea scenei să fie ceea ce vă place; Am ales valoarea implicită de 550 de 400 de pixeli.

Dacă nu utilizați IDE Flash, nu vă faceți griji; creați doar un nou proiect AS3. Fișierul zip conține un SWC cu toate graficele mele, astfel încât să le poți folosi doar adăugând-o în bibliotecă. Treceți peste toate etapele de desen, dacă faceți acest lucru.

daca tu sunteți folosind IDE-ul Flash, dar nu doriți să desenați nimic, zipul conține, de asemenea, un fișier FLA care conține toate filmele mele MovieClips :)


Pasul 2: Desenați o mașină

Creați un nou simbol MovieClip și trageți o mașină. Puteți să-l animați dacă doriți. Iată-mi:

Încercați să centrați mașina astfel încât punctul de înregistrare (crucea mică) să fie la jumătatea drumului. Acest lucru va face mai ușor camera să o urmeze mai târziu.


Pasul 3: Exportați mașina pentru ActionScript

Faceți clic dreapta pe simbolul mașinii din Bibliotecă și selectați Proprietăți:

Dă-ți masina o clasă (Mașină va face) și verificați Exportați pentru ActionScript (aceasta ne permite să accesăm mașina folosind codul). De asemenea, verificați Export în primul cadru (altfel, va trebui să facem un preloader).


Pasul 4: Desenați un drum

Creați un alt simbol nou, dar de data aceasta trageți un drum:

Faceți-o mai largă decât etapa, dar spre deosebire de mașină, aliniați punctul de înregistrare cu marginea din stânga a drumului. Acest lucru ne va ajuta mai târziu, când trebuie să îl transformăm într-un model repetat.

La fel ca și dvs. pentru mașină, dați drumului o clasă, exportați-o pentru ActionScript și exportați-o în primul cadru.


Pasul 5: Creați Clasa de documente

Creați un nou fișier AS și inserați în el codul următor:

 pachet import flash.display.MovieClip; clasa publică ParallaxDemo extinde MovieClip funcția publică ParallaxDemo () 

Salvați ca ParallaxDemo.as, în același folder ca și FLA (sau ca proiect, dacă nu utilizați IDE-ul).

Dacă utilizați IDE, asigurați-vă că acesta este setat ca clasă de document în panoul Proprietăți al documentului dvs.:

Nu sunteți sigur ce facem aici? Consultați sfatul meu rapid privind utilizarea unei clase de documente.


Pasul 6: Configurați mașina și drumul

Creați instanțe noi ale mașinii și drumului în fișierul AS: (linii 6, 7, 11, 12)

 pachet import flash.display.MovieClip; clasa publică ParallaxDemo extinde MovieClip public var car: Mașină; public drum rutier: Drum; funcția publică ParallaxDemo () car = new Car (); drum = drum nou (); 

Pasul 7: Poziționați mașina și drumul

Dacă utilizați grafica mea, puteți să copiați următorul cod (linii 14-17):

 pachet import flash.display.MovieClip; clasa publică ParallaxDemo extinde MovieClip public var car: Mașină; public drum rutier: Drum; funcția publică ParallaxDemo () car = new Car (); drum = drum nou (); car.x = 275,0; car.y = 235,0; road.x = 0.0; road.y = 294.0; 

În caz contrar, va trebui să dai seama unde ar trebui plasat mașina și drumul la început. Creați un nou strat în linia de timp a FLA, apoi faceți-l într-un strat de ghidare făcând clic dreapta și selectând Ghid. Flash va ignora tot ce faceți în acest strat când creează un SWF, așa că trageți aici simbolurile mașinii și ale drumului.

Asigurați-vă că marginea stângă a drumului dvs. este aliniată cu marginea din stânga a scenei și că mașina este aproximativ în centru (orizontal). Apoi ajustați-le astfel încât să se potrivească împreună:

Acum, ia-mi codul de mai sus și ajustați-l pentru a corespunde coordonatelor x și y ale mașinii și drumului. Dacă faceți clic pe mașina sau pe drumul dvs., veți putea vedea aceste valori în panoul Proprietăți.


Pasul 8: Adăugați simbolurile pe scenă

Dacă vă testați acum filmul, nu veți vedea nimic. Trebuie să adăugămChild () mașina și drumul spre scenă:

 funcția publică ParallaxDemo () car = new Car (); drum = drum nou (); car.x = 275,0; car.y = 235,0; road.x = 0.0; road.y = 294.0; stage.addChild (drum); stage.addChild (mașină); 

(Asigurați-vă că adăugați mai întâi drumul sau că va acoperi mașina!)

Testați acum filmul și ar trebui să arate astfel:


Grozav! Ei bine, OK, nu este nimic spectaculos încă. Dar acum configurația nu mai este posibilă, putem face acest lucru mai interesant. Pentru început, hai să ne mișcăm mașina?


Pasul 9: Adăugați un mesaj de ascultare a evenimentelor ENTER_FRAME

Modificați clasa de documente pentru a adăuga un ascultător de evenimente care să fie declanșat pe fiecare cadru: (linii 4, 23, 26-29)

 pachet import flash.display.MovieClip; importul flash.events.Event; clasa publică ParallaxDemo extinde MovieClip public var car: Mașină; public drum rutier: Drum; funcția publică ParallaxDemo () car = new Car (); drum = drum nou (); car.x = 275,0; car.y = 235,0; road.x = 0.0; road.y = 294.0; stage.addChild (drum); stage.addChild (mașină); addEventListener (Eveniment.ENTER_FRAME, onEnterFrame);  funcția publică onEnterFrame (evt: Event): void 

Dacă ați păstrat rata prestabilită a cadrelor de 12fps, funcția onEnterFrame () va fi apelată la fiecare 1/12 din secundă.


Pasul 10: Deplasați mașina respectivă!

Dacă vom continua să creștem poziția x a mașinii?

 funcția publică peEnterFrame (evt: Event): void car.x = car.x + 10; // dacă sunteți pregătit pentru o provocare, încercați să adăugați controale de bază // pentru a permite jucătorului să accelereze // și să decelereze. 

? putem face mașina să se deplaseze înainte?

? chiar de la marginea ecranului!


Pasul 11: Urmați mașina!

Acest lucru este greu ideal; după câteva secunde nu mai putem vedea mașina nici măcar. Deci, să facem ca "camera" să pară să urmeze mașina.

Ce anume înseamnă asta? Ei bine, în principiu avem nevoie de mașină pentru a rămâne în același loc, în timp ce drumul pare să se deplaseze înapoi.

Asta înseamnă că noi ar putea faceți ceva de genul:

 funcția publică peEnterFrame (evt: Event): void road.x = road.x - 10; 

? dar acest lucru ar complica lucrurile mai târziu. De exemplu, imaginați-vă dacă vrem să adăugăm și alte mașini pe șosea, sau powerups, slicks sau orice altceva; ar trebui să mutăm fiecare din ele înapoi în funcția onEnterFrame ().

Nu, există o tehnică mult mai simplă pe care o putem folosi. În loc să adăugăm () mașina și drumul spre scenă, vom crea un obiect nou, addChild () pe care îl vom face și apoi vom muta acest obiect înapoi în funcția onEnterFrame ().

Sună mai complicat decât este. Permiteți-mi să vă arăt codul real:

 pachet import flash.display.MovieClip; importul flash.events.Event; clasa publică ParallaxDemo extinde MovieClip public var car: Mașină; public drum rutier: Drum; public var roadContainer: MovieClip; funcția publică ParallaxDemo () car = new Car (); drum = drum nou (); car.x = 275,0; car.y = 235,0; road.x = 0.0; road.y = 294.0; roadContainer = new MovieClip (); roadContainer.addChild (drum); roadContainer.addChild (mașină); stage.addChild (roadcontainer); addEventListener (Eveniment.ENTER_FRAME, onEnterFrame);  funcția publică onEnterFrame (evt: Event): void car.x = car.x + 10; roadContainer.x = roadContainer.x - 10; 

În liniile 9 și 21 noi creăm un nou videoclip, gol, numit MovieClip roadContainer. Flash își stabilește automat valorile x și y la 0.

În liniile 22 și 23 adăugăm drumul și mașina la roadContainer, în loc de scenă. În linia 25 adăugăm roadcontainer-ul pe scenă - și din moment ce mașina și drumul sunt acum adăugate la roadContainer, asta ne permite să le vedem pe scenă.

Linia 32 este cea mai importantă parte. Aici, mutăm roadContainer înapoi cu aceeași sumă pe care tocmai am mutat-o înainte. Aceasta înseamnă că tot ce se află în interiorul roadContainer este mutat la stânga cu 10 pixeli, dar din moment ce mașina a fost mutată cu 10 pixeli spre dreapta, ea rămâne în centrul ecranului.

E un pic cam ca să fugi pe scări rulante în jos. Dacă te urci la aceeași viteză cu care se mișcă în jos, apoi la o persoană care stă pe scările de lângă tine, nu pare să se miște.

Efectul general:

Mașina rămâne în centru! Grozav. Ei bine, mult în afară de gaura albă care se deschide. Dar vom ajunge la asta. Acum, dacă doriți să adăugați mai multe mașini pe drum, tot ce trebuie să faceți este să adăugațiChild () la roadContainer.


Pasul 12: Îmbunătățiți următorul

Problema cu doar mutarea întregului container înapoi câte puțin la fiecare cadru este că nu este foarte flexibil. Ce se întâmplă dacă jucătorul folosește un powerup pentru a teleporta mașina cu 100 de pixeli înainte în loc de 10? Ce se întâmplă dacă vrem să facem centrul de cameră pe o mașină diferită?

Când se încarcă mai întâi SWF, poziția x a mașinii este de 275 și poziția x a roadContainer este 0. Cum se schimbă fiecare în timp?

  • Start: car.x este 275, roadContainer.x este 0
  • Cadrul 1: car.x este 285, roadContainer.x este -10
  • Cadrul 2: car.x este 295, roadContainer.x este -20
  • Raza 3: car.x este 305, roadContainer.x este -30

Vedeți o regulă generală care leagă cei doi? Dacă nu, verificați acest lucru:

  • Începutul: car.x este 275, roadContainer.x este de 275 - 275
  • Cadrul 1: car.x este 285, roadContainer.x este de 275 - 285
  • Cadrul 2: car.x este 295, roadContainer.x este de 275 - 295
  • Raza 3: car.x este 305, roadContainer.x este de 275 - 305

Conexiunea este mai puțin evidentă acum! Să-l punem în cod:

 funcția publică peEnterFrame (evt: Event): void car.x = car.x + 10; roadContainer.x = 275 - car.x; 

Puteți face ceea ce vă place cu mașina acum. Accelerați-l, teleportați-l înainte de un număr aleator de pixeli, opriți-l în mișcare - indiferent! Camera va continua să o urmeze.

Și dacă doriți ca camera să urmeze un obiect diferit, înlocuiți-o car.x cu otherObject.x în linia pe care tocmai am schimbat-o.


Pasul 13: Extindeți drumul

Este timpul să fixăm golul alb fără sfârșit al nimicului la sfârșitul drumului.

Cea mai simplă cale de a face drumul mai lungă este doar să adăugăm o altă instanță a simbolului rutier în dreapta simbolului nostru existent, cum ar fi: (liniile 9, 22, 23, 27)

 pachet import flash.display.MovieClip; importul flash.events.Event; clasa publică ParallaxDemo extinde MovieClip public var car: Mașină; public drum rutier: Drum; public var road2: Drum; public var roadContainer: MovieClip; funcția publică ParallaxDemo () car = new Car (); drum = drum nou (); road2 = Road nou (); car.x = 275,0; car.y = 235,0; road.x = 0.0; road.y = 294.0; road2.x = road.x + road.width; road2.y = road.y; roadContainer = new MovieClip (); roadContainer.addChild (drum); roadContainer.addChild (drum2); roadContainer.addChild (mașină); stage.addChild (roadcontainer); addEventListener (Eveniment.ENTER_FRAME, onEnterFrame);  funcția publică onEnterFrame (evt: Event): void car.x = car.x + 10; roadContainer.x = 275 - car.x; 

Iată cum arată a mea când este rulat:

Aoleu. Mai bine rezolvați acest decalaj.


Pasul 14: Gândiți-vă la Gap

(Dacă nu vă desenați grafice proprii, treceți la pasul 17.)

Problema este în linia 22 a codului de mai sus, road2.x = road.x + road.width. Drumurile lăţime valoarea trebuie să fie puțin mai mare decât drumul meu pare să fie.

Chiar dacă drumul dvs. nu are aceeași problemă, este posibil să nu se potrivească perfect perfect. Deci, întoarceți-vă la FLA și trageți un alt simbol Road din bibliotecă în stratul Ghid.

Asigurați-vă că are aceeași poziție y ca primul segment al drumului, apoi mutați-l de-a lungul orizontal până când nu există niciun spațiu:


Pasul 15: Tweak Join

Dacă marginile celor două simboluri nu se îmbină perfect, faceți dublu clic pe una dintre ele. Veți putea să o editați și să vedeți imediat cum modificările pe care le faceți afectează cealaltă:

Utilizați acest truc pentru a ajusta marginile simbolului astfel încât îmbinarea să fie curată.


Pasul 16: Eliminați lățimea

În loc de a folosi road.width pentru a afla unde trebuie plasat cel de-al doilea segment rutier, vom folosi un număr pe care îl sun lăţime.

Pentru a găsi acest număr pentru drumul dvs., luați poziția x a simbolului dvs. de drum cel mai de dreapta (în stratul Ghid) și scade poziția x a simbolului rutier cel mai stâng.

Tot ceea ce faceți aici este imaginea câtor pixeli în afară dintre cele două segmente de drumuri trebuie să fie pentru a obține aceeași conexiune perfectă pe care tocmai ați creat-o în Flash.


Pasul 17: Adăugați o variabilă a mărimii

Creați o nouă variabilă Număr, roadBreadth, și setați valoarea la numărul pe care l-ați elaborat în etapa anterioară: (Dacă utilizați grafica mea, acest număr este 653.7.)

 clasa publică ParallaxDemo extinde MovieClip public var car: Mașină; public drum rutier: Drum; public var road2: Drum; public var roadContainer: MovieClip; public var roadBreadth: Number; funcția publică ParallaxDemo () car = new Car (); drum = drum nou (); road2 = Road nou (); roadBreadth = 653.7;

Pasul 18: Înlocuiți lățimea cu lățimea

Înlocuiți linia:

 road2.x = road.x + road.width;

cu:

 road2.x = road.x + roadBreadth;

Acum încercați. Nu ar trebui să existe niciun decalaj:

Grozav! Încă mai fugim în golul alb nesfârșit?


Pasul 19: Realizarea fundalului se repetă în mod nelimitat

Am putea crea un drum3 și un drum4 și un drum5 și așa mai departe, poziționându-le pe fiecare la dreapta celui de dinaintea lor, dar indiferent de câte segmente am creat, mașina ar ajunge la sfârșitul lor în cele din urmă.

Pentru o soluție mai bună, gândiți-vă când ați fost copil. Ați jucat vreodată acel joc în care vă prefaceți că podeaua este făcută din lavă, dar trebuie să ajungeți la celălalt capăt al camerei într-un fel? (Dacă nu, heck, du-te să joci acum, este o distracție grozavă.)

Nu știu despre tine, dar în casa mea, pernele din canapea erau considerate a fi rezistente la lava, capabile să fie folosite ca pietre de trecere. Am avut doar un cuplu, care nu era suficient pentru a ajunge la capătul camerei - dar în cele din urmă mi-am dat seama cum să-i fac să ajungă mai departe.

Aș fi așezat cele două perne jos pentru a face o scurtă cale și pentru a merge la al doilea. Apoi, l-aș lua pe cel din spatele meu, l-aș lăsa în fața mea și m-aș apropia de el. Prin ridicarea în mod repetat a celui din spatele meu și mutarea în fața mea, aș putea ajunge oriunde aș fi plăcut.

Putem folosi aceeași tehnică pentru a face drumul să dureze pentru totdeauna, fără a fi nevoie să utilizați mai mult de două segmente. Tot ce trebuie să facem este să detectăm când un segment de drum este "în spatele" camerei și să-l mutați în fața acesteia.

Ce vreau să spun prin "în spatele" camerei? Vreau să spun că marginea din dreapta a segmentului este în afara marginii din stânga a scenei. Putem folosi această declarație if-pentru a verifica dacă:

 dacă (road.x + roadBreadth + roadContainer.x < 0 )  //road is behind the camera 

Cunoscând de ce funcționează acest lucru? Dacă nu, treceți la pasul următor. În caz contrar, permiteți-mi să explic:

  • road.x este câte pixeli la dreapta marginea stângă a drumului este de la marginea din stânga a roadContainer
  • road.x + roadBreadth este numărul pixelilor din dreapta dreapta-marginea de mână a drumului este de la marginea stângă a roadContainer
  • roadContainer.x este câte pixeli la dreapta marginea din stânga a roadContainer este de la marginea stângă a scenei (din moment ce roadContainer se mișcă constant în stânga, aceasta va fi, de obicei, negativă)
  • Deci, (road.x + roadBreadth + roadContainer.x) este numărul pixelilor din dreapta dreapta-marginea mână a drumului este de la marginea din stânga a scenei.

Pfiu! OK, recunosc, este destul de confuz. Dacă doriți o explicație mai profundă, nu ezitați să întrebați în comentarii :)


Pasul 20: Deplasați drumul în fața camerei

Acum, când putem spune când segmentul rutier se află în spatele camerei, trebuie să-l mutăm din nou în fața camerei.

Dacă am mutat drumul spre dreapta prin roadBreadth numărul de pixeli, ar fi în exact același loc ca și celălalt segment rutier. Deci, trebuie să o mutăm spre dreapta cu o sumă de două ori mai mare:

 dacă (road.x + roadBreadth + roadContainer.x < 0 )  road.x = road.x + (2 * roadBreadth); 

Puneți-o în funcția onEnterFrame () și testați-o:


După cum puteți vedea, un segment de drum se repetă, dar celălalt nu este încă.


Pasul 21: Deplasați celălalt segment de drum

Putem copia codul de mai sus pentru celălalt segment rutier, road2:

 funcția publică onEnterFrame (evt: Event): void car.x = car.x + 25; roadContainer.x = 275 - car.x; dacă (road.x + roadBreadth + roadContainer.x < 0 )  road.x = road.x + (2 * roadBreadth);  if ( road2.x + roadBreadth + roadContainer.x < 0 )  road2.x = road2.x + (2 * roadBreadth);  

Testați-l din nou:


Fantastic! Un fundal infinit de buclă, derulant lateral :) Acum, pentru a crea efectul real de parallax?


Pasul 22: Creați dealuri în rulouri

(Depășiți acest pas dacă utilizați grafica.)

Vom avea nevoie de un fundal repetat pentru a scoate în evidență derularea paralaxelor. Am ales dealuri, dar ați putea face clădiri, păduri, sculpturi extraterestre - tot ce vă place!

Există câteva trucuri pe care le puteți folosi pentru a face ceea ce trageți să pară că este mai departe decât mașina:

  1. Utilizați culori duller (de exemplu, o nuanță mai închisă de verde pentru iarbă)
  2. Desenați mai puține detalii (nu există ciupite individuale de iarbă)
  3. Adăugați un efect "neclar" la margini (deoarece aparatul foto este focalizat pe mașină)

Urmați aceiași pași de bază pe care l-am folosit pentru desenarea drumului:

  • Asigurați-simbolul mai larg decât etapa
  • Aliniați simbolul astfel încât punctul de înregistrare să se afle la marginea din stânga
  • Dați-i un nume de clasă, exportați-l pentru ActionScript și exportați-l în primul cadru
  • Ajustați asamblarea pentru a vă asigura că două simboluri se potrivesc împreună
  • Aflați "lățimea" simbolului

Iată-mi:


Pasul 23: Codul dealurilor

Codul privind dealurile este aproape exact același cod ca și cel pe care tocmai l-am scris referitor la drumuri. Mergeți să vă scrieți singur. Am lipit fisierul AS cu toate noile adaugari de mai jos, astfel incat sa te poti referi la el daca iti place:

 pachet import flash.display.MovieClip; importul flash.events.Event; clasa publică ParallaxDemo extinde MovieClip public var car: Mașină; public drum rutier: Drum; public var road2: Drum; public var roadContainer: MovieClip; public var roadBreadth: Number; publice var hills: Hills; publice var hills2: Hills; publice var hillsBreadth: Number; public var hillsContainer: MovieClip; funcția publică ParallaxDemo () car = new Car (); drum = drum nou (); road2 = Road nou (); roadBreadth = 653.7; dealuri = Hills noi (); hills2 = Hills noi (); hillsBreadth = 890.5; car.x = 275,0; car.y = 235,0; road.x = 0.0; road.y = 294.0; road2.x = road.x + roadBreadth; road2.y = road.y; hills.x = 0; hills.y = 14,5; hills2.x = hills.x + hillsBreadth; hills2.y = hills.y; roadContainer = new MovieClip (); roadContainer.addChild (drum); roadContainer.addChild (drum2); roadContainer.addChild (mașină); hillsContainer = nouClipClip (); hillsContainer.addChild (dealuri); hillsContainer.addChild (dealurile2); stage.addChild (hillsContainer); stage.addChild (roadcontainer); addEventListener (Eveniment.ENTER_FRAME, onEnterFrame);  funcția publică onEnterFrame (evt: Event): void car.x = car.x + 10; roadContainer.x = 275 - car.x; dacă (road.x + roadBreadth + roadContainer.x < 0 )  road.x = road.x + (2 * roadBreadth);  if ( road2.x + roadBreadth + roadContainer.x < 0 )  road2.x = road2.x + (2 * roadBreadth);  hillsContainer.x = 275 - car.x; if ( hills.x + hillsBreadth + hillsContainer.x < 0 )  hills.x = hills.x + (2 * hillsBreadth);  if ( hills2.x + hillsBreadth + hillsContainer.x < 0 )  hills2.x = hills2.x + (2 * hillsBreadth);    

(Noile linii sunt 12-15, 24-26, 35-38, 45-47, 49 și 67-75. Cum ai făcut-o?)

Iată rezultatul:


S-ar putea să vă întrebați de ce am deranjat crearea unui hillContainer. Dacă da, atunci frumos văzut! Am putea adăugaChild () dealurile la roadContainer - dar crearea unui nou container pentru fundal este ceea ce ne permite să creăm efectul real de parallax.


Pasul 24: Efectul parallaxului real

Efectul necesită doar modificarea unei linii de cod:

 hillsContainer.x = 275 - car.x;

în aceasta:

 hillsContainer.x = (275 - car.x) * 1/5;

Acest lucru face ca dealurile să deruleze la 1/5 din viteza drumului și a mașinii.

Se pare ca aceasta:


Nu trebuie să utilizați 1/5; faceți această valoare mai mare sau mai mică, până când viteza este simplă pentru dvs..

De ce funcționează acest lucru? Ei bine, amintiți-vă că vedem lucrurile într-un con de viziune; cu cât este mai mult ceva, cu atât mai mult putem vedea. Deci, dacă umblăm prin două obiecte de aceeași dimensiune, dar unul este mai departe, cel mai apropiat dintre cei doi va părea să se miște mai repede, după cum urmează:


Să adăugăm un alt strat de fundal, chiar mai departe decât dealurile.


Pasul 25: Creați munți

Acest lucru este exact același lucru cu crearea drumului și dealurilor, așa că nici măcar nu voi lipi codul de data asta! Tot ce voi face este să post o imagine a munților mei?

? să vă spun că lățimea munților mei este 751,5, x este 0 și y este 63,0; vă reamintesc să creați un nou videoclip MountainContainer MovieClip; și să știți că munții mei parcurg la 1/16 viteza drumului meu.

Și arătați rezultatul:



Pasul 26: Creați cerul

Cerul este frumos și ușor. Din moment ce este într-adevăr departe, se derulează atât de încet, încât pare că abia se derulează deloc. Nori și păsări se mișcă, bineînțeles, iar Soarele se ridică și se fixează, dar niciunul dintre acestea nu se datorează efectului de derulare a paralaxelor. Asta înseamnă că nu trebuie să facem nimic în parcurgerea cerului!

(Excepția la acest lucru este dacă camera se deplasează într-adevăr, într-adevăr rapid, cum ar fi viteza unui avion sau a unei rachete. Chiar și atunci, asigurați-vă că o parcurgi foarte încet.)

Deci, nu trebuie să vă faceți griji despre lățimea de aici sau să creați o imagine infinit repetată. Este încă o idee bună să faceți un skyContainer, totuși, doar pentru a păstra lucrurile coerente. Cerul meu este doar un dreptunghi albastru:

Dacă plasați-o la x = 0, y = 0 va acoperi întreaga scenă. Iată cum arată în SWF:



Pasul 27: Creați un copac mare în prim-plan

Am creat o mulțime de obiecte de fundal, dar nimic mai aproape de cameră decât mașina. După cum sunt sigur că îți dai seama, un astfel de obiect ar trebui să parcurgă mai repede decât RoadContainer, așa că hai să încercăm asta.

Pentru obiectul din prim plan, am desenat un copac:

Arborele este puțin diferit de celelalte obiecte pe care le-am făcut până acum, pentru că nu este făcută pentru a se bucura - este singur, nu se va alătura unui alt copac care stă lângă el. Acest lucru înseamnă că avem nevoie de un copac pe ecran în orice moment (mai ales că este atât de mare!)

Așa că avem nevoie de un singur obiect Tree și în cod. Scrieți codul pentru acest obiect. Dacă utilizați grafica mea, poziția de pornire x va fi de 780.0, iar poziția y va fi 175.0.

Din moment ce arborele va parcurge, avem încă nevoie de un container de copaci, iar noi avem nevoie de un TreeBreadth. Cu toate acestea, de data aceasta, treeBreadth controlează doar numărul de pixeli dintre fiecare copac. Am folosit o rundă de 1000.0 pentru a mea.


Pasul 28: Derulați arborele

Deoarece există un singur copac, codul de defilare este mult mai simplu:

 treeContainer.x = (275 - car.x) * 3; dacă (tree.x + treeBreadth + treeContainer.x < 0 )  tree.x = tree.x + (2 * treeBreadth); 

Nimic complicat :) Luați notă că derulează de trei ori mai repede decât drumul. Iată rezultatul final:


Felicitări! Ați creat o cameră de derulare dinamică, fundaluri care se repetă infinit și un efect de parallax pseudo-3D :)


Idei suplimentare de încercare

Iată câteva alte lucruri pe care le puteți face cu același cod:

Dacă creați un "shoot-up" și doriți ca toate exploziile dvs. să apară mai aproape de aparatul de fotografiat decât dușmanii dvs., creați pur și simplu un nou explozionContainer, addChild () orice explozie la asta și faceți-l să parcurgeți aceeași viteză ca și rezervorul de dușmani.

Puneți scorul jucătorului, contorul vieții, butoanele mut și pauză și orice alte părți ale interfeței jocului într-un singur container. Plasați acest recipient în fața tuturor celorlalte containere, dar nu îl derulați. Aceasta este o modalitate ușoară de a păstra camera și bunurile unui joc separate de interfața sa.

Încercați să aveți un singur container în timp ce faceți recipientele în fața acestuia și în spatele acestuia să derulați în direcții opuse. Acest lucru creează un efect de rotație rece, așa cum se vede cam la cinci minute în acest clip de la Disney's White Snow!


Concluzie

Vă mulțumim că ați citit acest tutorial; Sper ca ti-a placut. Dacă ceva nu este clar, sau dacă doriți să puneți întrebări despre efect, vă rugăm să postați un comentariu de mai jos.

Vorbind de comentarii, dacă creați ceva folosind acest tutorial, mi-ar plăcea dacă ați postat un link astfel încât am putut vedea :)

Cod