Du kan uppnå denna imponerande visuella effekt helt enkelt genom att flytta objekt med olika hastigheter.
Parallax-rullning är en teknik som många 2D-spel använder för att skapa en illusion av djup och lägga till visuellt intresse till spelets bakgrunder. Den uppnår effekten genom att flytta olika lager av bakgrunden med olika hastigheter i förhållande till kamerarörelsen.
Godot 4 gör det enklare än någonsin att implementera parallax-rullning. Dess kraftfulla 2D-motor ger inbyggt stöd för parallaxlager, så att du kan skapa fantastiska visuella effekter med minimal ansträngning.
Konfigurera Godot-spelet
För att komma igång, skapa ett nytt 2D-projekt i spelmotorn Godot och ställ in spelscenen med en spelarkaraktär.
Koden som används i den här artikeln är tillgänglig i denna GitHub-förråd och är gratis för dig att använda under MIT-licensen.
För det här exemplet, lägg till a CharacterBody2D nod för spelarrörelse. Lägg även till a CollisionShape2D med en rektangelform och en Sprite2D för att representera spelarkaraktären.
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 den här koden kan spelarkaraktären flytta åt vänster, höger, upp och ner med hjälp av piltangenterna eller liknande inmatningar.
Skapa olika lager med ParallaxLayer-noder
Skapa sedan parallaxeffekten genom att lägga till flera ParallaxLayer noder till scenen. Varje ParallaxLayer kommer att representera ett annat lager av bakgrunden. För att uppnå en övertygande parallaxeffekt bör lagren längre bort från kameran röra sig långsammare än de närmare.
Lägg till StaticBody2D noder med CollisionShape2D i varje ParallaxLayer för att skapa några kolliderbara objekt i bakgrunden. Dessa kolliderbara objekt kommer att interagera med spelaren och andra spelelement, vilket ger mer djup till spelet.
Här är GDScript-koden för att skapa parallaxlagren med kolliderbara objekt:
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 denna kod innehåller varje parallaxlager nu en StaticBody2D nod med a CollisionShape2D representerar kolliderbara objekt i bakgrunden.
Dessa kolliderbara objekt kommer att interagera med spelarens karaktär och andra spelelement, vilket ger mer djup och komplexitet till spelet.
Flytta olika lager med olika hastighet
Nu när du har ställt in dina parallaxlager måste du uppdatera deras positioner baserat på spelarens rörelse. Detta kommer att skapa parallaxeffekten, där lagren närmare kameran rör sig snabbare än de längre bort.
Lägg till följande GDScript-kod till Player-scenen:
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)
Den här koden beräknar rörelsen för parallaxlagren baserat på spelarens rörelse och uppdaterar rullningsförskjutningen för ParallaxBackground-noden därefter. Notera användningen av det negativa tecknet för att säkerställa att lagren rör sig i motsatt riktning av spelarens rörelse.
Slumpmässig parallaxrullning introducerar ett element av överraskning och oförutsägbarhet i ditt spels bakgrund. Genom att dynamiskt generera och placera parallaxlager under spelet kan du skapa en mer engagerande och dynamisk upplevelse för spelarna.
För att implementera slumpmässig parallaxrullning, lägg till nya parallaxlager med slumpmässiga rörelseskalor och 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)
Denna kod definierar konstanter för att kontrollera slumpmässigheten hos parallaxlagren. Använd lerp funktion för att interpolera värden mellan MIN_SCALE och MAX_SCALE, genererar en slumpmässig rörelseskala för varje nytt lager. Denna funktion har följande signatur:
Variant lerp ( Variant from, Variant to, float weight )Passerar resultatet från randf() eftersom vikten låter dig generera lager med en slumpmässig skala.
De randf_range funktion erbjuder ett annat sätt att generera slumpmässiga värden inom ett intervall. Här använder funktionen create_random_layer den för att generera slumpmässiga positioner för de nya lagren inom ett specificerat intervall:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Ditt demospel bör nu se ut ungefär så här:
Inklusive ytterligare funktioner
Parallax-rullning ger en solid grund för förbättring ditt plattformsspel visuellt tilltalande, men du kan ta det ännu längre genom att införliva ytterligare funktioner. Här är några idéer att överväga.
Bakgrundsobjekt
Skapa mer interaktiva element i dina parallaxlager, som flytande plattformar, rörliga hinder eller animerade bakgrundskaraktärer. Dessa objekt kan lägga till djup och interaktivitet till ditt plattformsspel.
Dynamisk belysning
Introducera dynamiska ljuseffekter till dina parallaxlager. Genom att lägga till ljuskällor och skuggor kan du skapa en känsla av realism och djup i spelvärlden. Godots ljussystem fungerar bra med 2D-spel och kan förbättra den visuella kvaliteten avsevärt.
Partikeleffekter
Integrera partikelsystem i dina parallaxlager för att lägga till subtila visuella effekter. Fallande löv, drivande moln eller gnistrande stjärnor kan förbättra atmosfären och få spelvärlden att kännas mer levande. Du kan också lägg till upphovsrättsfria ljudeffekter till ditt spel.
Dag-Natt cykel
Implementera en dag-natt-cykel som ändrar färgen och intensiteten på parallaxlagren baserat på tiden på dagen i spelet. Denna dynamiska funktion kan ge spelare en ständigt utvecklande upplevelse när de går vidare genom spelet.
Medan parallaxrullning kan höja ditt spels grafik, är det viktigt att följa några bästa praxis för att säkerställa en smidig och njutbar upplevelse.
Prestandaoptimering
Var uppmärksam på antalet parallaxlager och deras komplexitet. För många lager eller högupplösta tillgångar kan leda till prestandaproblem, särskilt på mindre kraftfulla enheter. Optimera ditt konstverk och använd förenklade kollisionsformer där det är möjligt.
Skiktarrangemang
Ordna dina parallaxlager eftertänksamt. Tänk på den visuella hierarkin och den önskade djupeffekten. Lagren närmast kameran ska röra sig snabbare, medan de längre bort ska röra sig långsammare.
Kameragränser
Sätt gränser för kamerarörelsen för att förhindra oönskade tomma utrymmen eller visuella problem när spelaren når utkanten av spelvärlden. Detta säkerställer en sömlös upplevelse för spelarna.
Testning och justering
Testa din parallax-rullning på olika enheter och skärmstorlekar för att säkerställa att den ser ut och fungerar bra på olika plattformar. Att justera rörelseskalorna, lagerpositionerna och andra parametrar kan finjustera parallaxeffekten för bästa resultat.
Att lägga till slumpmässig parallax-rullning kan avsevärt förbättra engagemangsnivån i ditt Godot-spel. Slumpmässig parallaxrullning innebär att dynamiskt generera och positionera parallaxlager under spelet.
Genom att göra detta skapar du en känsla av rörelse och dynamik i bakgrunden, vilket gör att spelvärlden känns levande och oförutsägbar. Spelare kommer att uppleva en ständigt föränderlig visuell miljö, vilket lägger till ett extra lager av spänning till deras spelupplevelse.