Hoe parallax scrollen implementeren in Godot

Parallax scrollen is een techniek die veel 2D-games gebruiken om een illusie van diepte te creëren en visuele interesse toe te voegen aan de achtergronden van de game. Het effect wordt bereikt door verschillende lagen van de achtergrond met verschillende snelheden ten opzichte van de camerabeweging te verplaatsen.

Godot 4 biedt een naadloze aanpak voor het implementeren van parallax scrollen dankzij de robuuste 2D-engine, die ondersteuning biedt voor parallaxlagen, waardoor ontwikkelaars met minimale inspanning boeiende visuele effecten kunnen bereiken.

De Godot-game opzetten

Om het proces te starten, stelt u een nieuw tweedimensionaal project op binnen het kader van de Godot-game-engine en configureert u de spelomgeving door een spelerspersonage op te nemen als een van de primaire elementen.

De code die in deze publicatie is gebruikt, is toegankelijk via een GitHub repository, die kosteloos toestemming geeft voor gebruik onder de voorwaarden van de MIT-licentie.

Om de implementatie van spelerbeweging in de Unity-engine met C# te demonstreren, moeten er extra knooppunten aan de scène worden toegevoegd. Een CharacterBody2D object moet worden toegevoegd om fysieke interacties tussen de speler en andere objecten in de omgeving mogelijk te maken. Daarnaast moet een CollisionShape2D component worden gekoppeld aan het lichaam, dat de vorm van het botsingsgebied definieert en de juiste detectie van botsingen met andere objecten mogelijk maakt. Ten slotte kan een Sprite2D object worden gebruikt als een visuele weergave van het spelerspersonage op het scherm.

 extends CharacterBody2D

var speed = 200

func _physics_process(delta):
    var velocity = Vector2()

    if Input.is_action_pressed('ui_right'):
        velocity.x \\+= 1

    if Input.is_action_pressed('ui_left'):
        velocity.x -= 1

    if Input.is_action_pressed('ui_down'):
        velocity.y \\+= 1

    if Input.is_action_pressed('ui_up'):
        velocity.y -= 1

    velocity = velocity.normalized() * speed
    move_and_collide(velocity * delta)

Met deze code kan het personage in een horizontaal vlak navigeren door de pijltjestoetsen te gebruiken voor bewegingen in elke richting, inclusief links, rechts, omhoog en omlaag.

Verschillende lagen maken met ParallaxLayer-knooppunten

Om het parallaxeffect in een driedimensionale omgeving te genereren, is het nodig om meerdere instanties van de klasse ParallaxLayer in de scène op te nemen. Deze extra lagen vormen samen de verschillende elementen die de achtergrond vormen. Om de visuele weergave van diepte echt en realistisch te laten lijken, is het cruciaal dat de lagen die verder van de kijker af liggen langzamer worden bewogen dan de lagen die dichterbij liggen.

StaticBody2D-entiteiten opnemen in elke ParallaxLayer door ze vast te maken aan een CollisionShape2D-object, waardoor interactieve achtergrondelementen worden gegenereerd die in verbinding staan met de speler en andere spelonderdelen, waardoor de algehele spelervaring wordt verbeterd door hun interacties.

De meegeleverde GDScript-code genereert een parallaxeffect door botsbare objecten te gebruiken in combinatie met gelaagde elementen, waardoor interactie en botsingsdetectie tussen deze objecten mogelijk is binnen het gespecificeerde rechthoekige gebied.

 extends ParallaxBackground

func _ready():
    # Create the first parallax layer
    var layer1 = ParallaxLayer.new()
    layer1.motion_scale = Vector2(0.2, 0.2)
    add_child(layer1)

    # Add a StaticBody2D with CollisionShape2D to the first layer
    var static_body1 = StaticBody2D.new()
    layer1.add_child(static_body1)

    var collision_shape1 = CollisionShape2D.new()
    var shape1 = RectangleShape2D.new()
    shape1.extents = Vector2(32, 32)
     collision_shape1.shape = shape1
    static_body1.add_child(collision_shape1)

    # Create the second parallax layer
    var layer2 = ParallaxLayer.new()
    layer2.motion_scale = Vector2(0.5, 0.5)
    add_child(layer2)

    # Add a StaticBody2D with CollisionShape2D to the second layer
    var static_body2 = StaticBody2D.new()
    layer2.add_child(static_body2)

    var collision_shape2 = CollisionShape2D.new()
    var shape2 = RectangleShape2D.new()
    shape2.extents = Vector2(64, 64)
     collision_shape2.shape = shape2
    static_body2.add_child(collision_shape2)

    # Create the third parallax layer
    var layer3 = ParallaxLayer.new()
    layer3.motion_scale = Vector2(1.0, 1.0)
    add_child(layer3)

    # Add a StaticBody2D with CollisionShape2D to the third layer
    var static_body3 = StaticBody2D.new()
    layer3.add_child(static_body3)

    var collision_shape3 = CollisionShape2D.new()
    var shape3 = RectangleShape2D.new()
    shape3.extents = Vector2(128, 128)
     collision_shape3.shape = shape3
    static_body3.add_child(collision_shape3) 

