【莉莉丝研习社】第41期 速度与激情——DragonBones的设计理念与应用

本期研习社邀请到白鹭时代的技术大牛与大家分享其自主研发DragonBones（龙骨）的设计理念和大量实际应用案例，共同探讨了H5生态中骨骼动画的创作与实操。...

（本文根据刘晨光、苏魁、段春雷在莉莉丝研习社的演讲整理而成，有删节）

分享者

刘晨光（白鹭技术总监）｜苏魁（白鹭技术主管）｜段春雷（白鹭高级工程师）

分享实录：

刘晨光：

大家好，很高兴能来莉莉丝和大家分享！

骨骼动画的优势有哪些呢？

原生Flash动画是矢量动画，在移动设备上渲染效率低。而骨骼动画是将复杂的动画拆解成碎图，再打包成纹理集，能够充分利用移动设备GPU的渲染能力。另外，跟序列帧相比，能够大幅减少资源包体大小。DragonBones的背景

DragonBones于2012年10月问世，是全球最早的基于Flash，可硬件加速的2D骨骼动画解决方案，借助Flash Pro这个大家都熟悉的动画设计工具，制作面向移动端的游戏动画。

2015年发布第一版4.0，增加专门制作骨骼动画的设计模式；

2015年9月发布4.1版本，支持使用类Flash的操作习惯制作影片剪辑动画（非骨骼动画）；

今年7月，增加了IK网格，自由变形，柔体动画等等能够制作刚刚看到的动画效果的功能；

今年9月，完善各大引擎的支持Unity Cocos二进制数据格式进一步优化性能。

下面由苏魁为大家详细介绍这个工具包含的功能和设计理念。

苏魁：

各位帅哥美女，大家下午好！非常高兴能来这里和大家分享DragonBones的一些设计和应用。



说到速度就是一个字——快。在游戏圈里广为流传的一句真理就是，天下武功唯快不破，所以整个DB的设计也是围绕着“快”来展开。它的“快”不仅体现在制作动画速度快，运行起来效率高，而且还体现在制作过程中的乐趣和快感。

DragonBones从以下几个方面诠释了“快”字。

第一，适用性广，可以制作多种类型的动画；

第二，个性化，人性化；

第三，学习成本低，资源多；

第四，工作流完善；

第五，持续改进。

DragonBones支持制作骨骼动画，基本动画，动态漫画这三种动画类型。

骨骼动画

骨骼动画首先有一张图，这个图是由很多部分的小图组成的，有一个骨骼，我们先让骨骼能动起来，把它们结合在一起，这样就形成了最基本的骨骼动画。



在骨骼动画当中，有一个骨架模式，这里展示了制作骨架的流程，通过拖拽可以建造一个基本的人形骨架，骨架制作完了之后就开始制作动画，这边演示的是一个制作动画的基本流程，下面有一个时间轴，通过简单的修改骨骼的旋转、位置变化。

骨骼动画内容特别丰富，效果逼真。

我们推荐制作骨骼动画的流程是先在Photoshop里面把图画好，然后导入到DragonBones里面，接着创建骨骼，骨骼与图片绑定，如果有必要的话要制作mesh，蒙皮和IK，在骨骼状态下摆好基础的pose，切换到动画模式下制作动画，最后导出成所需要的数据格式。基本动画

基本动画实际是我们仿照Flash的工作流程制作出来的动画形式。



左边是制作Flash的界面，右边是DragonBones制作基本动画的界面，可以看出来两个非常像。我们从界面和操作方式上都尽量向Flash上靠，照顾了flash用户的需求，几乎可以不用学习，就能非常快的上手。

基本动画里面，我们把骨骼隐藏起来了，所有的操作都基于图片来操作，对刚学习动画的朋友们来说更为简单。

基本动画的工作流程是先在Photoshop里面画好，然后导到DragonBones里面，把图片从库里拖到场景当中，制作动画，最后导出，整个过程基本跟做Flash动画是一模一样的。动态漫画

这是我们为漫画作者设计的一种动画形式，可以通过简单的几个步骤让原本是静态的漫画有一些动态的效果。

这边是动态漫画的界面，我们在这里把时间轴的设计去掉了，这样就更大的减少了学习成本，可以让从来没有接触过动画的制作者很快的上手。

动态漫画的流程是在Photoshop里面画好之后导入到DB，然后给图片添加动态效果，最后发布。

骨骼动画，基本动画还有动态漫画这三种动画的工作流越来越简单。

这是我们针对不同需求的用户，和不同水平的用户设计的，不管是小白用户还是高级的动画师都可以体验到制作动画的乐趣。

我们讲的个性化和人性化从布局里面就可以体现出来，刚才说到我们有非常多的动画类型，那么制作的时候他们的步骤可能也是不一样的，这时候对布局的设计要求就非常高，我们在这个布局上花了大量的时间去调研，然后让不同类型的使用者用起来都非常舒服。

如果这些默认的布局不能满足你的需求，也可以通过拖拽的方式自定义布局。我们的布局会帮你默认保存下来，下次打开还是你上一次的布局。

