Tohoto působivého vizuálního efektu dosáhnete jednoduše pohybem objektů různou rychlostí.
Parallax scrolling je technika, kterou mnoho 2D her používá k vytvoření iluze hloubky a přidání vizuálního zájmu do pozadí hry. Efektu dosahuje pohybem různých vrstev pozadí různou rychlostí vzhledem k pohybu kamery.
Godot 4 usnadňuje implementaci paralaxního rolování než kdy dříve. Jeho výkonný 2D engine poskytuje vestavěnou podporu pro vrstvy paralaxy, což vám umožňuje vytvářet úžasné vizuální efekty s minimálním úsilím.
Nastavení hry Godot
Chcete-li začít, vytvořte nový 2D projekt v herní engine Godot a nastavit herní scénu s postavou hráče.
Kód použitý v tomto článku je k dispozici v tomto úložiště GitHub a můžete jej používat zdarma pod licencí MIT.
Pro tento příklad přidejte a CharacterBody2D uzel pro pohyb hráče. Přidejte také a CollisionShape2D s obdélníkovým tvarem a Sprite2D reprezentovat postavu hráče.
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)
Pomocí tohoto kódu se může postava hráče pohybovat doleva, doprava, nahoru a dolů pomocí kláves se šipkami nebo podobných vstupů.
Vytváření různých vrstev s uzly ParallaxLayer
Dále vytvořte efekt paralaxy přidáním násobku ParallaxLayer uzly na scénu. Každý ParallaxLayer bude představovat jinou vrstvu pozadí. Pro dosažení přesvědčivého efektu paralaxy by se vrstvy dále od fotoaparátu měly pohybovat pomaleji než ty bližší.
Přidat StaticBody2D uzly s CollisionShape2D v každém ParallaxLayer vytvořit nějaké srážetelné objekty na pozadí. Tyto srážetelné objekty budou interagovat s hráčem a dalšími herními prvky a dodají hře větší hloubku.
Zde je kód GDScript pro vytváření vrstev paralaxy s kolidovatelnými objekty:
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ódem nyní každá vrstva paralaxy obsahuje a StaticBody2D uzel s a CollisionShape2D představující srážetelné objekty na pozadí.
Tyto srážetelné předměty budou interagovat s hráčovou postavou a dalšími herními prvky, čímž dodají hře větší hloubku a složitost.
Přesouvání různých vrstev s různou rychlostí
Nyní, když máte vrstvy paralaxy nastavené, musíte aktualizovat jejich pozice na základě pohybu hráče. To vytvoří efekt paralaxy, kdy se vrstvy blíže ke kameře pohybují rychleji než ty vzdálenější.
Přidejte následující kód GDScript do scény přehrávače:
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čítává pohyb vrstev paralaxy na základě pohybu hráče a podle toho aktualizuje posun posunu uzlu ParallaxBackground. Všimněte si použití záporného znaménka, abyste zajistili, že se vrstvy budou pohybovat v opačném směru, než je pohyb hráče.
Náhodné posouvání paralaxy vnáší do pozadí vaší hry prvek překvapení a nepředvídatelnosti. Dynamickým generováním a umístěním vrstev paralaxy během hraní můžete vytvořit poutavější a dynamičtější zážitek pro hráče.
Chcete-li implementovat náhodné posouvání paralaxy, přidejte nové vrstvy paralaxy s náhodnými stupnicemi pohybu a pozicemi.
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 konstanty pro řízení náhodnosti vrstev paralaxy. Použijte lerp funkce pro interpolaci hodnot mezi MIN_SCALE a MAX_SCALE, generující náhodné měřítko pohybu pro každou novou vrstvu. Tato funkce má následující podpis:
Variant lerp ( Variant from, Variant to, float weight )Předávání výsledku z randf() protože váha vám umožňuje generovat vrstvy s náhodným měřítkem.
The randf_range Funkce nabízí další způsob generování náhodných hodnot v rozsahu. Zde ji funkce create_random_layer používá ke generování náhodných pozic pro nové vrstvy v určeném rozsahu:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Vaše demo hra by nyní měla vypadat nějak takto:
Včetně dalších funkcí
Paralaxní rolování poskytuje pevný základ pro vylepšení vaše platformová hra vizuální přitažlivost, ale můžete to posunout ještě dále začleněním dalších funkcí. Zde je několik nápadů ke zvážení.
Objekty na pozadí
Vytvořte více interaktivních prvků ve vrstvách paralaxy, jako jsou plovoucí plošiny, pohyblivé překážky nebo animované postavy na pozadí. Tyto objekty mohou vaší platformové hře přidat hloubku a interaktivitu.
Dynamické osvětlení
Zaveďte dynamické světelné efekty do vrstev paralaxy. Přidáním zdrojů světla a stínů můžete v herním světě vytvořit pocit realismu a hloubky. Godotův systém osvětlení funguje dobře s 2D hrami a může výrazně zlepšit vizuální kvalitu.
Částicové efekty
Integrujte částicové systémy do svých vrstev paralaxy a přidejte jemné vizuální efekty. Padající listí, plovoucí mraky nebo třpytící se hvězdy mohou zlepšit atmosféru a učinit herní svět živějším. Můžete také přidat zvukové efekty bez autorských práv do vaší hry.
Cyklus den-noc
Implementujte cyklus den-noc, který mění barvu a intenzitu vrstev paralaxy na základě denní doby ve hře. Tato dynamická funkce může hráčům poskytnout neustále se vyvíjející zážitek, jak postupují hrou.
Paralaxní posouvání sice může pozvednout vizuální stránku vaší hry, ale pro zajištění hladkého a příjemného zážitku je nezbytné dodržovat některé osvědčené postupy.
Optimalizace výkonu
Dávejte pozor na počet vrstev paralaxy a jejich složitost. Příliš mnoho vrstev nebo prostředků s vysokým rozlišením může vést k problémům s výkonem, zejména na méně výkonných zařízeních. Optimalizujte svou kresbu a tam, kde je to možné, používejte zjednodušené tvary kolize.
Uspořádání vrstev
Uspořádejte si vrstvy paralaxy promyšleně. Zvažte vizuální hierarchii a požadovaný hloubkový efekt. Vrstvy nejblíže k fotoaparátu by se měly pohybovat rychleji, zatímco ty vzdálenější by se měly pohybovat pomaleji.
Hranice fotoaparátu
Nastavte hranice pohybu kamery, abyste zabránili nechtěnému prázdnému prostoru nebo vizuálním závadám, když se hráč dostane na okraje herního světa. To zajišťuje bezproblémový zážitek pro hráče.
Testování a ladění
Otestujte své posouvání paralaxy na různých zařízeních a velikostech obrazovky, abyste se ujistili, že vypadá a funguje dobře na různých platformách. Vyladěním měřítek pohybu, poloh vrstev a dalších parametrů lze doladit efekt paralaxy pro dosažení nejlepších výsledků.
Přidání náhodného posouvání paralaxy může výrazně zvýšit úroveň zapojení vaší hry Godot. Náhodné posouvání paralaxy zahrnuje dynamické generování a umístění vrstev paralaxy během hraní.
Tímto způsobem vytvoříte v pozadí pocit pohybu a dynamiky, díky čemuž bude herní svět působit živě a nepředvídatelně. Hráči zažijí neustále se měnící vizuální prostředí, které k jejich hernímu zážitku přidává další vrstvu vzrušení.