教程:图形课程 #3 – 2D 基于精灵的角色

在本课程中,您将学习如何从头开始创建新的 2D 精灵角色。
内容涵盖2D 精灵动画的基本操作。

与之前的课程一样,本课程也使用第一门课程的教程项目。
请先打开该项目并做好准备工作。

步骤 1:创建新的 2D 精灵角色游戏对象


1. 准备您的 2D 精灵角色图像。

如果您还没有现成的图像,可以使用下面的示例图像:


2. 将图像拖放到文件系统中以导入它。


3. 创建一个新的游戏对象场景。

点击中心编辑器中的+选项卡以打开新选项卡,然后在场景窗口中选择游戏对象。


4. 在设置窗口中,配置以下内容:

  • 对象名称:选择任意名称。
  • 模板:characters
  • 模板类型:2DSprite Character Base
  • 组:Player
  • 由输入设备操作的对象::white_check_mark: 开启


5. 将创建一个具有预配置基本设置的游戏对象场景。

立即通过右键单击未保存的选项卡或使用 Ctrl + S 保存它,并将其存储在您喜欢的位置。


6. 加载您的角色图像。

在场景窗口中,选择 Sprite2D。


7. 在检查器中,将步骤 2 中的图像拖放到纹理字段中。


8. 角色图像现已加载,但您将看到整个图集。

让我们将其划分为单独的帧。


9. 在检查器的动画部分,设置以下内容:

  • Hframes(水平帧数):5(针对示例图像)
  • Vframes(垂直帧数):4(针对示例图像)


10. 尝试上下调整帧值。

如果图像分割正确,您应该看到精灵逐个切换动画帧。

:small_blue_diamond: 在 Godot 中,帧索引从 0 开始,因此 帧 7 是第 8 帧。


11. 让我们调整碰撞形状。

首先,在场景窗口中选择 CollisionShape2D。
您应该看到一个浅蓝色的矩形,它定义了地面和敌人接触的碰撞区域。


12. 调整碰撞形状以适合角色的大小。

使用角点手柄调整其大小。


13. 现在选择 HitCollision 并类似地调整它。

这用于检测来自敌人的击中——比墙壁碰撞区域稍大一些是理想的选择。


14. 最后,让我们暂时禁用 AttackCollision。

这定义了角色的攻击区域,但由于动画各不相同,我们将暂时将其关闭。

  • 选择 AttackCollision
  • 在检查器中,勾选 Disabled(禁用)

如果形状仍然显得干扰,点击 AttackCollision 旁边的 :eye: 图标将其从视图中隐藏。


15. 一切看起来都正常后,再次保存您的场景(右键单击选项卡或使用 Ctrl + S)。


:light_bulb: 提示:可见性与禁用

场景窗口中的 :eye: 图标仅切换编辑器可见性。
它不会影响节点在运行时的行为。

要实际禁用节点的行为,请执行以下任一操作:

  • 在检查器中使用 Disabled(禁用)复选框
  • 或删除该节点

步骤 2:创建精灵动画


1. 在场景窗口中,选中 AnimationPlayer 节点。

底部中央面板将切换至动画视图。


2. 在面板顶部,点击动画 > 新建以创建新动画。


3. 为其命名。

在本示例中,我们将创建一个行走动画,因此将其命名为 Walk。


4. 将创建一个空白动画。

默认时长为1 秒,但对于行走循环来说太长了——让我们将其缩短。
使用右上角的计时器图标将长度设置为 0.4 秒。
image


5. 在场景窗口中,选中 Sprite2D。

在检查器中,进入动画 > 帧。


6. 确定行走动画的第一帧。

在示例精灵中,它位于第二行(索引从 0 开始),因此从第 5 帧开始。
在帧字段中输入 5。


7. 点击帧字段旁边的**:old_key:(插入关键帧)**按钮。

image


8. 当提示插入新关键帧时,只需点击创建。


9. 一个帧将被插入到 Walk 动画中。

现在将时间线移动到 0.1 秒。


10. 将帧设置为 6,然后再次点击关键帧图标以插入下一帧。

image


11. 重复此过程:

  • 在 0.2 秒 → 帧 7
  • 在 0.3 秒 → 帧 8
  • 在 0.4 秒 → 帧 9

现在您应该拥有 5 个帧。


12. 帧可能显得拥挤——请放大以获得更清晰的视图。

使用鼠标滚轮(Ctrl + 滚动)或调整右下角的缩放条。


13. 启用动画的循环。

点击循环图标两次(计时器旁边),将其设置为乒乓循环。

image


14. 按 :play_button: 预览动画。

如果播放不符合预期,请检查:

  • 每一帧的时间戳和数值
  • 循环是否已正确启用(步骤 13)

15. 若要在视觉脚本中使用此动画,请将其注册到您的游戏对象。

选中您的游戏对象节点(例如 sample_2DSprite)。


16. 由于这是一个新对象,其 AnimationPlayer 尚未链接。

点击选择 AnimationPlayer按钮,然后选择正确的节点。


17. 点击自动注册动画按钮。


18. 展开动画集部分。

您应该能看到新创建的 Walk 动画列表。
如果您正在制作侧视游戏,现在就可以开始了!


:memo: 注意:使用自定义精灵时

:wrench: 动画集高级设置

默认情况下,ACTION GAME MAKER 会根据移动方向水平翻转动画。
对于大多数侧视游戏,这已经足够。但如果您希望为以下情况设置不同的动画:

  • 前进和后退步骤
  • 4 方向或 8 方向俯视游戏

…则需要手动配置动画集:

设置 描述
动画 指定要播放的动画
自动 Y 翻转 切换自动水平翻转。禁用以进行手动控制
八方向 根据朝向定义播放哪个动画
+ 添加方向变体 允许每个方向有多个动画
+ 添加动画类别 添加自定义动画组(仅限高级用途)

:compass: 示例:俯视 4 方向设置


:man_standing: 角色朝向

默认情况下,角色假设朝右。
如果您的精灵朝左,则必须启用此设置:

  • 进入 BaseSettings
  • 勾选启用自动水平翻转


:prohibited: 关于 AnimatedSprite2D 的说明

尽管 Godot 包含一个名为 AnimatedSprite2D 的专用节点,
但ACTION GAME MAKER 不支持它。
所有精灵动画都应使用 AnimationPlayer 完成。
不过,可以通过应用以下方法间接使用 AnimatedSprite2D。
当处理多个精灵图集时,尤其推荐此方法。


:white_check_mark: 结论

至此,图形课程已全部完成!

本教程涵盖了基础知识,但 Godot 的 AnimationPlayer 功能极其强大。
结合 ACTION GAME MAKER 的工具,您可以创建丰富、生动的角色。

欢迎在社交媒体或官方 Guild 上分享您的作品!


:backhand_index_pointing_right: 探索其他课程:

2. 脚本课程
适合那些使用默认角色但希望构建各种机制和系统的用户。

3. 表现力增强课程
适合那些希望添加酷炫、Godot 风格视觉特效的用户。