2D骨骼動畫工具DragonBones的使用教程

怎樣用更少的美術成本創造出更生動的動畫效果？今天就為大家介紹一套開源的2D骨骼動畫框架和工具——DragonBones，它包含了桌面骨骼動畫制作工具DragonBonesPro和一套多語言版本的DragonBones骨骼動畫庫。

下面為大家介紹DragonBones的常用術語和使用方法。

一、DragonBones 2D骨骼動畫中的常用術語
骨架：骨架Armature,是2D骨骼動畫中最常用的名詞，一般指的是由很多骨骼組成的一個整體。DragonBones中同時代表一個可以包含動畫的角色。

骨骼（骨頭）：骨格或骨頭Bone,是骨骼動網中組成骨架的最重要的一個基礎單元。骨頭自身不能拆解，在骨架中可以進行相對的平移、旋轉、縮放、運動，組合起來就形成了骨格動畫。另外骨骼之間可以有父子關系。一般來說，在默認正向動力學的情況下，父骨骼運動會帶動子骨骼一起運動、比如一個人物舉起大臂，那小臂作為大臂的子骨骼，也會隨之被抬起。

插槽：插槽是骨骼動畫中顯示圖片的容器，隸屬于骨骼。每個插槽可以包含多張圖片，但是同一時間只顯示一張圖片。每個骨格可以包含多個插槽。插槽鏈接了骨骼這個動畫邏輯單元和圖片這個動畫顯示單元，組成了骨骼-插槽-圖片，這個DragonBones骨骼動畫中的基本骨骼結構。

圖片(紋理)：圖片就是顯示圖像的元素，在2D骨骼系統中，圖片和紋理的意義區別不大，所以這里也可以叫紋理。

紋理集：紋理集是將圖片打包之后組成的大圖，方便資源整合傳播和在游戲中加載，使用硬件加速引擎或者Egret Runtime 的話，紋理集能大幅度提高渲染效率。所以DragonBones默認提供的導入資源的接口就是用紋理集。

動畫補間：一般設計師在做骨骼動畫的時候，并不需要在每幀都為角色擺動作，而只是在一些關鍵的地方(關鍵幀)擺出關鍵的動作，關鍵動作之間全部由程序生成的補間代替，這就是動畫補間。動畫補間可以是線性的也可以是非線性的。線性補間意味著補間上的元件是勻速變換的(平移、旋轉、縮放)。非線性補間般由各種曲線表示，DragonBones 中默認使用貝塞爾曲線表示非線性補間。

動畫過渡：動畫過渡是指從一個動畫切換到另一一個動畫時，產生的過渡效果。DragonBones提供了動畫動面切換時的過渡效果功能，只要設置一個過渡時間，就能自動生成平滑的過渡效果。

動畫融合：動面融合提供了一個角色同時播放多個動畫的功能。這個功能一般會在兩種情況下使用。第1種是如一個人物角色動畫比較復雜，可能需要上半身和下半身分別做動畫設計，然后可以任意組合。第2種是如需要個角色在跑步的同時中彈，身體后仰，也就是同時插放跑步和中彈的動畫。動畫融合的功能通過給不同的動畫設置權值，給不同的骨路增加動畫遮罩來實現這兩種需求。需要注意的是DragonBones只有普通模式提供了動畫融合的功能，極速模式是不提供這個功能的。

正向動力學(FK)和反向動力學(IK)：在骨骼動畫中，一般來講，子骨骼的運動會受到父骨骼的影響，例如大臂旋轉，小臂也會跟隨旋轉，這叫作正向動力學，也就是父親影響孩子。當然現實世界也存在反過來的情況，例如有入打你一拳，你用小臂去阻擋，那小臂受力運動的同時也會帶動大臂一同做受力運動，這叫作反向動力學。在DragonBones中控制骨路調節動作的時候，一般情況骨骼是符合正向動力學規律的，也就是調節父骨骼，子骨骼也會受影響。如果希望通過反向動力學調節動畫，可以選選擇相應的IK工具來實現。

