Ezt a lenyűgöző vizuális hatást egyszerűen a tárgyak különböző sebességgel történő mozgatásával érheti el.
A parallaxis görgetés egy olyan technika, amelyet sok 2D-s játék használ a mélység illúziójának megteremtésére, és vizuális érdeklődést kölcsönöz a játék hátterének. A hatást úgy éri el, hogy a háttér különböző rétegeit a kamera mozgásához képest eltérő sebességgel mozgatja.
A Godot 4 minden eddiginél egyszerűbbé teszi a parallaxis görgetés megvalósítását. Erőteljes 2D motorja beépített támogatást nyújt a parallaxis rétegekhez, így minimális erőfeszítéssel lenyűgöző vizuális effektusokat hozhat létre.
A Godot játék beállítása
A kezdéshez hozzon létre egy új 2D-s projektet a Godot játékmotor és beállítja a játék jelenetét egy játékos karakterrel.
A cikkben használt kód itt érhető el GitHub adattár és az MIT licence alapján ingyenesen használható.
Ehhez a példához adja hozzá a CharacterBody2D csomópont a játékos mozgásához. Adjon hozzá a CollisionShape2D téglalap alakú és a Sprite2D hogy képviselje a játékos karakterét.
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)
Ezzel a kóddal a játékos karakter balra, jobbra, fel és le mozoghat a nyílbillentyűkkel vagy hasonló bemenetekkel.
Különböző rétegek létrehozása ParallaxLayer csomópontokkal
Ezután hozza létre a parallaxis hatást többszörös hozzáadásával ParallaxLayer csomópontok a helyszínre. Minden egyes ParallaxLayer a háttér egy másik rétegét fogja képviselni. A meggyőző parallaxis hatás eléréséhez a kamerától távolabbi rétegeknek lassabban kell mozogniuk, mint a közelebbieknek.
Hozzáadás StaticBody2D csomópontok CollisionShape2D az összesben ParallaxLayer hogy a háttérben hozzon létre néhány ütközhető objektumot. Ezek az ütközhető tárgyak kölcsönhatásba lépnek a játékossal és más játékelemekkel, így még mélyebbé teszik a játékmenetet.
Íme a GDScript kód az ütközhető objektumokkal rendelkező parallaxis rétegek létrehozásához:
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)
Ezzel a kóddal mostantól minden parallaxis réteg tartalmaz egy StaticBody2D csomópont a CollisionShape2D ütköztethető tárgyakat ábrázol a háttérben.
Ezek az ütközhető tárgyak kölcsönhatásba lépnek a játékos karakterével és más játékelemekkel, így még mélyebbé és összetettebbé teszik a játékmenetet.
Különböző rétegek mozgatása különböző sebességgel
Most, hogy beállította a parallaxis rétegeit, frissítenie kell a pozíciójukat a játékos mozgása alapján. Ez a parallaxis hatást hozza létre, ahol a kamerához közelebbi rétegek gyorsabban mozognak, mint a távolabbiak.
Adja hozzá a következő GDScript kódot a Player jelenethez:
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)
Ez a kód kiszámítja a parallaxis rétegek mozgását a játékos mozgása alapján, és ennek megfelelően frissíti a ParallaxBackground csomópont görgetési eltolását. Figyeld meg a negatív előjel használatát annak biztosítására, hogy a rétegek a játékos mozgásával ellentétes irányban mozogjanak.
A véletlenszerű parallaxis görgetés meglepetést és kiszámíthatatlanságot hoz a játék hátterébe. A parallaxis rétegek dinamikus generálásával és elhelyezésével játék közben vonzóbb és dinamikusabb élményt teremthet a játékosok számára.
A véletlenszerű parallaxis görgetés megvalósításához adjon hozzá új parallaxis rétegeket véletlenszerű mozgási léptékekkel és pozíciókkal.
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)
Ez a kód konstansokat határoz meg a parallaxis rétegek véletlenszerűségének szabályozására. Használja a lerp közötti értékek interpolálására szolgáló függvény MIN_SCALE és MAX_SCALE, minden új réteghez véletlenszerű mozgásskálát generál. Ennek a függvénynek a következő aláírása van:
Variant lerp ( Variant from, Variant to, float weight )Az eredmény átadása innen randf() mivel a súly segítségével véletlenszerű léptékű rétegeket hozhat létre.
A randf_range függvény egy másik módot kínál a véletlen értékek generálására egy tartományon belül. Itt a create_random_layer függvény arra használja, hogy véletlenszerű pozíciókat generáljon az új rétegekhez egy megadott tartományon belül:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)A demójátéknak most valahogy így kell kinéznie:
Kiegészítő funkciókkal együtt
A parallaxis görgetés szilárd alapot biztosít a javításhoz a platformer játékod vizuális vonzerőt, de további funkciók beépítésével még tovább viheti ezt. Íme néhány megfontolandó ötlet.
Háttér objektumok
Hozzon létre interaktívabb elemeket a parallaxis rétegeiben, például lebegő platformokat, mozgó akadályokat vagy animált háttérfigurákat. Ezek a tárgyak mélységet és interaktivitást adhatnak a platformer játékhoz.
Dinamikus világítás
Vezessen be dinamikus fényhatásokat a parallaxis rétegeibe. Fényforrások és árnyékok hozzáadásával realizmus és mélység érzetét keltheti a játék világában. A Godot világítási rendszere jól működik 2D játékokkal, és jelentősen javíthatja a vizuális minőséget.
Részecskehatások
Integráljon részecskerendszereket a parallaxis rétegeibe, hogy finom vizuális hatásokat adjon hozzá. A hulló levelek, a sodródó felhők vagy a csillogó csillagok javíthatják a hangulatot, és élettel telibbé tehetik a játék világát. Te is szerzői jogoktól mentes hangeffektusok hozzáadása a játékodhoz.
Nappali-éjszaka ciklus
Valósítson meg egy nappal-éjszaka ciklust, amely megváltoztatja a parallaxis rétegek színét és intenzitását a játék napszaka alapján. Ez a dinamikus funkció folyamatosan fejlődő élményt biztosít a játékosoknak a játék során.
Bár a parallaxis görgetés javíthatja a játék látványvilágát, elengedhetetlen néhány bevált gyakorlat követése a zökkenőmentes és élvezetes élmény érdekében.
Teljesítmény optimalizálás
Ügyeljen a parallaxis rétegek számára és összetettségére. A túl sok réteg vagy a nagy felbontású eszközök teljesítményproblémákat okozhatnak, különösen a kisebb teljesítményű eszközökön. Optimalizálja műalkotásait, és ahol lehetséges, használjon egyszerűsített ütközési formákat.
Réteg elrendezés
A parallaxis rétegeit átgondoltan rendezze el. Vegye figyelembe a vizuális hierarchiát és a kívánt mélységhatást. A kamerához legközelebbi rétegek gyorsabban, míg a távolabbiak lassabban mozogjanak.
Kamera határai
Állítson be határokat a kamera mozgásához, hogy elkerülje a nem kívánt üres tereket vagy vizuális hibákat, amikor a játékos eléri a játékvilág peremét. Ez zökkenőmentes élményt biztosít a játékosok számára.
Tesztelés és módosítás
Tesztelje a parallaxis görgetését különböző eszközökön és különböző méretű képernyőkön, hogy megbizonyosodjon arról, hogy jól néz ki és jól teljesít a különböző platformokon. A mozgási léptékek, a rétegpozíciók és egyéb paraméterek módosítása finomhangolhatja a parallaxis hatást a legjobb eredmény érdekében.
A véletlenszerű parallaxis görgetés hozzáadása jelentősen növelheti a Godot-játék elkötelezettségi szintjét. A véletlenszerű parallaxisgörgetés magában foglalja a parallaxis rétegek dinamikus generálását és elhelyezését a játék során.
Ezzel a mozgás és a dinamizmus érzését keltheti a háttérben, így a játék világa élő és kiszámíthatatlan. A játékosok folyamatosan változó vizuális környezetet fognak tapasztalni, ami további izgalmat ad játékélményüknek.