Jak implementovat paralaxní rolování v Godot

Efekt paralaxního rolování je technika, kterou vývojáři 2D her často využívají k simulaci hloubky a obohacení vizuálního dojmu z herního pozadí. Dosahuje se jí tak, že se jednotlivé vrstvy pozadí pohybují různou rychlostí v závislosti na pohybu herní kamery.

Godot 4 implementaci paralaxního rolování značně zjednodušuje. Jeho sofistikovaný 2D engine nabízí nativní podporu pro paralaxní vrstvy, což umožňuje vytvářet působivé vizuální efekty s minimálním úsilím.

Zprovoznění hry v Godotu

Začněte tím, že v herním enginu Godot založíte nový 2D projekt a připravíte herní scénu s vaší postavou.

Kód použitý v tomto textu je dostupný v tomto repozitáři na GitHubu a můžete jej volně používat pod licencí MIT.

V tomto konkrétním příkladu použijte uzel CharacterBody2D pro zajištění pohybu postavy. Dále přidejte CollisionShape2D s obdélníkovým tvarem a Sprite2D, který bude reprezentovat vizuál postavy.

 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)
  

S tímto kódem se vaše herní postava může pohybovat do stran, nahoru a dolů pomocí šipek nebo podobných ovládacích prvků.

Vytváření vrstev s uzly ParallaxLayer

Pro vytvoření efektu paralaxy přidejte do scény několik uzlů ParallaxLayer. Každý z těchto uzlů bude reprezentovat samostatnou vrstvu pozadí. Pro dosažení realistického paralaxního efektu by se vrstvy, které jsou opticky dále od kamery, měly pohybovat pomaleji než vrstvy blízké.

Přidejte uzly StaticBody2D s CollisionShape2D do každé z ParallaxLayer vrstev, čímž vytvoříte kolidovatelné objekty v pozadí. Tyto objekty budou reagovat s hráčem a dalšími prvky hry, čímž jí dodají větší hloubku.

Zde je kód v GDScript pro vytvoření paralaxních vrstev s kolidovatelnými objekty:

 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)
  

Po použití tohoto kódu bude každá z paralaxních vrstev obsahovat uzel StaticBody2D s CollisionShape2D, který reprezentuje kolidovatelné objekty pozadí.

Tyto objekty budou reagovat s postavou hráče a dalšími herními elementy a tím vnesou do hry větší hloubku a komplexnost.

Pohyb vrstev různou rychlostí

Nyní, když jsou paralaxní vrstvy připraveny, je nutné upravovat jejich pozice v závislosti na pohybu postavy. Tím se vytvoří efekt, kdy se vrstvy blíže kameře pohybují rychleji než ty vzdálenější.

Do skriptu postavy přidejte následující kód v GDScript:

 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)
  

Tento kód vypočítává pohyb paralaxních vrstev na základě pohybu hráče a odpovídajícím způsobem aktualizuje posun posouvání uzlu ParallaxBackground. Všimněte si, že se používá záporné znaménko, aby se vrstvy pohybovaly v opačném směru, než se pohybuje hráč.

Náhodné paralaxní posouvání přináší do pozadí vaší hry prvek překvapení a nepředvídatelnosti. Dynamickým generováním a umisťováním paralaxních vrstev během hry můžete vytvořit poutavější a dynamičtější herní zážitek.

Pro implementaci náhodného paralaxního posouvání přidejte nové paralaxní vrstvy s náhodnými měřítky pohybu a pozicemi.

 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)
  

Tento kód definuje konstanty pro řízení náhodnosti paralaxních vrstev. Funkce `lerp` se používá pro interpolaci hodnot mezi `MIN_SCALE` a `MAX_SCALE` a vygenerování náhodného měřítka pohybu pro každou novou vrstvu. Funkce `lerp` má následující signaturu:

 Variant lerp ( Variant from, Variant to, float weight ) 

Použitím výsledku z funkce `randf()` jako váhy, můžete generovat vrstvy s náhodným měřítkem.

Funkce `randf_range` poskytuje další možnost generování náhodných hodnot v rámci určitého rozsahu. Funkce `create_random_layer` ji používá pro 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 by nyní mělo vypadat zhruba takto:

Rozšíření o další funkce

Paralaxní posouvání je skvělý základ pro vylepšení vizuální stránky vaší plošinovky, ale můžete ho posunout ještě dál přidáním dalších funkcí. Zde je několik nápadů:

Objekty na pozadí

Vytvořte více interaktivních prvků v paralaxních vrstvách, jako jsou plovoucí platformy, pohybující se překážky nebo animované postavy. Tyto objekty mohou obohatit hru a přidat ji interaktivitu.

Dynamické osvětlení

Přidejte do paralaxních vrstev dynamické světelné efekty. Použitím zdrojů světla a stínů můžete vytvořit pocit hloubky a realismu. Osvětlovací systém Godotu je pro 2D hry výborný a dokáže značně vylepšit vizuální kvalitu.

Částicové efekty

Použijte systémy částic ve vašich paralaxních vrstvách pro přidání jemných vizuálních efektů. Padající listí, plovoucí mraky nebo třpytící se hvězdy mohou vylepšit atmosféru a udělat herní svět živější. Můžete také přidat zvukové efekty bez autorských práv.

Cyklus den-noc

Implementujte cyklus den-noc, který dynamicky mění barvu a intenzitu paralaxních vrstev na základě denní doby. Tato funkce dá hráčům pocit neustále se měnícího zážitku.

Paralaxní rolování sice může vylepšit vizuální stránku hry, ale je důležité se držet několika osvědčených postupů, aby byl zážitek plynulý a příjemný.

Optimalizace výkonu

Dávejte pozor na počet paralaxních vrstev a jejich komplexnost. Příliš mnoho vrstev nebo prostředků s vysokým rozlišením může vést k problémům s výkonem, obzvláště na méně výkonných zařízeních. Optimalizujte vaše vykreslování a používejte jednodušší tvary pro kolize.

Uspořádání vrstev

Paralaxní vrstvy si rozmyslete. Zvažte vizuální hierarchii a hloubkový efekt, kterého chcete dosáhnout. Vrstvy nejblíže kameře by se měly pohybovat rychleji, zatímco ty vzdálenější by se měly pohybovat pomaleji.

Hranice kamery

Nastavte si hranice pohybu kamery, abyste předešli nežádoucímu prázdnému prostoru, nebo vizuálním glitchům, když se hráč dostane k okraji herního světa. To zajistí plynulý a bezproblémový herní zážitek.

Testování a ladění

Otestujte paralaxní posouvání na různých zařízeních a velikostech obrazovek, abyste se ujistili, že funguje a vypadá dobře na různých platformách. Doladěním parametrů jako měřítko pohybu, pozice vrstev a dalších, můžete paralaxní efekt optimalizovat pro dosažení nejlepších výsledků.

Přidání náhodného paralaxního posouvání může značně zvýšit úroveň zaujetí vaší hry v Godotu. Náhodné paralaxní posouvání spočívá v dynamickém generování a umisťování paralaxních vrstev během hry.

Tím se vytvoří pocit pohybu a dynamiky v pozadí, díky kterému bude herní svět vypadat živěji a nepředvídatelně. Hráči budou zažívat neustále se měnící vizuální prostředí, které přidá další vrstvu vzrušení do jejich herního zážitku.