首先，安裝完成后打開歡迎界面，選擇項目，如圖1所示。

圖1

然后打開你所選擇的項目，如圖2所示。

圖2

接下來為大家解讀圖2中各項工具的使用方法
1.系統工具欄
系統工具欄包含最常用的幾個功能，從左到右的按鈕功能依次是：新建項目、打開項目、保存項目、撤銷、重做、導入、導出、預覽作品分享，如圖3所示。

圖3

· 新建項目：用于新建一個項目 ,單擊該按鈕打開新建項目對話框。
· 打開項目：用于打開一個已有項目，單擊該按鈕打開系統指定文件對話框。
· 保存項目：如果當前的項目有更改，保存項目按鈕將亮起，單擊該按鈕后將保存當前項目，項目保存后，保存項目按鈕暗掉。
· 撤銷：用于撤銷上一次的編輯操作。
· 重做：用于重做上一次撤銷掉的編輯操作。
· 導入：用于導入一個支持的項目文件格式，單擊該按鈕將打開導入對話框
· 導出：用于導出項目。單擊該按鈕將打開導出對話框。
· 預覽：在瀏覽器中預覽動畫的運行效果。如果項目包含多個動畫剪輯，可以在瀏覽器中單擊鼠標左鍵來切換。
· 作品分享：打開作品分享上傳頁面。

2. 主場景工具欄
   主場景工具欄用于場景操作中鼠標模式的切換，由左到右依次為:選擇工具、Pose工具、手型工具、創建骨骼工具，如圖4所示。

圖4

· 選擇工具：選中骨骼時，鼠標單擊骨骼本身，按住左鍵移動，可以在X、Y方向任意移動骨骼。鼠標單擊紅色X軸(或綠色Y軸)可以在單一X軸(Y軸)方向上平移。鼠標拖動插槽內的圖片本身，按住左鍵移動，可以在X、Y任意方向上移動骨骼。鼠標單擊紅色X軸(或綠色Y軸)可以在單X軸(Y軸) 方向上平移。鼠標拖動縮放手柄可以縮放插槽。鼠標單擊并按住其他區域時可以旋轉插槽(插槽只有在骨架裝配模式下可以被選中并改變狀態)。
· Pose工具：選中一個骨骼時，骨骼會跟隨著鼠標的拖拽旋轉。復選兩根或以上骨骼時，選中的骨骼會遵循IK規則，跟隨著鼠標的拖拽。
· 創建骨骼工具：選中創建骨骼工具，在主場景中單擊鼠標左鍵并拖拽便可創建骨骼。另外在主場景中還支持一些常用操作：
推拉鼠標滾輪便可以縮放DragonBones Pro的場景。
鼠標處于選擇工具或手型工具時，左鍵雙擊任意處， 場景大小便恢復到100%。
右鍵單擊任意區域取消選擇。
· 權重工具：權重表示了蒙皮受到不同骨骼形變影響的占比，合理分配好每個蒙皮頂點的權重至關重要。

3.可見可選過濾面板
可見可選過濾面板用于打開和關閉骨骼和插槽的可見、可選、是否繼承編輯的開關，如圖5所示。

圖5

· 可見：打開時，骨骼或插槽在主場景中可見；關閉時，骨骼或插槽在主場景中不可見。
· 可選：打開時，骨骼或插槽在主場景中可以被選中；關閉時，骨骼或插槽在主場景中不可以被選中。
· 繼承：打開時，骨骼或插槽會繼承父骨骼的編輯；關閉時，骨骼或插槽不會繼承父骨骼的編輯。

4.變換面板
變換面板用來顯示和修改骨骼或插槽的X、Y坐標(相對于父骨骼)、縮放比例、旋轉角度以及圖片的尺寸（僅限插槽和圖片時顯示)。變換面板如圖6所示。

圖6