学习资料也是非常广泛的，不同水平的设计者都可以找到他想要的学习资料，如果你是初级的学习者，可以使用视频教程或者欢迎页里面的例子来研究学习动画的制作。

如果你是入门的制作者，可以参考用户手册，或者在软件里面给我们进行问题反馈，还有QQ群和论坛跟我们直接做交流。

如果你是比较熟练的设计师，你可以使用各种插件，还可以在意见收集的网页里面提出自己的需求，我们会根据大家的意见持续的改进。

如果你是一个大师级的设计师，我们推荐你把你的作品上传到我们在线商店里面，让更多人膜拜你，甚至把你的作品换成钱。高级特性

第一是IK，IK是反向动力学，和它相对的是正向动力学，FK。



现在看到的是FK的效果，父骨骼会带动子骨骼运动，我们可以理解为肩膀的运动带动手臂的运动。



这个是IK的效果，和fk正好相反，子骨骼的运动会带动父骨骼的运动，比如拳头的运动会带动小臂的运动。人的四肢特别适合用ik来制作，可以节省很多时间成本。



第二是mesh，Mesh就是把一个图片画成一个个的三角形网格，这样的好处就是可以实现ffD（自由变形）。

通过调整三角形网格顶点的位置，随意的改变图的形状。这个技术是从3D里面学来的，熟悉3D的同学应该知道。

第三是蒙皮，蒙皮实际上是对mesh的另外一种应用，它是把mesh绑定上骨骼，他可以绑定一个或者多个骨骼，绑定完之后，通过调节权重，权重就是对点影响的强弱。



制作蒙皮首先你得有一张图，把这个图变成三角形网格，变成mesh，然后有一个骨骼，把骨骼和mesh绑定在一起，调节它的权重。最右边这张图上彩色的小点就表示了骨骼对它影响的强弱。做出来之后我们可以看到皮肤的拉伸和收缩的效果。我们的一些设计



首先是对控制手柄的设计，我们希望在一个界面里，可以同时实现旋转，移动，缩放这三种变换的操作。

我们分析在制作骨骼动画的过程中，对旋转的操作用的最多，然后是移动，缩放用的最少。所以我们设计的时候旋转的操作范围是最大的，图片以外所有的操作都是旋转的操作。

鼠标右键单击时取消选择，右键拖拽是拖拽画布，使用滚轮是缩放画布。这样用一只手就可以完成大部分常用的操作，另外一只手就可以腾出来按快捷键。

其次是自动绑定的功能，在制作骨骼动画中，有个步骤是把骨骼和图片绑定起来，如果是做的比较精细的动画，拆的比较散，图片的数量很多，那一个个绑起来是非常费劲的。我们就设计了这个自动绑定功能，图片导入进来后，一边画骨骼，一边自动就会选择最合适的图片绑在一起，在理想状态下，骨骼画好后，绑定也做完了。



第一是pose工具，在制作飘带啊，头发啊这类条状的动画时候非常有用，可以节省很多时间。如果是传统制作动画的方式，会非常麻烦，但如果用pose工具，可以很简单的做出非常流畅，非常符合自然规律的效果。

第二是继承控制，我们在做骨骼动画的时候，基本上父骨骼会控制子骨骼的运动，有的时候我们需要把父子继承的关系断开，只移动本身的骨骼，就会用到继承控制这个功能，调整完后，还可以把他们的父子关系建立起来。

第三是编组选择，Ctrl+数字可以进行编组，给骨骼进行选择编组，把常用的选择分成组，这样按数字键可以快速切换不同的选择的区域。

第四是快速筛选功能，当我们做一个骨骼动画特别复杂的时候，我们很难选中它，这时候使用快速筛选功能，可以非常快速选择到你想要的目标。

第五是支持纹理集，我们做游戏的时候最常用的一个技巧就是把散图放在一张图上，这样可以节省资源、空间。我们这个工具是支持纹理集的，只要有一个配置文件，有一张大图，把它导入进来之后，我们在库里面可以自动把这些小图都分散开来，非常有利于已经做好了一个骨骼动画，进行二次编辑的时候，非常有用。



第六是关键帧操作的多选，框选，缩放。做传统动画时一个比较重要的步骤是做关键帧的绘制，绘制完之后我们需要在两个关键帧之间来填充过渡，只要把关键帧打好之后，我们选择之后可以进行对关键帧的缩放，通过缩放我们可以快速的对关键帧之间产生过渡，如果我们想要做快放或慢放功能，通过这个缩放就可以实现。

DragonBones里面支持的数据非常多，不管是用Flash做的东西，还是Photoshop里面画的图，还是cocos里面做的动画，都可以导入到DB里面进行二次加工。另外我们对程序员特别友好，可以导出各种各样的数据格式，不仅能够导出DB特有的数据格式，也支持Egret Movieclip格式，还支持序列帧。支持的引擎也很多，比如egret，h5，cocos，unity和starling。

关于对引擎的支持是由我们的运行库来完成的，有关这部分的讲解欢迎段春雷来为大家讲解。

