Jak zaimplementować przewijanie paralaksy w Godot

Efekt paralaksy, często stosowany w grach 2D, to technika mająca na celu stworzenie wrażenia głębi oraz wzbogacenie wizualnej strony tła gry. Polega on na przesuwaniu poszczególnych warstw tła z różnymi prędkościami, w zależności od ich odległości od kamery.

Godot 4 upraszcza implementację tego efektu. Dzięki zaawansowanemu silnikowi 2D, oferuje wbudowaną obsługę warstw paralaksy, co umożliwia osiągnięcie imponujących efektów wizualnych przy niewielkim nakładzie pracy.

Konfiguracja projektu w Godot

Aby rozpocząć, utwórz nowy projekt 2D w silniku Godot i przygotuj scenę gry z postacią gracza.

Kod źródłowy przedstawiony w tym artykule jest dostępny na repozytorium GitHub i można z niego korzystać bezpłatnie na licencji MIT.

W naszym przykładzie użyjemy węzła CharacterBody2D dla ruchu gracza. Dodaj też CollisionShape2D w kształcie prostokąta oraz Sprite2D reprezentujący postać.

 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)
 

Dzięki powyższemu kodowi postać gracza może poruszać się w czterech kierunkach, wykorzystując do tego klawisze strzałek lub inne, analogiczne sterowanie.

Tworzenie warstw za pomocą węzłów ParallaxLayer

Kolejnym etapem jest utworzenie efektu paralaksy poprzez dodanie kilku węzłów ParallaxLayer. Każdy z nich będzie reprezentował odrębną warstwę tła. Aby uzyskać przekonujący efekt, warstwy położone dalej od kamery powinny poruszać się wolniej niż te bliżej.

W każdej warstwie ParallaxLayer dodaj węzły StaticBody2D wraz z CollisionShape2D, tworząc w ten sposób interaktywne obiekty w tle. Obiekty te będą reagować na działania gracza i elementy gry, nadając jej głębi.

Poniżej znajduje się kod GDScript, który umożliwia stworzenie warstw paralaksy z interaktywnymi obiektami:

 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)
 

Dzięki powyższemu kodowi każda warstwa paralaksy będzie zawierała węzeł StaticBody2D z elementem CollisionShape2D, co pozwoli na tworzenie interaktywnych obiektów tła.

Obiekty te będą wchodzić w interakcje z postacią gracza oraz innymi elementami gry, dodając jej głębi i złożoności.

Przesuwanie warstw z różnymi prędkościami

Po utworzeniu warstw paralaksy, konieczne jest zaktualizowanie ich pozycji w oparciu o ruch gracza. To właśnie pozwoli uzyskać efekt paralaksy, gdzie bliższe warstwy poruszają się szybciej niż te dalsze.

W scenie Player dodaj poniższy kod 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)
 

Ten fragment kodu oblicza ruch warstw paralaksy w oparciu o ruch gracza i odpowiednio aktualizuje przesunięcie przewijania węzła ParallaxBackground. Zwróć uwagę na użycie znaku ujemnego, dzięki czemu warstwy poruszają się w kierunku przeciwnym do ruchu gracza.

Losowe przewijanie paralaksy wprowadza element zaskoczenia i nieprzewidywalności do tła twojej gry. Dzięki dynamicznemu generowaniu i pozycjonowaniu warstw paralaksy podczas gry, możesz zapewnić graczom bardziej wciągające i dynamiczne wrażenia.

Aby zaimplementować losowe przewijanie paralaksy, dodaj nowe warstwy paralaksy z losowymi skalami ruchu oraz pozycjami.

 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)
 

Powyższy kod definiuje stałe, które kontrolują losowość warstw paralaksy. Funkcja `lerp` służy do interpolowania wartości między `MIN_SCALE` a `MAX_SCALE`, generując losową skalę ruchu dla każdej nowej warstwy. Jej sygnatura wygląda następująco:

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

Użycie wyniku z `randf()` jako wagi umożliwia tworzenie warstw o losowej skali.