5.場景樹面板
場景樹面板用于顯示和編輯主場景中骨骼和插槽的父子樹型關系，如圖7所示。

圖7

右上角按鈕依次為：智能過濾、骨格創建按鈕和刪除按鈕。骨架裝配模式下，雙擊場景樹中的骨骼或插槽會彈出重命名窗口。此面板在骨架裝配和動畫制作下均可顯示，但在動畫制作下不可編輯。骨骼和插槽可以在場景樹中復選。
以下是骨骼繼成關系在場景樹中的編輯：
· 骨骼間的繼承關系可以通過在場景樹面板內拖拽改變。
· 子骨骼可以被拖拽到同級或父及其以上的骨骼下。
· 父骨骼不能被拖拽到它的子骨骼及其以下骨骼下

6.層級面板
層級面板用于顯示和編輯主場景中插槽的上下層級關系。可以通過拖拽改變插槽間的層級關系。選中插槽后，也可以單擊右上角的向上一層和向下一層按鈕或快捷鍵[]來改變層級關系，此面板只出現在骨架裝配模式下。層級面板如圖8所示。

圖8

7.資源面板
項目所使用的所有圖片都保存在資源面板中。DragonBonesPro每個項目的資源庫都對應一個系統中實際存在的文件夾，文件夾中DragonBones Pro所支持的PNG圖片都會被顯示在資源面板中。通過由系統其他文件夾向DragonBones Pro的資源面板中拖拽PNG文件的方法，向資源庫里添加圖片；相應的PNG文件也會被復制到對應的資源庫文件夾中。也可以單擊“導入資源”按鈕，在彈出的系統窗口中指定要添加的資源PNG文件。資源面板如如圖9所示。

圖9

右上角按鈕依次為：導入資源按鈕、打開庫文件夾按鈕和修改路徑按鈕。此面板只可以在骨架裝配模式下顯示。

8.編輯模式切換按鈕
編輯模式切換按鈕在場景的左上角，用于切換骨架裝配和動畫制作，如圖10所示。

圖10

9.動畫面板
動畫面板用于顯示和編輯動畫剪輯，如圖11所示。

圖11

右上角按鈕依次為：新建動畫剪輯按鈕、克隆動畫剪輯按鈕、重命名和刪除動畫剪輯按鈕。此面板只能在動畫制作下顯示。動畫面板下邊的3個參數分別是：
· 動畫時間：不可編輯，單位為s。動畫剪輯的實際持續時間依照幀率和動畫剪輯的總幀數計算得出。
· 過度時間：默認值為0，可編輯，單位為s。用來設定游戲中不同動面間的過度時間。
· 播放次數：默認值為0，可編輯。用來設定游戲中動畫的重復次數，當設為0時表示無限大重復。

10.時間軸面板
時間軸面板用于動畫剪輯的編輯，此模板只能在動畫制作下顯示，如圖12所示。

圖12

· 播放控制工具
時間軸面板上的播放控制工具，用于控制動畫剪輯的播放。由左向右依次為：回到首幀按鈕、前一幀按鈕、倒放按鈕、播放按鈕、下一幀按鈕、最后幀按鈕、播放速度控制滑塊、當前幀、當前時間、幀率，如圖13所示。播放速度控制滑塊的控制范圍是0.1x~10x。當前幀：可編輯，輸入具體的幀數，綠×××放指針便會跳轉到相應的幀數。拖動綠色指針或播放動圈，當前幀的數值也會跟著相應變化。當前時間：不可編輯，基于當前幀和幀率計算得出。幀率：可編輯，默認為24fps。設定每秒鐘的動畫有多少幀，如圖13所示。

圖13

· 幀編輯工具欄
幀編輯工具欄，由左到右依次為：刪除非必要幀、編輯多幀、洋蔥皮按鈕、向右移動幀、向左移動幀、自動關鍵幀按鈕、曲線編輯器、如圖14所示。

圖14

