原标题：菜鸟丨2D骨骼动画工具DragonBones的使用教程

怎样用更少的美术成本创造出更生动的动画效果今天就为大家介绍一套开源的2D骨骼动画框架和工具——DragonBones，它包含了桌面骨骼动畫制作工具Dragondragonbonesproo和一套多语言版本的DragonBones骨骼动画库

下面为大家介绍DragonBones的常用术语和使用方法。

• 骨架：骨架Armature,是2D骨骼动画中最常用的名词一般指的昰由很多骨骼组成的一个整体。DragonBones中同时代表一个可以包含动画的角色
• 骨骼（骨头）：骨格或骨头Bone,是骨骼动网中组成骨架的最重要的一个基础单元。骨头自身不能拆解在骨架中可以进行相对的平移、旋转、缩放、运动，组合起来就形成了骨格动画另外骨骼之间可以有父孓关系。一般来说在默认正向动力学的情况下，父骨骼运动会带动子骨骼一起运动、比如一个人物举起大臂那小臂作为大臂的子骨骼，也会随之被抬起
• 插槽：插槽是骨骼动画中显示图片的容器，隶属于骨骼每个插槽可以包含多张图片，但是同一时间只显示一张图片每个骨格可以包含多个插槽。插槽链接了骨骼这个动画逻辑单元和图片这个动画显示单元组成了骨骼-插槽-图片，这个DragonBones骨骼动画中的基夲骨骼结构
• 图片(纹理)：图片就是显示图像的元素，在2D骨骼系统中图片和纹理的意义区别不大，所以这里也可以叫纹理
• 纹理集：纹理集是将图片打包之后组成的大图，方便资源整合传播和在游戏中加载使用硬件加速引擎或者Egret Runtime 的话，纹理集能大幅度提高渲染效率所以DragonBones默认提供的导入资源的接口就是用纹理集。
• 动画补间：一般设计师在做骨骼动画的时候并不需要在每帧都为角色摆动作，而只是在一些關键的地方(关键帧)摆出关键的动作关键动作之间全部由程序生成的补间代替，这就是动画补间动画补间可以是线性的也可以是非线性嘚。线性补间意味着补间上的元件是匀速变换的(平移、旋转、缩放)非线性补间般由各种曲线表示，DragonBones 中默认使用贝塞尔曲线表示非线性补間
• 动画过渡：动画过渡是指从一个动画切换到另一一个动画时，产生的过渡效果DragonBones提供了动画动面切换时的过渡效果功能，只要设置一個过渡时间就能自动生成平滑的过渡效果。
• 动画融合：动面融合提供了一个角色同时播放多个动画的功能这个功能一般会在两种情况丅使用。第1种是如一个人物角色动画比较复杂可能需要上半身和下半身分别做动画设计，然后可以任意组合第2种是如需要个角色在跑步的同时中弹，身体后仰也就是同时插放跑步和中弹的动画。动画融合的功能通过给不同的动画设置权值给不同的骨路增加动画遮罩來实现这两种需求。需要注意的是DragonBones只有普通模式提供了动画融合的功能极速模式是不提供这个功能的。
• 正向动力学(FK)和反向动力学(IK)：在骨骼动画中一般来讲，子骨骼的运动会受到父骨骼的影响例如大臂旋转，小臂也会跟随旋转这叫作正向动力学，也就是父亲影响孩子当然现实世界也存在反过来的情况，例如有入打你一拳你用小臂去阻挡，那小臂受力运动的同时也会带动大臂一同做受力运动这叫莋反向动力学。在DragonBones中控制骨路调节动作的时候一般情况骨骼是符合正向动力学规律的，也就是调节父骨骼子骨骼也会受影响。如果希朢通过反向动力学调节动画可以选选择相应的IK工具来实现。

首先安装完成后打开欢迎界面，选择项目如图1所示。

然后打开你所选择嘚项目如图2所示。

接下来为大家解读图2中各项工具的使用方法

系统工具栏包含最常用的几个功能从左到右的按钮功能依次是：新建项目、打开项目、保存项目、撤销、重做、导入、导出、预览作品分享，如图3所示

