Sie können diesen beeindruckenden visuellen Effekt einfach dadurch erzielen, dass Sie Objekte mit unterschiedlichen Geschwindigkeiten bewegen.
Parallax Scrolling ist eine Technik, die viele 2D-Spiele verwenden, um eine Illusion von Tiefe zu erzeugen und den Spielhintergründen visuelles Interesse zu verleihen. Der Effekt wird dadurch erreicht, dass verschiedene Ebenen des Hintergrunds mit unterschiedlichen Geschwindigkeiten relativ zur Kamerabewegung bewegt werden.
Godot 4 macht es einfacher denn je, Parallaxen-Scrolling zu implementieren. Seine leistungsstarke 2D-Engine bietet integrierte Unterstützung für Parallaxenebenen, sodass Sie mit minimalem Aufwand atemberaubende visuelle Effekte erstellen können.
Einrichten des Godot-Spiels
Erstellen Sie zunächst ein neues 2D-Projekt in die Godot-Spiel-Engine und baue die Spielszene mit einer Spielerfigur auf.
Der in diesem Artikel verwendete Code ist hier verfügbar GitHub-Repository Die Nutzung steht Ihnen unter der MIT-Lizenz kostenlos zur Verfügung.
Fügen Sie für dieses Beispiel a hinzu CharacterBody2D Knotenpunkt für Spielerbewegungen. Fügen Sie außerdem a hinzu CollisionShape2D mit einer rechteckigen Form und a Sprite2D um den Spielercharakter darzustellen.
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)
Mit diesem Code kann sich der Spielercharakter mithilfe der Pfeiltasten oder ähnlicher Eingaben nach links, rechts, oben und unten bewegen.
Erstellen verschiedener Ebenen mit ParallaxLayer-Knoten
Als nächstes erstellen Sie den Parallaxeneffekt, indem Sie mehrere hinzufügen ParallaxLayer Knoten zur Szene. Jede ParallaxLayer stellt eine andere Ebene des Hintergrunds dar. Um einen überzeugenden Parallaxeneffekt zu erzielen, sollten sich die weiter von der Kamera entfernten Schichten langsamer bewegen als die näheren.
Hinzufügen StaticBody2D Knoten mit CollisionShape2D in jedem ParallaxLayer um einige kollidierbare Objekte im Hintergrund zu erstellen. Diese kollidierbaren Objekte interagieren mit dem Spieler und anderen Spielelementen und verleihen dem Gameplay mehr Tiefe.
Hier ist der GDScript-Code zum Erstellen der Parallaxenebenen mit kollidierbaren Objekten:
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)
Mit diesem Code enthält nun jede Parallaxenschicht eine StaticBody2D Knoten mit a CollisionShape2D Darstellung kollidierbarer Objekte im Hintergrund.
Diese kollidierbaren Objekte interagieren mit dem Charakter des Spielers und anderen Spielelementen und verleihen dem Gameplay mehr Tiefe und Komplexität.
Verschiedene Ebenen mit unterschiedlicher Geschwindigkeit bewegen
Nachdem Sie nun Ihre Parallaxenebenen eingerichtet haben, müssen Sie deren Positionen basierend auf der Bewegung des Spielers aktualisieren. Dadurch entsteht der Parallaxeneffekt, bei dem sich die Schichten näher an der Kamera schneller bewegen als die weiter entfernten.
Fügen Sie der Player-Szene den folgenden GDScript-Code hinzu:
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)
Dieser Code berechnet die Bewegung der Parallaxenebenen basierend auf der Bewegung des Spielers und aktualisiert den Scroll-Offset des ParallaxBackground-Knotens entsprechend. Beachten Sie die Verwendung des negativen Vorzeichens, um sicherzustellen, dass sich die Ebenen in die entgegengesetzte Richtung der Bewegung des Spielers bewegen.
Zufälliges Parallaxen-Scrollen verleiht dem Hintergrund Ihres Spiels ein überraschendes und unvorhersehbares Element. Durch die dynamische Generierung und Positionierung von Parallaxenebenen während des Spiels können Sie den Spielern ein ansprechenderes und dynamischeres Erlebnis bieten.
Um zufälliges Parallaxenscrollen zu implementieren, fügen Sie neue Parallaxenebenen mit zufälligen Bewegungsskalen und -positionen hinzu.
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)
Dieser Code definiert Konstanten, um die Zufälligkeit der Parallaxenschichten zu steuern. Benutzen Sie die lerp Funktion zum Interpolieren von Werten dazwischen MIN_SCALE Und MAX_SCALE, wodurch eine zufällige Bewegungsskala für jede neue Ebene generiert wird. Diese Funktion hat die folgende Signatur:
Variant lerp ( Variant from, Variant to, float weight )Übergabe des Ergebnisses von randf() da das Gewicht es Ihnen ermöglicht, Schichten mit einer zufälligen Skalierung zu erzeugen.
Der randf_range Die Funktion bietet eine weitere Möglichkeit, Zufallswerte innerhalb eines Bereichs zu generieren. Hier verwendet die Funktion „create_random_layer“ es, um zufällige Positionen für die neuen Ebenen innerhalb eines angegebenen Bereichs zu generieren:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Ihr Demospiel sollte nun etwa so aussehen:
Inklusive zusätzlicher Funktionen
Parallaxen-Scrolling bietet eine solide Grundlage für die Verbesserung die Ihres Plattformspiels optisch ansprechend, aber Sie können noch einen Schritt weiter gehen, indem Sie zusätzliche Funktionen integrieren. Hier sind einige Ideen, die Sie berücksichtigen sollten.
Hintergrundobjekte
Erstellen Sie in Ihren Parallaxenebenen weitere interaktive Elemente, z. B. schwebende Plattformen, bewegliche Hindernisse oder animierte Hintergrundfiguren. Diese Objekte können Ihrem Plattformspiel Tiefe und Interaktivität verleihen.
Dynamische Beleuchtung
Fügen Sie dynamische Lichteffekte zu Ihren Parallaxenebenen hinzu. Durch das Hinzufügen von Lichtquellen und Schatten können Sie der Spielwelt ein Gefühl von Realismus und Tiefe verleihen. Das Beleuchtungssystem von Godot funktioniert gut mit 2D-Spielen und kann die visuelle Qualität deutlich verbessern.
Partikeleffekte
Integrieren Sie Partikelsysteme in Ihre Parallaxenebenen, um subtile visuelle Effekte hinzuzufügen. Fallende Blätter, ziehende Wolken oder funkelnde Sterne können die Atmosphäre verbessern und die Spielwelt lebendiger wirken lassen. Du kannst auch Fügen Sie urheberrechtsfreie Soundeffekte hinzu zu deinem Spiel.
Tag-Nacht-Zyklus
Implementieren Sie einen Tag-Nacht-Zyklus, der die Farbe und Intensität der Parallaxenebenen je nach Tageszeit im Spiel ändert. Diese dynamische Funktion kann den Spielern im Verlauf des Spiels ein sich ständig weiterentwickelndes Erlebnis bieten.
Während Parallax-Scrolling die Grafik Ihres Spiels verbessern kann, ist es wichtig, einige Best Practices zu befolgen, um ein reibungsloses und unterhaltsames Erlebnis zu gewährleisten.
Leistungsoptimierung
Beachten Sie die Anzahl der Parallaxenschichten und deren Komplexität. Zu viele Ebenen oder hochauflösende Assets können zu Leistungsproblemen führen, insbesondere auf leistungsschwächeren Geräten. Optimieren Sie Ihre Grafik und verwenden Sie nach Möglichkeit vereinfachte Kollisionsformen.
Ebenenanordnung
Ordnen Sie Ihre Parallaxenebenen sorgfältig an. Berücksichtigen Sie die visuelle Hierarchie und die gewünschte Tiefenwirkung. Die Schichten, die der Kamera am nächsten sind, sollten sich schneller bewegen, während sich die weiter entfernten Schichten langsamer bewegen sollten.
Kameragrenzen
Legen Sie Grenzen für die Kamerabewegung fest, um unerwünschte leere Räume oder visuelle Störungen zu verhindern, wenn der Spieler die Ränder der Spielwelt erreicht. Dies gewährleistet ein nahtloses Erlebnis für die Spieler.
Testen und Optimieren
Testen Sie Ihr Parallaxen-Scrolling auf verschiedenen Geräten und Bildschirmgrößen, um sicherzustellen, dass es auf verschiedenen Plattformen gut aussieht und funktioniert. Durch Optimieren der Bewegungsskalen, Ebenenpositionen und anderer Parameter kann der Parallaxeneffekt feinabgestimmt werden, um die besten Ergebnisse zu erzielen.
Durch das Hinzufügen von zufälligem Parallaxen-Scrollen kann das Engagement Ihres Godot-Spiels deutlich gesteigert werden. Beim zufälligen Parallaxen-Scrollen werden Parallaxenebenen während des Spiels dynamisch generiert und positioniert.
Dadurch erzeugen Sie im Hintergrund ein Gefühl von Bewegung und Dynamik, wodurch die Spielwelt lebendig und unvorhersehbar wirkt. Die Spieler werden eine sich ständig verändernde visuelle Umgebung erleben, die ihrem Spielerlebnis eine zusätzliche Spannung verleiht.