Add Dybde til spillet med Parallax rulling
4
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
To ganger i måneden, vi besøker noen av våre lesere favoritt innlegg fra hele historien Activetuts +. Denne opplæringen ble første gang utgitt i oktober 2009 (og førte til min invitere Michael å være Activetuts + Tech Editor!)
Dette er en veldig enkel teknikk som du kan bruke til å legge illusjonen av dybde til enhver side-scroller spill. Mens jeg forklare hvordan det er oppnådd, vil vi også ta en titt på å lage uendelig gjentatte bakgrunn.
Innledning
Du kan se den grunnleggende < em> parallax rulling
effekt på jobb i demoen. Ved å justere hastigheter der enkelte objekter bla, kan vi endre hvor nær eller langt unna de synes å være.
Denne opplæringen vil forklare hvordan å kode effekten, samt hvordan å gjøre spillet kamera ser ut til å følge bilen. Til slutt, vil det forklare hvordan du kan lage uendelig gjentatte bakgrunn, akkurat som i Scooby Doo
Trinn 1:. Oppsett
Hvis du bruker Flash, opprette en ny Action 3.0 Flash-fil. Angi størrelsen på scenen for å bli hva du vil; Jeg har valgt standard 550 av 400 piksler
Hvis du ikke bruker Flash IDE, ikke bekymre deg.; bare lage en ny AS3 prosjekt. Zip-filen inneholder en SWC med alle mine grafikk, slik at du kan bruke dem bare ved å legge den til i biblioteket. Hopp alle tegne trinnene hvis du gjør det.
Hvis du er Opprett en ny MovieClip symbol og tegne en bil. Du kan animere det hvis du vil. Her er mine: Prøv å sentrere bilen, slik at registreringen punktet (den lille korset) er omtrent halvveis langs. Dette vil gjøre det enklere for kameraet å følge den senere Høyreklikk bilen symbol i biblioteket og velger Egenskaper Gi bilen en klasse ( Bil Opprett annet nytt symbol, men denne gangen tegne en vei: Gjør det bredere enn på scenen, men i motsetning til bilen, justere registreringspunkt med den venstre kanten av veien. Dette vil bidra til senere, når vi trenger å slå den inn i et repeterende mønster. Akkurat som du gjorde for bilen, gi veien en klasse, eksportere det for Actionscript og eksportere den i den første rammen. Opprett en ny AS fil og lim inn følgende kode inn i den: Lagre dette som ParallaxDemo.as Hvis du bruker IDE, må du huske å sette dette som dokumentet klasse i Properties Panel av dokumentet. Ikke sikker på hva vi gjør her? Sjekk ut min Quick Tips om hvordan du bruker et dokument klasse Opprett nye tilfeller av bilen og veien i AS filen: ( linjer 6, 7, 11, 12 Hvis du bruker mine grafikk, kan du bare kopiere følgende kode ( linjene 14-17 Anmeldelser ): Ellers må du finne ut hvor bilen og veien bør plasseres i starten. Lag et nytt lag i FLA tidslinje, så gjør det til en guide Layer ved å høyreklikke på den og velge Guide Pass på venstre kant av veien er på linje med den venstre kanten av scenen, og at bilen er omtrent i midten (horisontalt). Deretter justere dem slik at de passer sammen: Nå tar min kode ovenfra og justere den til å matche x- og y-koordinatene for din bil og vei. Ved å klikke på bilen eller veien, vil du være i stand til å se disse verdiene i Properties panelet Hvis du teste din filmen nå, vil du se noe. Vi trenger å addChild () bilen og veien til scenen: (Pass på at du legger veien først, eller det vil dekke bilen!) Test filmen nå, og det skal se slik ut: Great! Vel, OK, det er ikke noe spektakulært ennå. Men nå oppsettet er ute av veien, kan vi gjøre dette mer interessant. For det første, la oss få denne bilen i bevegelse ... Alter dokumentet klassen å legge til en hendelse lytteren til å bli utløst på hver ramme: ( linje 4, 23, 26-29 Hvis du holdt standardbildefrekvens på 12fps, den onEnterFrame () -funksjonen vil bli kalt hver 1 /12th av et sekund Hvis vi fortsette å øke bilens x-posisjon ... ... vi kan gjøre bilen til å kjøre fremover ... ... rett utenfor kanten av skjermen Dette er neppe ideelt; etter noen få sekunder kan vi ikke engang se bilen lenger. Så la oss gjøre det "kameraet" ser ut til å følge bilen. Hva betyr dette? Vel, i utgangspunktet trenger vi bilen til å bo på samme sted, mens veien ser ut til å bevege seg bakover Det betyr at vi kan ... men dette vil bare komplisere ting senere. For eksempel, tenk hvis vi ønsket å legge til andre biler på veien, eller powerups, eller oljeflak, eller noe i det hele tatt; vi måtte flytte hver eneste en av dem bakover i onEnterFrame () -funksjonen. Nei, det er en mye enklere teknikk vi kan bruke. I stedet for å addChild () - ing bilen og veien til scenen, skaper vi et nytt objekt, addChild () dem til det, og deretter flytte denne Det høres mer komplisert enn det er. La meg vise deg den faktiske koden: I linje 9 og 21 I linjene 22 og 23 Ser du en generell regel forbinder de to? Hvis ikke, sjekk ut dette: Tilkoblingen er litt mer opplagt nå! La oss sette det inn kode: Du kan gjøre hva du vil med bilen nå. Fremskynde den opp, teleportere det videresender et tilfeldig antall piksler, stoppe den i bevegelse - uansett! Kameraet vil fortsatt følge den. Og hvis du ønsker å gjøre kameraet følger en annen gjenstand, bare erstatte car.x Tid for å fikse den endeløse hvite tomrommet av intet i enden av veien Den enkleste måten for å gjøre veien lenger er bare å legge til en annen forekomst av veien symbol til høyre for vår eksisterende symbol, som så: ( linje 9, 22, 23, 27 Her er hvordan min ser ut når det kjøres: Å kjære. Bedre fikse dette gapet (Hvis du ikke tegne din egen grafikk, hopp til trinn 17.) Problemet er i tråd 22 av koden ovenfor, road2.x = road.x + road.width Selv om veien ikke har det samme problemet, er det fortsatt ikke kan passe perfekt sammen. Så dra tilbake til FLA og dra en annen Road symbol fra biblioteket til din guide lag Pass på at det har samme y-posisjon som den første veisegment, og deretter flytte den langs vannrett til det er ingen gap.: Hvis kantene av to symboler ikke helt gå sammen pent, dobbeltklikker du en av dem. Du vil være i stand til å redigere den og umiddelbart se hvordan endringene du gjør påvirker de andre:. Bruk dette trikset for å justere kantene av symbolet, slik at skjøten er ren I stedet for å bruke road.width For å finne dette nummeret for din vei, bare ta x-posisjonen din høyre mest road symbol (i Guide lag), og trekke fra x-posisjonen din venstre- mest road symbol. Alt du gjør her er å finne ut hvor mange piksler fra hverandre de to veiene må være for å få samme perfekte delta du nettopp opprettet i Flash. Opprett en ny nummer variabel, roadBreadth Sett på linje: med: Nå teste det ut. Det skal ikke være noen åpning: Great! Vi har fortsatt kjøre inn den endeløse hvite tomrommet, men ... Vi kan skape en road3 og en Road4 og en road5 og så videre Plasser dem hver til høyre for en før dem, men uansett hvor mange segmenter vi skapte, ville bilen kommer til enden av dem til slutt. For en bedre løsning, tenker tilbake til da du var en barn. Har du noen gang spille det spillet hvor du later gulvet er laget av lava, men du må komme til den andre enden av rommet eller annen måte? (Hvis ikke, pokker, gå spille det nå, det er mye moro.) Jeg vet ikke om deg, men i mitt hus, ble sofaputer anses å være lava-resistent, i stand til å bli brukt som byggestener. Vi hadde bare et par, som ikke var nok til å nå enden av rommet - men til slutt jeg funnet ut hvordan å gjøre dem nå lenger Jeg vil legge to puter ned for å gjøre en kort bane. , og gå over til den andre. Så, jeg vil plukke opp bak meg, slipp den foran meg, og gå over til det. Ved gjentatte ganger å plukke opp den ene bak meg og flytte den foran meg, kunne jeg få til hvor som helst jeg fornøyd. Vi kan bruke samme teknikk for å gjøre veien vare evig, uten å måtte bruke flere enn to segmenter. Alt vi trenger å gjøre er å oppdage når en vei segment er "bak" kameraet, og flytte den foran seg. Hva mener jeg med "bak" kameraet? Jeg mener at den høyre kanten av segmentet er av den venstre kanten av scenen. Vi kan bruke denne if-setningen for å sjekke at: nysgjerrig på hvorfor dette fungerer? Hvis ikke, går du til neste trinn. Ellers, la meg forklare: Phew! OK, jeg skal innrømme, det er ganske forvirrende. Hvis du ønsker en dypere forklaring, gjerne spørre i kommentarfeltet :) Nå som vi kan fortelle når veien segmentet er bak kameraet, må vi flytte den foran kameraet igjen. Hvis vi flyttet veien til høyre ved roadBreadth Som du kan se, er en veisegment gjenta, men den andre er ikke ennå Vi kan bare kopiere koden ovenfor for våre andre veien segment, road2 Bilde: Test det ut igjen: Fantastisk! En uendelig looping, siderullende bakgrunn :) Nå for å lage selve parallax effekten ... (Hopp over dette trinnet hvis du bruker min grafikk.) Vi kommer til å trenge en repeterende bakgrunn for å vise frem den parallax scrolling. Jeg har valgt hills, men du kan lage bygninger, skog, fremmede skulpturer - noe du liker Det er noen triks du kan bruke til å gjøre hva du tegner ser ut som det er lenger unna enn bilen: Følg de samme grunnleggende trinnene vi brukte for å tegne veien: Her er mine: Koden angå åsene er nesten nøyaktig det samme som den koden vi nettopp skrev om veiene. Ha en gå på å skrive det selv. Jeg har limt mitt AS fil med alle de nye tilleggene nedenfor, slik at du kan referere til det hvis du liker: (De nye linjene er 12-15, 24-26, 35-38, 45-47, 49, og 67-75. Hvordan gjorde du?) Her er Resultatet: Du lurer kanskje på hvorfor jeg har plaget skape en hillsContainer. Hvis ja, så pent oppdaget! Vi kunne bare addChild () åsene til roadContainer - men å skape en ny beholder for bakgrunnen er hva lar oss lage selve parallax effekten inn i dette: Dette gjør åsene bla på 1 /5th hastigheten på veien og bilen Det ser ut som dette: Du trenger ikke å bruke 1/5; gjøre denne verdien større eller mindre før hastigheten føles riktig for deg. Hvorfor fungerer dette? Vel, husk at vi ser ting i et kjegle syn La oss legge til et annet bakgrunnslag, enda lenger unna . enn åsene Dette er nøyaktig det samme som å skape veien og åsene, så jeg er ikke engang kommer til å lime inn koden denne gangen ! Alt jeg vil gjøre er å legge inn et bilde av mine fjell .. .. fortelle deg at mine fjell 'bredden er 751,5, er x 0 og y er 63,0; minne deg på å lage en ny mountainContainer MovieClip; og fortelle deg at mine fjell bla på 1 /16th hastigheten på min vei Å, og viser deg resultatet. Himmelen er fin og enkel. Siden det er veldig langt unna, ruller det så sakte at det ser ut som det er knapt rulle i det hele tatt. Skyer og fugler flytte, selvfølgelig, og solen står opp og går, men ingenting av dette er på grunn av noen parallax scrolling effekt. Dette betyr at vi ikke trenger å gjøre noe på himmelen bla (Unntaket fra dette er hvis kameraet er på reise egentlig, virkelig Så, ingen grunn til å bekymre seg for bredde her, eller skape en uendelig repeterende bilde. Det er fortsatt en god idé å lage en skyContainer, men bare for å holde ting konsekvent. Min himmel er bare et blått rektangel: Hvis du plasserer den ved x = 0, y = 0 det vil dekke hele scenen. Her er hvordan det ser ut i SWF: Vi har laget en masse bakgrunnsobjekter, men ingenting nærmere til kameraet enn bilen. Som jeg er sikker på at du skjønner, slikt objekt vil måtte bla raskere For min forgrunnsobjektet, jeg har tegnet et tre. Treet er litt forskjellig fra de andre stedene vi har gjort så langt, fordi det ikke er laget for å sløyfe - det står alene, vil det ikke bli med til et annet tre som står ved siden av den. Dette betyr at vi bare trenger ett tre på skjermen til enhver tid (spesielt siden det er så stort!) Så vi trenger bare ett tre objekt i koden også. Skriv inn koden for dette objektet. Hvis du bruker mine grafikk, vil den starte x-posisjon være 780,0 og y-posisjon vil være 175,0. Siden treet vil rulle, vi trenger fortsatt et treeContainer, og vi trenger fortsatt et treeBreadth. Men denne gangen, treeBreadth regulerer bare antall piksler mellom hvert tre. Jeg har brukt en fin runde 1000,0 Gruve Siden det er bare ett tre, er rullekoden mye enklere: Ingenting komplisert :) Bare merk at det ruller tre ganger raskere Gratulerer! Du har opprettet en dynamisk rulle kamera, uendelig gjentatte bakgrunn, og en parallax pseudo-3D-effekt :) Her er noen flere ting du kan gjøre med samme kode: Hvis du oppretter en shoot-'em-up og du ønsker alle eksplosjonene å fremstå nærmere kameraet enn dine fiender, bare lage en ny explosionsContainer, addChild () enhver eksplosjoner til det, og gjøre det bla i samme hastighet som enemiesContainer. Sett spillerens score, deres liv telleren, mute og pause knapper, og eventuelle andre deler av spillet ditt grensesnitt i en enkelt container. Plasser denne beholderen foran alle andre beholdere, men ikke gjør det bla. Dette er en enkel måte å holde et spill kamera og eiendeler atskilt fra grensesnittet sitt. Prøv å ha en container opphold fortsatt samtidig som beholderne foran det og bak det bla i motsatt retning. Dette skaper en kul rotasjon effekt, sett omtrent fem minutter inn i dette klippet fra Disneys Snehvit Takk for at du leser denne opplæringen!; Jeg håper du likte den. Hvis noe var uklart i det hele tatt, eller hvis du ønsker å stille spørsmål om effekten, kan du legge inn en kommentar under. Apropos kommentarer, hvis du lager noe ved hjelp av denne opplæringen, jeg ville elske det hvis du postet en link slik at jeg kunne se det :) Anmeldelser
hjelp av Flash IDE, men du ønsker ikke å tegne noe, inneholder zip også en FLA fil som inneholder alle mine movieclips :)
Trinn 2: Tegn en bil
Trinn 3:. Eksporter bilen for Action
:
vil gjøre), og sjekk Eksporter for Action
boksen (dette lar oss få tilgang til bilen ved hjelp av kode) . Sjekk også eksporter i første rammen
boks (ellers må vi gjøre en preloader)
Trinn 4:. Tegn en Road
Trinn 5: Lag dokument Class
pakke {import flash.display.MovieClip; public class ParallaxDemo strekker MovieClip {offentlig funksjon ParallaxDemo () {}}}
, i samme mappe som FLA (eller som prosjektet ditt, hvis du ikke bruker IDE)
Trinn 6:. Sett opp bilen og veien
)
pakke {import flash.display.MovieClip; public class ParallaxDemo strekker MovieClip {public Var bil: bil; offentlig Var veien: Road; offentlig funksjon ParallaxDemo () {bil = ny bil (); Veien = new Road (); }}}
Trinn 7: Plasser Car og the Road
pakke {import flash.display.MovieClip; public class ParallaxDemo strekker MovieClip {public Var bil: bil; offentlig Var veien: Road; offentlig funksjon ParallaxDemo () {bil = ny bil (); Veien = new Road (); car.x = 275,0; car.y = 235,0; road.x = 0.0; road.y = 294,0; }}}
. Flash vil ignorere alt du gjør i dette laget når det skaper en SWF, så drar bilen og veien symboler her.
Trinn 8:. Legg dine Symboler til Stage
offentlig funksjon ParallaxDemo () {bil = ny bil (); Veien = new Road (); car.x = 275,0; car.y = 235,0; road.x = 0.0; road.y = 294,0; stage.addChild (vei); stage.addChild (bil);}
Trinn 9: Legg en ENTER_FRAME hendelse lytteren
)
pakke {import flash.display.MovieClip; import flash.events.Event; public class ParallaxDemo strekker MovieClip {public Var bil: bil; offentlig Var veien: Road; offentlig funksjon ParallaxDemo () {bil = ny bil (); Veien = new Road (); car.x = 275,0; car.y = 235,0; road.x = 0.0; road.y = 294,0; stage.addChild (vei); stage.addChild (bil); addEventListener (Event.ENTER_FRAME, onEnterFrame); } Offentlig funksjon onEnterFrame (evt: Hendelses): void {}}}
.
Trinn 10: Flytt den bilen
offentlig funksjon onEnterFrame (evt: Hendelses): void {car.x = car.x + 10; //hvis du er opp for en utfordring, kan du prøve å legge grunn //tastaturkontrollene til å la spilleren akselerere //og bremse.}
Trinn 11: Følg den bilen
gjøre noe som dette.
Offentlig funksjon onEnterFrame ( evt: Hendelses): void {road.x = road.x - 10;}
objekt bakover i onEnterFrame () -funksjonen
.
pakke {import flash.display.MovieClip; import flash.events.Event; public class ParallaxDemo strekker MovieClip {public Var bil: bil; offentlig Var veien: Road; offentlig Var roadContainer: MovieClip; offentlig funksjon ParallaxDemo () {bil = ny bil (); Veien = new Road (); car.x = 275,0; car.y = 235,0; road.x = 0.0; road.y = 294,0; roadContainer = new MovieClip (); roadContainer.addChild (vei); roadContainer.addChild (bil); stage.addChild (roadContainer); addEventListener (Event.ENTER_FRAME, onEnterFrame); } Offentlig funksjon onEnterFrame (evt: Hendelses): void {car.x = car.x + 10; roadContainer.x = roadContainer.x - 10; }}}
vi skaper en ny, blank MovieClip heter roadContainer
. Flash stiller automatisk sin x og y-verdiene til 0.
vi legger veien og bilen til roadContainer, i stedet for scenen. I linje 25
vi legge til roadContainer seg på scenen -. Og siden bilen og veien er nå lagt til roadContainer, lar dette oss se dem på scenen
Start: car.x er 275, roadContainer.x er 275-275
Ramme 1: car.x er 285, er roadContainer.x 275-285
Ramme 2: car.x er 295, roadContainer.x ligger 275 - 295
Ramme 3: car.x er 305, roadContainer.x er 275 - 305
offentlig funksjon onEnterFrame (evt: Hendelses): void {car.x = car.x + 10; roadContainer.x = 275 - car.x;}
med otherObject.x
i linjen vi bare endret
Trinn 13:.. Forleng Road
)
pakke {import flash. display.MovieClip; import flash.events.Event; public class ParallaxDemo strekker MovieClip {public Var bil: bil; offentlig Var veien: Road; offentlig Var road2: Road; offentlig Var roadContainer: MovieClip; offentlig funksjon ParallaxDemo () {bil = ny bil (); Veien = new Road (); road2 = new Road (); 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 (vei); roadContainer.addChild (road2); roadContainer.addChild (bil); stage.addChild (roadContainer); addEventListener (Event.ENTER_FRAME, onEnterFrame); } Offentlig funksjon onEnterFrame (evt: Hendelses): void {car.x = car.x + 10; roadContainer.x = 275 - car.x; }}}
Trinn 14:. Mind the Gap
. Vegens bredde
verdien må være litt større enn min vei faktisk ser ut til å være.
Trinn 15: Tweak Bli
< h2> Trinn 16: Trening på bredde
å finne ut hvor den andre veien segmentet skal plasseres, vil vi bruke et nummer jeg kaller bredde
.
Trinn 17: Legg en bredde variabel
, og sette verdien til nummeret du jobbet ut i forrige trinn: (Hvis du er ved hjelp av mine grafikk, er det tallet 653,7)
public class ParallaxDemo strekker MovieClip {public Var bil. Bil; offentlig Var veien: Road; offentlig Var road2: Road; offentlig Var roadContainer: MovieClip; offentlig Var roadBreadth: Number; offentlig funksjon ParallaxDemo () {bil = ny bil (); Veien = new Road (); road2 = new Road (); roadBreadth = 653,7;
Trinn 18: Bytt Bredde med bredde
road2.x = road.x + road.width;
road2.x = road.x + roadBreadth;
Trinn 19: Gjør Bakgrunn Gjenta Trinnløs
if (road.x + roadBreadth + roadContainer.x < 0) {//veien er bak kameraet}
road.x er hvor mange piksler til høyre til venstre kant av veien er fra venstre kant av roadContainer
road.x + roadBreadth er hvor mange piksler til høyre høyre
-Hand kanten av veien er fra venstre kant av roadContainer
roadContainer.x er hvor mange piksler til høyre venstre- hånd kanten av roadContainer er fra venstre kant av scenen (siden roadContainer er i konstant bevegelse til venstre, dette vil vanligvis være negativ)
Så, (road.x + roadBreadth + roadContainer.x) er hvor mange piksler til høyre høyre
-Hand kanten av veien er fra venstre kant av scenen.
Trinn 20: Flytt veien foran kameraet
antall piksler, det ville være i nøyaktig samme sted som den andre veien segmentet. Så trenger vi å flytte den til høyre ved det dobbelte beløpet:
if (road.x + roadBreadth + roadContainer.x < 0) {road.x = road.x + (2 * roadBreadth);} < p> Sett at i din onEnterFrame () -funksjonen, og teste det ut:
.
Trinn 21: Flytt Andre Road Segment
offentlig funksjon onEnterFrame (evt: Hendelses): void {car.x = car.x + 25; roadContainer.x = 275 - car.x; if (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); }}
Trinn 22: Lag Rolling Hills
Bruk duller farger (for eksempel en mørkere nyanse av grønt for gress)
Tegn mindre detalj (ingen individuelle gresstuster)
Legg til en "uskarpt "effekt til kantene (fordi kameraet er fokusert på bilen)
Gjør symbolet bredere enn scenen
Juster symbol slik at registreringspunktet er på venstre kant
Gi det en klasse navn, eksportere det for Actionscript, og eksportere den i den første rammen
Tweak bli med å sørge for at to symboler passe sammen pent
Finne ut "bredden" av symbolet
Trinn 23: Kode the Hills
pakke {import flash.display.MovieClip; import flash.events.Event; public class ParallaxDemo strekker MovieClip {public Var bil: bil; offentlig Var veien: Road; offentlig Var road2: Road; offentlig Var roadContainer: MovieClip; offentlig Var roadBreadth: Number; offentlige Var hills: Hills; offentlig Var hills2: Hills; offentlig Var hillsBreadth: Number; offentlig Var hillsContainer: MovieClip; offentlig funksjon ParallaxDemo () {bil = ny bil (); Veien = new Road (); road2 = new Road (); roadBreadth = 653,7; hills = nye Hills (); hills2 = new Hills (); 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 (vei); roadContainer.addChild (road2); roadContainer.addChild (bil); hillsContainer = new MovieClip (); hillsContainer.addChild (åser); hillsContainer.addChild (hills2); stage.addChild (hillsContainer); stage.addChild (roadContainer); addEventListener (Event.ENTER_FRAME, onEnterFrame); } Offentlig funksjon onEnterFrame (evt: Hendelses): void {car.x = car.x + 10; roadContainer.x = 275 - car.x; if (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); }}}}
Trinn 24:. Actual Parallax Effect
< p> Effekten bare krever å endre en linje med kode:
hillsContainer.x = 275 - car.x;
hillsContainer.x = (275 - car.x) * 1/5; .
; jo lenger unna noe er mer av det vi kan se. Så hvis vi går forbi to objekter av samme størrelse, men man er lenger unna, jo nærmere av de to vil synes å bevege seg raskere, som så:
Trinn 25: Lag Mountains
Trinn 26: Lag Sky
fort - som, hastigheten på et fly eller rakett. Selv da, sørg for å gjøre det bla veldig sakte.)
Trinn 27: Lag et stort tre i forgrunnen
enn roadContainer, så la oss prøve dette
Trinn 28:. Rull treet
treeContainer. x = (275 - car.x) * 3; if (tree.x + treeBreadth + treeContainer.x < 0) {tree.x = tree.x + (2 * treeBreadth);}
enn veien. Her er det endelige resultatet:
Flere ideer til å prøve
Konklusjon