Puteți obține acest efect vizual impresionant pur și simplu prin mișcarea obiectelor la viteze diferite.
Paralax scrolling este o tehnică pe care multe jocuri 2D o folosesc pentru a crea o iluzie de profunzime și pentru a adăuga interes vizual fundalului jocului. Obține efectul prin mișcarea diferitelor straturi ale fundalului la viteze diferite în raport cu mișcarea camerei.
Godot 4 face mai ușor ca niciodată implementarea derulării paralaxe. Motorul său puternic 2D oferă suport încorporat pentru straturile de paralaxă, permițându-vă să creați efecte vizuale uimitoare cu un efort minim.
Configurarea jocului Godot
Pentru a începe, creați un nou proiect 2D în motorul de joc Godot și configurați scena jocului cu un personaj jucător.
Codul folosit în acest articol este disponibil în acest articol Depozitul GitHub și este gratuit pentru utilizare sub licența MIT.
Pentru acest exemplu, adăugați a CharacterBody2D nod pentru mișcarea jucătorului. De asemenea, adăugați a CollisionShape2D cu formă dreptunghiulară și a Sprite2D pentru a reprezenta personajul jucătorului.
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)
Cu acest cod, personajul jucătorului se poate deplasa la stânga, la dreapta, în sus și în jos folosind tastele săgeți sau intrări similare.
Crearea diferitelor straturi cu noduri ParallaxLayer
Apoi, creați efectul de paralaxă adăugând mai multe ParallaxLayer noduri la scenă. Fiecare ParallaxLayer va reprezenta un strat diferit al fundalului. Pentru a obține un efect de paralaxă convingător, straturile mai îndepărtate de cameră ar trebui să se miște mai lent decât cele mai apropiate.
Adăuga StaticBody2D noduri cu CollisionShape2D în fiecare ParallaxLayer pentru a crea unele obiecte care se pot ciocni în fundal. Aceste obiecte care se ciocnesc vor interacționa cu jucătorul și cu alte elemente ale jocului, adăugând mai multă profunzime jocului.
Iată codul GDScript pentru crearea straturilor de paralaxă cu obiecte colizabile:
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)
Cu acest cod, fiecare strat de paralaxă conține acum un StaticBody2D nod cu a CollisionShape2D reprezentând obiecte care se pot ciocni în fundal.
Aceste obiecte care se ciocnesc vor interacționa cu caracterul jucătorului și cu alte elemente de joc, adăugând mai multă profunzime și complexitate jocului.
Mutarea diferitelor straturi cu viteze diferite
Acum că ați configurat straturile de paralaxă, trebuie să le actualizați pozițiile în funcție de mișcarea jucătorului. Acest lucru va crea efectul de paralaxă, în care straturile mai apropiate de cameră se mișcă mai repede decât cele mai îndepărtate.
Adăugați următorul cod GDScript la 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)
Acest cod calculează mișcarea straturilor de paralaxă pe baza mișcării jucătorului și actualizează în consecință offset-ul de defilare al nodului ParallaxBackground. Observați utilizarea semnului negativ pentru a vă asigura că straturile se mișcă în direcția opusă mișcării jucătorului.
Derularea aleatorie cu paralaxă introduce un element de surpriză și imprevizibilitate în fundalul jocului tău. Prin generarea și poziționarea dinamică a straturilor de paralaxă în timpul jocului, puteți crea o experiență mai captivantă și mai dinamică pentru jucători.
Pentru a implementa derularea aleatorie cu paralaxă, adăugați noi straturi de paralaxă cu scale și poziții aleatorii de mișcare.
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)
Acest cod definește constante pentru a controla caracterul aleatoriu al straturilor de paralaxă. Folosește lerp funcția de interpolare a valorilor între MIN_SCALE și MAX_SCALE, generând o scară de mișcare aleatorie pentru fiecare strat nou. Această funcție are următoarea semnătură:
Variant lerp ( Variant from, Variant to, float weight )Trecând rezultatul de la randf() deoarece greutatea vă permite să generați straturi cu o scară aleatorie.
The randf_range funcția oferă o altă modalitate de a genera valori aleatorii într-un interval. Aici, funcția create_random_layer o folosește pentru a genera poziții aleatorii pentru noile straturi într-un interval specificat:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Jocul tău demonstrativ ar trebui să arate acum cam așa:
Inclusiv caracteristici suplimentare
Derularea Parallax oferă o bază solidă pentru îmbunătățire jocul tău platformer atracție vizuală, dar o puteți duce și mai departe prin încorporarea unor funcții suplimentare. Iată câteva idei de luat în considerare.
Obiecte de fundal
Creați mai multe elemente interactive în straturile de paralaxă, cum ar fi platforme plutitoare, obstacole în mișcare sau personaje animate de fundal. Aceste obiecte pot adăuga profunzime și interactivitate jocului tău de platforme.
Iluminare dinamica
Introduceți efecte de iluminare dinamice în straturile dvs. de paralaxă. Adăugând surse de lumină și umbre, puteți crea un sentiment de realism și profunzime în lumea jocului. Sistemul de iluminare Godot funcționează bine cu jocurile 2D și poate îmbunătăți semnificativ calitatea vizuală.
Efectele particulelor
Integrați sistemele de particule în straturile de paralaxă pentru a adăuga efecte vizuale subtile. Frunzele în cădere, norii în derivă sau stelele strălucitoare pot îmbunătăți atmosfera și pot face lumea jocului să se simtă mai vie. Poti de asemenea adăugați efecte sonore fără drepturi de autor la jocul tău.
Ciclul zi-noapte
Implementați un ciclu zi-noapte care schimbă culoarea și intensitatea straturilor de paralaxă în funcție de timpul zilei din joc. Această caracteristică dinamică poate oferi jucătorilor o experiență în continuă evoluție pe măsură ce progresează în joc.
În timp ce defilarea cu paralaxă poate îmbunătăți imaginea jocului, este esențial să urmați câteva dintre cele mai bune practici pentru a asigura o experiență lină și plăcută.
Optimizarea performanței
Fiți atenți la numărul de straturi de paralaxă și la complexitatea acestora. Prea multe straturi sau materiale de înaltă rezoluție pot duce la probleme de performanță, în special pe dispozitivele mai puțin puternice. Optimizați-vă opera de artă și utilizați forme de coliziune simplificate acolo unde este posibil.
Aranjarea straturilor
Aranjați-vă straturile de paralaxă cu grijă. Luați în considerare ierarhia vizuală și efectul de adâncime dorit. Straturile cele mai apropiate de cameră ar trebui să se miște mai repede, în timp ce cele mai îndepărtate ar trebui să se miște mai lent.
Limitele camerei
Stabiliți limite pentru mișcarea camerei pentru a preveni spațiul gol nedorit sau erori vizuale atunci când jucătorul ajunge la marginile lumii de joc. Acest lucru asigură o experiență perfectă pentru jucători.
Testare și ajustare
Testați-vă derularea paralaxă pe diferite dispozitive și dimensiuni de ecran pentru a vă asigura că arată și funcționează bine pe diferite platforme. Modificarea scărilor de mișcare, a pozițiilor straturilor și a altor parametri poate regla fin efectul de paralaxă pentru cele mai bune rezultate.
Adăugarea derulării aleatorii cu paralaxă poate îmbunătăți semnificativ nivelul de implicare al jocului tău Godot. Defilarea aleatorie cu paralaxă implică generarea și poziționarea dinamică a straturilor de paralaxă în timpul jocului.
Făcând acest lucru, creați un sentiment de mișcare și dinamism în fundal, făcând lumea jocului să se simtă vie și imprevizibilă. Jucătorii vor experimenta un mediu vizual în continuă schimbare, adăugând un strat suplimentar de entuziasm experienței lor de joc.