Jak zaimplementować przewijanie paralaksy w Godot

Przewijanie paralaksy to technika używana w wielu grach 2D do tworzenia iluzji głębi i dodawania wizualnego zainteresowania tłu w grze. Osiąga efekt przesuwając różne warstwy tła z różnymi prędkościami względem ruchu kamery.

Godot 4 oferuje bezproblemowe podejście do implementacji przewijania paralaksy dzięki solidnemu silnikowi 2D, który zawiera nieodłączną obsługę warstw paralaksy, umożliwiając programistom osiągnięcie urzekających efektów wizualnych przy minimalnym wysiłku.

Konfigurowanie gry Godot

Aby zainicjować ten proces, stwórz nowatorski dwuwymiarowy projekt w ramach silnika gry Godot i skonfiguruj środowisko gry, włączając postać gracza jako jeden z jego głównych elementów.

Kod wykorzystany w tej publikacji jest dostępny za pośrednictwem repozytorium GitHub, które zezwala na jego wykorzystanie bez opłat na warunkach licencji MIT.

Aby zademonstrować implementację ruchu gracza w silniku Unity przy użyciu języka C#, do sceny należy dodać dodatkowe węzły. W szczególności należy dołączyć obiekt CharacterBody2D, aby ułatwić fizyczne interakcje między graczem a innymi obiektami w środowisku. Dodatkowo do korpusu należy dołączyć komponent CollisionShape2D, który określi kształt obszaru kolizji i pozwoli na odpowiednie wykrywanie kolizji z innymi obiektami. Wreszcie, obiekt Sprite2D może być wykorzystany jako wizualna reprezentacja postaci gracza na ekranie.

 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)

Ten kod umożliwia graczowi nawigację w płaszczyźnie poziomej za pomocą klawiszy strzałek do poruszania się w dowolnym kierunku, w tym w lewo, w prawo, w górę iw dół.

Tworzenie różnych warstw za pomocą węzłów ParallaxLayer

Aby wygenerować efekt paralaksy w środowisku trójwymiarowym, konieczne jest włączenie do sceny wielu wystąpień klasy ParallaxLayer. Te dodatkowe warstwy będą wspólnie tworzyć różnorodne elementy, które składają się na tło. Aby wizualna reprezentacja głębi wyglądała autentycznie i realistycznie, ważne jest, aby warstwy znajdujące się dalej od widza były przesuwane wolniej niż te, które są bliżej.

Włącz elementy StaticBody2D do każdej warstwy ParallaxLayer, dołączając je do obiektu CollisionShape2D, generując w ten sposób interaktywne elementy tła, które łączą się z odtwarzaczem i dodatkowymi komponentami gry, poprawiając ogólne wrażenia z gry poprzez ich interakcje.

Dostarczony kod GDScript generuje efekt paralaksy, wykorzystując zderzające się obiekty w połączeniu z elementami warstwowymi, umożliwiając interakcję i wykrywanie kolizji między nimi w określonym prostokątnym obszarze.

 extends ParallaxBackground

func _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) 

Wykorzystując tę ​​implementację, każda warstwa paralaksy jest wyposażona w jednostkę StaticBody2D zawierającą komponent CollisionShape2D, który służy do reprezentowania dostrzegalnych elementów znajdujących się w tle.

Interaktywny charakter tych składanych bytów zaangażuje awatara gracza i różne elementy gry, zwiększając ogólną złożoność i niuanse rozgrywki.

Przesuwanie różnych warstw z różną prędkością

Aby uzyskać efekt paralaksy w Unity, konieczne jest dostosowanie położenia każdej warstwy względem kamery w oparciu o ruchy gracza. W ten sposób warstwy, które są bliżej kamery, wydają się poruszać szybciej niż te, które są dalej, co daje iluzję głębi i ruchu.

Uwzględnij następujący kod GDScript w scenie odtwarzacza w następujący sposób:

 extends CharacterBody2D

func _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) 

Obecna implementacja przeprowadza ocenę ruchu związanego z warstwami paralaksy, która jest zależna od przemieszczenia użytkownika, iw konsekwencji modyfikuje przesunięcie przewijania komponentu ParallaxBackground. Należy zauważyć, że zastosowano znak ujemny, aby zagwarantować, że warstwy poruszają się w kierunku przeciwnym do ruchu użytkownika.

Dodaj nieprzewidywalność dzięki losowemu przewijaniu paralaksy

Przewijanie paralaksy to technika, która dodaje nieoczekiwany i nieprzewidywalny aspekt do tła gry wideo poprzez ciągłe generowanie i zmianę położenia wielu warstw podczas gry. Udowodniono, że ta metoda zwiększa zaangażowanie graczy i przyczynia się do bardziej wciągającego i ciągle zmieniającego się środowiska w grach.

Aby włączyć dowolne przewijanie paralaksy do kompozycji wizualnej, konieczne jest wprowadzenie dodatkowych warstw paralaksy o różnych stopniach wielkości przemieszczeń i nieprzewidywalnych orientacjach przestrzennych.

 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():
    # 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_position

    add_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) 

Niniejszy kod ustanawia stałe parametry regulujące nieprzewidywalność warstw paralaksy, wykorzystując funkcję lerp do interpolacji wartości w zakresie skali minimalnej i maksymalnej. Ten ostatni charakteryzuje się specyficznym oznaczeniem w następujący sposób:

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

Wykorzystanie wyjścia funkcji randf() jako wagi pozwala na tworzenie warstw o ​​losowo skalowanych wartościach.

