白鷺時(shí)代動(dòng)畫設(shè)計(jì)工具DragonBones
自我介紹一下，劉晨光，多年伴隨設(shè)計(jì)師的程序開發(fā)者，白鷺時(shí)代 DragonBones的負(fù)責(zé)人。很多人對(duì)我的自我描述感覺很奇怪。實(shí)際上由于產(chǎn)品的緣故，我接觸的更多的是設(shè)計(jì)師而非開發(fā)者，故常自嘲為“多年伴隨設(shè)計(jì)師的程序開發(fā)者”。
1 近年底，我們也在總結(jié)一年以來DragonBones的一些經(jīng)驗(yàn)和未來的發(fā)展方向。這次我想從四個(gè)方面想跟大家說一說DragonBones。
2一、產(chǎn)品定位，不忘初心
動(dòng)畫從來都是游戲中最能體現(xiàn)效果的重要組成部分，但往往動(dòng)畫制作也是游戲開發(fā)中較為頭疼的一個(gè)環(huán)節(jié)。多年的重慶影視公司從業(yè)經(jīng)驗(yàn)告訴我，對(duì)于游戲中的動(dòng)畫而言，主要存在一下幾個(gè)問題。
1、設(shè)計(jì)師很容易被游戲的技術(shù)選型所束縛，難以發(fā)揮在動(dòng)畫效果上做最大化的發(fā)揮。
2、骨骼動(dòng)畫對(duì)于可以讓游戲畫面素材提及減小，但是做起來麻煩，效率低。
3、沒有專門為移動(dòng)游戲所服務(wù)器的動(dòng)畫制作工具，大部分還是沿用以前頁游和端由的工具。
4、設(shè)計(jì)師與動(dòng)畫設(shè)計(jì)師之間的協(xié)同不理想，各種PSD文件導(dǎo)來導(dǎo)去，不勝其煩。
5、骨骼動(dòng)畫與傳統(tǒng)幀動(dòng)畫不能有效整合，放到一起使用，總有不能和諧處理的地方。
在DragonBones開發(fā)過程中，我們希望能夠從根本上解決游戲開發(fā)過程中動(dòng)畫部分的瓶頸。對(duì)于上面的五個(gè)問題，我們通過不同的方法進(jìn)行逐一攻克。
1、統(tǒng)一的動(dòng)畫數(shù)據(jù)格式：DragonBones定義了一套完整的動(dòng)畫數(shù)據(jù)格式，這樣便可以適用于任何工具，以及任何引擎。在工具方面，我們支持DragonBones Pro(獨(dú)立動(dòng)畫編輯器)和DragonBones DesignPanel(基于FlashPro的骨骼動(dòng)畫制作插件)。而程序方面，我們擁有多語言版本的動(dòng)畫程序庫(DragonBones Library)。這樣，動(dòng)畫設(shè)計(jì)師可將精力放置與DragonBones中，而無需關(guān)心程序是否能夠完整還原所設(shè)計(jì)的動(dòng)畫。
3
2、DragonBones Pro：這是一個(gè)完整的獨(dú)立動(dòng)畫編輯器，專門為動(dòng)畫編輯所準(zhǔn)備，更加適合游戲中動(dòng)畫制作。
3、專門為移動(dòng)游戲優(yōu)化：DragonBones無論在功能的設(shè)計(jì)上，還是程序庫的優(yōu)化上，都針對(duì)移動(dòng)設(shè)備做了大量?jī)?yōu)化，保證在不同手機(jī)中維持一個(gè)理想的性能狀態(tài)。
4、插件系統(tǒng)：我們所提供的插件可以將PhotoShop中設(shè)計(jì)好的圖片直接導(dǎo)出為DragonBones Pro項(xiàng)目文件，然后直接編輯。我們的一些插件可提供對(duì)Spine、Cocos等格式的支持，可以方便做工具遷移。
5、普通動(dòng)畫支持：DragonBones Pro不僅僅可以制作骨骼動(dòng)畫，亦可以制作逐幀動(dòng)畫。與此同時(shí)，在動(dòng)畫程序庫中，兩種不同的動(dòng)畫形式可以進(jìn)行嵌套操作，這極大的增強(qiáng)了兩種形式的動(dòng)畫相互融合。
說了這么多，從動(dòng)畫原型設(shè)計(jì)，到素材設(shè)計(jì)，再到動(dòng)畫制作，最終由程序在游戲中實(shí)現(xiàn)，我們能夠做到一個(gè)“跨引擎”的動(dòng)畫制作流程，我們將這個(gè)流程總結(jié)為一句話便是，DragonBones是為移動(dòng)開發(fā)者服務(wù)動(dòng)畫制作完整工作流產(chǎn)品。
二、時(shí)刻不忘取悅用戶
很多人對(duì)這句話的理解都是用戶想要什么我們就給什么，大而全則好。我則不這么認(rèn)為。需求永遠(yuǎn)都不可能存在盡頭，重慶動(dòng)畫制作而將這些全部變?yōu)閷?shí)實(shí)在在的功能，則是拖累用戶，讓產(chǎn)品變得愈加臃腫。DragonBones則一直秉承為快不破，動(dòng)畫制作應(yīng)該再簡(jiǎn)單一些，再方便一些，考慮的再少一些，而不是一味的堆砌功能。這部分我想將幾個(gè)產(chǎn)品中的功能詳細(xì)說說。
1、時(shí)間軸：經(jīng)過多年的洗禮，我相信絕大部分動(dòng)畫視頻制作類軟件都由時(shí)間軸的概念。Adobe的部分產(chǎn)品則更是將時(shí)間軸發(fā)揚(yáng)光大。但DragonBones則對(duì)時(shí)間軸功能一剪再剪，其目是讓用戶所看所用到的東西是正確的東西。以Flash為參考，F(xiàn)lash是模擬翻頁動(dòng)畫，幀與幀之間沒有時(shí)間，這是正確的思路。但目前動(dòng)畫制作的主流需求應(yīng)該是點(diǎn)與點(diǎn)，譬如循環(huán)動(dòng)畫第二次循環(huán)要去掉開始的重復(fù)幀，如此才擁有更完美的動(dòng)畫表現(xiàn)，DragonBones的時(shí)間軸是按照節(jié)奏制作和呈現(xiàn)的，設(shè)計(jì)師所看到動(dòng)畫點(diǎn)才是他們所關(guān)心的內(nèi)容。
4
2、骨骼體系：比較重要的功能就是骨架嵌套，以及支持同骨骼的序列幀動(dòng)畫。如果沒有骨架嵌套，很多動(dòng)畫效果也可實(shí)現(xiàn)，但是制作成本卻要翻倍。譬如游戲中人物與其手上的武器，傳統(tǒng)的是做成單個(gè)角色，這樣人物動(dòng)畫中的動(dòng)作極為單一，而DragonBones是將人物與武器做成兩個(gè)角色，嵌套在一起，如此可以產(chǎn)生更豐富的動(dòng)作和動(dòng)畫。所以骨架嵌套嵌套功能孕育而生，這也是為設(shè)計(jì)師效率所考慮。
3、反向動(dòng)力學(xué)約束：所有人都不愿意看到一個(gè)游戲中人物的動(dòng)作如僵尸般僵硬。但大部分人應(yīng)該知道，人物的動(dòng)作想要鋼筋有力，亦或是飄飄欲仙，都需要?jiǎng)赢嬙O(shè)計(jì)師不停的微調(diào)，反復(fù)修改每一個(gè)關(guān)節(jié)的運(yùn)動(dòng)狀態(tài)，這是極為耗時(shí)和考驗(yàn)?zāi)托牡墓ぷ鳌６聪騽?dòng)力學(xué)約束可以幫助設(shè)計(jì)師在動(dòng)畫調(diào)整過程中幫助想關(guān)聯(lián)關(guān)鍵做出正確的位置移動(dòng)。譬如人在站立，需要上身動(dòng)腳不動(dòng)，在DragonBones中將人物上下半身分割，并且在下半身嵌套入游戲場(chǎng)景，簡(jiǎn)單的操作即可實(shí)現(xiàn)。
4、蒙皮動(dòng)畫：很抱歉，在本文撰寫時(shí)，你能看到的版本還不包含該功能。但我總是喜歡將一些好的東西提前分享給大家。蒙皮動(dòng)畫解決開發(fā)者做柔體動(dòng)畫的需求，無論是飄揚(yáng)的紅旗還是隨風(fēng)而動(dòng)的戰(zhàn)袍，都可以通過蒙皮動(dòng)畫解決。
DragonBones Pro這個(gè)獨(dú)立骨骼動(dòng)畫編輯器，實(shí)際上也即是設(shè)計(jì)師工具。它具備目前動(dòng)畫師需要的幾乎所有功能，而除了上述的重要功能之外，DragonBones最大的特點(diǎn)毫無疑問是可視化編輯，如同PS一樣，動(dòng)畫師在制作動(dòng)畫的過程中能夠做到所見即所得。
到現(xiàn)在DragonBones不只是單純用于制作游戲動(dòng)畫，也可以像Flash那樣制作廣告動(dòng)畫和其它交互內(nèi)容。
三、取之于民當(dāng)用之于民
事實(shí)上DragonBones年齡要比Egret大兩歲，在加入Egret之前，DragonBones第一個(gè)公開發(fā)布的版本是在2012年十月的1.4版本，它最主要的是打通了在Flash做動(dòng)畫，然后搭建了從設(shè)計(jì)師(動(dòng)畫)到開發(fā)者(游戲)的工作流。接下來重要的是2.0版本，這個(gè)版本基于動(dòng)畫功能做了大量的升級(jí)，譬如可以做動(dòng)畫融和，動(dòng)畫之間自動(dòng)柔和的過渡。3.0版本正式加入到了Egret體系中，在推出DragonBones3.0基礎(chǔ)是JS版本，不過他全面支持各類語言，譬如C++版本支持Cocos、C#支持Unity，而它的核心是制作移動(dòng)游戲的動(dòng)畫體系。今年推出的4.1版本推出了極速模式，其性能比同類產(chǎn)品提升了30%左右，譬如Spine，并且其包體容量在同類產(chǎn)品可能是最小的。
到目前位置，DragonBones的程序庫很多修改維護(hù)仍來源于社區(qū)貢獻(xiàn)，與此同時(shí)，我們也一直在與設(shè)計(jì)師進(jìn)行溝通反饋，時(shí)刻了解設(shè)計(jì)師在使用過程中的需求與反饋。內(nèi)部是我們最容易接觸的第一手渠道，其次我們會(huì)關(guān)注來自QQ群，論壇和開發(fā)者沙龍上所搜集的反饋，根據(jù)需求指定功能，隨后確定優(yōu)先級(jí)，逐一完善。
四、用開放的心態(tài)繼續(xù)前行
一開始已經(jīng)說過，DragonBones一直圍繞動(dòng)畫服務(wù)，在未來，設(shè)計(jì)師做的動(dòng)畫，不僅僅可用于游戲。同時(shí)還可以應(yīng)用于其他領(lǐng)域。譬如，可以直接打包發(fā)布，增加互動(dòng)類功能，可以通過DragonBones制作動(dòng)畫效果豐富的互動(dòng)類廣告。在游戲動(dòng)畫制作這個(gè)方向上，給予功能和性能上的全面提升，并且在性能上全面支持WebGL，提供硬件加速。
對(duì)于不同維度用戶，DragonBones會(huì)提供常用的模板，同時(shí)跟云端的服務(wù)相結(jié)合，打通白鷺商城，使得美術(shù)素材、模板無縫結(jié)合。
文章的最后，還想提及一個(gè)事情，我們非常希望動(dòng)畫設(shè)計(jì)師能夠體驗(yàn)使用我們的產(chǎn)品，給予我們更多的反饋。而近期，我們重慶多媒體制作開發(fā)者服務(wù)平臺(tái)推出了一項(xiàng)尋找“精英動(dòng)畫師，優(yōu)秀動(dòng)畫DEMO征集”的活動(dòng)，與此同時(shí)，D5Power 、CGjoy也其平臺(tái)和論壇推出了基于DragonBones制作作品的專項(xiàng)賽事。
歡迎動(dòng)畫師們使用DragonBones制作動(dòng)畫，時(shí)下DragonBones正在征集優(yōu)秀DEMO，希望動(dòng)畫師或開發(fā)者們提供優(yōu)秀作品。我更希望開發(fā)者與動(dòng)畫師們一起參與到DragonBones未來的產(chǎn)品設(shè)計(jì)中來，這也是白鷺時(shí)代一直堅(jiān)持的理念。
5關(guān)于DragonBones
DragonBones最初由Adobe公司于2012年10月主導(dǎo)開發(fā)設(shè)計(jì)的一款專門用于游戲中骨骼動(dòng)畫制作的FLASH插件。是目前公認(rèn)的全球最早的骨骼動(dòng)畫工作流解決方案。一經(jīng)推出就受到了眾多游戲開發(fā)設(shè)計(jì)者的歡迎和追捧。而在此后，白鷺時(shí)代作為HTML5移動(dòng)游戲新生代企業(yè)，接過了DragonBones維護(hù)、運(yùn)營(yíng)和更新迭代的任務(wù)，重慶多媒體并在2014年正式將其納入白鷺時(shí)代Egret產(chǎn)品序列。目前不少游戲產(chǎn)品的動(dòng)畫系統(tǒng)都是在基于DragonBones基礎(chǔ)上設(shè)計(jì)開發(fā)的。風(fēng)靡中國(guó)的動(dòng)作卡牌手機(jī)游戲《刀塔傳奇》就是其中的一員。欲知更多詳情，請(qǐng)登陸白鷺時(shí)代官方網(wǎng)站
