Voeg diepte toe aan uw spel met Parallax scrollen

Twee keer per maand bekijken we enkele van onze favoriete lezers uit de geschiedenis van Activetuts +. Deze tutorial werd voor het eerst gepubliceerd in oktober 2009 (en leidde ertoe dat ik Michael uitnodigde om Activetuts + Tech Editor te zijn!)

Dit is een heel eenvoudige techniek die je kunt gebruiken om de illusie van diepte toe te voegen aan elk side-scroller-spel. Terwijl ik uitleg hoe het is bereikt, zullen we ook kijken naar het maken van oneindig veel herhalende achtergronden.


Invoering

Je kunt de basis zien parallax scrollen effect op het werk in de demo. Door de snelheden aan te passen waarmee bepaalde objecten scrollen, kunnen we wijzigen hoe dichtbij of veraf ze lijken te zijn.

In deze zelfstudie wordt uitgelegd hoe het effect wordt gecodeerd en hoe de camera van het spel de auto lijkt te volgen. Ten slotte wordt uitgelegd hoe je oneindig veel herhalende achtergronden maakt, net als in Scooby Doo.


Stap 1: De installatie

Als u Flash gebruikt, maakt u een nieuw ActionScript 3.0 Flash-bestand. Stel de grootte van het podium in zoals je wilt; Ik heb de standaard 550 bij 400 pixels gekozen.

Maak je geen zorgen als je de Flash IDE niet gebruikt; maak gewoon een nieuw AS3-project aan. Het zipbestand bevat een SWC met al mijn grafische afbeeldingen, dus u kunt deze gebruiken door deze toe te voegen aan uw bibliotheek. Sla alle tekenstappen over als u dit doet.

als jij zijn met behulp van de Flash IDE maar je wilt niets tekenen, bevat de zip ook een FLA-bestand met al mijn MovieClips :)


Stap 2: Teken een auto

Maak een nieuw MovieClip-symbool en teken een auto. Je kunt het animeren als je wilt. Hier is die van mij:

Probeer de auto zo te centreren dat het registratiepunt (het kleine kruisje) ongeveer halverwege is. Dit maakt het gemakkelijker voor de camera om het later te volgen.


Stap 3: exporteer uw auto voor ActionScript

Klik met de rechtermuisknop op uw autosymbool in de bibliotheek en selecteer eigenschappen:

Geef je auto een klasse (Auto zal doen) en controleer de Exporteren voor ActionScript box (hierdoor hebben we toegang tot de auto met behulp van code). Controleer ook de Exporteer in eerste frame box (anders moeten we een preloader maken).


Stap 4: Teken een weg

Maak nog een nieuw symbool, maar teken dit keer een weg:

Maak het breder dan het podium, maar lijn het registratiepunt in tegenstelling tot de auto uit met de linkerkant van de weg. Dit zal later helpen, wanneer we het in een herhalend patroon moeten veranderen.

Net zoals je voor de auto hebt gedaan, geef je de weg een klasse, exporteer je deze voor ActionScript en exporteer je deze in het eerste frame.


Stap 5: Maak de documentklasse

Maak een nieuw AS-bestand en plak de volgende code erin:

 pakket import flash.display.MovieClip; openbare klasse ParallaxDemo breidt MovieClip uit openbare functie ParallaxDemo () 

Bewaar deze als ParallaxDemo.as, in dezelfde map als uw FLA (of als uw project, als u de IDE niet gebruikt).

Als u de IDE gebruikt, moet u dit als uw documentklasse instellen in het eigenschappenvenster van uw document:

Weet je niet zeker wat we hier doen? Bekijk mijn Quick Tip over het gebruik van een documentklasse.


Stap 6: stel de auto en de weg op

Maak nieuwe exemplaren van uw auto en weg in het AS-bestand: (lijnen 6, 7, 11, 12)

 pakket import flash.display.MovieClip; openbare klasse ParallaxDemo breidt MovieClip uit public var car: Car; openbare var weg: Road; openbare functie ParallaxDemo () car = new Car (); weg = nieuwe weg (); 