Funkcja randf\_range jest alternatywną metodą tworzenia liczb losowych w określonym zakresie. W tym przypadku funkcja create\_random\_layer wykorzystuje ją do wygenerowania dowolnych współrzędnych dla nowo dodanych warstw, ograniczonych do predefiniowanego zakresu:

 var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION) 

Rzeczywiście, gra demonstracyjna wydaje się być atrakcyjna wizualnie i dobrze zorganizowana, z eleganckim układem z interaktywnymi elementami, które ułatwiają zaangażowanie użytkownika. Projekt zawiera różne zasoby graficzne, takie jak obrazy i ikony, które przyczyniają się do ogólnego dopracowania wyglądu. Ponadto użycie białych znaków skutecznie tworzy zrównoważoną kompozycję, poprawiając czytelność i promując czyste wrażenia wizualne dla użytkowników. Ogólnie rzecz biorąc, gra demonstracyjna wykazuje silne zasady projektowania i prezentuje bezproblemową integrację interaktywności, grafiki i typografii.

Zawiera dodatkowe funkcje

Przewijanie paralaksy stanowi doskonały punkt wyjścia do podniesienia wizualnego uroku gry platformowej, ale istnieją możliwości dalszego udoskonalenia poprzez integrację dodatkowych elementów. Poniższe sugestie mogą być brane pod uwagę.

Obiekty tła

Rozważ włączenie dodatkowych elementów dynamicznych do scen paralaksy, w tym zawieszonych krajobrazów, ruchomych przeszkód lub animowanych postaci w tle. Integracja tych funkcji może zwiększyć wielowymiarowość i zaangażowanie użytkowników podczas korzystania z platformy.

Dynamiczne oświetlenie

Rozważ włączenie dynamicznych efektów świetlnych do warstw paralaksy, aby uzyskać dodatkową warstwę realizmu i głębi w swoim świecie gry. Wykorzystanie źródeł światła i cieni poprzez zaawansowany system oświetlenia Godota może znacznie poprawić ogólną jakość wizualną gry 2D.

Efekty cząsteczkowe

Włączenie systemów cząstek do warstw paralaksy może powodować delikatne zjawiska wizualne, takie jak spadające liście, unoszące się chmury lub migoczące ciała niebieskie, zwiększając w ten sposób atmosferyczne otoczenie środowiska gry wideo i nasycając je poczuciem witalności. Dodatkowo możesz włączyć do swojej gry efekty dźwiękowe zwolnione z licencji, jeszcze bardziej zwiększając jej ogólną atrakcyjność.

Cykl dnia i nocy

Uwzględnij cykl dnia i nocy w warstwach paralaksy, aby zmieniać ich odcień i jasność w zależności od czasu gry, tworząc nieustannie zmieniające się środowisko, w którym gracze będą mogli poruszać się po grze.

Sprawdzone metody wdrażania przewijania paralaksy

Aby skutecznie wykorzystać przewijanie paralaksy w grach wideo, zachowując jednocześnie płynne i przyjemne wrażenia użytkownika, konieczne jest przestrzeganie pewnych najlepszych praktyk, które promują optymalną wydajność i ogólną satysfakcję.

Optymalizacja wydajności

Proszę zwrócić uwagę na mnogość warstw paralaksy oraz ich złożoność. Nadmierna liczba warstw lub grafika o podwyższonej rozdzielczości może spowodować braki w funkcjonalności, szczególnie na sprzęcie o słabej mocy. Zaleca się usprawnienie wizualizacji i stosowanie zredukowanych geometrii kolizji tam, gdzie jest to możliwe, w celu utrzymania optymalnej wydajności.

Układ warstw

Podczas układania warstw paralaksy ważne jest, aby pamiętać o ich wizualnej hierarchii i pożądanym efekcie głębi, który tworzą. Efektywne może być przesuwanie warstw znajdujących się najbliżej kamery w szybszym tempie niż tych, które znajdują się dalej, aby stworzyć wrażenie głębi i ruchu w projekcie.

Granice kamery

Aby zagwarantować płynne i nieprzerwane wrażenia z gry, konieczne jest ustalenie ograniczeń ruchów kamery w środowisku wirtualnym. W ten sposób możemy uniknąć niepotrzebnych pustych przestrzeni lub problemów technicznych, które mogą wystąpić, gdy gracz zbliży się do granic świata gry.

Testowanie i poprawianie

Aby zagwarantować optymalną wydajność i wygląd przewijania paralaksy na różnych urządzeniach i rozdzielczościach ekranu, konieczne jest przetestowanie projektu na wielu platformach. Dostosowując skalę ruchu, położenie warstw i inne istotne zmienne, można udoskonalić efekt paralaksy, aby osiągnąć najbardziej pożądany rezultat.

Spraw, by gry Godot były bardziej wciągające dzięki przewijaniu paralaksowemu

Włączenie nieprzewidywalnych efektów przewijania paralaksy może znacznie zwiększyć zaangażowanie użytkownika w grę Godot. Ta technika, znana jako losowe przewijanie paralaksy, generuje i pozycjonuje wiele warstw w locie, aby zapewnić wciągające wrażenia z gry.

Włączenie dynamicznych środowisk za pomocą proceduralnych technik generowania może wywołać wrażenie ruchu i witalności w scenerii gry, nadając jej w ten sposób atmosferę spontaniczności i nieprzewidywalności. To stale zmieniające się tło wizualne zwiększa zanurzenie graczy, zapewniając im dodatkowy ekscytujący wymiar ich podróży do gry.