Share
Parallax scrollen is een eenvoudige en effectieve manier om de illusie van diepte te creëren in een 2D-spel. Of je nu een verticale shooter of een horizontaal scrollende platformgame aan het ontwikkelen bent, parallax scrollen is een beproefd onderdeel van gamen dat de onderdompeling en grafische impact van je project aanzienlijk zal vergroten..
In deze tutorial zal ik de basisbeginselen van parallax-scrollen bespreken, samen met verschillende implementatiemethoden, zodanig dat je met vertrouwen en met succes parallax-scrolling in je vaardigheden kunt introduceren, ongeacht je huidige vaardigheidsniveau.
Probeer de demo hieronder om scènes te zien die horizontaal, verticaal, beide en geen parallax scrollen gebruiken. Klik op de demo om deze te activeren, gebruik dan de cijfertoetsen om van scène te veranderen en de pijltjestoetsen om het ruimteschip te verplaatsen (voor de juiste scènes).
Parallax is gedefinieerd als de schijnbare verplaatsing van een waargenomen object als gevolg van een verandering in de positie van de waarnemer. Bij 2D-parallax-scrollen verandert de positie van de waarnemer alleen langs de x- en y-assen. Alleen de snelheid en locatie van een object veranderen met de positie van de waarnemer, omdat voor het schalen van het object een verandering langs de z-as zou moeten worden vereist.
Takashi Nishiyama's Moon Patrol wordt algemeen beschouwd als het eerste spel met 2D parallax-scrollen, maar de techniek bestond al in 1933 in traditionele animaties. Met behulp van een camera met meerdere rijstroken konden animators een niet-stereoscopisch 3D-effect creëren dat de illusie van diepte creëerde door verschillende kunstitems om met verschillende snelheden te bewegen in verhouding tot de waargenomen afstand tot de cameralens. Dit is hoe parallax-scrollen wordt bereikt in moderne videogames, maar in plaats van een camera met meerdere rijstroken worden scènes samengesteld met meerdere lagen en een enkele gamecamera of -weergave.
Door de achtergrond en voorgrondelementen van een spel in verschillende lagen te verdelen, is het mogelijk om de snelheid en positie van deze elementen te regelen op basis van hun lagen. De waarnemer, in dit geval, is de speler en de gamecamera blijft gefocust op een bepaald punt of object, terwijl de achtergrond- en voorgrondlagen overeenkomstig bewegen.
Dit brandpunt beweegt met 'normale' snelheid, of de snelheid bepaald door het spel. Achtergrondobjecten bewegen langzamer dan het brandpunt, terwijl objecten op de voorgrond sneller bewegen dan het brandpunt. Dit resulteert in een illusie van diepte waardoor een 2D-scène meer meeslepend wordt.
In ons eerste voorbeeld hebben we 's nachts een heel eenvoudige scène van een straat met horizontaal scrollen zonder interactieve elementen. De verschillende achtergrondlagen bewegen met vooraf bepaalde snelheden langs de x-as. Laten we ons nu concentreren op de basisbeginselen van parallax scrollen zonder je zorgen te maken over bewegingen van spelers of wisselende weergaven.
Laten we eerst de individuele elementen en attributen van onze scène afbreken. Het gamevenster is 600x300 px en onze kunstitems hebben elk een breedte van ten minste 600 pixels. Door achtergrondelementen te gebruiken die groter zijn dan het gamevenster, kunnen we voorkomen dat het volledige item op een bepaald moment zichtbaar is. Aangezien de lagen zijn betegeld, helpt dit om te veel voor de hand liggende herhaling te voorkomen, omdat hetzelfde item oneindig scrolt.
De vier lagen waaruit onze eerste scène bestaat.Onze scène bestaat uit vier lagen. In dit voorbeeld definieert het nummer van de laag de volgorde waarin het activum naar het scherm wordt getekend, evenals de bewegingssnelheid. Als dit een zijwaarts scrollende platformgame was, dan zou ons spelerobject bovenop laag 3 bestaan. Deze laag zou het brandpunt van de waarnemer zijn en zou ook de snelheid van de achtergrond- en voorgrondlagen bepalen.
Laag 2 beweegt langzamer dan Laag 3 en Laag 1 beweegt langzamer dan Laag 2. Laag 4 bestaat als de voorgrondlaag, dus deze beweegt sneller dan het brandpunt op Laag 3.
Er zijn verschillende manieren om dit soort parallax-scrolltechnieken te implementeren. In dit voorbeeld bewegen de lagen met vooraf bepaalde snelheden zonder naar elkaar te verwijzen. Als u van plan bent meerdere scènes met verschillende hoeveelheden achtergrond- en voorgrondlagen te gebruiken, kunt u het best de niveausnelheden definiëren door de huidige snelheid van de brandpuntslaag te lezen. Als het brandpunt bijvoorbeeld Laag 3 is en met een snelheid van 5, dan zou elke volgende achtergrondlaag bewegen met een snelheid van minder dan 5. Alle voorgrondlagen zouden sneller bewegen dan 5.
// Variabelen focal_point_speed = 5; layer_difference = 1; // Focal-puntlaag layer3.hspeed = focal_point_speed; // Achtergrondlagen layer2.hspeed = layer3.hspeed - layer_difference; layer1.hspeed = layer2.hspeed - layer_difference; // Voorgrondlagen layer4.hspeed = layer3.hspeed + layer_difference; layer5.hspeed = layer4.hspeed + layer_difference;
Hoewel parallax scrollen het meest wordt gebruikt met horizontale achtergronden, kan het ook in verticale scènes worden gebruikt, zoals in dit voorbeeld van de space shooter. Er zijn mogelijk efficiëntere manieren om een sterrenveld te maken, maar met parallax scrollen kan het werk worden gedaan.
Het belangrijkste om dit verticale voorbeeld weg te nemen, is dat parallax scrollen in alle vier de richtingen langs de x- en y-as werkt. (We zullen zien hoe belangrijk dit is in ons derde en laatste voorbeeld.)
Deze scène heeft vier achtergrondlagen: een statische zwarte achtergrond en drie verzamelingen van sterren in verschillende grootten. De statische achtergrond beweegt niet en elke opeenvolgende laag sterren wordt groter en beweegt sneller, waarbij de laatste laag met sterren uiteindelijk de verticale snelheid van het brandpunt bepaalt, het ruimteschip van de speler. Dit type parallax-scrollen stelt ons in staat om de diepte van de ruimte te simuleren en simuleert ook de voorwaartse beweging. Het schip van de speler beweegt nooit echt op het scherm, maar je krijgt nog steeds het gevoel dat je snel door de ruimte reist.
Nu we een beter begrip hebben van waar parallax scrollen over gaat, kunnen we beginnen met het construeren van een scène waarin zowel horizontaal als verticaal scrollen geïmplementeerd zijn, samen met een spelweergave die de beweging van een speler gecontroleerd object volgt.
In de demo bovenaan deze tutorial is deze scène opgesplitst in twee voorbeelden. De eerste versie laat zien hoe de scène eruitziet zonder parallax-scrollen. De tweede versie biedt volledige verticale en horizontale parallax-scrolling en illustreert echt hoe parallax-scrollen een grote mate van onderdompeling en diepte kan toevoegen aan wat oorspronkelijk een zeer vlakke en levenloze scène was.
Het belangrijkste aspect van dit voorbeeld is de spelersbeweging en de gameweergave. Omdat onze achtergrond niet langer vastzit in een vooraf bepaalde snelheid of schermpositie, moeten we de snelheid en positie van elke laag berekenen in verhouding tot het weergavevenster terwijl de speler zich verplaatst.
De oorsprong van ons kijkvenster bevindt zich in de linkerbovenhoek bij (X, Y). De herkomst van elke achtergrondlaag-item bevindt zich in de linkerbovenhoek van de sprite op (0,0). Door de huidige x- en y-coördinaten van het weergavevenster te vinden in relatie tot de spelwereld, kunnen we een berekening uitvoeren om te bepalen waar de oorsprong van een achtergrondlaag in de scène moet worden geplaatst. Deze positie verandert terwijl het weergavevenster op basis van deze berekening wordt verplaatst.
Door verschillende waarden te gebruiken in de berekening van elke laag, kunnen we elke laag op verschillende snelheden verplaatsen, afhankelijk van hoe snel de speler beweegt.
De code om de laag te tekenen die direct achter ons spelerobject ligt heeft de volgende indeling: draw_background_tiled_horizontal (layer, x, y) waar draw_background_tiled_horizontal () is een eenvoudige functie om een betegeld activum op een specifieke locatie te tekenen, en bg_ex_3_2 is ons gelaagde actief.
// Layer 3 draw_background_tiled_horizontal (bg_ex_3_2, view_xview [view_current] / 2.5, (view_yview [view_current] / 10) + 300);
De X-waarde van de laag in dit geval wordt bepaald door de X-waarde van de huidige weergave gedeeld door een waarde van 2.5, het creëren van een horizontale beweging die iets langzamer beweegt dan de beweging van het beeld zelf.
Evenzo wordt de Y-waarde van de laag gedefinieerd door de Y-waarde van de huidige weergave gedeeld door 10. De Y-waarde van de laag wordt dan verhoogd met 300 om het correct te positioneren in relatie tot de spelwereld. Zonder deze extra toevoeging van 300, het item zou in de buurt van de top van de gamewereld verschijnen in plaats van dichtbij de bodem waar we het willen hebben.
Deze waarden verschillen uiteraard in uw project, maar het belangrijkste om te onthouden is dat de snelheid van de beweging van de laag zal toenemen als het divisienummer toeneemt, maar slechts tot een bepaald punt. Door divisie te gebruiken, kan de laag alleen met dezelfde snelheid of langzamer bewegen dan de snelheid van de speler.
De twee lagen achter deze laag bewegen langzamer, dus de divisienummers zijn kleiner:
// Laag 1 draw_background_tiled_horizontal (bg_ex_3_0, view_xview [view_current] / 1.5, (view_yview [view_current] / 2.5) + 175); // Layer 2 draw_background_tiled_horizontal (bg_ex_3_1, view_xview [view_current] / 2, (view_yview [view_current] / 5) +250);
Als u een laag wilt maken die sneller beweegt dan het focuspunt, zoals een voorgrondlaag, moet er een kleine wijziging worden aangebracht. Er is geen voorgrondlaag in dit voorbeeld en de focuspuntlaag is eigenlijk alleen zichtbaar onderaan het scherm. De speler kan omhoog vliegen en boven het brandpunt, dat de grond is, zodat het schip zelf het brandpunt wordt. We verwijzen naar de grond als het brandpunt in dit voorbeeld omdat de grond de enige laag is die beweegt met dezelfde waargenomen snelheid als het ruimteschip. Hier krijgen we ons ware gevoel van snelheid in de scene.
De grondlaag beweegt sneller dan de weergave zelf, dus de code om deze laag te tekenen is iets anders dan de andere achtergrondlagen:
// Focal-puntlaag (ground) draw_background_tiled_horizontal (bg_ex_3_3, -view_xview [view_current] * 1.5, -view_yview [view_current] + 700);
Met lagen die sneller bewegen dan het beeld, nemen we de negatief X- en Y-waarden van de huidige weergave en vermenigvuldig deze met een bepaalde waarde. Er is geen verdeling betrokken bij het berekenen van de snelheid van voorgrondlagen. In dit voorbeeld beweegt de grondlaag met een horizontale snelheid van anderhalf keer sneller dan de snelheid van het kijkvenster. Er wordt geen vermenigvuldiging uitgevoerd op de verticale snelheid van de laag, dus het beweegt met dezelfde snelheid als het aanzicht. Een extra waarde van 700 wordt toegevoegd aan de Y-waarde van de laag om deze op de gewenste locatie dichtbij de bodem van de spelwereld te plaatsen.
Parallax scrollen is een eenvoudige maar zeer effectieve manier om de illusie van diepte toe te voegen aan een 2D-spel. Ik hoop dat de voorbeelden in de demo hebben bewezen hoe effectief het kan zijn, en ik hoop dat de zelfstudie heeft bewezen hoe eenvoudig het is om het te implementeren!
Accentsconagua