Параллакс в Godot 4 — 2D руководство

Параллакс — это приём перемещения фоновых слоёв с разной скоростью для создания иллюзии глубины. В Godot 4 есть встроенные узлы ParallaxBackground и ParallaxLayer, которые упрощают реализацию. В статье показан базовый набор кода для движения персонажа и слоя параллакса, варианты случайной генерации слоёв и рекомендации по оптимизации и тестированию.

Человек играет в игру в наушниках

Что такое параллакс — коротко

Параллакс (parallax) — визуальный эффект, при котором слои фона движутся с разной скоростью относительно камеры, давая ощущение глубины. В 2D-играх ближние слои двигаются быстрее, дальние — медленнее. Это простая, но эффективная техника для улучшения визуала платформеров и сайд-скроллеров.

Кому это полезно

Разработчикам 2D‑игр на Godot 4.
Художникам и дизайнерам уровней, которые хотят добавить глубины.
Инди‑студиям и хобби‑разработчикам, желающим улучшить восприятие сцены.

Важно: параллакс сам по себе не решает проблемы геймплея, но помогая создать атмосферу, он улучшает вовлечённость игрока.

Быстрый план статьи

Настройка проекта и простая логика движения игрока.
Создание слоёв параллакса и добавление коллайдеров.
Обновление смещения слоёв в зависимости от движения персонажа.
Случайная генерация слоёв для динамики.
Дополнительные эффекты, оптимизация и контроль качества.

Настройка проекта в Godot 4

Создайте новый 2D‑проект и сцену с персонажем. Для примера используем узел CharacterBody2D, CollisionShape2D (прямоугольник) и Sprite2D для визуала игрока. Код движения персонажа в примере прост и подходит для прототипа.

Код движения персонажа (GDScript):

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)

Этот код даёт движение по 8 направлениям (если вы используете комбинированные нажатия). Для контроля анимации игрока добавьте проверку направления и переключение анимационных состояний (AnimationPlayer или AnimatedSprite2D).

Простой узел игрока в Godot

Создание парных слоёв с ParallaxLayer

ParallaxBackground служит контейнером для ParallaxLayer. Каждый ParallaxLayer имеет свой motion_scale (Vector2), который определяет, во сколько раз слой отстаёт или опережает движение камеры.

Принцип: чем меньше motion_scale, тем медленнее слой реагирует — он кажется дальше.

Пример создания трёх слоёв и добавления в них StaticBody2D с CollisionShape2D:

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)

Советы:

Используйте motion_scale.x и motion_scale.y отдельно, если хотите разную скорость по оси X и Y.
Для статичных дальних фонов motion_scale можно выставить близко к нулю.
Для передних планов используйте motion_scale >= 1 для эффекта «приближения» к камере.

Обновление смещения слоёв при движении игрока

Чтобы фон реагировал на движение персонажа, обновляйте scroll_offset ParallaxBackground в зависимости от траектории игрока. В простейшем случае смещение слоя — это отрицательное движение персонажа, потому что фон должен «отставать».

Добавьте в сцену игрока такой фрагмент:

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)

Пояснения:

Мы берём get_parent(), предполагая, что ParallaxBackground — родительская нода игрока. Если иерархия иная, получите узел через get_node(“path/to/ParallaxBackground”).
Отрицательное смещение (-velocity) делает эффект правдоподобным: если игрок идёт вправо, фон уходит влево.

Слой параллакса с игроком в Godot

Случайная генерация слоёв для динамики

Случайная генерация слоёв делает фон менее предсказуемым. Это полезно для бесконечных раннеров, процедурных уровней и демонстраций.

Пример кода, который создаёт случайные слои при запуске:

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)

Дополнительные советы по случайности:

Контролируйте плотность слоёв, чтобы не забить экран объектами.
Применяйте к слою разные спрайты, зеркалирование и шкалу, чтобы избежать повторимости.
Можно использовать pool объектов (object pooling), чтобы не создавать/удалять ноды часто.

Случайный слой параллакса с игроком в Godot

Дополнительные функции для усиления эффекта

Ниже — идеи, которые органично дополняют параллакс:

Background objects — плавающие платформы, движущиеся препятствия, анимированные персонажи на фоне.
Dynamic lighting — 2D‑освещение и тени для усиления глубины.
Particle effects — листья, пыль, искры и туманы.
Day‑night cycle — меняйте цветовую палитру и интенсивность света по времени.

Каждую из функций внедряйте постепенно и тестируйте на целевых устройствах.

Лучшие практики и оптимизация

Оптимизация производительности

Ограничьте количество активных слоёв. Каждый узел увеличивает нагрузку.
Используйте менее детализированные текстуры для дальних слоёв.
Упрощайте формы столкновений: иногда достаточно одного RectangleShape2D вместо сложной PolygonShape2D.
Включайте culling и используйте видимые зоны (visibility enablers).

