U kunt dit indrukwekkende visuele effect eenvoudig bereiken door objecten met verschillende snelheden te verplaatsen.
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 bereikt het effect door verschillende lagen van de achtergrond met verschillende snelheden te verplaatsen ten opzichte van de camerabeweging.
Godot 4 maakt het eenvoudiger dan ooit om parallax-scrollen te implementeren. De krachtige 2D-engine biedt ingebouwde ondersteuning voor parallax-lagen, zodat u met minimale inspanning verbluffende visuele effecten kunt creëren.
Het Godot-spel opzetten
Maak om te beginnen een nieuw 2D-project aan in de Godot-game-engine en zet de gamescène op met een personage van een speler.
De code die in dit artikel wordt gebruikt, is hierin beschikbaar GitHub-opslagplaats en is gratis voor u om te gebruiken onder de MIT-licentie.
Voeg voor dit voorbeeld een toe KarakterBody2D knooppunt voor spelerbewegingen. Voeg ook een toe
BotsingVorm2D met een rechthoekige vorm en een Sprite2D om het personage van de speler weer te geven.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)
Met deze code kan het personage van de speler naar links, rechts, omhoog en omlaag bewegen met behulp van de pijltjestoetsen of soortgelijke invoer.
Verschillende lagen maken met ParallaxLayer-knooppunten
Creëer vervolgens het parallax-effect door er meerdere toe te voegen ParallaxLaag knooppunten naar de scène. Elk ParallaxLaag vertegenwoordigt een andere laag van de achtergrond. Om een overtuigend parallax-effect te bereiken, moeten de lagen die zich verder van de camera bevinden langzamer bewegen dan de lagen die dichterbij liggen.
Toevoegen StatischBody2D knooppunten met BotsingVorm2D in elke ParallaxLaag om enkele botsbare objecten op de achtergrond te maken. Deze botsbare objecten zullen interactie hebben met de speler en andere spelelementen, waardoor de gameplay meer diepte krijgt.
Hier is de GDScript-code voor het maken van de parallaxlagen met botsbare objecten:
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)
Met deze code bevat elke parallaxlaag nu een StatischBody2D knoop met een BotsingVorm2D representeert botsbare objecten op de achtergrond.
Deze botsbare objecten zullen interageren met het personage van de speler en andere spelelementen, waardoor de gameplay meer diepte en complexiteit krijgt.
Verschillende lagen verplaatsen met verschillende snelheden
Nu je je parallaxlagen hebt ingesteld, moet je hun posities bijwerken op basis van de beweging van de speler. Dit creëert het parallax-effect, waarbij de lagen dichter bij de camera sneller bewegen dan die verder weg.
Voeg de volgende GDScript-code toe aan de Player-scène:
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)
Deze code berekent de beweging van de parallaxlagen op basis van de beweging van de speler en werkt de scroll-offset van het ParallaxBackground-knooppunt dienovereenkomstig bij. Let op het gebruik van het negatieve teken om ervoor te zorgen dat de lagen in de tegenovergestelde richting van de beweging van de speler bewegen.
Willekeurig parallax scrollen introduceert een element van verrassing en onvoorspelbaarheid in de achtergrond van je game. Door dynamisch parallax-lagen te genereren en te positioneren tijdens het spelen, kun je een boeiendere en dynamischere ervaring voor spelers creëren.
Om willekeurig parallax-scrollen te implementeren, voegt u nieuwe parallax-lagen toe met willekeurige bewegingsschalen en posities.
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)
Deze code definieert constanten om de willekeurigheid van de parallaxlagen te regelen. Gebruik de lerp functie om waarden tussen te interpoleren MIN_SCALE En MAX_SCALE, waarbij voor elke nieuwe laag een willekeurige bewegingsschaal wordt gegenereerd. Deze functie heeft de volgende signatuur:
Variant lerp ( Variant from, Variant to, float weight )Het resultaat doorgeven van randf() omdat je met het gewicht lagen kunt genereren met een willekeurige schaal.
De randf_bereik functie biedt een andere manier om willekeurige waarden binnen een bereik te genereren. Hier gebruikt de functie create_random_layer deze om willekeurige posities te genereren voor de nieuwe lagen binnen een opgegeven bereik:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Je demospel zou er nu ongeveer zo uit moeten zien:
Inclusief extra functies
Parallax-scrollen biedt een solide basis voor verbetering je platformspel visuele aantrekkingskracht, maar u kunt nog verder gaan door extra functies toe te voegen. Hier zijn enkele ideeën om te overwegen.
Achtergrondobjecten
Creëer meer interactieve elementen in uw parallaxlagen, zoals zwevende platforms, bewegende obstakels of geanimeerde achtergrondpersonages. Deze objecten kunnen diepte en interactiviteit toevoegen aan je platformspel.
Dynamische verlichting
Introduceer dynamische lichteffecten in uw parallaxlagen. Door lichtbronnen en schaduwen toe te voegen, creëer je een gevoel van realisme en diepte in de gamewereld. Het verlichtingssysteem van Godot werkt goed met 2D-games en kan de visuele kwaliteit aanzienlijk verbeteren.
Deeltjeseffecten
Integreer partikelsystemen in uw parallaxlagen om subtiele visuele effecten toe te voegen. Vallende bladeren, ronddrijvende wolken of fonkelende sterren kunnen de sfeer versterken en de spelwereld levendiger maken. Je kan ook voeg auteursrechtvrije geluidseffecten toe aan je spel.
Dag-nacht cyclus
Implementeer een dag-nachtcyclus die de kleur en intensiteit van de parallaxlagen verandert op basis van het tijdstip van de dag in het spel. Deze dynamische functie kan spelers een constant evoluerende ervaring bieden naarmate ze verder komen in het spel.
Hoewel parallax-scrollen de beelden van je game naar een hoger niveau kan tillen, is het van essentieel belang om enkele best practices te volgen om een soepele en plezierige ervaring te garanderen.
Prestatie optimalisatie
Houd rekening met het aantal parallaxlagen en hun complexiteit. Te veel lagen of items met een hoge resolutie kunnen leiden tot prestatieproblemen, vooral op minder krachtige apparaten. Optimaliseer uw illustraties en gebruik waar mogelijk vereenvoudigde botsingsvormen.
Laagopstelling
Rangschik uw parallaxlagen zorgvuldig. Denk aan de visuele hiërarchie en het gewenste diepte-effect. De lagen die zich het dichtst bij de camera bevinden, zouden sneller moeten bewegen, terwijl die verder weg langzamer zouden moeten bewegen.
Cameragrenzen
Stel grenzen aan de camerabewegingen om ongewenste lege ruimte of visuele glitches te voorkomen wanneer de speler de randen van de gamewereld bereikt. Dit zorgt voor een naadloze ervaring voor spelers.
Testen en tweaken
Test uw parallax-scrollen op verschillende apparaten en schermformaten om er zeker van te zijn dat het er goed uitziet en goed presteert op verschillende platforms. Door de bewegingsschalen, laagposities en andere parameters aan te passen, kunt u het parallax-effect verfijnen voor de beste resultaten.
Het toevoegen van willekeurig parallax-scrollen kan het betrokkenheidsniveau van je Godot-spel aanzienlijk verbeteren. Willekeurig parallax-scrollen omvat het dynamisch genereren en positioneren van parallax-lagen tijdens het spelen.
Door dit te doen, creëer je een gevoel van beweging en dynamiek op de achtergrond, waardoor de gamewereld levendig en onvoorspelbaar aanvoelt. Spelers zullen een constant veranderende visuele omgeving ervaren, wat een extra laag spanning toevoegt aan hun game-ervaring.
