教程:图形课程 #2 – 基于骨骼的 2D 角色

在本课程中,您将学习如何修改作为示例包含的玩家对象
本课程侧重于2D 骨骼绑定角色的基本操作。

与之前的课程一样,本教程将使用初始课程中的同一教程项目
请先打开该项目并做好准备工作。

步骤 1:让我们更换皮肤


1. 下载附加的图片:


2. 将 P_01_stickman_skin.png 拖放到项目 文件系统 中的任意位置以导入它。


3. 打开 玩家场景 (Object_Sampleplayer.tscn)。


4. 在场景树中,进入:

BoneAnimationRoot > Polygon
然后选择从 Mantle_downHand_R 的所有节点。


5. 在 检查器 中,将 P_01_stickman_skin.png 拖放到 纹理 字段中。


6. 玩家角色现在将显示为 黑色火柴人


7. 按 F5 键 或点击 :play_button: 按钮进行测试播放。

您应该能看到火柴人角色在运动中。


8. 若要恢复原始外观:

进入 文件系统 > templates > objects > characters > P_01 > P_01_mat_000.png
并重复步骤 4–5 以重新应用原始纹理。


说明

:wrench: 节点概述

节点 描述
BoneAnimationRoot2D ACTION GAME MAKER 所需的特殊节点,用于识别 2D 骨骼角色以应用滤镜或运动轨迹等效果。所有 Skeleton2DPolygon2D 节点必须放置在此节点下。
Skeleton2D Godot 节点,用于定义 2D 骨骼。其变换(位置、旋转)会影响链接的 Polygon2D 纹理。
Polygon2D (Mantle_down ~ Hand_R) 这些节点使用多边形网格和 UV 映射来定义角色的视觉部分,以显示皮肤。

:artist_palette: 关于 Polygon2D 和纹理

每个 Polygon2D 节点都使用 UV 系统来 从共享图像中切割出部分

让我们看一下:

  1. 选择 ArmL 节点。
  2. 点击顶部工具栏中的 UV 按钮。
  3. UV 编辑器将显示出来。
    多边形形状的选区显示了 ArmL 从纹理中使用的区域。
  4. 由于 UV 坐标保持不变,您可以在自定义图像中保持 相同的布局和尺寸,从而轻松创建和应用新皮肤。

:paintbrush: 自定义皮肤指南

以下是默认皮肤布局供参考:

P_01_mat_000.png(男性角色):

P_02_mat_000.png(女性角色):

在创建自己的皮肤时,请遵循上述相同的布局。
您可以使用这些作为参考来修改或设计您的基础皮肤纹理。

步骤 2:让我们添加动画


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

底部面板将自动切换到 动画 视图。


2. 点击动画面板左上角的 :play_button: 播放 按钮。

角色应该会轻微移动——这是 001_Idle 动画正在播放。


3. 点击动画名称 001_Idle

共有 47 个预注册的动画。尝试播放不同的动画!
您将看到角色根据白色和黄色的骨骼移动——这些骨骼的移动是通过下方显示的 轨道 控制的。


4. 让我们创建一个新的动画。

点击面板顶部的 动画 下拉菜单,然后选择 新建


5. 将弹出一个对话框——输入动画的名称并点击 确定


6. 您的新动画现已创建,但它是空的——还没有轨道。

要添加轨道:

  • BoneAnimationRoot2D > Skeleton 下选择从 B_HipB_Chain 的所有 Bone2D 节点。
  • 然后点击工具栏中的 :old_key: 插入关键帧 图标。


7. 将弹出提示:“创建 42 个新轨道?” — 点击 创建

现在,21 根骨骼中的每一根都将拥有用于 位置和旋转 的轨道。


8. 让我们开始编辑动画。

蓝色的垂直线显示当前时间标记。
将其拖动到大约 0.6 秒 处。


9. 现在,让我们为右臂添加动画。

在场景窗口中,选择 B_Arm_R ——这是右上臂骨骼。


10. 在 检查器 中,调整 Node2D > Transform > Rotation 的值。

您应该会看到手臂旋转。


11. 选定角度后,再次点击 :old_key: 插入关键帧 图标。

看起来可能什么都没发生,但当前的旋转角度已在 0.6 秒处保存。


12. 点击 :play_button: 播放

手臂应该从其默认位置平滑移动到新的旋转位置。
此移动会在关键帧之间自动进行插值。
就像摆弄动作人偶一样——设定姿势,插入关键帧,它就变成了动画!


:right_arrow: 在此处继续图形课程:


:magnifying_glass_tilted_left: 补充说明

:stopwatch: 动画长度与循环

  • 您可以使用右上角的 :alarm_clock: 时钟图标 更改动画长度。
  • 旁边是 循环设置
    • 点击一次:循环
    • 点击两次:乒乓循环
    • 点击三次:不循环

image


:puzzle_piece: 在可视化脚本中使用您的新动画

要在可视化脚本中使用您的新动画,必须将其注册到 GameObject 节点的动画集 中。

  1. 在场景窗口中选择 Player 节点。
  2. 点击检查器中的 自动注册动画 按钮。

  1. 您的动画现已注册,并可在可视化脚本中使用。
    展开 动画集 部分以查看所有已注册的动画。


:bone: 扩展 2D 骨骼动画

本教程仅涵盖最基本的操作。
Godot 的 AnimationPlayer 非常强大——它包含 反向运动学 (IK) 等功能。

有关高级功能,请参阅官方 Godot 文档:
:blue_book: https://docs.godotengine.org/en/4.x/tutorials/animation/cutout_animation.html