Расположение слоёв

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

Границы камеры

Установите ограничения для камеры, чтобы избежать «провалов» пустого пространства за краем уровня.
Можно применить инерцию камеры (camera smoothing) для плавности.

Тестирование

Тестируйте на разных соотношениях сторон и разрешениях.
Проверяйте производительность на слабых устройствах.
Тестируйте краевые случаи: резкий рывок персонажа, телепорты, смена уровня.

Контрпримеры — когда параллакс не подходит

Простые головоломки или игры с табличными интерфейсами, где фон не важен.
Очень загруженные сценами проекты на слабых платформах: визуал лучше упростить.
Проекты, где фон должен быть полностью статичным ради игрового дизайна (например, головоломки, где фон — часть механики).

Альтернативы и похожие подходы

Текстурный тайлинг (tiled backgrounds) без движения — экономно по ресурсам.
Многослойная анимация (multiplane) с заранее анимированным фоном.
Шейдерный параллакс — даёт гибкость и часто более лёгок по производительности для простых эффектов.

Если хотите максимальную оптимизацию, рассмотрите перенос части работы на шейдеры (CanvasItem shaders) — они работают на GPU и позволяют делать сдвиги пикселей и размытия без создания дополнительных нод.

Руководство по приёмке (Критерии приёмки)

Все слои корректно отображаются на целевых разрешениях.
Смещение слоёв соответствует направлению и скорости движения персонажа (нет визуальной «инверсии»).
Нет заметных просадок FPS при типичном игровом процессе.
Коллайдеры на слоёв корректно взаимодействуют с игровыми объектами, если они должны взаимодействовать.
Не наблюдается видимых графических артефактов при границах уровня.

Playbook: быстрая последовательность действий для добавления параллакса

Создайте ParallaxBackground в сцене.
Добавьте 2–4 ParallaxLayer с разными motion_scale.
Разместите спрайты/объекты и при необходимости добавьте StaticBody2D с CollisionShape2D.
Подключите обновление scroll_offset из скрипта игрока либо камеры.
Протестируйте на дешёвом устройстве и отладьте motion_scale.
Доработайте оптимизацию (culling, упрощение коллайдеров, texture atlasing).

Чеклист для релиза

Параллакс корректно работает на минимальном разрешении.
Нет излишних коллайдеров, не влияющих на физику.
Производительность в пределах цели (целевой FPS).
Отсутствуют «мигающие» текстуры при скролле.
UI читаем поверх параллакса.

Тестовые сценарии и критерии приёмки

Тест 1: Перемещение игрока вправо/влево. Слои смещаются противоположно движению, ближние — быстрее.
Тест 2: Быстрый рывок (dash). Отсутствуют визуальные пробелы в фоне.
Тест 3: Изменение разрешения и соотношения сторон. Фон корректно масштабируется/растягивается.

Критерии приёмки описаны в разделе «Критерии приёмки».

Короткий словарь

ParallaxBackground — контейнер для слоёв параллакса.
ParallaxLayer — слой, у которого есть motion_scale и собственный контент.
motion_scale — множитель скорости движения слоя относительно камеры.

Отладка частых проблем

Проблема: слои двигаются в ту же сторону, что и игрок.
Решение: убедитесь, что вы применяете отрицательное смещение (-velocity).
Проблема: на краях сцены видны пустые области.
Решение: используйте ограничения камеры, добавьте крайние тайлы или расширьте фон.
Проблема: просадки FPS при большом количестве слоёв.
Решение: объедините спрайты в атласы, уменьшите разрешение дальних текстур, используйте object pooling.

Итог и рекомендации

Параллакс в Godot 4 — гибкий и быстрый способ улучшить визуальную составляющую 2D‑игры. Начните с 2–3 слоёв, добавьте базовые коллайдеры, протестируйте и затем усложняйте: случайная генерация, освещение и частицы. Обязательно фокусируйтесь на производительности и читаемости игрового пространства.

Ключевые шаги:

Создайте ParallaxBackground + ParallaxLayer.
Настройте motion_scale по иерархии глубины.
Обновляйте scroll_offset в зависимости от движения персонажа.
Оптимизируйте и тестируйте на целевых устройствах.

Важно: начинайте с простого и улучшайте слой за слоем. Маленькие приёмы параллакса дают заметный визуальный эффект, не требуя больших усилий по коду.

Summary

Параллакс создаёт ощущение глубины в 2D.
Godot 4 имеет готовые узлы для параллакса.
Случайная генерация усиливает динамику сцены.
Тестирование и оптимизация критичны для стабильной работы.