Cum se implementează Parallax Scrolling în Godot

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 un nod CharacterBody2D pentru mișcarea jucătorului. De asemenea, adăugați un CollisionShape2D cu formă dreptunghiulară și un Sprite2D pentru a reprezenta personajul jucătorului.

 extends CharacterBody2D

var speed = 200

func _physics_process(delta):
    var velocity = Vector2()

    if Input.is_action_pressed('ui_right'):
        velocity.x += 1

    if Input.is_action_pressed('ui_left'):
        velocity.x -= 1

    if Input.is_action_pressed('ui_down'):
        velocity.y += 1

    if 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 noduri ParallaxLayer 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ți noduri StaticBody2D cu CollisionShape2D în fiecare ParallaxLayer pentru a crea câteva 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.

  Cum să mutați butonul în jos în aplicația Reddit

Iată codul GDScript pentru crearea straturilor de paralaxă cu obiecte colizabile:

 extends ParallaxBackground

func _ready():
    
    var layer1 = ParallaxLayer.new()
    layer1.motion_scale = Vector2(0.2, 0.2)
    add_child(layer1)

    
    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)

    
    var layer2 = ParallaxLayer.new()
    layer2.motion_scale = Vector2(0.5, 0.5)
    add_child(layer2)

    
    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)

    
    var layer3 = ParallaxLayer.new()
    layer3.motion_scale = Vector2(1.0, 1.0)
    add_child(layer3)

    
    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 nod StaticBody2D cu un CollisionShape2D reprezentând obiecte colizabile î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 CharacterBody2D

func _physics_process(delta):
    ...
    move_and_collide(velocity * delta)

    
    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 ParallaxBackground

const 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 = 300

func _ready():
    for i in range(MAX_LAYERS):
        create_random_layer()

func create_random_layer():
    
    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_position

    add_child(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():
    
    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ă. Utilizați funcția lerp pentru a interpola valori î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 ) 

Transmiterea rezultatului de la randf() ca greutate vă permite să generați straturi cu o scară aleatorie.

  Ascunde-ți numărul pe Signal și folosește un nume de utilizator pentru mai multă confidențialitate

Funcția randf_range 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ățirea atractivității vizuale a jocului dvs. de platforme, dar puteți duce acest lucru ș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. De asemenea, puteți adăuga efecte sonore fără drepturi de autor în jocul dvs.

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ă.

  Ce este HDMI VRR pe PlayStation 5 și Xbox Series X?

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 încet.

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.