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

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

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

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

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

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

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

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

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

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

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

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

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

圖1

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

圖2

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

圖3

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

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

圖4

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

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

圖5

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

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

圖6

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

圖7

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

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

圖8

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

圖9

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

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

圖10

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

圖11

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

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

圖12

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

圖13

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

圖14

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

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

圖15

折疊列表：折疊時間軸上所有的層。
展開列表：展開時間軸上所有的層。
復(fù)制幀按鈕：選中關(guān)鍵幀后單擊該按鈕，幀的參數(shù)便被復(fù)制到剪貼板中。
剪切幀按鈕：選中關(guān)鍵幀后單擊該按鈕，幀的參數(shù)便被剪切到剪貼板中。
粘貼幀按鈕：剪貼板中的幀參數(shù)可以被粘貼到時間軸的任意幀數(shù)、任意層(骨骼層和插槽層的幀不能互相粘貼，關(guān)鍵幀中記錄的參數(shù)是與上一個關(guān)鍵幀的相對變動值，0幀的相對變動值為0)，也可以覆蓋已存在關(guān)鍵幀。
刪除幀按鈕：刪除當(dāng)前選中幀。
添加關(guān)鍵幀按鈕：該按鈕具有3種狀態(tài)按鈕，白色表示無改動，無關(guān)鍵幀?！痢痢帘硎居懈膭?，未添加或更新關(guān)鍵幀。紅色表示無改動已添加或更新關(guān)鍵幀。白色或×××狀態(tài)下，單擊該按鈕，將在綠×××放指針?biāo)趲拖鄳?yīng)骨骼層或插槽層上添加或更新關(guān)鍵幀。紅色狀態(tài)下點擊無效果。紅色或白色狀態(tài)下，改動骨骼或插槽，該按鈕將變?yōu)椤痢痢翣顟B(tài)，表示骨骼或插槽發(fā)生改動。無骨骼或插槽選中時，該按鈕不可用。
曲線圖面板按鈕:開關(guān)曲線圖面板。

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

圖16

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

圖17

洋蔥皮功能開啟后，主場景上的動畫出現(xiàn)藍(lán)色（前導(dǎo)幀）和紅色（后續(xù)幀）的影圖，動畫呈現(xiàn)影圖效果，如圖18所示。

圖18

同時，時間軸的綠×××放指針會出現(xiàn)前后默認(rèn)覆益3幀的洋蔥皮顯示區(qū)城、左側(cè)的調(diào)整手柄為紅色，右側(cè)的調(diào)整手柄為藍(lán)色，如圖19所示。

圖19

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

圖20

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

圖21

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

圖22

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

圖23

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

圖24

值得一提的是，對曲線的編輯效果，是能夠?qū)崟r反映到場景的動畫上的，設(shè)計師可以一邊播放動畫，一邊調(diào)節(jié)曲線預(yù)覽效果。另外，對曲線的調(diào)節(jié)是即時更改動畫數(shù)據(jù)的，并不需要設(shè)計師再次單擊關(guān)鍵幀按鈕確認(rèn)修改。如果對修改效果不滿意，可以通過撤銷功能，回到修改之前的狀態(tài)。

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

圖25

點擊創(chuàng)建龍骨動畫會出現(xiàn)如下幾個選擇：骨骼動畫模板、逐幀動畫模板、補(bǔ)間動畫模板、自定義，如圖26所示。

圖26

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

圖27

點擊新建元件，同樣會出現(xiàn)如同圖上選擇，如圖28。

圖28

2.圖片添加刪除
由資源庫拖拽圖片到主窗口：
· 如果沒有圖層被選中或選中圖層當(dāng)前幀已有非空關(guān)鍵幀，便會在時間軸自動添加一個以圖片名命名的圖片層。
· 如果選中圖層，當(dāng)前幀沒有關(guān)鍵幀，則當(dāng)前幀會添加關(guān)鍵幀，圖片被加入關(guān)鍵幀。
· 如果選中圖層，當(dāng)前幀為空關(guān)鍵幀，圖片將被添加到空關(guān)鍵幀，空關(guān)鍵幀變?yōu)榉强贞P(guān)鍵幀。

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

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

圖29

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

圖30

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

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