白鹭时代动画设计工具DragonBones产品思路分享

自我介绍一下，刘晨光，多年伴随设计师的程序开发者，白鹭时代 DragonBones的负责人。很多人对我的自我描述感觉很奇怪。实际上由于产品的缘故，我接触的更多的是设计师而非开发者，故常自嘲为“多年伴随设计师的程序开发者”。

近年底，我们也在总结一年以来DragonBones的一些经验和未来的发展方向。这次我想从四个方面想跟大家说一说DragonBones。

一、产品定位，不忘初心

动画从来都是游戏中最能体现效果的重要组成部分，但往往动画制作也是游戏开发中较为头疼的一个环节。多年的从业经验告诉我，对于游戏中的动画而言，主要存在一下几个问题。

1、设计师很容易被游戏的技术选型所束缚，难以发挥在动画效果上做最大化的发挥。

2、骨骼动画对于可以让游戏画面素材提及减小，但是做起来麻烦，效率低。

3、没有专门为移动游戏所服务器的动画制作工具，大部分还是沿用以前页游和端由的工具。

4、设计师与动画设计师之间的协同不理想，各种PSD文件导来导去，不胜其烦。

5、骨骼动画与传统帧动画不能有效整合，放到一起使用，总有不能和谐处理的地方。

在DragonBones开发过程中，我们希望能够从根本上解决游戏开发过程中动画部分的瓶颈。对于上面的五个问题，我们通过不同的方法进行逐一攻克。

1、统一的动画数据格式：DragonBones定义了一套完整的动画数据格式，这样便可以适用于任何工具，以及任何引擎。在工具方面，我们支持DragonBones Pro（独立动画编辑器）和DragonBones DesignPanel（基于FlashPro的骨骼动画制作插件）。而程序方面，我们拥有多语言版本的动画程序库（DragonBones Library）。这样，动画设计师可将精力放置与DragonBones中，而无需关心程序是否能够完整还原所设计的动画。

2、DragonBones Pro：这是一个完整的独立动画编辑器，专门为动画编辑所准备，更加适合游戏中动画制作。

3、专门为移动游戏优化：DragonBones无论在功能的设计上，还是程序库的优化上，都针对移动设备做了大量优化，保证在不同手机中维持一个理想的性能状态。

4、插件系统：我们所提供的插件可以将PhotoShop中设计好的图片直接导出为DragonBones Pro项目文件，然后直接编辑。我们的一些插件可提供对Spine、Cocos等格式的支持，可以方便做工具迁移。

5、普通动画支持：DragonBones Pro不仅仅可以制作骨骼动画，亦可以制作逐帧动画。与此同时，在动画程序库中，两种不同的动画形式可以进行嵌套操作，这极大的增强了两种形式的动画相互融合。

说了这么多，从动画原型设计，到素材设计，再到动画制作，最终由程序在游戏中实现，我们能够做到一个“跨引擎”的动画制作流程，我们将这个流程总结为一句话便是，DragonBones是为移动开发者服务动画制作完整工作流产品。

二、时刻不忘取悦用户

很多人对这句话的理解都是用户想要什么我们就给什么，大而全则好。我则不这么认为。需求永远都不可能存在尽头，而将这些全部变为实实在在的功能，则是拖累用户，让产品变得愈加臃肿。DragonBones则一直秉承为快不破，动画制作应该再简单一些，再方便一些，考虑的再少一些，而不是一味的堆砌功能。这部分我想将几个产品中的功能详细说说。

1、时间轴：经过多年的洗礼，我相信绝大部分动画视频制作类软件都由时间轴的概念。Adobe的部分产品则更是将时间轴发扬光大。但DragonBones则对时间轴功能一剪再剪，其目是让用户所看所用到的东西是正确的东西。以Flash为参考，Flash是模拟翻页动画，帧与帧之间没有时间，这是正确的思路。但目前动画制作的主流需求应该是点与点，譬如循环动画第二次循环要去掉开始的重复帧，如此才拥有更完美的动画表现，DragonBones的时间轴是按照节奏制作和呈现的，设计师所看到动画点才是他们所关心的内容。

2、骨骼体系：比较重要的功能就是骨架嵌套，以及支持同骨骼的序列帧动画。如果没有骨架嵌套，很多动画效果也可实现，但是制作成本却要翻倍。譬如游戏中人物与其手上的武器，传统的是做成单个角色，这样人物动画中的动作极为单一，而DragonBones是将人物与武器做成两个角色，嵌套在一起，如此可以产生更丰富的动作和动画。所以骨架嵌套嵌套功能孕育而生，这也是为设计师效率所考虑。

