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

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

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

Зміст

Налаштування гри «Годо».

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

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

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

 extends CharacterBody2Dvar 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 ParallaxBackgroundfunc _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, що представляє об’єкти, які можна зіткнути, у фоновому режимі.

14 курсів етичного хакерства, щоб стати експертом із безпеки

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

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

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

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

 extends CharacterBody2Dfunc _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 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 = 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() як ваги дозволяє генерувати шари з випадковим масштабом.

Dos Vs. DDoS-атаки: у чому відмінності?

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

 var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)

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

Включно з додатковими функціями

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

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

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

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

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

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

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

Як приєднатися до команди в Microsoft Teams

Цикл день-ніч

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

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

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

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

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

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

Межі камери

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

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

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

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

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

Ваша думка ?