Ovaj impresivni vizualni efekt možete postići jednostavnim pomicanjem objekata različitim brzinama.
Paralaksno pomicanje tehnika je koju mnoge 2D igre koriste za stvaranje iluzije dubine i dodavanja vizualnog interesa pozadini igre. Učinak postiže pomicanjem različitih slojeva pozadine različitim brzinama u odnosu na kretanje kamere.
Godot 4 olakšava implementaciju paralaksnog pomicanja nego ikad. Njegov moćni 2D mehanizam pruža ugrađenu podršku za slojeve paralakse, omogućujući vam stvaranje zapanjujućih vizualnih efekata uz minimalan napor.
Postavljanje igre Godot
Za početak izradite novi 2D projekt u Godot game engine i postavite scenu igre s likom igrača.
Kôd korišten u ovom članku dostupan je u ovom GitHub spremište i besplatan je za korištenje pod MIT licencom.
Za ovaj primjer dodajte a CharacterBody2D čvor za kretanje igrača. Također dodajte a CollisionShape2D s oblikom pravokutnika i a Sprite2D za predstavljanje lika igrača.
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)
Pomoću ovog koda igrač se može pomicati lijevo, desno, gore i dolje pomoću tipki sa strelicama ili sličnih unosa.
Stvaranje različitih slojeva s ParallaxLayer čvorovima
Zatim stvorite efekt paralakse dodavanjem višestrukih Paralaksni sloj čvorovi na scenu. Svaki Paralaksni sloj predstavljat će drugačiji sloj pozadine. Da bi se postigao uvjerljiv efekt paralakse, slojevi udaljeniji od kamere trebali bi se kretati sporije od onih bližih.
Dodati StaticBody2D čvorovi sa CollisionShape2D u svakom Paralaksni sloj za stvaranje objekata koji se mogu sudarati u pozadini. Ovi objekti koji se mogu sudarati komunicirat će s igračem i drugim elementima igre, dodajući više dubine igranju.
Evo GDScript koda za stvaranje slojeva paralakse s objektima koji se mogu sudariti:
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)
Uz ovaj kod, svaki sloj paralakse sada sadrži a StaticBody2D čvor s a CollisionShape2D predstavljaju objekte koji se mogu sudariti u pozadini.
Ovi objekti koji se mogu sudarati komunicirat će s likom igrača i drugim elementima igre, dodajući više dubine i složenosti igrivosti.
Premještanje različitih slojeva različitom brzinom
Sada kada imate postavljene slojeve paralakse, trebate ažurirati njihove položaje na temelju kretanja igrača. Ovo će stvoriti efekt paralakse, gdje se slojevi bliži kameri pomiču brže od onih koji su udaljeniji.
Dodajte sljedeći GDScript kod u scenu Playera:
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)
Ovaj kod izračunava kretanje slojeva paralakse na temelju kretanja igrača i u skladu s tim ažurira pomak pomicanja čvora ParallaxBackground. Obratite pozornost na upotrebu negativnog predznaka kako biste osigurali da se slojevi kreću u suprotnom smjeru od kretanja igrača.
Nasumično pomicanje paralakse uvodi element iznenađenja i nepredvidljivosti u pozadinu vaše igre. Dinamičkim generiranjem i pozicioniranjem slojeva paralakse tijekom igranja, možete stvoriti privlačnije i dinamičnije iskustvo za igrače.
Da biste implementirali nasumično pomicanje paralakse, dodajte nove slojeve paralakse s skalama i položajima nasumičnog kretanja.
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)
Ovaj kod definira konstante za kontrolu nasumičnosti slojeva paralakse. Koristiti lepr funkcija za interpolaciju vrijednosti između MIN_SCALE i MAX_SCALE, generirajući skalu nasumičnog kretanja za svaki novi sloj. Ova funkcija ima sljedeći potpis:
Variant lerp ( Variant from, Variant to, float weight )Prijenos rezultata iz randf() budući da vam težina omogućuje generiranje slojeva u nasumičnim razmjerima.
The randf_raspon nudi još jedan način generiranja slučajnih vrijednosti unutar raspona. Ovdje ga funkcija create_random_layer koristi za generiranje nasumičnih položaja za nove slojeve unutar određenog raspona:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Vaša demo igra sada bi trebala izgledati otprilike ovako:
Uključujući dodatne značajke
Paralaksno pomicanje pruža solidnu osnovu za poboljšanje tvoja platformska igra vizualna privlačnost, ali možete to učiniti još više ugradnjom dodatnih značajki. Evo nekoliko ideja koje treba razmotriti.
Pozadinski objekti
Stvorite više interaktivnih elemenata u slojevima paralakse, kao što su plutajuće platforme, pokretne prepreke ili animirani pozadinski likovi. Ovi objekti mogu dodati dubinu i interaktivnost vašoj platformer igri.
Dinamičko osvjetljenje
Uvedite dinamične svjetlosne efekte u svoje slojeve paralakse. Dodavanjem izvora svjetla i sjena, možete stvoriti osjećaj realizma i dubine u svijetu igre. Godotov sustav osvjetljenja dobro radi s 2D igrama i može značajno poboljšati vizualnu kvalitetu.
Učinci čestica
Integrirajte sustave čestica u svoje slojeve paralakse kako biste dodali suptilne vizualne efekte. Lišće koje pada, oblaci koji lebde ili svjetlucave zvijezde mogu poboljšati atmosferu i učiniti svijet igre življim. Također možete dodajte zvučne efekte bez autorskih prava svojoj igri.
Ciklus dan-noć
Implementirajte ciklus dan-noć koji mijenja boju i intenzitet slojeva paralakse ovisno o dobu dana u igri. Ova dinamička značajka može pružiti igračima iskustvo koje se stalno razvija kako napreduju kroz igru.
Iako paralaksno pomicanje može poboljšati vizualni izgled vaše igre, bitno je slijediti neke najbolje prakse kako biste osigurali glatko i ugodno iskustvo.
Optimizacija performansi
Vodite računa o broju slojeva paralakse i njihovoj složenosti. Previše slojeva ili materijala visoke razlučivosti može dovesti do problema s izvedbom, osobito na manje moćnim uređajima. Optimizirajte svoje umjetničko djelo i koristite pojednostavljene oblike sudara gdje je to moguće.
Raspored slojeva
Promišljeno rasporedite slojeve paralakse. Razmotrite vizualnu hijerarhiju i željeni učinak dubine. Slojevi koji su najbliži kameri trebali bi se kretati brže, dok bi se oni udaljeniji trebali kretati sporije.
Granice kamere
Postavite granice za kretanje kamere kako biste spriječili neželjeni prazan prostor ili vizualne propuste kada igrač dođe do rubova svijeta igre. Ovo osigurava besprijekorno iskustvo za igrače.
Testiranje i podešavanje
Testirajte svoje paralaksno pomicanje na različitim uređajima i veličinama zaslona kako biste bili sigurni da izgleda i radi dobro na različitim platformama. Podešavanje skala kretanja, položaja slojeva i drugih parametara može fino podesiti efekt paralakse za najbolje rezultate.
Dodavanje nasumičnog pomicanja paralakse može značajno povećati razinu angažmana vaše igre Godot. Nasumično pomicanje paralakse uključuje dinamičko generiranje i pozicioniranje slojeva paralakse tijekom igranja.
Čineći to, stvarate osjećaj pokreta i dinamike u pozadini, čineći svijet igre živim i nepredvidljivim. Igrači će iskusiti vizualno okruženje koje se stalno mijenja, dodajući dodatni sloj uzbuđenja njihovom iskustvu igranja.