DragonBones 使用笔记

参考资料

• https://www.bilibili.com/video/BV1Hx411C7WD

工具与基础概念

DragonBones 组件体系

• DragonBones Pro：专业动画编辑器
• DragonBones：标准数据格式
• DragonBones Runtime：跨平台运行时库

PSD 素材导入流程

1. 通过【帮助】→【PSD 导出插件安装指引】获取插件
2. 在 Photoshop 中加载 DragonBones 脚本
3. 制作完成后通过插件导出 PSD 为 DragonBones 可识别格式

骨骼系统核心机制

骨架层级结构

• 图片 → 绑定于 → 插槽 → 绑定于 → 骨骼
• 骨骼与图片必须通过插槽间接关联
• 单插槽可包含多张图片，但同一时间仅显示一张

骨骼创建与操作

• 首根骨骼默认以 root 为父级
• 后续骨骼默认以上一骨骼为父级
• 父子骨骼间默认继承变换属性（旋转、缩放、位移）

root 作为动画根节点，控制整个场景

• 右键功能：

  • 取消选择
  • 打开上下文菜单
  • 拖拽移动

• 智能绑定：

  1. 左键选中骨骼并按住
  2. 按住 Ctrl 后释放左键
  3. 鼠标悬停时出现白色方框提示
  4. 点击图片完成绑定（特别适用于被遮盖的图片）

创建骨骼时，骨骼 划过某张图片 的时候会提示当前绑定的图片

鼠标左键选中某个骨骼，并保持按住
然后按住 Ctrl 键 后可以松开左键
此时鼠标经过图片的时候会有 白色的方框，点击想要的图片即可进行骨骼绑定
此方法适用于 底部图片被上层图片遮盖住 的情况

多多尝试左下角的【子图片可控】、【子骨骼可控】

右上角的【选择工具】，可以通过拖拽骨骼的尖端进行拉长或缩小，虽然骨骼的长度没有什么意义，主要是为了方便操作
骨骼的 轴点和位置 才是关键
【骨骼工具】用于创建骨骼

• 拖拽骨头上的箭头
  • 红箭头：X 轴移动
  • 绿箭头：Y 轴移动
  • 黄方块：等比缩放

IK/FK 约束系统

FK，正向约束，父骨骼驱动子骨骼
IK，反向约束，子骨骼影响父骨骼

1. 使用【Pose 工具】生成红色锚点
2. 通过杠杆原理批量控制骨骼群
3. 选中骨骼后在属性面板启用【IK 约束】：
   • 自动生成末端约束
   • 手动设置约束目标

右侧属性，【继承】中可以取消勾选【旋转】
Ctrl + 1 对选中的多个骨骼进行 编组，方便通过数字键的切换来选择不同的组骨骼

IK 约束主要是能够 限制住骨骼
例如在站立或者蹲下的时候，我们只需要动身体即可，不需要每个骨骼一帧，只需要胯骨骼的一帧
IK 约束最多选择 两个骨骼 进行添加，且为 父子关系

时间轴与动画制作

骨骼关键帧管理

• 添加关键帧：点击时间轴栏中的黄色旗帜或按 K 键，用于记录下当前骨骼的状态，软件会在前后状态之间自动形成一个补间
• 移动关键帧：左右拖动调整补间时长，用于 拉宽/压缩 整个帧之间的补间
• 多选操作：Ctrl + 左键 框选多个关键帧
• 批量编辑：使用【编辑多帧】进行统一偏移

记得点击工具栏上的【删除非必要关键帧】，例如：没有任何改变的关键帧
因为每添加一个关键帧，最终的数据量就会增加

【洋葱皮】用于显示前后帧
红色是上一帧，蓝色是下一帧。方便查看当前上下帧的关系，做动画的时候常用

曲线编辑与高级效果

1. 选中关键帧后点击【曲线编辑】
2. 添加淡入淡出曲线使动画更自然
3. 使用 offside 技术制造骨骼联动的延迟效果，这样才会有带动的感觉。可以尝试在时间轴上让每个骨骼向后偏移一段帧数

特殊关键帧类型

• 插槽关键帧
  用 黄色 显示，控制图片切换

• 层级关键帧
  从【场景树】切换到【层级】面板，在【层级】面板调整绘制顺序 可以对骨骼进行层级移动，并设置 层级关键帧
  时间轴栏，划到最下面的【绘制顺序】会有显示
  层级绘制顺序是单独的一个时间轴

• 事件关键帧
  触发音效/特效等游戏事件（需运行时预览） 例如播放一些音效，显示一些动画等等
  注意：不能预览效果，在最后运行的时候才能看到效果

