Hvordan implementere Parallax Scrolling i Godot

Parallax-rulling er en teknikk som mange 2D-spill bruker for å skape en illusjon av dybde og legge til visuell interesse til spillets bakgrunn. Den oppnår effekten ved å flytte forskjellige lag av bakgrunnen med forskjellige hastigheter i forhold til kamerabevegelsen.

Godot 4 gjør det enklere enn noen gang å implementere parallaksrulling. Den kraftige 2D-motoren gir innebygd støtte for parallakselag, slik at du kan lage fantastiske visuelle effekter med minimal innsats.

Sette opp Godot-spillet

For å komme i gang, lag et nytt 2D-prosjekt i Godot-spillmotoren og sett opp spillscenen med en spillerkarakter.

Koden som brukes i denne artikkelen er tilgjengelig i denne GitHub-depot og er gratis for deg å bruke under MIT-lisensen.

For dette eksemplet, legg til en CharacterBody2D-node for spillerbevegelse. Legg også til en CollisionShape2D med en rektangelform og en Sprite2D for å representere spillerkarakteren.

 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)
 

Med denne koden kan spillerkarakteren bevege seg til venstre, høyre, opp og ned ved hjelp av piltastene eller lignende innganger.

Opprette forskjellige lag med ParallaxLayer Noder

Deretter lager du parallakseeffekten ved å legge til flere ParallaxLayer-noder til scenen. Hvert ParallaxLayer vil representere et annet lag av bakgrunnen. For å oppnå en overbevisende parallakseeffekt, bør lagene lenger unna kameraet bevege seg saktere enn de nærmere.

Legg til StaticBody2D-noder med CollisionShape2D i hvert ParallaxLayer for å lage noen kolliderbare objekter i bakgrunnen. Disse kolliderbare objektene vil samhandle med spilleren og andre spillelementer, og legge til mer dybde til spillingen.

Her er GDScript-koden for å lage parallakselagene med kolliderbare objekter:

 extends ParallaxBackground
func _ready():
    
    var layer1 = ParallaxLayer.new()
    layer1.motion_scale = Vector2(0.2, 0.2)
    add_child(layer1)
    
    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)
    
    var layer2 = ParallaxLayer.new()
    layer2.motion_scale = Vector2(0.5, 0.5)
    add_child(layer2)
    
    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)
    
    var layer3 = ParallaxLayer.new()
    layer3.motion_scale = Vector2(1.0, 1.0)
    add_child(layer3)
    
    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)
 

Med denne koden inneholder hvert parallakselag nå en StaticBody2D-node med en CollisionShape2D som representerer kolliderbare objekter i bakgrunnen.

Disse kolliderbare objektene vil samhandle med spillerens karakter og andre spillelementer, og legge til mer dybde og kompleksitet til spillingen.

Flytte forskjellige lag med ulik hastighet

Nå som du har satt opp parallakselagene dine, må du oppdatere posisjonene deres basert på spillerens bevegelse. Dette vil skape parallakseeffekten, der lagene nærmere kameraet beveger seg raskere enn de lenger unna.

Legg til følgende GDScript-kode til spillerscenen:

 extends CharacterBody2D
func _physics_process(delta):
    ...
    move_and_collide(velocity * delta)
    
    var parallax_background = get_parent()
    var motion = -velocity * delta
    parallax_background.set_scroll_offset(parallax_background.scroll_offset + motion)
 

Denne koden beregner bevegelsen til parallakselagene basert på spillerens bevegelse og oppdaterer rulleforskyvningen til ParallaxBackground-noden tilsvarende. Legg merke til bruken av det negative tegnet for å sikre at lagene beveger seg i motsatt retning av spillerens bevegelse.

Tilfeldig parallaksrulling introduserer et element av overraskelse og uforutsigbarhet til spillets bakgrunn. Ved å generere og plassere parallakselag dynamisk under spillingen, kan du skape en mer engasjerende og dynamisk opplevelse for spillere.