Stap 7: plaats de auto en de weg

Als u mijn afbeeldingen gebruikt, kunt u de volgende code kopiëren (regels 14-17):

 pakket import flash.display.MovieClip; openbare klasse ParallaxDemo breidt MovieClip uit public var car: Car; openbare var weg: Road; openbare functie ParallaxDemo () car = new Car (); weg = nieuwe weg (); car.x = 275.0; car.y = 235.0; road.x = 0,0; road.y = 294.0; 

Anders moet u erachter komen waar uw auto en weg aan het begin moeten worden geplaatst. Maak een nieuwe laag in de tijdlijn van uw FLA en maak er vervolgens een gidslaag van door er met de rechtermuisknop op te klikken en te selecteren Gids. Flash negeert alles wat je in deze laag doet wanneer het een SWF maakt, dus sleep hier je auto- en wegsymbolen.

Zorg ervoor dat de linkerkant van je weg is uitgelijnd met de linkerkant van het podium en dat de auto ongeveer in het midden ligt (horizontaal). Pas ze dan aan zodat ze bij elkaar passen:

Neem nu mijn code van bovenaf en pas deze aan zodat deze overeenkomt met de x- en y-coördinaten van uw auto en weg. Door op uw auto of weg te klikken, kunt u deze waarden bekijken in het paneel Eigenschappen.


Stap 8: Voeg uw symbolen toe aan het werkgebied

Als je nu je film test, zie je niets. We moeten de auto en de weg naar het podium toevoegen aan Child ():

 openbare functie ParallaxDemo () car = new Car (); weg = nieuwe weg (); car.x = 275.0; car.y = 235.0; road.x = 0,0; road.y = 294.0; stage.addChild (weg); stage.addChild (auto); 

(Zorg ervoor dat je eerst de weg toevoegt, anders bedekt deze de auto!)

Test nu uw film en het zou er als volgt uit moeten zien:


Super goed! Maar goed, het is nog niets spectaculairs. Maar nu de installatie uit de weg is, kunnen we dit interessanter maken. Laten we beginnen om deze auto in beweging te krijgen?


Stap 9: voeg een evenementluisteraar voor ENTER_FRAME toe

Wijzig uw documentklasse om een ​​gebeurtenislistener toe te voegen die op elk frame moet worden geactiveerd: (regels 4, 23, 26-29)

 pakket import flash.display.MovieClip; import flash.events.Event; openbare klasse ParallaxDemo breidt MovieClip uit public var car: Car; openbare var weg: Road; openbare functie ParallaxDemo () car = new Car (); weg = nieuwe weg (); car.x = 275.0; car.y = 235.0; road.x = 0,0; road.y = 294.0; stage.addChild (weg); stage.addChild (auto); addEventListener (Event.ENTER_FRAME, onEnterFrame);  public function onEnterFrame (evt: Event): void 

Als u de standaard framesnelheid van 12 fps hebt behouden, wordt de functie onEnterFrame () elke 1 / 12e van een seconde aangeroepen.


Stap 10: Verplaats die auto!

Als we de x-positie van de auto blijven verhogen?

 public function onEnterFrame (evt: Event): void car.x = car.x + 10; // als je een uitdaging wilt, probeer dan basic // keyboard controls toe te voegen om de speler te laten accelereren // en te vertragen. 

? we kunnen de auto vooruit laten gaan?

? rechts van de rand van het scherm!


Stap 11: volg die auto!

Dit is nauwelijks ideaal; na een paar seconden kunnen we de auto niet eens meer zien. Laten we dus de "camera" laten lijken om de auto te volgen.

Wat betekent dit precies? Nou, eigenlijk hebben we de auto nodig om op dezelfde plek te blijven, terwijl de weg achteruit lijkt te gaan.

Dat betekent dat wij kon doe zoiets als dit:

 public function onEnterFrame (evt: Event): void road.x = road.x - 10; 