基于同一个骨骼的动画可以分开制作，之后再导入到一个项目文件中，提高制作效率

骨骼动画高级技巧

旋转控制

以前版本的骨骼，若设置角度从 0 到 0 是没有补间动画的
需要设置 0、120、-120 才能形成骨骼旋转
但是现在只需要选中前一个关键帧，即可在右侧的属性面板的【旋转】中选择 顺逆时针以及旋转圈数

同样，骨骼旋转也可以设置【曲线编辑】

骨骼嵌套与复用

点击菜单栏中的导出数据后
.ske.json 是 骨架 配置文件
.tex.json 是 纹理 配置文件

导入骨架配置文件后，若要与之前打开的骨架共用 library
只需要将骨架拖动到需要的插槽下后，再调整一下即可

【属性】-【显示资源】，选择需要显示的图片

嵌套后的骨骼不会保留原有的动画，只能通过预览查看

骨架和基本动画可以互相嵌套

斜切

创建一个 点状父骨骼，并对其进行一定的 缩放
使得子骨骼可以围绕其旋转，实现 旋转平面的倾斜

案例：实现火焰 🔥 旋转

网格与变形系统

网格编辑基础

网格算是一张图片的属性
勾选【网格】之后，就可以在图片上编辑网格了
取消勾选后网格就不起作用

【边线工具】
防止对有凹陷的位置添加网格点的时候会出现凸多边形的情况
注意不需要贴的很近，留一些空隙

根据图形的纹理 加点，然后拉出自定义的线

注意
自动生成的线是随机的，两次打开项目的时候，图片内部的自动边线可能会不一样
所以必要的时候自行手动添加边线
网格点的数量也与最终导出的数据量有关

FFD，就算不基于骨骼，也可以 对网格点进行移动 和 添加关键帧 等

无法修改同一张图的网格层次关系

按住 Ctrl 可以多选网格点，单击或者框选均可

蒙皮权重

【边线工具】只能在【变形】取消勾选 的情况下使用
添加边线的时候，不要和图片贴太近，防止图片不完整

1. 完成网格编辑后进入蒙皮模式
2. 点击【添加绑定骨骼】选择控制骨骼
3. 使用【自动权重分配】初步设置
4. 选中某个点后，可以看到权重的百分比，点击右上角【权重工具 R】进入权重状态。每一个点都有对应的 饼形图，展示不同颜色骨骼所占的权重比

同时选中至少一个点和一根骨骼，然后可以通过 上下拖动鼠标 来调整所选骨骼在该点上的权重占比
Ctrl + 鼠标左键 框选，可以批量选择点
比如翅膀根部的节点不需要受到边缘骨骼的节点的影响，相应的权重可以调小一点

查看权重调整是否合适，推荐到【动画模式】下调整骨骼权重并进行测试
调整不会影响【骨骼装配模式】，但是注意权重是会全局改变的

调整好权重的好处：
制作动画的时候，只要对骨骼运动添加关键帧，就会自动 带动网格上的点运动
注意，有时候权重分配实在达不到需求，也可以 直接对网格点的位置进行修改

碰撞框，顾名思义
图形复杂的时候，可以定义碰撞框， 运行中不可见，但是逻辑上存在
碰撞框会与骨骼绑定，骨骼改变的时候也会相应改变
游戏中可以根据碰撞框来进行 碰撞计算 等等

动画输出与优化

预览和导出

预览是指：egret 预览
预览基本和时间轴栏中展示的动画差不多
但是 嵌套子骨骼的动画 只能在预览的情况下才能查看

egret 极速导出不支持使用了网格、蒙皮、碰撞框的项目

导出为 html 的方式很实用

序列帧和画布

新建项目中的【逐帧动画模板】即序列帧动画
而【补间动画模板】是以前的基本动画

资源栏中选择【新建元件】
可以选择不同类型，包括骨骼、序列帧等等

序列帧与骨骼同级，每一个序列帧都是一个骨骼动画
Space 空格或者 Enter 回车键进行序列帧动画播放

制作 像素风 的动画的时候，推荐关闭【偏好设置】中的【图片平滑显示】
使图片边缘更加清晰分明

G 键 切换到下一帧，T 键 切换到上一帧
Ctrl + 方向键，可以对图片进行像素的微调移动

由于同一角色的不同动作的大小可能不同
【画布】功能免去了使用第三方软件修改图片的大小的事务
直接得到一套动作下来的最小大小

5.5 新功能

。。。

5.6 新功能

。。。