刪除非必要幀：自動排查整個時間軸內的非必要關鍵幀并刪除。刪除非必要關鍵幀可以在完全不影響動畫呈現效果的前提下給動畫文件瘦身。
洋蔥皮按鈕：開關洋蔥皮功能。
編輯多幀：多選幀可批量編輯曲線 。
向左移動關鍵幀，向右移動關鍵幀：單擊按鈕將整休移動選中關鍵幀以右(左)的所有關鍵幀。若左側的上頓已有關鍵幀，則不能再向左移動，向左移動關鍵幀按鈕將變灰，右側亦然。
自動關鍵幀按鈕：該按鈕具有開關兩種狀態，白色為關，紅色為開。開啟后，對骨骼或插槽的改動將會在綠×××放指針所在幀和相應的骨骼或插槽層上自動添加關鍵幀。
曲線編輯器：曲線編輯器在這個面板中，你可以對幀與幀間的補間應用實現不同的補間效果。

· 時間軸工具欄
時間軸工具欄，由左向右依次為：折疊列表、展開列表、復制幀按鈕、剪切幀按鈕、粘貼幀按鈕、刪除幀按鈕，如圖15所示。

圖15

折疊列表：折疊時間軸上所有的層。
展開列表：展開時間軸上所有的層。
復制幀按鈕：選中關鍵幀后單擊該按鈕，幀的參數便被復制到剪貼板中。
剪切幀按鈕：選中關鍵幀后單擊該按鈕，幀的參數便被剪切到剪貼板中。
粘貼幀按鈕：剪貼板中的幀參數可以被粘貼到時間軸的任意幀數、任意層(骨骼層和插槽層的幀不能互相粘貼，關鍵幀中記錄的參數是與上一個關鍵幀的相對變動值，0幀的相對變動值為0)，也可以覆蓋已存在關鍵幀。
刪除幀按鈕：刪除當前選中幀。
添加關鍵幀按鈕：該按鈕具有3種狀態按鈕，白色表示無改動，無關鍵幀。×××表示有改動，未添加或更新關鍵幀。紅色表示無改動已添加或更新關鍵幀。白色或×××狀態下，單擊該按鈕，將在綠×××放指針所在幀和相應骨骼層或插槽層上添加或更新關鍵幀。紅色狀態下點擊無效果。紅色或白色狀態下，改動骨骼或插槽，該按鈕將變為×××狀態，表示骨骼或插槽發生改動。無骨骼或插槽選中時，該按鈕不可用。
曲線圖面板按鈕:開關曲線圖面板。

· 時間軸縮放工具
時間軸縮工具用于控制時間軸的比例縮放，如圖16所示。左側為適合屏幕按鈕，—和+按鈕控制縮小和放大拖動滑塊也可以控制縮放。如圖16所示。

圖16

· 洋蔥皮工具
開啟洋蔥皮功能后，會同時顯示前后N幀（默認為3幀)的影圖，方便動畫師更好地定位角色動作，使連續動畫更流暢。進入動畫模式，單擊時間軸工具欄上的洋蔥皮按鈕開啟洋蔥皮功能，如圖17所示。

圖17

洋蔥皮功能開啟后，主場景上的動畫出現藍色（前導幀）和紅色（后續幀）的影圖，動畫呈現影圖效果，如圖18所示。

圖18

同時，時間軸的綠×××放指針會出現前后默認覆益3幀的洋蔥皮顯示區城、左側的調整手柄為紅色，右側的調整手柄為藍色，如圖19所示。

圖19