For å implementere tilfeldig parallakserulling, legg til nye parallakselag med tilfeldige bevegelsesskalaer og posisjoner.

 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():
    
    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)
    
    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():
    
    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)
 

Denne koden definerer konstanter for å kontrollere tilfeldigheten til parallakselagene. Bruk lerp-funksjonen til å interpolere verdier mellom MIN_SCALE og MAX_SCALE, og generer en tilfeldig bevegelsesskala for hvert nye lag. Denne funksjonen har følgende signatur:

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

Ved å sende resultatet fra randf() som vekten kan du generere lag med en tilfeldig skala.

Randf_range-funksjonen tilbyr en annen måte å generere tilfeldige verdier innenfor et område. Her bruker create_random_layer-funksjonen den til å generere tilfeldige posisjoner for de nye lagene innenfor et spesifisert område:

 var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION) 

Demospillet ditt skal nå se omtrent slik ut:

Inkludert tilleggsfunksjoner

Parallax-rulling gir et solid grunnlag for å forbedre plattformspillets visuelle appell, men du kan ta det enda lenger ved å inkorporere tilleggsfunksjoner. Her er noen ideer du bør vurdere.

Bakgrunnsobjekter

Lag mer interaktive elementer i parallakselagene dine, for eksempel flytende plattformer, bevegelige hindringer eller animerte bakgrunnsfigurer. Disse objektene kan legge til dybde og interaktivitet til plattformspillet ditt.

Dynamisk belysning

Introduser dynamiske lyseffekter til parallakselagene dine. Ved å legge til lyskilder og skygger kan du skape en følelse av realisme og dybde i spillverdenen. Godots lyssystem fungerer godt med 2D-spill og kan forbedre den visuelle kvaliteten betraktelig.

Partikkeleffekter

Integrer partikkelsystemer i parallakselagene dine for å legge til subtile visuelle effekter. Fallende løv, drivende skyer eller glitrende stjerner kan forbedre stemningen og få spillverdenen til å føles mer levende. Du kan også legge til opphavsrettsfrie lydeffekter til spillet ditt.

Dag-natt syklus

Implementer en dag-natt-syklus som endrer fargen og intensiteten til parallakselagene basert på tiden på dagen i spillet. Denne dynamiske funksjonen kan gi spillere en opplevelse i stadig utvikling etter hvert som de går gjennom spillet.

Mens parallaksrulling kan heve spillets visuelle egenskaper, er det viktig å følge noen beste fremgangsmåter for å sikre en jevn og hyggelig opplevelse.

Ytelsesoptimalisering

Vær oppmerksom på antall parallakselag og deres kompleksitet. For mange lag eller høyoppløselige ressurser kan føre til ytelsesproblemer, spesielt på mindre kraftige enheter. Optimaliser kunstverket og bruk forenklede kollisjonsformer der det er mulig.

Lagarrangement

Ordne parallakselagene dine med omtanke. Vurder det visuelle hierarkiet og ønsket dybdeeffekt. Lagene som er nærmest kameraet skal bevege seg raskere, mens de lenger unna skal bevege seg saktere.

Kameragrenser

Sett grenser for kamerabevegelsen for å forhindre uønsket tomrom eller visuelle feil når spilleren når utkanten av spillverdenen. Dette sikrer en sømløs opplevelse for spillere.

Testing og tilpasning

Test parallaksrullingen din på forskjellige enheter og skjermstørrelser for å sikre at den ser ut og fungerer bra på forskjellige plattformer. Ved å justere bevegelsesskalaene, lagposisjonene og andre parametere kan du finjustere parallakseeffekten for de beste resultatene.

Å legge til tilfeldig parallaksrulling kan øke engasjementsnivået til ditt Godot-spill betydelig. Tilfeldig parallaksrulling innebærer dynamisk generering og plassering av parallakselag under spilling.

Ved å gjøre dette skaper du en følelse av bevegelse og dynamikk i bakgrunnen, noe som gjør at spillverdenen føles levende og uforutsigbar. Spillere vil oppleve et visuelt miljø i stadig endring, og legge til et ekstra lag med spenning til spillopplevelsen.