Du kan opnå denne imponerende visuelle effekt blot ved at flytte objekter med forskellige hastigheder.
Parallax scrolling er en teknik, som mange 2D-spil bruger til at skabe en illusion af dybde og tilføje visuel interesse til spillets baggrunde. Det opnår effekten ved at flytte forskellige lag af baggrunden med forskellige hastigheder i forhold til kamerabevægelsen.
Godot 4 gør det nemmere end nogensinde før at implementere parallakserulning. Dens kraftfulde 2D-motor giver indbygget understøttelse af parallakselag, så du kan skabe fantastiske visuelle effekter med minimal indsats.
Opsætning af Godot-spillet
For at komme i gang skal du oprette et nyt 2D-projekt i Godot spilmotoren og sæt spilscenen op med en spillerkarakter.
Koden brugt i denne artikel er tilgængelig i denne GitHub-depot og er gratis for dig at bruge under MIT-licensen.
Til dette eksempel skal du tilføje en CharacterBody2D node for spillerbevægelse. Tilføj også en CollisionShape2D med en rektangelform og en Sprite2D at repræsentere spillerens karakter.
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 kode kan spillerens karakter bevæge sig til venstre, højre, op og ned ved hjælp af piletasterne eller lignende input.
Oprettelse af forskellige lag med ParallaxLayer Noder
Opret derefter parallakseeffekten ved at tilføje flere ParallaxLayer noder til scenen. Hver ParallaxLayer vil repræsentere et andet lag af baggrunden. For at opnå en overbevisende parallakseeffekt bør lagene længere væk fra kameraet bevæge sig langsommere end de tættere.
Tilføje StaticBody2D noder med CollisionShape2D i hver ParallaxLayer at skabe nogle kolliderbare objekter i baggrunden. Disse kolliderbare objekter vil interagere med spilleren og andre spilelementer, hvilket tilføjer mere dybde til gameplayet.
Her er GDScript-koden til at skabe 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 kode indeholder hvert parallakselag nu en StaticBody2D node med en CollisionShape2D repræsenterer kolliderbare objekter i baggrunden.
Disse kolliderbare objekter vil interagere med spillerens karakter og andre spilelementer, hvilket tilføjer mere dybde og kompleksitet til gameplayet.
Flytning af forskellige lag med forskellig hastighed
Nu hvor du har sat dine parallakse lag op, skal du opdatere deres positioner baseret på spillerens bevægelse. Dette vil skabe parallakseeffekten, hvor lagene tættere på kameraet bevæger sig hurtigere end dem længere væk.
Tilføj følgende GDScript-kode til afspillerscenen:
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 kode beregner bevægelsen af parallakselagene baseret på spillerens bevægelse og opdaterer rulleforskydningen af ParallaxBackground noden i overensstemmelse hermed. Bemærk brugen af det negative tegn for at sikre, at lagene bevæger sig i den modsatte retning af spillerens bevægelse.
Tilfældig parallakserulning introducerer et element af overraskelse og uforudsigelighed til dit spils baggrund. Ved dynamisk at generere og placere parallakselag under gameplay kan du skabe en mere engagerende og dynamisk oplevelse for spillerne.
For at implementere tilfældig parallakserulning skal du tilføje nye parallakselag med tilfældige bevægelsesskalaer og positioner.
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 kode definerer konstanter til at kontrollere tilfældigheden af parallakselagene. Brug lerp funktion til at interpolere værdier imellem MIN_SCALE og MAX_SCALE, der genererer en tilfældig bevægelsesskala for hvert nyt lag. Denne funktion har følgende signatur:
Variant lerp ( Variant from, Variant to, float weight )Sender resultatet fra randf() da vægten lader dig generere lag med en tilfældig skala.
Det randf_range funktion tilbyder en anden måde at generere tilfældige værdier inden for et område. Her bruger funktionen create_random_layer den til at generere tilfældige positioner for de nye lag inden for et specificeret område:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Dit demospil skulle nu se nogenlunde sådan ud:
Inklusiv yderligere funktioner
Parallakserulning giver et solidt grundlag for forbedring dit platformspilsspil visuel appel, men du kan tage det endnu længere ved at inkorporere yderligere funktioner. Her er nogle ideer til at overveje.
Baggrundsobjekter
Skab mere interaktive elementer i dine parallakselag, såsom flydende platforme, bevægelige forhindringer eller animerede baggrundsfigurer. Disse objekter kan tilføje dybde og interaktivitet til dit platformspil.
Dynamisk belysning
Introducer dynamiske lyseffekter til dine parallakselag. Ved at tilføje lyskilder og skygger kan du skabe en følelse af realisme og dybde i spilverdenen. Godots lyssystem fungerer godt sammen med 2D-spil og kan forbedre den visuelle kvalitet markant.
Partikeleffekter
Integrer partikelsystemer i dine parallakselag for at tilføje subtile visuelle effekter. Faldende blade, drivende skyer eller funklende stjerner kan forbedre stemningen og få spilverdenen til at føles mere levende. Du kan også tilføje copyright-fri lydeffekter til dit spil.
Dag-nat cyklus
Implementer en dag-nat-cyklus, der ændrer farven og intensiteten af parallakselagene baseret på tidspunktet på dagen i spillet. Denne dynamiske funktion kan give spillere en oplevelse i konstant udvikling, efterhånden som de kommer videre gennem spillet.
Mens parallakserulning kan hæve dit spils visuelle effekter, er det vigtigt at følge nogle bedste praksisser for at sikre en jævn og fornøjelig oplevelse.
Optimering af ydeevne
Vær opmærksom på antallet af parallakselag og deres kompleksitet. For mange lag eller højopløsningsaktiver kan føre til ydeevneproblemer, især på mindre kraftfulde enheder. Optimer dit kunstværk og brug forenklede kollisionsformer, hvor det er muligt.
Lagarrangement
Arranger dine parallakselag omhyggeligt. Overvej det visuelle hierarki og den ønskede dybdeeffekt. Lagene tættest på kameraet skal bevæge sig hurtigere, mens de længere væk skal bevæge sig langsommere.
Kameragrænser
Sæt grænser for kameraets bevægelser for at forhindre uønsket tomrum eller visuelle fejl, når spilleren når ud til kanten af spilverdenen. Dette sikrer en problemfri oplevelse for spillerne.
Test og tilpasning
Test din parallakserulning på forskellige enheder og skærmstørrelser for at sikre, at den ser ud og fungerer godt på tværs af forskellige platforme. Justering af bevægelsesskalaer, lagpositioner og andre parametre kan finjustere parallakseeffekten for de bedste resultater.
Tilføjelse af tilfældig parallakserulning kan forbedre engagementsniveauet i dit Godot-spil markant. Tilfældig parallakserulning involverer dynamisk generering og positionering af parallakselag under gameplay.
Ved at gøre dette skaber du en følelse af bevægelse og dynamik i baggrunden, hvilket får spilverdenen til at føles levende og uforudsigelig. Spillere vil opleve et konstant skiftende visuelt miljø, hvilket tilføjer et ekstra lag af spænding til deres spiloplevelse.