·新建项目：用于新建一个项目 ,单击该按钮打开新建项目对话框。

·打开项目：用于打开一个已有项目单击该按钮打开系统指定文件对话框。

·保存项目：如果当前的项目有更改保存项目按钮将亮起，单击该按钮后将保存当前项目项目保存后，保存项目按钮暗掉

·撤销：用于撤销上一次的编辑操作。

·重做：用于重做仩一次撤销掉的编辑操作

·导入：用于导入一个支持的项目文件格式，单击该按钮将打开导入对话框

·导出：用于导出项目单击该按鈕将打开导出对话框。

·预览：在浏览器中预览动画的运行效果如果项目包含多个动画剪辑，可以在浏览器中单击鼠标左键来切换

·莋品分享：打开作品分享上传页面。

主场景工具栏用于场景操作中鼠标模式的切换由左到右依次为:选择工具、Pose工具、手型工具、创建骨骼工具，如图4所示

·选择工具：选中骨骼时，鼠标单击骨骼本身按住左键移动，可以在X、Y方向任意移动骨骼鼠标单击红色X轴(或绿色Y軸)可以在单一X轴(Y轴)方向上平移。鼠标拖动插槽内的图片本身按住左键移动，可以在X、Y任意方向上移动骨骼鼠标单击红色X轴(或绿色Y轴)可鉯在单X轴(Y轴) 方向上平移。鼠标拖动缩放手柄可以缩放插槽鼠标单击并按住其他区域时可以旋转插槽(插槽只有在骨架装配模式下可以被选Φ并改变状态)。

·Pose工具：选中一个骨骼时骨骼会跟随着鼠标的拖拽旋转。复选两根或以上骨骼时选中的骨骼会遵循IK规则，跟随着鼠标嘚拖拽

·创建骨骼工具：选中创建骨骼工具，在主场景中单击鼠标左键并拖拽便可创建骨骼另外在主场景中还支持一些常用操作：

鼠標处于选择工具或手型工具时，左键双击任意处 场景大小便恢复到100%。

右键单击任意区域取消选择

·权重工具：权重表示了蒙皮受到不哃骨骼形变影响的占比，合理分配好每个蒙皮顶点的权重至关重要

可见可选过滤面板用于打开和关闭骨骼和插槽的可见、可选、是否继承编辑的开关，如图5所示

·可见：打开时，骨骼或插槽在主场景中可见；关闭时骨骼或插槽在主场景中不可见。

·可选：打开时骨骼或插槽在主场景中可以被选中；关闭时，骨骼或插槽在主场景中不可以被选中

·继承：打开时，骨骼或插槽会继承父骨骼的编辑；关閉时骨骼或插槽不会继承父骨骼的编辑。

变换面板用来显示和修改骨骼或插槽的X、Y坐标(相对于父骨骼)、缩放比例、旋转角度以及图片的呎寸（仅限插槽和图片时显示)变换面板如图6所示。

场景树面板用于显示和编辑主场景中骨骼和插槽的父子树型关系如图7所示。

右上角按钮依次为：智能过滤、骨格创建按钮和删除按钮骨架装配模式下，双击场景树中的骨骼或插槽会弹出重命名窗口此面板在骨架装配囷动画制作下均可显示，但在动画制作下不可编辑骨骼和插槽可以在场景树中复选。

以下是骨骼继成关系在场景树中的编辑：

·骨骼间嘚继承关系可以通过在场景树面板内拖拽改变

·子骨骼可以被拖拽到同级或父及其以上的骨骼下。

·父骨骼不能被拖拽到它的子骨骼及其以下骨骼下

层级面板用于显示和编辑主场景中插槽的上下层级关系可以通过拖拽改变插槽间的层级关系。选中插槽后也可以单击右仩角的向上一层和向下一层按钮或快捷键[]来改变层级关系，此面板只出现在骨架装配模式下层级面板如图8所示。

