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

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

Godot 4 упрощает реализацию прокрутки параллакса. Его мощный 2D-движок обеспечивает встроенную поддержку слоев параллакса, позволяя создавать потрясающие визуальные эффекты с минимальными усилиями.

Настройка игры Годо

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

Код, используемый в этой статье, доступен в этом Репозиторий GitHub и вы можете использовать его бесплатно по лицензии MIT.

Для этого примера добавьте ПерсонажТело2D узел для движения игрока. Также добавьте CollisionShape2D с прямоугольной формой и Спрайт2D для представления персонажа игрока.

extends CharacterBody2D

var speed = 200

instagram viewer

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

Затем создайте эффект параллакса, добавив несколько ПараллаксСлой узлы на сцену. Каждый ПараллаксСлой будет представлять другой слой фона. Чтобы добиться убедительного эффекта параллакса, слои, находящиеся дальше от камеры, должны двигаться медленнее, чем более близкие.

Добавлять StaticBody2D узлы с CollisionShape2D в каждом ПараллаксСлой чтобы создать несколько сталкивающихся объектов на заднем плане. Эти сталкивающиеся объекты будут взаимодействовать с игроком и другими игровыми элементами, добавляя игровому процессу больше глубины.

Вот код GDScript для создания слоев параллакса с коллидирующими объектами:

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)

С этим кодом каждый слой параллакса теперь содержит StaticBody2D узел с CollisionShape2D представляющие сталкивающиеся объекты на заднем плане.

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

Перемещение разных слоев с разной скоростью

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

Добавьте следующий код GDScript в сцену Player:

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)

Этот код вычисляет движение слоев параллакса на основе движения игрока и соответствующим образом обновляет смещение прокрутки узла 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():
# 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)

Этот код определяет константы для управления случайностью слоев параллакса. Использовать ленивый функция для интерполяции значений между MIN_SCALE и MAX_SCALE, генерируя случайный масштаб движения для каждого нового слоя. Эта функция имеет следующую подпись:

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

Передача результата из рандф() поскольку вес позволяет создавать слои со случайным масштабом.

randf_range предлагает другой способ генерации случайных значений в пределах диапазона. Здесь функция create_random_layer использует его для генерации случайных позиций для новых слоев в указанном диапазоне:

var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)

Теперь ваша демо-игра должна выглядеть примерно так:

Включая дополнительные функции

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

Фоновые объекты

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

Динамическое освещение

Добавляйте эффекты динамического освещения в слои параллакса. Добавляя источники света и тени, вы можете создать ощущение реализма и глубины в игровом мире. Система освещения Godot хорошо работает с 2D-играми и может значительно улучшить визуальное качество.

Эффекты частиц

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

Цикл дня и ночи

Реализуйте цикл день-ночь, который меняет цвет и интенсивность слоев параллакса в зависимости от времени суток в игре. Эта динамическая функция может предоставить игрокам постоянно развивающийся опыт по мере прохождения игры.

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

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

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

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

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

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

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

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

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

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

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