Puoi ottenere questo impressionante effetto visivo semplicemente spostando gli oggetti a velocità diverse.
Lo scorrimento parallasse è una tecnica utilizzata da molti giochi 2D per creare un'illusione di profondità e aggiungere interesse visivo agli sfondi del gioco. Raggiunge l'effetto spostando diversi strati dello sfondo a velocità diverse rispetto al movimento della telecamera.
Godot 4 rende più facile che mai implementare lo scorrimento parallasse. Il suo potente motore 2D fornisce supporto integrato per i livelli di parallasse, permettendoti di creare straordinari effetti visivi con il minimo sforzo.
Impostazione del gioco Godot
Per iniziare, crea un nuovo progetto 2D in il motore di gioco Godot e allestire la scena del gioco con un personaggio del giocatore.
Il codice utilizzato in questo articolo è disponibile in this Deposito GitHub ed è gratuito per l'uso con la licenza MIT.
Per questo esempio, aggiungi a CarattereCorpo2D nodo per il movimento del giocatore. Aggiungi anche a CollisionShape2D
con una forma rettangolare e a Sprite2D per rappresentare il personaggio del giocatore.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)
Con questo codice, il personaggio del giocatore può spostarsi a sinistra, destra, su e giù usando i tasti freccia o input simili.
Creazione di livelli diversi con i nodi ParallaxLayer
Quindi, crea l'effetto di parallasse aggiungendo più Strato di parallasse nodi alla scena. Ogni Strato di parallasse rappresenterà un diverso livello dello sfondo. Per ottenere un convincente effetto di parallasse, gli strati più lontani dalla fotocamera dovrebbero muoversi più lentamente di quelli più vicini.
Aggiungere StaticoCorpo2D nodi con CollisionShape2D in ciascun Strato di parallasse per creare alcuni oggetti collidibili sullo sfondo. Questi oggetti collidibili interagiranno con il giocatore e altri elementi di gioco, aggiungendo più profondità al gameplay.
Ecco il codice GDScript per creare i livelli di parallasse con oggetti collidabili:
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)
Con questo codice, ogni livello di parallasse ora contiene un file StaticoCorpo2D nodo con a CollisionShape2D che rappresentano oggetti collidibili sullo sfondo.
Questi oggetti collidibili interagiranno con il personaggio del giocatore e altri elementi di gioco, aggiungendo più profondità e complessità al gameplay.
Spostamento di livelli diversi con velocità diverse
Ora che hai impostato i livelli di parallasse, devi aggiornare le loro posizioni in base al movimento del giocatore. Questo creerà l'effetto di parallasse, in cui gli strati più vicini alla telecamera si muovono più velocemente di quelli più lontani.
Aggiungi il seguente codice GDScript alla scena Player:
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)
Questo codice calcola il movimento dei livelli di parallasse in base al movimento del giocatore e aggiorna di conseguenza l'offset di scorrimento del nodo ParallaxBackground. Si noti l'uso del segno negativo per garantire che gli strati si muovano nella direzione opposta al movimento del giocatore.
Lo scorrimento parallasse casuale introduce un elemento di sorpresa e imprevedibilità nello sfondo del gioco. Generando e posizionando dinamicamente i livelli di parallasse durante il gioco, puoi creare un'esperienza più coinvolgente e dinamica per i giocatori.
Per implementare lo scorrimento parallasse casuale, aggiungi nuovi livelli di parallasse con scale e posizioni di movimento casuali.
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)
Questo codice definisce le costanti per controllare la casualità dei livelli di parallasse. Usa il lerp funzione per interpolare i valori tra SCALA_MIN E MAX_SCALA, generando una scala di movimento casuale per ogni nuovo livello. Questa funzione ha la seguente firma:
Variant lerp ( Variant from, Variant to, float weight )Passando il risultato da randf() poiché il peso ti consente di generare livelli con una scala casuale.
IL randf_range La funzione offre un altro modo per generare valori casuali all'interno di un intervallo. Qui, la funzione create_random_layer lo utilizza per generare posizioni casuali per i nuovi livelli all'interno di un intervallo specificato:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Il tuo gioco demo ora dovrebbe assomigliare a questo:
Comprese funzionalità aggiuntive
Lo scorrimento parallasse fornisce una solida base per il miglioramento il tuo gioco platform fascino visivo, ma puoi andare ancora oltre incorporando funzionalità aggiuntive. Ecco alcune idee da considerare.
Oggetti di sfondo
Crea più elementi interattivi nei tuoi livelli di parallasse, come piattaforme galleggianti, ostacoli in movimento o personaggi di sfondo animati. Questi oggetti possono aggiungere profondità e interattività al tuo gioco platform.
Illuminazione dinamica
Introduci effetti di luce dinamici ai tuoi livelli di parallasse. Aggiungendo fonti di luce e ombre, puoi creare un senso di realismo e profondità nel mondo di gioco. Il sistema di illuminazione di Godot funziona bene con i giochi 2D e può migliorare significativamente la qualità visiva.
Effetti particellari
Integra i sistemi di particelle nei tuoi livelli di parallasse per aggiungere sottili effetti visivi. Foglie che cadono, nuvole alla deriva o stelle scintillanti possono migliorare l'atmosfera e rendere il mondo di gioco più vivo. Puoi anche aggiungere effetti sonori senza copyright al tuo gioco.
Ciclo giorno-notte
Implementa un ciclo giorno-notte che cambia il colore e l'intensità degli strati di parallasse in base all'ora del giorno nel gioco. Questa caratteristica dinamica può fornire ai giocatori un'esperienza in continua evoluzione man mano che avanzano nel gioco.
Sebbene lo scorrimento parallasse possa migliorare la grafica del tuo gioco, è essenziale seguire alcune best practice per garantire un'esperienza fluida e piacevole.
Ottimizzazione delle prestazioni
Prestare attenzione al numero di livelli di parallasse e alla loro complessità. Troppi livelli o risorse ad alta risoluzione possono portare a problemi di prestazioni, soprattutto su dispositivi meno potenti. Ottimizza la tua opera d'arte e utilizza forme di collisione semplificate ove possibile.
Disposizione dei livelli
Disponi i tuoi livelli di parallasse in modo ponderato. Considera la gerarchia visiva e l'effetto di profondità desiderato. Gli strati più vicini alla fotocamera dovrebbero muoversi più velocemente, mentre quelli più lontani dovrebbero muoversi più lentamente.
Confini della fotocamera
Imposta i limiti per il movimento della telecamera per evitare spazi vuoti indesiderati o difetti visivi quando il giocatore raggiunge i bordi del mondo di gioco. Ciò garantisce un'esperienza senza interruzioni per i giocatori.
Test e modifiche
Metti alla prova il tuo scorrimento parallasse su vari dispositivi e dimensioni dello schermo per assicurarti che appaia e funzioni bene su piattaforme diverse. Modificando le scale di movimento, le posizioni dei livelli e altri parametri è possibile ottimizzare l'effetto di parallasse per ottenere i migliori risultati.
L'aggiunta di uno scorrimento parallasse casuale può migliorare significativamente il livello di coinvolgimento del tuo gioco Godot. Lo scorrimento casuale della parallasse comporta la generazione dinamica e il posizionamento di livelli di parallasse durante il gioco.
In questo modo, crei un senso di movimento e dinamismo sullo sfondo, rendendo il mondo di gioco vivo e imprevedibile. I giocatori sperimenteranno un ambiente visivo in continua evoluzione, aggiungendo un ulteriore livello di eccitazione alla loro esperienza di gioco.