? maar dit zou de zaken later alleen maar ingewikkelder maken. Stel je bijvoorbeeld eens voor dat we andere auto's aan de weg wilden toevoegen, of power-ups, olievlekken of iets anders; we zouden elk ervan achteruit moeten verplaatsen in de functie onEnterFrame ().

Nee, er is een veel eenvoudigere techniek die we kunnen gebruiken. In plaats van addChild () - in de auto en de weg naar het podium, maken we een nieuw object, addChild () hieraan en vervolgens verplaatsen deze object achteruit in de functie onEnterFrame ().

Het klinkt ingewikkelder dan het is. Laat me je de code tonen:

 pakket import flash.display.MovieClip; import flash.events.Event; openbare klasse ParallaxDemo breidt MovieClip uit public var car: Car; openbare var weg: Road; public var roadContainer: MovieClip; openbare functie ParallaxDemo () car = new Car (); weg = nieuwe weg (); car.x = 275.0; car.y = 235.0; road.x = 0,0; road.y = 294.0; roadContainer = new MovieClip (); roadContainer.addChild (weg); roadContainer.addChild (auto); stage.addChild (roadContainer); addEventListener (Event.ENTER_FRAME, onEnterFrame);  public function onEnterFrame (evt: Event): void car.x = car.x + 10; roadContainer.x = roadContainer.x - 10; 

In regel 9 en 21 we creëren een nieuwe, lege MovieClip genaamd roadContainer. Flash stelt de x- en y-waarden automatisch in op 0.

In lijnen 22 en 23 we voegen de weg en de auto toe aan de wegcontainer, in plaats van het podium. In regel 25 we voegen de roadContainer zelf toe aan het podium - en aangezien de auto en de weg nu aan de roadContainer worden toegevoegd, kunnen we ze op het podium zien.

Lijn 32 is het belangrijkste onderdeel. Hier verplaatsen we de RoadContainer met dezelfde hoeveelheid achteruit dat we net de auto hebben verplaatst forwards. Dit betekent dat alles binnen de wegContainer 10 pixels naar links wordt verplaatst, maar omdat de auto net 10 pixels naar rechts is verplaatst, blijft deze in het midden van het scherm.

Het is een beetje alsof je de roltrap naar beneden rent. Als je met dezelfde snelheid omhoog loopt als naar beneden, dan naar een persoon die op de trap naast je staat, lijkt het alsof je niet beweegt.

Het totale effect:

De auto blijft in het midden! Super goed. Nou ja, geweldig afgezien van het gapende witte gat. Maar daar komen we aan. Als u nu meer auto's aan de weg wilt toevoegen, hoeft u ze alleen maar toe te voegen aan de roadContainer..


Stap 12: Verbeter het volgende

Het probleem met het verplaatsen van de hele container elk frame een beetje achteruit, is dat het niet erg flexibel is. Wat als de speler een powerup gebruikt om de auto 100 pixels vooruit te teleporteren in plaats van 10? Wat als we de camera centraal willen stellen in een andere auto?

Wanneer de SWF voor het eerst wordt geladen, is de x-positie van de auto 275 en is de x-positie van de roadContainer 0. Hoe veranderen ze elk in de loop van de tijd?

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

Zie je een algemene regel die de twee verbindt? Zo niet, kijk dan eens naar:

  • Start: car.x is 275, roadContainer.x is 275 - 275
  • Frame 1: car.x is 285, roadContainer.x is 275 - 285
  • Frame 2: car.x is 295, roadContainer.x is 275 - 295
  • Frame 3: car.x is 305, roadContainer.x is 275 - 305

De verbinding is nu een beetje meer voor de hand liggend! Laten we het in code plaatsen:

 public function onEnterFrame (evt: Event): void car.x = car.x + 10; roadContainer.x = 275 - car.x; 

Je kunt nu doen wat je wilt met de auto. Versnel het, teleporteer het een willekeurig aantal pixels vooruit, stop het in beweging - wat dan ook! De camera zal het nog steeds volgen.