Door gebruik te maken van deze implementatie is elke parallaxlaag uitgerust met een StaticBody2D entiteit met een CollisionShape2D component, die dient om waarneembare elementen binnen de achtergrond weer te geven.

De interactieve aard van deze inklapbare entiteiten betrekt de avatar van de speler en verschillende onderdelen in het spel, wat de algehele complexiteit en nuance van de spelervaring verbetert.

Verschillende lagen met verschillende snelheid verplaatsen

Om een parallaxeffect in Unity te bereiken, is het essentieel om de positie van elke laag ten opzichte van de camera aan te passen op basis van de bewegingen van de speler. Door dit te doen, lijken lagen die dichter bij de camera zijn sneller te bewegen dan lagen die verder weg zijn, wat resulteert in een illusie van diepte en beweging.

Integreer de volgende GDScript-code in de scène Player, als volgt:

 extends CharacterBody2D

func _physics_process(delta):
    ...
    move_and_collide(velocity * delta)

    # Update parallax layers based on player movement
    var parallax_background = get_parent()
    var motion = -velocity * delta
    parallax_background.set_scroll_offset(parallax_background.scroll_offset \\+ motion) 

De huidige implementatie evalueert de beweging van de parallaxlagen, die afhankelijk is van de verplaatsing van de gebruiker, en past de scroll-offset van de ParallaxBackground-component dienovereenkomstig aan. Het is belangrijk op te merken dat een negatief teken is gebruikt om te garanderen dat de lagen in een richting bewegen die tegengesteld is aan de verplaatsing van de gebruiker.

Onvoorspelbaarheid toevoegen met willekeurig parallaxschuiven

Parallaxschuiven is een techniek die een onverwacht en onvoorspelbaar aspect toevoegt aan de achtergrond van een videogame door tijdens het spelen voortdurend meerdere lagen te genereren en opnieuw te positioneren. Het is bewezen dat deze methode de betrokkenheid van spelers vergroot en bijdraagt aan een boeiendere en steeds veranderende omgeving in games.

Om willekeurig parallax scrollen in een visuele compositie op te nemen, is het nodig om extra parallaxlagen te introduceren met verschillende mate van verplaatsingsmagnitudes en onvoorspelbare ruimtelijke oriëntaties.

 extends ParallaxBackground

const MAX_LAYERS = 5
const MIN_SCALE = 0.2
const MAX_SCALE = 1.5
const MIN_SPEED = 0.01
const MAX_SPEED = 0.03
const MIN_X_POSITION = -500
const MAX_X_POSITION = 500
const MIN_Y_POSITION = -300
const MAX_Y_POSITION = 300

func _ready():
    for i in range(MAX_LAYERS):
        create_random_layer()

func create_random_layer():
    # Add a new parallax layer with a random motion scale
    var layer = ParallaxLayer.new()
    var scale = lerp(MIN_SCALE, MAX_SCALE, randf())
    layer.motion_scale = Vector2(scale, scale)

    var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)
    var y_position = randf_range(MIN_Y_POSITION, MAX_Y_POSITION)
    layer.global_transform.origin.x = x_position
    layer.global_transform.origin.y = y_position

    add_child(layer)

    # Add a StaticBody2D with CollisionShape2D to the new layer
    var static_body = StaticBody2D.new()
    layer.add_child(static_body)

    var collision_shape = CollisionShape2D.new()
    var shape = RectangleShape2D.new()
    shape.extents = Vector2(32, 32)
     collision_shape.shape = shape
    static_body.add_child(collision_shape)

func remove_random_layer():
    # Remove a random parallax layer
    if get_child_count() > 0:
        var random_index = randi() % get_child_count()
        var layer_to_remove = get_child(random_index)
        remove_child(layer_to_remove) 

De huidige code stelt constante parameters in om de onvoorspelbaarheid van de parallaxlagen te regelen, waarbij de lerp-functie wordt gebruikt om waarden te interpoleren binnen het bereik van minimum- en maximumschalen. Deze laatste wordt gekenmerkt door de volgende specifieke aanduiding:

 Variant lerp ( Variant from, Variant to, float weight ) 

Door de uitvoer van de functie randf() als gewicht te gebruiken, kunnen lagen met willekeurig geschaalde waarden worden gemaakt.

De functie randf_range is een alternatieve methode om willekeurige getallen binnen een bepaald bereik te produceren. In dit geval gebruikt de functie create_random_layer deze om willekeurige coördinaten te genereren voor de nieuw toegevoegde lagen, binnen een vooraf gedefinieerd bereik:

 var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION) 