拖動藍色或紅色手柄可以調整藍色或紅色洋蔥皮顯示的幀數。覆蓋的幀數越多，在主場餐中顯示的影圖越多。洋蔥皮顯示區會隨著綠×××放指針的移動而移動。在動畫播放過程中，綠×××放指針上的洋蔥皮顯示區域會隱藏。主場景上，紅色和藍色的影圖會隨原始動畫一起播放，藍色影圖的動畫動作超前于原始動畫，紅色影圖的動畫動作后滯于原始動畫。洋蔥皮的特性：藍色或紅色的洋蔥皮顯示區域最長不能超過動畫剪輯本身的長度。雖然動畫剪輯默認循環播放、但當綠×××放指針在第0幀的時候，主場景中沒有紅色洋蔥皮影圖顯示。當綠色插放指針在最末一幀時，主場景中沒有藍色洋蔥皮影圖顯示。
· 時間軸
骨骼層內關鍵幀為白色，插槽層內關鍵幀為×××，事件層內關鍵幀為紅色，含有事件、跳轉、聲音的骨骼關鍵幀為粉色。時間軸的第一層為動面的排層，不能直接編輯，在其他任意層添加關鍵幀后，動畫剪輯層便會出現菱形方塊，表示當前幀下某層或多層存在關鍵幀。白色表示為骨骼層關鍵幀，×××表示插槽層關鍵幀，紅色為事件層關鍵幀，粉色為存在多種層混合的天鍵幀。選中菱形方塊便選中這一幀數下的所有關鍵幀。可以進行整體左右平移、拖拽、復制、剪切、粘貼、刪除。只要相應幀數下存在關鍵幀，時間軸標尺上便會出現紅線，時間軸標尺個會隨時間軸的上下滾動條滾動，始終可見。時間軸的第一級為骨骼層或事件層，第二級為插槽層，插槽層相對骨骼層向右縮進一層。時間軸內不體現父子骨骼的層級關系。事件層只有一層。選中的層會高亮，對應層的骨骼或插槽也會被選中，反之，選中骨骼或插槽，對應的層也會被選中。關鍵幀可以在時間軸同層內任意拖拽。時間軸面板如圖20 所示。

圖20

· 曲線編輯器
曲線編輯器在這個面板中，你可以對幀與幀間的補間應用實現不同的補間效果。例如，你希望一個人物跑步動作中手臂的擺動是先快后慢、那么你可以在手臂擺動動作的前兩個關鍵幀中選擇第一個關鍵幀，然后單擊時間軸上的曲線按鈕如圖21所示，打開曲線編輯器面板。

圖21

關鍵幀之間默認使用的是線性補間。在曲線編排器中就是一條直線。你可以在面板的最下方看到一排按鈕，是工具中預設的一些緩動效果，如圖22所示。

圖22

單擊這些按鈕能夠使曲線快速變成相應的效果，從左至右依次是：無補間、線性補間、談入、談出、淡入談出(淡入代表先慢后快，淡出代表先快后慢，淡入談出代表一快一慢)，如圖23所示。

圖23

如果你對這些預設的效果不滿意，也可以通過拖動曲線兩端控制桿上的控制點(白色的空心圓點)來自由調節曲線，如圖24所示。目前控制點只能在100%~200%之間調節，以后的版本會放開這個限制。曲線進入負值區域代表動畫先往反方向運行一段，再正向運行。曲線超過100%代表動畫會超過目標位運行，再反向運行到目標位。

圖24

值得一提的是，對曲線的編輯效果，是能夠實時反映到場景的動畫上的，設計師可以一邊播放動畫，一邊調節曲線預覽效果。另外，對曲線的調節是即時更改動畫數據的，并不需要設計師再次單擊關鍵幀按鈕確認修改。如果對修改效果不滿意，可以通過撤銷功能，回到修改之前的狀態。

三、新建動畫項目
DragonBonesPro提供了方便快捷的項目。
1.新建項目
在歡迎首頁打開新建項目，會彈出一個對話框，選擇創建龍骨動畫，如圖25所示。

圖25

點擊創建龍骨動畫會出現如下幾個選擇：骨骼動畫模板、逐幀動畫模板、補間動畫模板、自定義，如圖26所示。

圖26

點擊相應的模板在創建欄里會選擇相對模板，它們只是參數不同，功能是一樣的，你也可以在創建完成項目，在資源里點擊右鍵，出現新建元件，如圖27所示。

圖27