En als u de camera een ander object wilt laten volgen, hoeft u alleen maar te vervangen car.x met otherObject.x in de rij zijn we net veranderd.


Stap 13: Verleng de weg

Tijd om de eindeloze witte leegte van het niets aan het einde van de weg te repareren.

De eenvoudigste manier om de weg langer te maken, is alleen maar om een ​​ander exemplaar van het wegsymbool rechts van ons bestaande symbool toe te voegen, zoals: (lijnen 9, 22, 23, 27)

 pakket import flash.display.MovieClip; import flash.events.Event; openbare klasse ParallaxDemo breidt MovieClip uit public var car: Car; openbare var weg: Road; public var road2: Road; public var roadContainer: MovieClip; openbare functie ParallaxDemo () car = new Car (); weg = nieuwe weg (); 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 (weg); roadContainer.addChild (weg2); roadContainer.addChild (auto); stage.addChild (roadContainer); addEventListener (Event.ENTER_FRAME, onEnterFrame);  public function onEnterFrame (evt: Event): void car.x = car.x + 10; roadContainer.x = 275 - car.x; 

Zo ziet mijn eruit als het wordt uitgevoerd:

Oh jee. Je kunt die kloof beter herstellen.


Stap 14: Mind the Gap

(Ga door naar stap 17 als u geen eigen grafische afbeeldingen tekent)

Het probleem zit in regel 22 van de bovenstaande code, road2.x = road.x + road.width. De wegen breedte waarde moet iets groter zijn dan mijn weg eigenlijk lijkt te zijn.

Zelfs als je weg niet hetzelfde probleem heeft, past deze nog steeds niet perfect bij elkaar. Dus ga terug naar uw FLA en sleep een ander wegsymbool uit de bibliotheek naar uw gidspagina.

Zorg ervoor dat het dezelfde y-positie heeft als het eerste wegsegment en verplaats het vervolgens horizontaal totdat er geen opening is:


Stap 15: Tweak de join

Als de randen van je twee symbolen niet goed bij elkaar komen, dubbelklik je op een van de symbolen. U kunt het bewerken en onmiddellijk zien hoe de wijzigingen die u aanbrengt van invloed zijn op de ander:

Gebruik deze truc om de randen van het symbool aan te passen zodat de join schoon is.


Stap 16: Werk de breedte uit

In plaats van gebruiken road.width om uit te zoeken waar het tweede wegsegment moet worden geplaatst, gebruiken we een nummer dat ik de breedte.

Om dit nummer voor uw weg te vinden, neemt u gewoon de x-positie van uw meest rechtse wegsymbool (in uw gidslaag) en trekt u de x-positie van uw meest links wegsymbool af.

Het enige dat u hier doet, is uitzoeken hoeveel pixels uit uw twee wegsegmenten moeten komen om dezelfde perfecte join te krijgen die u zojuist in Flash hebt gemaakt.


Stap 17: voeg een breedte-variabele toe

Maak een nieuwe getalvariabele, roadBreadth, en stel de waarde in op het nummer dat u in de vorige stap hebt berekend: (Als u mijn afbeeldingen gebruikt, is dat nummer 653.7.)

 openbare klasse ParallaxDemo breidt MovieClip uit public var car: Car; openbare var weg: Road; public var road2: Road; public var roadContainer: MovieClip; public var roadBreadth: Number; openbare functie ParallaxDemo () car = new Car (); weg = nieuwe weg (); road2 = new Road (); roadBreadth = 653,7;

Stap 18: breedte vervangen door breedte

Vervang de lijn:

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

met:

 road2.x = road.x + roadBreadth;

Test het nu. Er mag geen gat zijn:

Super goed! We lopen nog steeds de eindeloze witte leegte in?


Stap 19: Laat de achtergrond oneindig herhalen