项目所使用的所有图片嘟保存在资源面板中Dragondragonbonesproo每个项目的资源库都对应一个系统中实际存在的文件夹，文件夹中DragonBones Pro所支持的PNG图片都会被显示在资源面板中通过由系统其他文件夹向DragonBones Pro的资源面板中拖拽PNG文件的方法，向资源库里添加图片；相应的PNG文件也会被复制到对应的资源库文件夹中也可以单击“導入资源”按钮，在弹出的系统窗口中指定要添加的资源PNG文件资源面板如如图9所示。

右上角按钮依次为：导入资源按钮、打开库文件夹按钮和修改路径按钮此面板只可以在骨架装配模式下显示。

编辑模式切换按钮在场景的左上角用于切换骨架装配和动画制作，如图10所礻

动画面板用于显示和编辑动画剪辑，如图11所示

右上角按钮依次为：新建动画剪辑按钮、克隆动画剪辑按钮、重命名和删除动画剪辑按钮。此面板只能在动画制作下显示动画面板下边的3个参数分别是：

·动画时间：不可编辑，单位为s动画剪辑的实际持续时间依照帧率和动画剪辑的总帧数计算得出。

·过度时间：默认值为0可编辑，单位为s用来设定游戏中不同动面间的过度时间。

·播放次数：默认徝为0可编辑。用来设定游戏中动画的重复次数当设为0时表示无限大重复。

时间轴面板用于动画剪辑的编辑此模板只能在动画制作下顯示，如图12所示

时间轴面板上的播放控制工具，用于控制动画剪辑的播放由左向右依次为：回到首帧按钮、前一帧按钮、倒放按钮、播放按钮、下一帧按钮、最后帧按钮、播放速度控制滑块、当前帧、当前时间、帧率，如图13所示播放速度控制滑块的控制范围是0.1x~10x。当前幀：可编辑输入具体的帧数，绿色播放指针便会跳转到相应的帧数拖动绿色指针或播放动圈，当前帧的数值也会跟着相应变化当前時间：不可编辑，基于当前帧和帧率计算得出帧率：可编辑，默认为24fps设定每秒钟的动画有多少帧，如图13所示

帧编辑工具栏，由左到祐依次为：删除非必要帧、编辑多帧、洋葱皮按钮、向右移动帧、向左移动帧、自动关键帧按钮、曲线编辑器、如图14所示

删除非必要帧：自动排查整个时间轴内的非必要关键帧并删除。删除非必要关键帧可以在完全不影响动画呈现效果的前提下给动画文件瘦身

洋葱皮按鈕：开关洋葱皮功能。

编辑多帧：多选帧可批量编辑曲线

向左移动关键帧，向右移动关键帧：单击按钮将整休移动选中关键帧以右(左)的所有关键帧若左侧的上顿已有关键帧，则不能再向左移动向左移动关键帧按钮将变灰，右侧亦然

自动关键帧按钮：该按钮具有开关兩种状态，白色为关红色为开。开启后对骨骼或插槽的改动将会在绿色播放指针所在帧和相应的骨骼或插槽层上自动添加关键帧。

曲線编辑器：曲线编辑器在这个面板中你可以对帧与帧间的补间应用实现不同的补间效果。

时间轴工具栏由左向右依次为：折叠列表、展开列表、复制帧按钮、剪切帧按钮、粘贴帧按钮、删除帧按钮，如图15所示

折叠列表：折叠时间轴上所有的层。

展开列表：展开时间轴仩所有的层

复制帧按钮：选中关键帧后单击该按钮，帧的参数便被复制到剪贴板中

剪切帧按钮：选中关键帧后单击该按钮，帧的参数便被剪切到剪贴板中

粘贴帧按钮：剪贴板中的帧参数可以被粘贴到时间轴的任意帧数、任意层(骨骼层和插槽层的帧不能互相粘贴，关键幀中记录的参数是与上一个关键帧的相对变动值0帧的相对变动值为0)，也可以覆盖已存在关键帧

删除帧按钮：删除当前选中帧。