段春雷：

大家好，很高兴跟大家分享，接下来我向大家介绍一下龙骨运行时的功能和特点。

下面我从动画运行时的动画、换装、骨骼控制以及性能、多平台这几个方向来介绍运行时的特点。动画融合

第一，它可以让动画在各个状态之间切换的时候不是立即切换，而是淡入淡出的效果，这样可以平滑过渡每一个动画的切换；

第二，节约动画设计师的时间。比如在走路或者攻击的时候，有可能要切换到一个其他的动作，在2D动画里，如果不采用这种动画融合的技术是很难实现的，而通过动画融合的特点，可以不用设计师做动画融合的效果，直接通过程序来实现，这也能提升游戏的品质；

第三，动画融合可以灵活运用，实现简单。比如我们可能从状态1切换到状态2，也可能从状态3切换到状态4，反复切换，中间是无序的，传统做法只能是使用补间 Tween 或让动画设计师制作穷举动画，不仅效果不好，还费时费事，而使用动画融合却非常简单，一行代码搞定，切换的状态还会非常连贯平滑，不管切换的多快都不会有卡顿。动画混合

2D动画里面有各种各样的状态，平时一个游戏角色大多数情况都只需要一个动画状态，但如果对人物动画的表现要求较高的话，其实可以使用动画混合的技术。

比如说机器人有走路的动画状态，向上瞄准和向下瞄准的动画状态，如何能实现机器人一边走路一边瞄准？这就需要把走路和瞄准的动画同时播放，然后通过控制混合的模式以及其他几个属性（骨骼遮罩、权重、播放速度）来实现这个效果。基本事件

第一是动画事件，包括动画开始，淡入淡出，结束。

第二是声音事件，为什么要单独支持声音事件？因为声音事件由单独的管理器来处理，这样可以在游戏开发的时候很简单的在一个管理器里面把所有声音事件处理。

第三是自定义事件，这完全是设计师来做的，不需要程序员去关心。动画共享

动画共享比模型的皮肤更加灵活，对骨架的要求也很低，只要骨架的名字相同就可以。这有什么好处呢？比如在做怪物的时候，把某一类怪物的动作都在这个模板里完成，之后所有其他怪物的角色都只需要做骨架，套用模板里面的所有动作。设计师可以很容易的完成大量的同类似角色的动画，而且程序员也会非常容易使用，不会出现工作流断接的问题。换装

在龙骨里面有很多种方案可以换装，如果大家使用过Flash Pro的话，在Flash Pro里面有一种比较经典的设计模式，可以嵌套，通过灵活的控制子骨架的动画，可以实现很多效果。插槽的状态切换

插槽里面可以有很多的其他显示对象，比如图片，mesh，子骨架，甚至也可以是空，在不需要显示任何东西的时候，隐藏一些图片。在程序里，这些动态也是可以控制的。

程序员和设计师配合使用控制子骨架的动画和插槽状态切换，可以很简单的实现类似换装的效果，但是有个缺陷，就是所有更换的状态需要设计师提前预置到动画里，可是位置在哪儿我们是不知道的。有一个更好的方案，就是委托龙骨管理资源，所有外部需要更换的显示对象都制作成龙骨的动画，这些动画并不需要我们进行特别复杂的加工，而仅仅要把这些武器、枪、衣服都放到龙骨工程里，我们可以分成很多工程，然后配置一个统一的替换体系。在更换的时候，除了可以更换普通的图片以外，还可以更换子骨架、网格。

骨骼控制

比如在地形上走路，或者有的时候要控制骨骼大小，旋转，我们可以看到无论怎么调节，走路的时候他的腿一定是贴合这地面的，而这只需要动态控制骨骼就可以实现了。

把动画融合，动画混合，骨骼遮罩，权重，播放速度，子骨架换装，动作控制进行综合的应用，动作不会有任何打断。性能

为了提高骨骼动画的性能，我们做了很多事情。

第一是对象池，把所有可以经常使用的对象都进行了池处理，这样初始动画不会对内存频繁的进行回收，因为回收内存会对系统造成一些卡顿，这可能会影响性能，通过对象池可以最大限度的减少回收对象的发生。

第二是动画驱动，在有大量的角色动画时，如果所有的角色动画都在运动，那就会消耗运算量，但是如果同屏有很多人，这些人物其实并没有动，这时候我们做了相当大的优化，他的运算量非常低，通过动画来驱动骨骼，只有在动画动的时候才进行运算，不动的时候就不进行运算。

第三是动画的即时缓存，可以在运行时把这一帧所有的结果计算完之后保存起来，这样在下一帧的时候就不需要计算，当然这会产生一些内存开销，但是他带来的性能提升是非常明显的。

第四是二进制动画缓存，在导出二进制缓存动画数据的时候，我们在游戏里看到的动画的每一帧之前都已经计算好了，也就是说在运行的时候完全不需要运算，这样性能会得到很大的提高。

今天分享的内容就到这里，谢谢大家！

    关注 莉莉丝研习社