We kunnen een weg3 en een weg4 en een weg5 maken, enzovoort, door ze elk rechts van de voor hen liggende te positioneren, maar ongeacht hoeveel segmenten we hebben gemaakt, de auto zou uiteindelijk het einde van hen bereiken.

Voor een betere oplossing, denk terug aan toen je een kind was. Heb je ooit dat spel gespeeld waarbij je doet alsof de vloer van lava is gemaakt, maar moet je op de een of andere manier aan de andere kant van de kamer komen? (Als dat niet zo is, speel het nu, het is heel leuk.)

Ik weet niets over u, maar in mijn huis werden bankkussens beschouwd als lava-bestendig, in staat om te worden gebruikt als opstapjes. We hadden maar een paar, wat niet genoeg was om het einde van de kamer te bereiken - maar uiteindelijk bedacht ik hoe ik ze verder kon maken.

Ik legde de twee kussens neer om een ​​kort pad te maken en loop naar de tweede. Dan pakte ik degene achter me op, liet het voor me vallen en stapte ernaartoe. Door herhaaldelijk de ene achter me op te pakken en deze voor me te verplaatsen, kon ik overal komen waar ik zin in had.

We kunnen dezelfde techniek gebruiken om de weg voor altijd te laten duren, zonder dat je meer dan twee segmenten hoeft te gebruiken. Het enige wat we moeten doen, is detecteren wanneer een weggedeelte zich achter de camera bevindt en ervoor bewegen.

Wat bedoel ik met "achter" de camera? Ik bedoel dat de rechterrand van het segment zich aan de linkerkant van het werkgebied bevindt. We kunnen deze if-verklaring gebruiken om te controleren of:

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

Benieuwd waarom dit werkt? Als dit niet het geval is, gaat u verder met de volgende stap. Laat me anders uitleggen:

  • road.x is het aantal pixels aan de rechterkant van de linkerkant van de weg vanaf de linkerkant van roadContainer
  • road.x + roadBreadth is het aantal pixels rechts de rechts-handrand van weg is van de linkerrand van roadContainer
  • roadContainer.x is het aantal pixels rechts van de linkerrand van roadContainer vanaf de linkerkant van het werkgebied (aangezien roadContainer constant naar links beweegt, is dit meestal negatief)
  • Dus, (road.x + roadBreadth + roadContainer.x) is het aantal pixels rechts de rechts-handrand van weg is van de linkerrand van het stadium.

Phew! Oké, ik geef toe, dat is behoorlijk verwarrend. Als je een diepere uitleg wilt, voel je vrij om te vragen in de comments :)


Stap 20: Verplaats de weg voor de camera

Nu we kunnen zien wanneer het weggedeelte zich achter de camera bevindt, moeten we het weer voor de camera verplaatsen.

Als we de weg naar rechts hebben verplaatst roadBreadth aantal pixels, zou het op exact dezelfde plaats staan ​​als het andere wegsegment. We moeten het dus met twee keer dat bedrag naar rechts verplaatsen:

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

Zet dat in uw functie onEnterFrame () en test het:


Zoals je ziet, herhaalt een wegsegment zich, maar de andere is dat nog niet.


Stap 21: verplaats het andere wegsegment

We kunnen de bovenstaande code gewoon kopiëren voor ons andere wegsegment, road2:

 public function onEnterFrame (evt: Event): 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);  

Test het opnieuw:


Fantastisch! Een oneindig lusvormige zijwaarts scrollende achtergrond :) Nu om het eigenlijke parallaxeffect te creëren?


Stap 22: Creëer Rolling Hills

(Sla deze stap over als u mijn afbeeldingen gebruikt.)

We hebben een herhalende achtergrond nodig om te pronken met parallax scrollen. Ik heb heuvels gekozen, maar je kon gebouwen, bossen, buitenaardse sculpturen maken - alles wat je maar wilt!

