Tento pôsobivý vizuálny efekt môžete dosiahnuť jednoduchým pohybom predmetov rôznymi rýchlosťami.
Paralaxné posúvanie je technika, ktorú mnohé 2D hry používajú na vytvorenie ilúzie hĺbky a pridanie vizuálneho záujmu do pozadia hry. Efekt sa dosahuje pohybom rôznych vrstiev pozadia rôznou rýchlosťou vzhľadom na pohyb kamery.
Godot 4 uľahčuje implementáciu paralaxného rolovania ako kedykoľvek predtým. Jeho výkonný 2D engine poskytuje vstavanú podporu pre vrstvy paralaxy, čo vám umožňuje vytvárať úžasné vizuálne efekty s minimálnym úsilím.
Nastavenie hry Godot
Ak chcete začať, vytvorte nový 2D projekt v herný engine Godot a nastavte hernú scénu s postavou hráča.
Kód použitý v tomto článku je dostupný v tomto úložisko GitHub a môžete ho bezplatne používať na základe licencie MIT.
Pre tento príklad pridajte a CharacterBody2D uzol pre pohyb hráča. Pridajte tiež a CollisionShape2D s tvarom obdĺžnika a a Sprite2D reprezentovať postavu hráč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)
Pomocou tohto kódu sa môže postava hráča pohybovať doľava, doprava, nahor a nadol pomocou klávesov so šípkami alebo podobných vstupov.
Vytváranie rôznych vrstiev s uzlami ParallaxLayer
Ďalej vytvorte efekt paralaxy pridaním viacerých ParallaxLayer uzly na scénu. Každý ParallaxLayer bude predstavovať inú vrstvu pozadia. Pre dosiahnutie presvedčivého efektu paralaxy by sa vrstvy ďalej od fotoaparátu mali pohybovať pomalšie ako tie bližšie.
Pridať StaticBody2D uzly s CollisionShape2D v každom ParallaxLayer vytvoriť na pozadí nejaké zrážkové objekty. Tieto zrážkové predmety budú interagovať s hráčom a ďalšími hernými prvkami, čím dodajú hraniu väčšiu hĺbku.
Tu je kód GDScript na vytváranie vrstiev paralaxy so zrážateľnými objektmi:
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)
S týmto kódom teraz každá vrstva paralaxy obsahuje a StaticBody2D uzol s a CollisionShape2D predstavujúce zrážkové objekty na pozadí.
Tieto zrážkové predmety budú interagovať s postavou hráča a ďalšími hernými prvkami, čím dodajú hraniu väčšiu hĺbku a zložitosť.
Pohyb rôznych vrstiev rôznou rýchlosťou
Teraz, keď máte nastavené vrstvy paralaxy, musíte aktualizovať ich pozície na základe pohybu hráča. Tým sa vytvorí efekt paralaxy, kedy sa vrstvy bližšie k fotoaparátu pohybujú rýchlejšie ako tie vzdialenejšie.
Pridajte nasledujúci kód GDScript do scény prehrávača:
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)
Tento kód vypočítava pohyb vrstiev paralaxy na základe pohybu hráča a podľa toho aktualizuje posun posunu uzla ParallaxBackground. Všimnite si použitie záporného znamienka, aby ste zabezpečili, že sa vrstvy budú pohybovať v opačnom smere, ako sa pohybuje hráč.
Náhodné posúvanie paralaxy vnáša do pozadia vašej hry prvok prekvapenia a nepredvídateľnosti. Dynamickým generovaním a umiestňovaním vrstiev paralaxy počas hry môžete pre hráčov vytvoriť pútavejší a dynamickejší zážitok.
Ak chcete implementovať náhodné posúvanie paralaxy, pridajte nové vrstvy paralaxy s náhodnými mierkami pohybu a polohami.
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)
Tento kód definuje konštanty na kontrolu náhodnosti vrstiev paralaxy. Použi lerp funkcia na interpoláciu hodnôt medzi MIN_SCALE a MAX_SCALE, generovanie náhodnej mierky pohybu pre každú novú vrstvu. Táto funkcia má nasledujúci podpis:
Variant lerp ( Variant from, Variant to, float weight )Odovzdanie výsledku z randf() keďže váha vám umožňuje vytvárať vrstvy s náhodnou mierkou.
The randf_range funkcia ponúka ďalší spôsob generovania náhodných hodnôt v rámci rozsahu. Tu ju funkcia create_random_layer používa na generovanie náhodných pozícií pre nové vrstvy v rámci určeného rozsahu:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Vaša demo hra by teraz mala vyzerať asi takto:
Vrátane ďalších funkcií
Paralaxné rolovanie poskytuje solídny základ pre vylepšenie vaša platformová hra vizuálnu príťažlivosť, ale môžete to posunúť ešte ďalej začlenením ďalších funkcií. Tu je niekoľko nápadov na zváženie.
Objekty pozadia
Vytvorte viac interaktívnych prvkov vo svojich paralaxných vrstvách, ako sú plávajúce plošiny, pohyblivé prekážky alebo animované postavy na pozadí. Tieto objekty môžu vašej platformovej hre pridať hĺbku a interaktivitu.
Dynamické osvetlenie
Zaveďte dynamické svetelné efekty do svojich vrstiev paralaxy. Pridaním svetelných zdrojov a tieňov môžete v hernom svete vytvoriť pocit realizmu a hĺbky. Godotov systém osvetlenia funguje dobre s 2D hrami a môže výrazne zlepšiť vizuálnu kvalitu.
Časticové efekty
Integrujte časticové systémy do svojich vrstiev paralaxy a pridajte jemné vizuálne efekty. Padajúce lístie, unášané oblaky alebo trblietavé hviezdy môžu zlepšiť atmosféru a oživiť herný svet. Môžete tiež pridať zvukové efekty bez autorských práv k vašej hre.
Cyklus deň-noc
Implementujte cyklus deň-noc, ktorý mení farbu a intenzitu vrstiev paralaxy na základe dennej doby v hre. Táto dynamická funkcia môže hráčom poskytnúť neustále sa vyvíjajúci zážitok v priebehu hry.
Aj keď paralaxné posúvanie môže pozdvihnúť vizuál vašej hry, je nevyhnutné dodržiavať niektoré osvedčené postupy, aby ste zaistili hladký a príjemný zážitok.
Optimalizácia výkonu
Dávajte pozor na počet vrstiev paralaxy a ich zložitosť. Príliš veľa vrstiev alebo prostriedkov s vysokým rozlíšením môže viesť k problémom s výkonom, najmä na menej výkonných zariadeniach. Optimalizujte svoju kresbu a tam, kde je to možné, používajte zjednodušené kolízne tvary.
Usporiadanie vrstiev
Premyslene si usporiadajte vrstvy paralaxy. Zvážte vizuálnu hierarchiu a požadovaný hĺbkový efekt. Vrstvy najbližšie k fotoaparátu by sa mali pohybovať rýchlejšie, zatiaľ čo tie vzdialenejšie by sa mali pohybovať pomalšie.
Hranice fotoaparátu
Nastavte hranice pohybu kamery, aby ste zabránili nechcenému prázdnemu priestoru alebo vizuálnym poruchám, keď sa hráč dostane na okraje herného sveta. To zaručuje bezproblémový zážitok pre hráčov.
Testovanie a ladenie
Otestujte svoje paralaxné posúvanie na rôznych zariadeniach a veľkostiach obrazovky, aby ste sa uistili, že vyzerá a funguje dobre na rôznych platformách. Vyladením mierky pohybu, pozícií vrstiev a ďalších parametrov môžete doladiť efekt paralaxy na dosiahnutie najlepších výsledkov.
Pridanie náhodného rolovania paralaxy môže výrazne zvýšiť úroveň zapojenia vašej hry Godot. Náhodné posúvanie paralaxy zahŕňa dynamické generovanie a umiestňovanie vrstiev paralaxy počas hry.
Týmto spôsobom vytvoríte v pozadí pocit pohybu a dynamiky, vďaka čomu bude herný svet živý a nepredvídateľný. Hráči zažijú neustále sa meniace vizuálne prostredie, ktoré k ich hernému zážitku pridáva ďalšiu vrstvu vzrušenia.