點擊新建元件，同樣會出現如同圖上選擇，如圖28。

圖28

2.圖片添加刪除
由資源庫拖拽圖片到主窗口：
· 如果沒有圖層被選中或選中圖層當前幀已有非空關鍵幀，便會在時間軸自動添加一個以圖片名命名的圖片層。
· 如果選中圖層，當前幀沒有關鍵幀，則當前幀會添加關鍵幀，圖片被加入關鍵幀。
· 如果選中圖層，當前幀為空關鍵幀，圖片將被添加到空關鍵幀，空關鍵幀變為非空關鍵幀。

3.圖層順序
可以在時間軸內拖拽改變圖層的疊加順序。

四、項目的導入與導出
導入項目DragonBones Pro 目前支持導入多種格式的DragonBones數據文件(包括json和xml)和數據包文件(包括png和zip) ，另外DragonBones Pro 支持通過導入插件，擴展導入數據的格式。官方自告的Spine 2.x導入插件和Cocos1.x導入插件就能幫助DragonBones Pro導入Spine和Cocos的數據文件。導入的方法很簡單，只需將需要導入的數據文件或數據包文件拖拽到軟件中即可。如果導入的是數據文件，會出現如圖 29所示的界面 。

圖29

軟件會智能地在數據文件所在的日錄尋找紋理集文件，如果沒有找到或者找到的不對，記得要手動修改一下路徑，否則會出現找不到圖片的情況。如果導入的是數據包文件就不會有找不到紋理集的情況。另外軟件會自動生成項目名，需要修改的話可以手動修改一下。
DragonBonesPro可以將項目導成json或xml格式，圖片可以是紋理集或圖片文件形式，導出窗口如圖30所示。

圖30

輸出路徑默認為“我的文檔+項目名”，用戶可以手動指定，如果導出 zip包，則包文件會出現在指定的輸出路徑下。如果導出項目文件夾，則會在指定的輸出路徑下建立和項目名相同的子目錄，其下包含數據文件和圖片。輸出比例默認為 1。用戶可以輸入數值來控制導出項目的縮放。“填充色” 復選框，默認為不勾選(透明背景)狀態，勾選后用戶可以單擊右邊的顏色方塊兒打開顏色選擇窗口，選擇需要作為背景色的顏色“打包zip” 復選框，默認為不勾選狀態，也就是導出項目文件夾，勾選后則導出zip包形式的項目文件，下面會將psd文件轉換成DragonBones數據文件，在DragonBones Pro的安裝目錄中提供了一個腳本文件PSExportDB,jsx. 用于將Photoshop中的設計圖導出皮DragonBones格式數據+圖片。注意：在Mac系統中，需要在應用程序中找到DragonBones Pro.app，然后右鍵單擊選擇顯示包內容。腳本文件就在/Contents/Resources/日錄下，導出的方式如下：在Photshop中打開設計圖，然后依次在菜單中選擇“文件—>腳本—>瀏覽”命令，然后在打開的系統定位例口中找到PSExportDBjsx文件，選擇打開，彈出如下對話框：
Export PNGs導出圖片
ExportISON導出json文件
Ignore Hidden Layers忽略隱藏圖層
Image Scale整體縮放比例

依照需求設置好，單擊OK按鈕Photoshop便開始導出，導出完成后，在設計圖所在的日錄下會生成一個DrgonBmes{PSD的文件名}的目錄，如果你導出同時勾選PNGs和JSON，其下會有和psd文件同名的一個json文件和一個Textuer目錄。Texture下是所有的png圖片文件。在之后只需將導出的數據文件拖進DragonBones Pro設置好圖片日錄，即可完成導入。導入后，圖片的相對位置大小和相互間的層級關系都和Photoshop中完全相同。
怎么樣，通過本篇文章你學會DragonBonesPro工具的基本使用方法和骨骼動畫中的常用術語了嗎？有任何技術問題或者覺得這篇文章對你有所幫助，歡迎留言與我們交流互動。