Er zijn een paar trucjes die je kunt gebruiken om te zorgen dat wat je tekent eruitziet alsof het verder weg is dan de auto:

  1. Gebruik doffere kleuren (bijvoorbeeld een donkere schaduw van groen voor uw gras)
  2. Teken minder detail (geen individuele plukjes gras)
  3. Voeg een "vervaagd" effect toe aan de randen (omdat de camera op de auto is gericht)

Volg dezelfde basisstappen die we hebben gebruikt om de weg te tekenen:

  • Maak het symbool breder dan het podium
  • Lijn het symbool uit zodat het registratiepunt zich aan de linkerrand bevindt
  • Geef het een klassenaam, exporteer het voor ActionScript en exporteer het in het eerste frame
  • Tweak de join om ervoor te zorgen dat twee symbolen netjes bij elkaar passen
  • Zoek de "breedte" van het symbool uit

Hier is die van mij:


Stap 23: Codeer de heuvels

De code met betrekking tot de heuvels is bijna precies hetzelfde als de code die we zojuist hebben geschreven met betrekking tot de wegen. Probeer het zelf te schrijven. Ik heb mijn AS-bestand geplakt met alle nieuwe toevoegingen hieronder, dus je kunt ernaar verwijzen als je wilt:

 pakket import flash.display.MovieClip; import flash.events.Event; openbare klasse ParallaxDemo breidt MovieClip uit public var car: Car; openbare var weg: Road; public var road2: Road; public var roadContainer: MovieClip; public var roadBreadth: Number; openbare var heuvels: Heuvels; public var hills2: Hills; public var hillsBreadth: Number; public var hillsContainer: MovieClip; openbare functie ParallaxDemo () car = new Car (); weg = nieuwe weg (); road2 = new Road (); roadBreadth = 653,7; heuvels = nieuwe heuvels (); hills2 = nieuwe heuvels (); 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 (weg); roadContainer.addChild (weg2); roadContainer.addChild (auto); hillsContainer = nieuwe MovieClip (); hillsContainer.addChild (heuvels); hillsContainer.addChild (hills2); stage.addChild (hillsContainer); stage.addChild (roadContainer); addEventListener (Event.ENTER_FRAME, onEnterFrame);  public function onEnterFrame (evt: Event): 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);    

(De nieuwe regels zijn 12-15, 24-26, 35-38, 45-47, 49 en 67-75. Hoe is het met u gegaan?)

Hier is het resultaat:


Je vraagt ​​je misschien af ​​waarom ik de moeite heb genomen een hillsContainer te maken. Zo ja, dan mooi gespot! We kunnen gewoon de heuvels van de roadContain () aan Child toevoegen (), maar door een nieuwe container voor de achtergrond te maken kunnen we het daadwerkelijke parallax-effect creëren.


Stap 24: Het werkelijke Parallax-effect

Het effect vereist slechts het wijzigen van één regel code:

 hillsContainer.x = 275 - car.x;

in dit:

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

Hierdoor rollen de heuvels op 1/5 van de snelheid van de weg en de auto.

Het ziet er zo uit:


U hoeft 1/5 niet te gebruiken; maak deze waarde groter of kleiner totdat de snelheid goed aanvoelt.

Waarom werkt dit? Wel, onthoud dat we de dingen in een a zien kegel van visie; hoe verder weg iets is, des te meer we kunnen zien. Dus als we langs twee objecten van dezelfde grootte lopen, maar een verder weg is, lijkt de dichter van de twee sneller te bewegen, zoals zo:


Laten we nog een achtergrondlaag toevoegen, zelfs verder weg dan de heuvels.


Stap 25: Maak bergen

Dit is precies hetzelfde als het maken van de weg en de heuvels, dus ik ga deze keer niet eens de code plakken! Ik zal alleen een foto van mijn bergen plaatsen?

? vertel je dat de breedte van mijn bergen 751,5 is, x 0 is en y 63,0 is; herinner u eraan om een ​​nieuwe mountainContainer MovieClip te maken; en laat je weten dat mijn bergen op 1/16 van de snelheid van mijn weg scrollen.

Oh, en laat je het resultaat zien:



Stap 26: Creëer de lucht

De lucht is mooi en gemakkelijk. Omdat het echt ver weg is, scrolt het zo langzaam dat het lijkt alsof het nauwelijks scrollt. Wolken en vogels bewegen zich natuurlijk, en de zon komt op en ondergaat, maar geen van deze is het gevolg van een parallax-scrolleffect. Dit betekent dat we niets in de lucht hoeven te scrollen!

(De uitzondering hierop is als de camera echt reist, werkelijk snel - zoals de snelheid van een vliegtuig of raket. Zelfs dan, zorg ervoor dat het heel langzaam scrolt.)

U hoeft zich hier dus geen zorgen te maken over de breedte of een oneindig herhalende afbeelding te maken. Het is echter nog steeds een goed idee om een ​​skyContainer te maken, alleen om de zaken consistent te houden. Mijn hemel is slechts een blauwe rechthoek:

Als je het op x = 0 zet, y = 0 bedekt het de hele fase. Hier is hoe het eruit ziet in de SWF:



Stap 27: Maak een grote boom op de voorgrond

We hebben veel achtergrondobjecten gemaakt, maar niets dichter bij de camera dan de auto. Zoals je ongetwijfeld beseft, zou een dergelijk object moeten scrollen sneller dan de roadContainer, dus laten we dit eens proberen.

Voor mijn voorgrondobject heb ik een boom getekend:

De boom is een beetje anders dan de andere objecten die we tot nu toe hebben gemaakt, omdat deze niet is gemaakt om te lus - hij staat alleen, hij voegt zich niet bij een andere boom die ernaast staat. Dit betekent dat we slechts één boom ooit op het scherm nodig hebben (vooral omdat het zo groot is!)

We hebben dus ook maar één Tree-object nodig in de code. Schrijf de code voor dit object. Als u mijn afbeeldingen gebruikt, is de startpositie x 780.0 en de y-positie 175.0.

Omdat de boom zal scrollen, hebben we nog steeds een TreeContainer nodig en hebben we nog steeds een treeBreadth nodig. Echter, deze keer bepaalt de treeBreadth precies het aantal pixels tussen elke boom. Ik heb een mooie ronde van 1000.0 gebruikt voor de mijne.


Stap 28: Scroll door de boom

Omdat er maar één boom is, is de scrolcode veel eenvoudiger:

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

Niets ingewikkelds :) Merk alleen op dat het drie keer schuift sneller dan de weg. Hier is het eindresultaat:


Gefeliciteerd! Je hebt een dynamisch scrollende camera gemaakt, oneindig veel herhalende achtergronden en een pseudo-3D parallax-effect :)


Verdere ideeën om te proberen

Hier zijn nog een paar dingen die je kunt doen met dezelfde code:

Als je een shoot-'em-up maakt en je wilt dat al je explosies dichter bij de camera komen dan je vijanden, maak dan gewoon een nieuwe explosionsContainer, addChild () eventuele explosies en laat het scrollen naar de dezelfde snelheid als de vijandencontainer.

Zet de score van de speler, hun lives-teller, de mute- en pauzeknoppen en alle andere delen van de interface van je spel in een enkele container. Plaats deze container voor alle andere containers, maar zorg dat deze niet verschuift. Dit is een eenvoudige manier om de camera en de items van een game gescheiden te houden van de interface.

Probeer een container stil te houden terwijl je de containers ervoor en erachter in tegengestelde richting schuift. Dit zorgt voor een koel rotatie-effect, zoals te zien in ongeveer vijf minuten in deze clip van Disney's Snow White!


Conclusie

Bedankt voor het lezen van deze tutorial; Ik hoop dat je het leuk vond. Als er iets onduidelijks is, of als u vragen over het effect wilt stellen, plaats dan een commentaar hieronder.

Over opmerkingen gesproken, als je iets aan het maken bent met deze tutorial, zou ik het geweldig vinden als je een link hebt geplaatst zodat ik het kan zien :)