Du kan oppnå denne imponerende visuelle effekten ganske enkelt ved å flytte objekter med forskjellige hastigheter.
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 a CharacterBody2D node for spillerbevegelse. Legg også til en CollisionShape2D med en rektangelform og en Sprite2D for å representere spillerkarakteren.
extends CharacterBody2Dvar speed = 200
func _physics_process(delta):
var velocity = Vector2()if Input.is_action_pressed('ui_right'):
velocity.x += 1if Input.is_action_pressed('ui_left'):
velocity.x -= 1if Input.is_action_pressed('ui_down'):
velocity.y += 1if 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. Hver 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 hver ParallaxLayer å 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 ParallaxBackgroundfunc _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)
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 CharacterBody2Dfunc _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)
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 ParallaxBackgroundconst 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 = 300func _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_positionadd_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)
Denne koden definerer konstanter for å kontrollere tilfeldigheten til parallakselagene. Bruke lerp funksjon for å interpolere verdier mellom MIN_SCALE og MAX_SCALE, genererer en tilfeldig bevegelsesskala for hvert nye lag. Denne funksjonen har følgende signatur:
Variant lerp ( Variant from, Variant to, float weight )Sender resultatet fra randf() ettersom vekten lar deg generere lag med en tilfeldig skala.
De 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 forbedring plattformspillet ditt visuell 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å legg 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.