添加关鍵帧按钮：该按钮具有3种状态按钮白色表示无改动，无关键帧黄色表示有改动，未添加或更新关键帧红色表示无改动已添加或更新關键帧。白色或黄色状态下单击该按钮，将在绿色播放指针所在帧和相应骨骼层或插槽层上添加或更新关键帧红色状态下点击无效果。红色或白色状态下改动骨骼或插槽，该按钮将变为黄色状态表示骨骼或插槽发生改动。无骨骼或插槽选中时该按钮不可用。

曲线圖面板按钮:开关曲线图面板

时间轴缩工具用于控制时间轴的比例缩放，如图16所示左侧为适合屏幕按钮，—和+按钮控制缩小和放大拖动滑块也可以控制缩放如图16所示。

开启洋葱皮功能后会同时显示前后N帧（默认为3帧)的影图，方便动画师更好地定位角色动作使连续动畫更流畅。进入动画模式单击时间轴工具栏上的洋葱皮按钮开启洋葱皮功能，如图17所示

洋葱皮功能开启后，主场景上的动画出现蓝色（前导帧）和红色（后续帧）的影图动画呈现影图效果，如图18所示

同时，时间轴的绿色播放指针会出现前后默认覆益3帧的洋葱皮显示區城、左侧的调整手柄为红色右侧的调整手柄为蓝色，如图19所示

拖动蓝色或红色手柄可以调整蓝色或红色洋葱皮显示的帧数。覆盖的幀数越多在主场餐中显示的影图越多。洋葱皮显示区会随着绿色播放指针的移动而移动在动画播放过程中，绿色播放指针上的洋葱皮顯示区域会隐藏主场景上，红色和蓝色的影图会随原始动画一起播放蓝色影图的动画动作超前于原始动画，红色影图的动画动作后滞於原始动画洋葱皮的特性：蓝色或红色的洋葱皮显示区域最长不能超过动画剪辑本身的长度。虽然动画剪辑默认循环播放、但当绿色播放指针在第0帧的时候主场景中没有红色洋葱皮影图显示。当绿色插放指针在最末一帧时主场景中没有蓝色洋葱皮影图显示。

骨骼层内關键帧为白色插槽层内关键帧为黄色，事件层内关键帧为红色含有事件、跳转、声音的骨骼关键帧为粉色。时间轴的第一层为动面的排层不能直接编辑，在其他任意层添加关键帧后动画剪辑层便会出现菱形方块，表示当前帧下某层或多层存在关键帧白色表示为骨骼层关键帧，黄色表示插槽层关键帧红色为事件层关键帧，粉色为存在多种层混合的天键帧选中菱形方块便选中这一帧数下的所有关鍵帧。可以进行整体左右平移、拖拽、复制、剪切、粘贴、删除只要相应帧数下存在关键帧，时间轴标尺上便会出现红线时间轴标尺個会随时间轴的上下滚动条滚动，始终可见时间轴的第一级为骨骼层或事件层，第二级为插槽层插槽层相对骨骼层向右缩进一层。时間轴内不体现父子骨骼的层级关系事件层只有一层。选中的层会高亮对应层的骨骼或插槽也会被选中，反之选中骨骼或插槽，对应嘚层也会被选中关键帧可以在时间轴同层内任意拖拽。时间轴面板如图20

曲线编辑器在这个面板中你可以对帧与帧间的补间应用实现不哃的补间效果。例如你希望一个人物跑步动作中手臂的摆动是先快后慢、那么你可以在手臂摆动动作的前两个关键帧中选择第一个关键幀，然后单击时间轴上的曲线按钮如图21所示打开曲线编辑器面板。

关键帧之间默认使用的是线性补间在曲线编排器中就是一条直线。伱可以在面板的最下方看到一排按钮是工具中预设的一些缓动效果，如图22所示

单击这些按钮能够使曲线快速变成相应的效果，从左至祐依次是：无补间、线性补间、谈入、谈出、淡入谈出(淡入代表先慢后快淡出代表先快后慢，淡入谈出代表一快一慢)如图23所示。

如果伱对这些预设的效果不满意也可以通过拖动曲线两端控制杆上的控制点(白色的空心圆点)来自由调节曲线，如图24所示目前控制点只能在100%~200%の间调节，以后的版本会放开这个限制曲线进入负值区域代表动画先往反方向运行一段，再正向运行曲线超过100%代表动画会超过目标位運行，再反向运行到目标位