Het demonstratiespel ziet er inderdaad visueel aantrekkelijk en goed georganiseerd uit, met een strakke lay-out met interactieve elementen die de betrokkenheid van de gebruiker vergemakkelijken. Het ontwerp bevat verschillende grafische elementen, zoals afbeeldingen en pictogrammen, die bijdragen aan een algeheel gepolijst uiterlijk. Bovendien zorgt het gebruik van witruimte effectief voor een evenwichtige compositie, waardoor de leesbaarheid wordt verbeterd en een schone visuele ervaring voor gebruikers wordt bevorderd. Over het geheel genomen vertoont de demonstratiegame sterke ontwerpprincipes en een naadloze integratie van interactiviteit, afbeeldingen en typografie.

Extra functies toevoegen

Parallax scrollen is een uitstekend uitgangspunt om de visuele allure van een platformgame te vergroten, maar er zijn mogelijkheden voor verdere verfijning door aanvullende elementen te integreren. De volgende suggesties kunnen in overweging worden genomen.

Achtergrondobjecten

Overweeg om extra dynamische onderdelen op te nemen in je parallaxscènes, zoals hangende landschappen, mobiele obstakels of geanimeerde achtergrondpersonages. Integratie van deze functies kan de dimensionaliteit en gebruikersbetrokkenheid van je platformervaring verbeteren.

Dynamische verlichting

Overweeg om dynamische lichteffecten op te nemen in je parallaxlagen voor een extra laag realisme en diepte in je spelwereld. Door gebruik te maken van lichtbronnen en schaduwen via het geavanceerde verlichtingssysteem van Godot kun je de algehele visuele kwaliteit van je 2D-game enorm verbeteren.

Deeltjeseffecten

Door partikelsystemen in parallaxlagen op te nemen, kun je delicate visuele fenomenen zoals vallend gebladerte, zwevende wolken of fonkelende hemellichamen produceren, waardoor de sfeer van de omgeving van de videogame wordt verhoogd en deze een gevoel van vitaliteit krijgt. Daarnaast kun je licentievrije geluidseffecten opnemen in je game, waardoor de algehele aantrekkingskracht nog groter wordt.

Dag-nachtcyclus

Integreer een dag-nachtcyclus in de parallaxlagen om de tint en helderheid ervan te veranderen op basis van de tijd van het spel, zodat spelers tijdens hun gamereis door een steeds veranderende omgeving kunnen navigeren.

Beste praktijken voor het implementeren van parallax scrollen

Om parallax scrollen effectief te gebruiken in videogames en tegelijkertijd een naadloze en aangename gebruikerservaring te behouden, is het cruciaal om bepaalde beste praktijken te volgen die optimale prestaties en algemene tevredenheid bevorderen.

Prestatieoptimalisatie

Houd rekening met de toename van parallaxlagen en de complexiteit ervan. Een buitensporige hoeveelheid lagen of afbeeldingen met een hoge resolutie kunnen leiden tot functiestoringen, vooral op minder krachtige apparatuur. Het is raadzaam om je visuals te stroomlijnen en waar mogelijk minder botsingsgeometrieën te gebruiken om optimale prestaties te behouden.

Rangschikking van lagen

Bij het rangschikken van parallaxlagen is het belangrijk rekening te houden met hun visuele hiërarchie en het gewenste diepte-effect dat ze creëren. Het kan effectief zijn om de lagen die zich het dichtst bij de camera bevinden sneller te laten bewegen dan de lagen die verder weg liggen om een gevoel van diepte en beweging in het ontwerp te creëren.

Cameragrenzen

Om een soepele en ononderbroken spelervaring te garanderen, is het essentieel om grenzen te stellen aan de bewegingen van de camera binnen de virtuele omgeving. Op die manier kunnen we onnodige leegtes of technische problemen voorkomen die kunnen optreden wanneer de speler de grenzen van de spelwereld nadert.

Testen en aanpassen

Om optimale prestaties en het uiterlijk van parallax scrollen op verschillende apparaten en schermresoluties te garanderen, is het essentieel om het ontwerp op meerdere platforms te testen. Door de bewegingsschaal, positie van lagen en andere relevante variabelen aan te passen, kan het parallaxeffect worden verfijnd om het meest wenselijke resultaat te bereiken.

Maak Godot-spellen boeiender met parallax scrollen

Door onvoorspelbare parallax scrolling-effecten in te bouwen, kan je de betrokkenheid van gebruikers bij een Godot-game aanzienlijk vergroten. Deze techniek, bekend als willekeurig parallax scrollen, genereert en positioneert meerdere lagen tijdens het spel om een meeslepende spelervaring te creëren.

Het integreren van dynamische omgevingen via procedurele generatietechnieken kan een gevoel van beweging en vitaliteit oproepen in de setting van de game, waardoor deze een gevoel van spontaniteit en onvoorspelbaarheid krijgt. Deze steeds veranderende visuele achtergrond verbetert de onderdompeling van spelers door ze een extra spannende dimensie aan hun gamereis te geven.