3、反向动力学约束：所有人都不愿意看到一个游戏中人物的动作如僵尸般僵硬。但大部分人应该知道，人物的动作想要钢筋有力，亦或是飘飘欲仙，都需要动画设计师不停的微调，反复修改每一个关节的运动状态，这是极为耗时和考验耐心的工作。而反向动力学约束可以帮助设计师在动画调整过程中帮助想关联关键做出正确的位置移动。譬如人在站立，需要上身动脚不动，在DragonBones中将人物上下半身分割，并且在下半身嵌套入游戏场景，简单的操作即可实现。

4、蒙皮动画：很抱歉，在本文撰写时，你能看到的版本还不包含该功能。但我总是喜欢将一些好的东西提前分享给大家。蒙皮动画解决开发者做柔体动画的需求，无论是飘扬的红旗还是随风而动的战袍，都可以通过蒙皮动画解决。

DragonBones Pro这个独立骨骼动画编辑器，实际上也即是设计师工具。它具备目前动画师需要的几乎所有功能，而除了上述的重要功能之外，DragonBones最大的特点毫无疑问是可视化编辑，如同PS一样，动画师在制作动画的过程中能够做到所见即所得。

到现在DragonBones不只是单纯用于制作游戏动画，也可以像Flash那样制作广告动画和其它交互内容。

三、取之于民当用之于民

事实上DragonBones年龄要比Egret大两岁，在加入Egret之前，DragonBones第一个公开发布的版本是在2012年十月的1.4版本，它最主要的是打通了在Flash做动画，然后搭建了从设计师（动画）到开发者（游戏）的工作流。接下来重要的是2.0版本，这个版本基于动画功能做了大量的升级，譬如可以做动画融和，动画之间自动柔和的过渡。3.0版本正式加入到了Egret体系中，在推出DragonBones3.0基础是JS版本，不过他全面支持各类语言，譬如C++版本支持Cocos、C#支持Unity，而它的核心是制作移动游戏的动画体系。今年推出的4.1版本推出了极速模式，其性能比同类产品提升了30%左右，譬如Spine，并且其包体容量在同类产品可能是最小的。

到目前位置，DragonBones的程序库很多修改维护仍来源于社区贡献，与此同时，我们也一直在与设计师进行沟通反馈，时刻了解设计师在使用过程中的需求与反馈。内部是我们最容易接触的第一手渠道，其次我们会关注来自QQ群，论坛和开发者沙龙上所搜集的反馈，根据需求指定功能，随后确定优先级，逐一完善。

四、用开放的心态继续前行

一开始已经说过，DragonBones一直围绕动画服务，在未来，设计师做的动画，不仅仅可用于游戏。同时还可以应用于其他领域。譬如，可以直接打包发布，增加互动类功能，可以通过DragonBones制作动画效果丰富的互动类广告。在游戏动画制作这个方向上，给予功能和性能上的全面提升，并且在性能上全面支持WebGL，提供硬件加速。

对于不同维度用户，DragonBones会提供常用的模板，同时跟云端的服务相结合，打通白鹭商城，使得美术素材、模板无缝结合。

文章的最后，还想提及一个事情，我们非常希望动画设计师能够体验使用我们的产品，给予我们更多的反馈。而近期，我们白鹭开发者服务平台推出了一项寻找“精英动画师，优秀动画DEMO征集”的活动，与此同时，D5Power 、CGjoy也其平台和论坛推出了基于DragonBones制作作品的专项赛事。

欢迎动画师们使用DragonBones制作动画，时下DragonBones正在征集优秀DEMO，希望动画师或开发者们提供优秀作品。我更希望开发者与动画师们一起参与到DragonBones未来的产品设计中来，这也是白鹭时代一直坚持的理念。

关于DragonBones

DragonBones最初由Adobe公司于2012年10月主导开发设计的一款专门用于游戏中骨骼动画制作的FLASH插件。是目前公认的全球最早的骨骼动画工作流解决方案。一经推出就受到了众多游戏开发设计者的欢迎和追捧。而在此后，白鹭时代作为HTML5移动游戏新生代企业，接过了DragonBones维护、运营和更新迭代的任务，并在2014年正式将其纳入白鹭时代Egret产品序列。目前不少游戏产品的动画系统都是在基于DragonBones基础上设计开发的。风靡中国的动作卡牌手机游戏《刀塔传奇》就是其中的一员。