Як реалізувати прокручування паралакса в Godot

Створення ефекту паралаксного скролінгу в іграх Godot

Паралаксний скролінг – це методика, що часто використовується в двовимірних іграх для створення ілюзії глибини та збагачення візуальної складової ігрового оточення. Суть цього ефекту полягає в переміщенні різних фонових шарів з різною швидкістю відносно руху камери, що створює враження перспективи.

В Godot 4 реалізація паралаксного скролінгу стала простішою, ніж будь-коли. Завдяки потужному 2D-рушію, який забезпечує вбудовану підтримку паралаксних шарів, розробники можуть створювати вражаючі візуальні ефекти з мінімальними зусиллями.

Налаштування ігрової сцени в Godot

Для початку створіть новий 2D-проєкт в ігровому рушію Godot та налаштуйте ігрову сцену, додавши персонажа гравця.

Код, що використовується в цій статті, доступний на GitHub і є безкоштовним для використання згідно з ліцензією MIT.

Для цього прикладу додайте вузол CharacterBody2D для керування рухом гравця. Також додайте CollisionShape2D з прямокутною формою та Sprite2D для візуального представлення персонажа.

   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)
   

Цей код дозволить персонажу гравця переміщатися вліво, вправо, вгору та вниз за допомогою клавіш зі стрілками або аналогічного керування.

Створення окремих шарів за допомогою вузлів ParallaxLayer

Для створення паралаксного ефекту додайте декілька вузлів ParallaxLayer до вашої сцени. Кожен ParallaxLayer відповідатиме за окремий шар фону. Для досягнення переконливого ефекту паралакса, шари, розташовані далі від камери, повинні рухатися повільніше за ті, що знаходяться ближче.

Додайте вузли StaticBody2D з CollisionShape2D до кожного ParallaxLayer, щоб створити інтерактивні фонові об’єкти. Ці об’єкти зможуть взаємодіяти з гравцем та іншими елементами гри, роблячи геймплей більш глибоким та цікавим.

Нижче наведено код GDScript для створення паралаксних шарів з об’єктами, з якими можна взаємодіяти:

     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)
   

З цим кодом кожен шар паралакса матиме вузол StaticBody2D з CollisionShape2D, що представляє фонові об’єкти, з якими можна взаємодіяти.

Ці інтерактивні об’єкти взаємодіятимуть з персонажем гравця та іншими елементами гри, додаючи глибини та складності до ігрового процесу.

Переміщення шарів з різною швидкістю

Після налаштування паралаксних шарів потрібно оновити їх положення залежно від руху гравця. Це створить ефект паралакса, коли ближчі до камери шари рухаються швидше, ніж віддалені.

Додайте наступний код GDScript до сцени Player:

     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)
   

Цей код розраховує рух паралаксних шарів на основі руху гравця та відповідним чином оновлює зсув прокрутки вузла ParallaxBackground. Зверніть увагу на використання від’ємного знака для забезпечення руху шарів у напрямку, протилежному руху гравця.

Випадковий паралаксний скролінг додає елемент несподіванки та унікальності фону вашої гри. Завдяки динамічному генеруванню та розташуванню шарів під час гри ви можете створити більш захоплюючий та динамічний досвід для гравців.

Щоб реалізувати випадковий паралаксний скролінг, додайте нові паралаксні шари з різними швидкостями руху та позиціями:

   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)
  

Цей код визначає константи для контролю випадковості паралаксних шарів. Функція lerp використовується для інтерполяції значень між MIN_SCALE та MAX_SCALE, створюючи випадковий масштаб руху для кожного нового шару. Ця функція має такий вигляд:

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

Передача результату randf() як ваги дозволяє створювати шари з випадковим масштабом.

Функція randf_range пропонує інший спосіб генерації випадкових значень в діапазоні. Тут функція create_random_layer використовує її для створення випадкових позицій нових шарів у вказаному діапазоні:

 var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION) 

Тепер ваша демо-гра повинна виглядати приблизно так:

Включення додаткових можливостей

Паралаксний скролінг створює міцну основу для покращення візуальної привабливості вашої платформерної гри, але ви можете піти ще далі, додавши додаткові функції. Ось декілька ідей для розгляду.

Фонові об’єкти

Створюйте більше інтерактивних елементів в паралаксних шарах, такі як плаваючі платформи, рухомі перешкоди або анімовані фонові персонажі. Ці об’єкти можуть додати глибини та інтерактивності вашій платформерній грі.

Динамічне освітлення

Додайте динамічні ефекти освітлення до паралаксних шарів. Завдяки створенню джерел світла та тіней, ви можете створити відчуття реалізму та глибини ігрового світу. Система освітлення Godot добре працює з двовимірними іграми та може значно покращити якість зображення.

Ефекти частинок

Інтегруйте системи частинок у паралаксні шари для додавання тонких візуальних ефектів. Падаюче листя, пливучі хмари або блискучі зірки можуть покращити атмосферу та зробити ігровий світ більш живим. Також ви можете додати до своєї гри звукові ефекти, які не захищені авторським правом.

Цикл дня та ночі

Реалізуйте цикл дня та ночі, який змінює колір та інтенсивність паралаксних шарів залежно від часу доби в грі. Ця динамічна функція може надати гравцям можливість спостерігати за постійними змінами під час проходження гри.

Хоча паралаксний скролінг може покращити візуальну складову вашої гри, важливо дотримуватися деяких найкращих практик для забезпечення плавної та приємної роботи.

Оптимізація продуктивності

Зверніть увагу на кількість паралаксних шарів та їхню складність. Велика кількість шарів або елементів з високою роздільною здатністю може спричинити проблеми з продуктивністю, особливо на менш потужних пристроях. Оптимізуйте свої ілюстрації та використовуйте спрощені форми зіткнень, де це можливо.

Розташування шарів

Продумано розташовуйте паралаксні шари. Враховуйте візуальну ієрархію та бажаний ефект глибини. Шари, розташовані ближче до камери, повинні рухатися швидше, тоді як ті, що знаходяться далі, повинні рухатися повільніше.

Межі камери

Встановіть межі для руху камери, щоб уникнути небажаного порожнього простору або візуальних збоїв, коли гравець досягає меж ігрового світу. Це забезпечить безперебійний досвід для гравців.

Тестування та налаштування

Перевірте паралаксний скролінг на різних пристроях і розмірах екрана, щоб переконатися, що він добре виглядає та працює на різних платформах. Налаштування швидкості руху, положення шарів та інших параметрів допоможе досягти найкращих результатів.

Додавання випадкового паралаксного скролінгу може значно підвищити залучення гравців до вашої гри Godot. Суть випадкового паралаксного скролінгу полягає в динамічному генеруванні та розташуванні паралаксних шарів під час гри.

Роблячи це, ви створите відчуття руху та динамізму на фоні, роблячи світ гри живим та непередбачуваним. Гравці відчують постійно змінюване візуальне оточення, що додасть ще один рівень захоплення до їхнього ігрового процесу.