如何在 Godot 中实现视差滚动

作者
Tweet
Share
Share
Pin
0 Shares

视差滚动是一种在2D游戏中被广泛采用的技术，它通过使背景的不同图层以相对于相机运动的不同速度移动，来营造深度感和提升视觉趣味性。这种效果能为游戏背景增添层次感和动感。

在Godot 4中，实现视差滚动变得前所未有的简单。其强大的2D引擎为视差图层提供了内置支持，使得开发者能够以最少的努力创建出令人惊叹的视觉效果。

设置Godot游戏环境

首先，我们需要在Godot游戏引擎中创建一个新的2D项目。在这个项目中，我们需要设置一个包含玩家角色的游戏场景。

本文中使用的源代码可以在这个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节点都代表了背景的不同层次。为了获得更加逼真的视差效果，远离相机的图层应该比靠近相机的图层移动得更慢。

在每个ParallaxLayer中，添加带有CollisionShape2D的StaticBody2D节点，可以在背景中创建一些可碰撞的对象。这些可碰撞对象可以与玩家和其他游戏元素进行互动，增加游戏的深度。

以下是使用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节点。

这些可碰撞对象将会与玩家角色以及其他游戏元素进行互动，从而提升游戏的深度和复杂性。

以不同速度移动不同图层

在设置好视差图层后，我们需要根据玩家的移动来更新它们的位置。这将产生视差效果，其中靠近相机的图层移动得更快，而远离相机的图层移动得更慢。

在Player场景中添加以下GDScript代码:

 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的光照系统与2D游戏配合良好，能显著提高视觉质量。

粒子效果

将粒子系统集成到视差层中，添加细微的视觉效果。比如落叶、漂浮的云朵或闪烁的星星，都可以增强游戏氛围，让游戏世界感觉更加生机勃勃。你还可以在游戏中添加一些无版权的音效。

昼夜循环

实现昼夜循环，根据游戏中一天的时间变化来改变视差层的颜色和强度。这种动态功能可以为玩家在游戏过程中提供不断变化的体验。

虽然视差滚动可以提升游戏的视觉效果，但有一些最佳实践需要遵循，以确保流畅且令人愉快的体验。

性能优化

要注意视差层的数量及其复杂性。过多的图层或高分辨率的资源可能会导致性能问题，尤其是在配置较低的设备上。优化你的美术资源并尽可能使用简化的碰撞形状。

图层排列

仔细安排你的视差图层。考虑视觉层次和所需的深度效果。距离相机最近的图层应该移动得更快，而距离相机较远的图层应该移动得更慢。

相机边界

设置相机移动的边界，防止当玩家到达游戏世界边缘时出现不必要的空白或视觉故障。这样可以确保玩家的无缝体验。

测试和调整

在各种设备和屏幕尺寸上测试你的视差滚动，以确保它在不同平台上都能良好地运行和呈现。调整运动比例、图层位置和其他参数，可以微调视差效果以获得最佳效果。

添加随机视差滚动可以显著提高Godot游戏的参与度。随机视差滚动包括在游戏过程中动态生成和定位视差层。

通过这样做，你可以在背景中创造出一种运动感和活力感，使游戏世界感觉充满活力且不可预测。玩家将会体验到不断变化的视觉环境，为他们的游戏体验增加额外的刺激感。