Funkcja `randf_range` oferuje inny sposób generowania losowych wartości w podanym zakresie. Funkcja `create_random_layer` używa jej do generowania losowych pozycji dla nowych warstw:

 var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION) 

Twoja gra demonstracyjna powinna wyglądać mniej więcej w ten sposób:

Dodatkowe funkcje

Efekt paralaksy stanowi solidną podstawę dla ulepszenia wizualnej strony gry platformowej, ale można pójść o krok dalej, dodając kolejne funkcje. Poniżej znajduje się kilka propozycji do rozważenia.

Obiekty tła

Stwórz bardziej interaktywne elementy na warstwach paralaksy, np. poruszające się platformy, przeszkody lub animowane postacie. Takie obiekty mogą dodać głębi i interaktywności twojej grze platformowej.

Dynamiczne oświetlenie

Wprowadź dynamiczne efekty świetlne na warstwach paralaksy. Dzięki dodaniu źródeł światła i cieni, możesz stworzyć wrażenie realizmu i głębi w świecie gry. System oświetlenia Godota dobrze sprawdza się w grach 2D i może znacząco podnieść jakość wizualną.

Efekty cząsteczkowe

Zintegruj systemy cząsteczkowe z warstwami paralaksy, aby dodać subtelne efekty wizualne. Spadające liście, dryfujące chmury lub błyszczące gwiazdy mogą wzmocnić atmosferę i sprawić, że świat gry będzie bardziej żywy. Możesz też dodać do swojej gry efekty dźwiękowe, które nie są chronione prawami autorskimi.

Cykl dnia i nocy

Zaimplementuj cykl dnia i nocy, który będzie zmieniał kolor i intensywność warstw paralaksy w zależności od pory dnia w grze. Ta dynamiczna funkcja może zapewnić graczom stale ewoluujące wrażenia w miarę postępów w grze.

Mimo, że efekt paralaksy może znacząco podnieść jakość wizualną gry, konieczne jest stosowanie się do kilku dobrych praktyk, aby zapewnić płynne i przyjemne doświadczenia.

Optymalizacja wydajności

Pamiętaj o liczbie warstw paralaksy i ich złożoności. Zbyt duża ilość warstw lub zasoby o wysokiej rozdzielczości mogą prowadzić do problemów z wydajnością, zwłaszcza na słabszych urządzeniach. Zoptymalizuj swoją grafikę i używaj uproszczonych kształtów kolizji w miarę możliwości.

Rozmieszczenie warstw

Rozmieść warstwy paralaksy w przemyślany sposób. Weź pod uwagę hierarchię wizualną i pożądany efekt głębi. Warstwy znajdujące się najbliżej kamery powinny poruszać się szybciej, a te dalsze – wolniej.

Granice kamery

Ustaw granice ruchu kamery, aby uniknąć niechcianej pustej przestrzeni lub zakłóceń wizualnych, gdy gracz dotrze do krawędzi świata gry. Zapewnia to płynne doświadczenie dla graczy.

Testowanie i poprawki

Przetestuj przewijanie paralaksy na różnych urządzeniach i przy różnych rozmiarach ekranu, aby upewnić się, że wygląda i działa dobrze na wszystkich platformach. Poprawianie skali ruchu, pozycji warstw i innych parametrów może pomóc w precyzyjnym dostrojeniu efektu paralaksy w celu uzyskania najlepszych rezultatów.

Dodanie losowego przewijania paralaksy może znacząco podnieść poziom zaangażowania w grze Godot. Losowe przewijanie paralaksy obejmuje dynamiczne generowanie i pozycjonowanie warstw paralaksy podczas rozgrywki.

W ten sposób tworzy się wrażenie ruchu i dynamizmu w tle, sprawiając, że świat gry wydaje się żywy i nieprzewidywalny. Gracze będą doświadczać stale zmieniającego się otoczenia wizualnego, co wzbogaci ich doznania płynące z rozgrywki.