Параллакс-скроллинг в Godot 4 — практическое руководство

Что такое параллакс‑скроллинг

Параллакс‑скроллинг — это техника, при которой разные слои фона движутся с разной скоростью относительно камеры, создавая ощущение глубины в 2D‑игре. Кратко: ближние слои двигаются быстрее, дальние — медленнее.

Определение: Параллакс — визуальный эффект перемещения слоёв с различной скоростью для имитации глубины.

Быстрый план действий

1. Создать 2D‑проект и сцену с игроком (CharacterBody2D + CollisionShape2D + Sprite2D).
2. Добавить ParallaxBackground и несколько ParallaxLayer с разными motion_scale.
3. Обновлять scroll_offset ParallaxBackground на основе движения игрока.
4. (Опционально) Случайно генерировать слои для вариативности.

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

Создайте новый 2D‑проект и сцену. Добавьте узел 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)

Этот скрипт позволяет игроку двигаться по четырём направлениям. При необходимости замените события ввода на собственные action (например, “move_right”).

Создание слоёв с ParallaxLayer

Добавьте узел ParallaxBackground в сцену и внутри него — несколько ParallaxLayer. Для правдоподобного параллакса установите motion_scale слоя ближе к 0 для дальней перспективы и ближе к 1 для ближней.

Чтобы сделать фоновую сцену интерактивной, можно поместить в слои StaticBody2D с CollisionShape2D — это могут быть платформы, препятствия или декоративные объекты, с которыми будет взаимодействовать игрок.

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

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 с простой прямоугольной формой коллизии — это оптимально для производительности и тестируемости.

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

Чтобы фон реагировал на движение игрока, обновляйте scroll_offset у ParallaxBackground. Делайте это в скрипте игрока после вычисления движения.

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)

Обратите внимание на минус: фон должен двигаться в противоположную сторону от движения игрока.

Случайный параллакс — добавляем непредсказуемость

Для живого фона можно генерировать слои динамически с случайными параметрами: motion_scale, позиция, количество объектов. Ниже — пример генератора случайных слоёв.

extends ParallaxBackground

const MAX_LAYERS = 5
const MIN_SCALE = 0.2
const MAX_SCALE = 1.5
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)

Функции randf(), randf_range() и lerp() удобны для плавной генерации параметров. Это даёт живую вариативность и помогает избегать повторов при длительной игре.

Дополнительные возможности — идеи для расширения

• Фоновые объекты: плавающие платформы, враги, анимированные декорации.
• Динамическое освещение: 2D‑свет и тени могут усилить ощущение глубины.
• Частицы: листья, пыль, искры — оживляют сцену.
• Смена дня и ночи: меняет цветовую палитру и интенсивность слоёв.

Практические советы и лучшие практики

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

• Ограничьте количество слоёв и сложность спрайтов.
• Используйте упрощённые геометрические формы для коллизий.
• Подгружайте и выгружайте дальние слои по мере необходимости.
• Кешируйте рассчитанные значения motion_scale и позиции.

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

• Мысленно разделите сцену на ближний, средний и дальний планы.
• У ближних слоёв motion_scale ближе к 1.0; у дальних — к 0.0.
• Подгоняйте скорость так, чтобы не отвлекать игрока от геймплея.

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

Установите границы камеры, чтобы игрок не увидел нежеланные пустоты по краям уровня. Это можно сделать через Camera2D.limit_* параметры.

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

Тестируйте на разных разрешениях и устройствах. Обратите внимание на пропуски, дергания и конфликт коллизий между слоями.

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

• Не подходит для статичных интерфейсных сцен — эффект лишний.
• Слишком много слоёв на мобильных устройствах может падать FPS.
• Если игровые объекты завязаны на точной физике, перемещение слоёв может нарушить предсказуемость столкновений.

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

• Шейдерный параллакс: использовать 2D‑шейдеры для смещения UV и анимации фона.
• TileMap слои с ручным сдвигом: для больших тайловых карт удобнее управлять смещением TileMap, а не ParallaxLayer.
• Камера с синтаксическими оффсетами: динамически менять позицию Camera2D для управления восприятием глубины.

Ментальные модели и эвристики

• “Rule of thirds” для глубины: распределите элементы на три расстояния — ближний, средний, дальний.
• Скорость ~ расстояние: чем ближе к игроку — тем больше скорость слоя.
• Контраст и детализация: дальние слои — менее детализированные и с меньшим контрастом.

Мини‑методология: от идеи до реализации (шаги)

1. Дизайн: определите 3–5 слоёв и роль каждого.
2. Арт: подготовьте текстуры разного разрешения.
3. Прототип: реализуйте ParallaxBackground с тестовыми motion_scale.
4. Игровая логика: добавьте коллизии и взаимодействия.
5. Оптимизация: профилируйте и уменьшайте вес ассетов.
6. Тестирование: на целевых устройствах.

Чеклист по ролям

• Для программиста:

  • Корректно вычисляется scroll_offset
  • Коллизии в слоях не конфликтуют с игроком
  • Параметры доступны для тонкой настройки (export vars)

• Для художника:

  • Текстуры оптимизированы и имеют вариативность
  • Палитра согласована между слоями
  • Есть варианты для разных времени дня

• Для QA:

  • Нет визуальных артефактов на границах тайлов
  • Стабильный FPS с целевым числом слоёв
  • Проверены крайние случаи движения камеры

Сниппет: быстрые параметры для тонкой настройки

• Ближний слой: motion_scale = Vector2(1.0, 1.0)
• Средний слой: motion_scale = Vector2(0.5, 0.5)
• Дальний слой: motion_scale = Vector2(0.2, 0.2)
• Скорость игрока: speed = 120–300 (подбирается под жанр)

Критерии приёмки

• Визуальная глубина: слои визульно разделяются на 3 уровня глубины.
• Производительность: стабильный FPS на целевых устройствах.
• Корректность коллизий: игрок не застревает в неожиданных местах из‑за фоновых объектов.
• Без глитчей: отсутствуют видимые разрывы и мерцание слоёв при движении.

Галерея крайних случаев (Edge cases)

• Игрок бежит очень быстро: фон не должен рывками «отставать».
• Малые экраны и широкие уровня: проверьте, что края фона корректно повторяются или подгружаются.
• Очень большие или очень маленькие motion_scale: проверяйте визуальную читаемость.

Безопасность, приватность и портирование

• Файлы ассетов не содержат приватных метаданных и могут быть лицензированы отдельно.
• Для портирования на мобильные: снизьте разрешения текстур и используйте атласы.

FAQ

Как выбрать motion_scale для нового слоя?

Выберите значение исходя из желаемой глубины: ближние 0.8–1.0, средние 0.4–0.7, дальние 0.0–0.3. Тестируйте в контексте сцены.

Можно ли добавлять физические объекты в ParallaxLayer?

Да, можно добавлять StaticBody2D/CollisionShape2D. Убедитесь, что логика столкновений учитывает смещение слоёв.

Подойдёт ли этот подход для платформеров с точной физикой?

Да, если коллизии вынесены в отдельные слои и тщательно протестированы. Избегайте размещения активных физических объектов в дальних слоях, если это нарушает игровой баланс.

Заключение — что вы получили

Параллакс‑скроллинг — простой и эффективный инструмент для улучшения визуальной глубины 2D‑игр в Godot 4. В этом руководстве вы нашли рабочие скрипты, практические советы по оптимизации, чеклисты для команд и критерии приёмки, которые помогут быстро внедрить эффект и сохранить производительность.

Важно: начните с малого (2–3 слоя) и добавляйте сложность по мере необходимости.