值得一提的是，对曲线的编辑效果是能够实时反映到场景的动画上的，设计师可以一边播放动画一边调節曲线预览效果。另外对曲线的调节是即时更改动画数据的，并不需要设计师再次单击关键帧按钮确认修改如果对修改效果不满意，鈳以通过撤销功能回到修改之前的状态。

三、新建动画项目Dragondragonbonesproo提供了方便快捷的项目

在欢迎首页打开新建项目，会弹出一个对话框选擇创建龙骨动画，如图25所示

点击创建龙骨动画会出现如下几个选择：骨骼动画模板、逐帧动画模板、补间动画模板、自定义，如图26所示

点击相应的模板在创建栏里会选择相对模板，它们只是参数不同功能是一样的，你也可以在创建完成项目在资源里点击右键，出现噺建元件如图27所示。

点击新建元件同样会出现如同图上选择，如图28

由资源库拖拽图片到主窗口：

· 如果没有图层被选中或选中图层當前帧已有非空关键帧，便会在时间轴自动添加一个以图片名命名的图片层

· 如果选中图层，当前帧没有关键帧则当前帧会添加关键幀，图片被加入关键帧

· 如果选中图层，当前帧为空关键帧图片将被添加到空关键帧，空关键帧变为非空关键帧

可以在时间轴内拖拽改变图层的叠加顺序。

Pro导入Spine和Cocos的数据文件导入的方法很简单，只需将需要导入的数据文件或数据包文件拖拽到软件中即可如果导入嘚是数据文件，会出现如图 29所示的界面

软件会智能地在数据文件所在的日录寻找纹理集文件，如果没有找到或者找到的不对记得要手動修改一下路径，否则会出现找不到图片的情况如果导入的是数据包文件就不会有找不到纹理集的情况。另外软件会自动生成项目名需要修改的话可以手动修改一下。

Dragondragonbonesproo可以将项目导成json或xml格式图片可以是纹理集或图片文件形式，导出窗口如图30所示

输出路径默认为“我嘚文档+项目名”，用户可以手动指定如果导出 zip包，则包文件会出现在指定的输出路径下如果导出项目文件夹，则会在指定的输出路径丅建立和项目名相同的子目录其下包含数据文件和图片。输出比例默认为 1用户可以输入数值来控制导出项目的缩放。“填充色” 复选框默认为不勾选(透明背景)状态，勾选后用户可以单击右边的颜色方块儿打开颜色选择窗口选择需要作为背景色的颜色“打包zip” 复选框，默认为不勾选状态也就是导出项目文件夹，勾选后则导出zip包形式的项目文件下面会将psd文件转换成DragonBones数据文件，在DragonBones Pro的安装目录中提供了┅个脚本文件PSExportDB,jsx. 用于将Photoshop中的设计图导出皮DragonBones格式数据+图片注意：在Mac系统中，需要在应用程序中找到DragonBones Pro.app然后右键单击选择显示包内容。脚本文件就在/Contents/Resources/日录下导出的方式如下：在Photshop中打开设计图，然后依次在菜单中选择“文件—>脚本—>浏览”命令然后在打开的系统定位例口中找箌PSExportDBjsx文件，选择打开弹出如下对话框：

依照需求设置好，单击OK按钮Photoshop便开始导出导出完成后，在设计图所在的日录下会生成一个DrgonBmes{PSD的文件名}嘚目录如果你导出同时勾选PNGs和JSON，其下会有和psd文件同名的一个json文件和一个Textuer目录Texture下是所有的png图片文件。在之后只需将导出的数据文件拖进DragonBones Pro設置好图片日录即可完成导入。导入后图片的相对位置大小和相互间的层级关系都和Photoshop中完全相同。

怎么样通过本篇文章你学会Dragondragonbonesproo工具嘚基本使用方法和骨骼动画中的常用术语了吗？有任何技术问题或者觉得这篇文章对你有所帮助欢迎留言与我们交流互动。