怎樣用更少的美術(shù)成本創(chuàng)造出更生動(dòng)的動(dòng)畫效果？今天就為大家介紹一套開源的2D骨骼動(dòng)畫框架和工具——DragonBones，它包含了桌面骨骼動(dòng)畫制作工具DragonBonesPro和一套多語言版本的DragonBones骨骼動(dòng)畫庫。
下面為大家介紹DragonBones的常用術(shù)語和使用方法。
一、DragonBones 2D骨骼動(dòng)畫中的常用術(shù)語
骨架：骨架Armature,是2D骨骼動(dòng)畫中最常用的名詞，一般指的是由很多骨骼組成的一個(gè)整體。DragonBones中同時(shí)代表一個(gè)可以包含動(dòng)畫的角色。
骨骼（骨頭）：骨格或骨頭Bone,是骨骼動(dòng)網(wǎng)中組成骨架的最重要的一個(gè)基礎(chǔ)單元。骨頭自身不能拆解，在骨架中可以進(jìn)行相對的平移、旋轉(zhuǎn)、縮放、運(yùn)動(dòng)，組合起來就形成了骨格動(dòng)畫。另外骨骼之間可以有父子關(guān)系。一般來說，在默認(rèn)正向動(dòng)力學(xué)的情況下，父骨骼運(yùn)動(dòng)會帶動(dòng)子骨骼一起運(yùn)動(dòng)、比如一個(gè)人物舉起大臂，那小臂作為大臂的子骨骼，也會隨之被抬起。
插槽：插槽是骨骼動(dòng)畫中顯示圖片的容器，隸屬于骨骼。每個(gè)插槽可以包含多張圖片，但是同一時(shí)間只顯示一張圖片。每個(gè)骨格可以包含多個(gè)插槽。插槽鏈接了骨骼這個(gè)動(dòng)畫邏輯單元和圖片這個(gè)動(dòng)畫顯示單元，組成了骨骼-插槽-圖片，這個(gè)DragonBones骨骼動(dòng)畫中的基本骨骼結(jié)構(gòu)。
圖片(紋理)：圖片就是顯示圖像的元素，在2D骨骼系統(tǒng)中，圖片和紋理的意義區(qū)別不大，所以這里也可以叫紋理。
紋理集：紋理集是將圖片打包之后組成的大圖，方便資源整合傳播和在游戲中加載，使用硬件加速引擎或者Egret Runtime 的話，紋理集能大幅度提高渲染效率。所以DragonBones默認(rèn)提供的導(dǎo)入資源的接口就是用紋理集。
動(dòng)畫補(bǔ)間：一般設(shè)計(jì)師在做骨骼動(dòng)畫的時(shí)候，并不需要在每幀都為角色擺動(dòng)作，而只是在一些關(guān)鍵的地方(關(guān)鍵幀)擺出關(guān)鍵的動(dòng)作，關(guān)鍵動(dòng)作之間全部由程序生成的補(bǔ)間代替，這就是動(dòng)畫補(bǔ)間。動(dòng)畫補(bǔ)間可以是線性的也可以是非線性的。線性補(bǔ)間意味著補(bǔ)間上的元件是勻速變換的(平移、旋轉(zhuǎn)、縮放)。非線性補(bǔ)間般由各種曲線表示，DragonBones 中默認(rèn)使用貝塞爾曲線表示非線性補(bǔ)間。
動(dòng)畫過渡：動(dòng)畫過渡是指從一個(gè)動(dòng)畫切換到另一一個(gè)動(dòng)畫時(shí)，產(chǎn)生的過渡效果。DragonBones提供了動(dòng)畫動(dòng)面切換時(shí)的過渡效果功能，只要設(shè)置一個(gè)過渡時(shí)間，就能自動(dòng)生成平滑的過渡效果。
動(dòng)畫融合：動(dòng)面融合提供了一個(gè)角色同時(shí)播放多個(gè)動(dòng)畫的功能。這個(gè)功能一般會在兩種情況下使用。第1種是如一個(gè)人物角色動(dòng)畫比較復(fù)雜，可能需要上半身和下半身分別做動(dòng)畫設(shè)計(jì)，然后可以任意組合。第2種是如需要個(gè)角色在跑步的同時(shí)中彈，身體后仰，也就是同時(shí)插放跑步和中彈的動(dòng)畫。動(dòng)畫融合的功能通過給不同的動(dòng)畫設(shè)置權(quán)值，給不同的骨路增加動(dòng)畫遮罩來實(shí)現(xiàn)這兩種需求。需要注意的是DragonBones只有普通模式提供了動(dòng)畫融合的功能，極速模式是不提供這個(gè)功能的。
正向動(dòng)力學(xué)(FK)和反向動(dòng)力學(xué)(IK)：在骨骼動(dòng)畫中，一般來講，子骨骼的運(yùn)動(dòng)會受到父骨骼的影響，例如大臂旋轉(zhuǎn)，小臂也會跟隨旋轉(zhuǎn)，這叫作正向動(dòng)力學(xué)，也就是父親影響孩子。當(dāng)然現(xiàn)實(shí)世界也存在反過來的情況，例如有入打你一拳，你用小臂去阻擋，那小臂受力運(yùn)動(dòng)的同時(shí)也會帶動(dòng)大臂一同做受力運(yùn)動(dòng)，這叫作反向動(dòng)力學(xué)。在DragonBones中控制骨路調(diào)節(jié)動(dòng)作的時(shí)候，一般情況骨骼是符合正向動(dòng)力學(xué)規(guī)律的，也就是調(diào)節(jié)父骨骼，子骨骼也會受影響。如果希望通過反向動(dòng)力學(xué)調(diào)節(jié)動(dòng)畫，可以選選擇相應(yīng)的IK工具來實(shí)現(xiàn)。
首先，安裝完成后打開歡迎界面，選擇項(xiàng)目，如圖1所示。
圖1
然后打開你所選擇的項(xiàng)目，如圖2所示。
圖2
接下來為大家解讀圖2中各項(xiàng)工具的使用方法
1.系統(tǒng)工具欄
系統(tǒng)工具欄包含最常用的幾個(gè)功能，從左到右的按鈕功能依次是：新建項(xiàng)目、打開項(xiàng)目、保存項(xiàng)目、撤銷、重做、導(dǎo)入、導(dǎo)出、預(yù)覽作品分享，如圖3所示。
圖3
· 新建項(xiàng)目：用于新建一個(gè)項(xiàng)目 ,單擊該按鈕打開新建項(xiàng)目對話框。
· 打開項(xiàng)目：用于打開一個(gè)已有項(xiàng)目，單擊該按鈕打開系統(tǒng)指定文件對話框。
· 保存項(xiàng)目：如果當(dāng)前的項(xiàng)目有更改，保存項(xiàng)目按鈕將亮起，單擊該按鈕后將保存當(dāng)前項(xiàng)目，項(xiàng)目保存后，保存項(xiàng)目按鈕暗掉。
· 撤銷：用于撤銷上一次的編輯操作。
· 重做：用于重做上一次撤銷掉的編輯操作。
· 導(dǎo)入：用于導(dǎo)入一個(gè)支持的項(xiàng)目文件格式，單擊該按鈕將打開導(dǎo)入對話框
· 導(dǎo)出：用于導(dǎo)出項(xiàng)目。單擊該按鈕將打開導(dǎo)出對話框。
· 預(yù)覽：在瀏覽器中預(yù)覽動(dòng)畫的運(yùn)行效果。如果項(xiàng)目包含多個(gè)動(dòng)畫剪輯，可以在瀏覽器中單擊鼠標(biāo)左鍵來切換。
· 作品分享：打開作品分享上傳頁面。
圖4
· 選擇工具：選中骨骼時(shí)，鼠標(biāo)單擊骨骼本身，按住左鍵移動(dòng)，可以在X、Y方向任意移動(dòng)骨骼。鼠標(biāo)單擊紅色X軸(或綠色Y軸)可以在單一X軸(Y軸)方向上平移。鼠標(biāo)拖動(dòng)插槽內(nèi)的圖片本身，按住左鍵移動(dòng)，可以在X、Y任意方向上移動(dòng)骨骼。鼠標(biāo)單擊紅色X軸(或綠色Y軸)可以在單X軸(Y軸) 方向上平移。鼠標(biāo)拖動(dòng)縮放手柄可以縮放插槽。鼠標(biāo)單擊并按住其他區(qū)域時(shí)可以旋轉(zhuǎn)插槽(插槽只有在骨架裝配模式下可以被選中并改變狀態(tài))。
· Pose工具：選中一個(gè)骨骼時(shí)，骨骼會跟隨著鼠標(biāo)的拖拽旋轉(zhuǎn)。復(fù)選兩根或以上骨骼時(shí)，選中的骨骼會遵循IK規(guī)則，跟隨著鼠標(biāo)的拖拽。
· 創(chuàng)建骨骼工具：選中創(chuàng)建骨骼工具，在主場景中單擊鼠標(biāo)左鍵并拖拽便可創(chuàng)建骨骼。另外在主場景中還支持一些常用操作：
推拉鼠標(biāo)滾輪便可以縮放DragonBones Pro的場景。
鼠標(biāo)處于選擇工具或手型工具時(shí)，左鍵雙擊任意處， 場景大小便恢復(fù)到100%。
右鍵單擊任意區(qū)域取消選擇。
· 權(quán)重工具：權(quán)重表示了蒙皮受到不同骨骼形變影響的占比，合理分配好每個(gè)蒙皮頂點(diǎn)的權(quán)重至關(guān)重要。
3.可見可選過濾面板
可見可選過濾面板用于打開和關(guān)閉骨骼和插槽的可見、可選、是否繼承編輯的開關(guān)，如圖5所示。
圖5
· 可見：打開時(shí)，骨骼或插槽在主場景中可見；關(guān)閉時(shí)，骨骼或插槽在主場景中不可見。
· 可選：打開時(shí)，骨骼或插槽在主場景中可以被選中；關(guān)閉時(shí)，骨骼或插槽在主場景中不可以被選中。
· 繼承：打開時(shí)，骨骼或插槽會繼承父骨骼的編輯；關(guān)閉時(shí)，骨骼或插槽不會繼承父骨骼的編輯。
4.變換面板
變換面板用來顯示和修改骨骼或插槽的X、Y坐標(biāo)(相對于父骨骼)、縮放比例、旋轉(zhuǎn)角度以及圖片的尺寸（僅限插槽和圖片時(shí)顯示)。變換面板如圖6所示。
圖6
5.場景樹面板
場景樹面板用于顯示和編輯主場景中骨骼和插槽的父子樹型關(guān)系，如圖7所示。
圖7
右上角按鈕依次為：智能過濾、骨格創(chuàng)建按鈕和刪除按鈕。骨架裝配模式下，雙擊場景樹中的骨骼或插槽會彈出重命名窗口。此面板在骨架裝配和動(dòng)畫制作下均可顯示，但在動(dòng)畫制作下不可編輯。骨骼和插槽可以在場景樹中復(fù)選。
以下是骨骼繼成關(guān)系在場景樹中的編輯：
· 骨骼間的繼承關(guān)系可以通過在場景樹面板內(nèi)拖拽改變。
· 子骨骼可以被拖拽到同級或父及其以上的骨骼下。
· 父骨骼不能被拖拽到它的子骨骼及其以下骨骼下
6.層級面板
層級面板用于顯示和編輯主場景中插槽的上下層級關(guān)系。可以通過拖拽改變插槽間的層級關(guān)系。選中插槽后，也可以單擊右上角的向上一層和向下一層按鈕或快捷鍵[]來改變層級關(guān)系，此面板只出現(xiàn)在骨架裝配模式下。層級面板如圖8所示。
圖8
7.資源面板
項(xiàng)目所使用的所有圖片都保存在資源面板中。DragonBonesPro每個(gè)項(xiàng)目的資源庫都對應(yīng)一個(gè)系統(tǒng)中實(shí)際存在的文件夾，文件夾中DragonBones Pro所支持的PNG圖片都會被顯示在資源面板中。通過由系統(tǒng)其他文件夾向DragonBones Pro的資源面板中拖拽PNG文件的方法，向資源庫里添加圖片；相應(yīng)的PNG文件也會被復(fù)制到對應(yīng)的資源庫文件夾中。也可以單擊“導(dǎo)入資源”按鈕，在彈出的系統(tǒng)窗口中指定要添加的資源PNG文件。資源面板如如圖9所示。
圖9
右上角按鈕依次為：導(dǎo)入資源按鈕、打開庫文件夾按鈕和修改路徑按鈕。此面板只可以在骨架裝配模式下顯示。
8.編輯模式切換按鈕
編輯模式切換按鈕在場景的左上角，用于切換骨架裝配和動(dòng)畫制作，如圖10所示。
圖10
9.動(dòng)畫面板
動(dòng)畫面板用于顯示和編輯動(dòng)畫剪輯，如圖11所示。
圖11
右上角按鈕依次為：新建動(dòng)畫剪輯按鈕、克隆動(dòng)畫剪輯按鈕、重命名和刪除動(dòng)畫剪輯按鈕。此面板只能在動(dòng)畫制作下顯示。動(dòng)畫面板下邊的3個(gè)參數(shù)分別是：
· 動(dòng)畫時(shí)間：不可編輯，單位為s。動(dòng)畫剪輯的實(shí)際持續(xù)時(shí)間依照幀率和動(dòng)畫剪輯的總幀數(shù)計(jì)算得出。
· 過度時(shí)間：默認(rèn)值為0，可編輯，單位為s。用來設(shè)定游戲中不同動(dòng)面間的過度時(shí)間。
· 播放次數(shù)：默認(rèn)值為0，可編輯。用來設(shè)定游戲中動(dòng)畫的重復(fù)次數(shù)，當(dāng)設(shè)為0時(shí)表示無限大重復(fù)。
10.時(shí)間軸面板
時(shí)間軸面板用于動(dòng)畫剪輯的編輯，此模板只能在動(dòng)畫制作下顯示，如圖12所示。
圖12
· 播放控制工具
時(shí)間軸面板上的播放控制工具，用于控制動(dòng)畫剪輯的播放。由左向右依次為：回到首幀按鈕、前一幀按鈕、倒放按鈕、播放按鈕、下一幀按鈕、最后幀按鈕、播放速度控制滑塊、當(dāng)前幀、當(dāng)前時(shí)間、幀率，如圖13所示。播放速度控制滑塊的控制范圍是0.1x~10x。當(dāng)前幀：可編輯，輸入具體的幀數(shù)，綠×××放指針便會跳轉(zhuǎn)到相應(yīng)的幀數(shù)。拖動(dòng)綠色指針或播放動(dòng)圈，當(dāng)前幀的數(shù)值也會跟著相應(yīng)變化。當(dāng)前時(shí)間：不可編輯，基于當(dāng)前幀和幀率計(jì)算得出。幀率：可編輯，默認(rèn)為24fps。設(shè)定每秒鐘的動(dòng)畫有多少幀，如圖13所示。
圖13
· 幀編輯工具欄
幀編輯工具欄，由左到右依次為：刪除非必要幀、編輯多幀、洋蔥皮按鈕、向右移動(dòng)幀、向左移動(dòng)幀、自動(dòng)關(guān)鍵幀按鈕、曲線編輯器、如圖14所示。
圖14
刪除非必要幀：自動(dòng)排查整個(gè)時(shí)間軸內(nèi)的非必要關(guān)鍵幀并刪除。刪除非必要關(guān)鍵幀可以在完全不影響動(dòng)畫呈現(xiàn)效果的前提下給動(dòng)畫文件瘦身。
洋蔥皮按鈕：開關(guān)洋蔥皮功能。
編輯多幀：多選幀可批量編輯曲線 。
向左移動(dòng)關(guān)鍵幀，向右移動(dòng)關(guān)鍵幀：單擊按鈕將整休移動(dòng)選中關(guān)鍵幀以右(左)的所有關(guān)鍵幀。若左側(cè)的上頓已有關(guān)鍵幀，則不能再向左移動(dòng)，向左移動(dòng)關(guān)鍵幀按鈕將變灰，右側(cè)亦然。
自動(dòng)關(guān)鍵幀按鈕：該按鈕具有開關(guān)兩種狀態(tài)，白色為關(guān)，紅色為開。開啟后，對骨骼或插槽的改動(dòng)將會在綠×××放指針?biāo)趲拖鄳?yīng)的骨骼或插槽層上自動(dòng)添加關(guān)鍵幀。
曲線編輯器：曲線編輯器在這個(gè)面板中，你可以對幀與幀間的補(bǔ)間應(yīng)用實(shí)現(xiàn)不同的補(bǔ)間效果。
· 時(shí)間軸工具欄
時(shí)間軸工具欄，由左向右依次為：折疊列表、展開列表、復(fù)制幀按鈕、剪切幀按鈕、粘貼幀按鈕、刪除幀按鈕，如圖15所示。
圖15
折疊列表：折疊時(shí)間軸上所有的層。
展開列表：展開時(shí)間軸上所有的層。
復(fù)制幀按鈕：選中關(guān)鍵幀后單擊該按鈕，幀的參數(shù)便被復(fù)制到剪貼板中。
剪切幀按鈕：選中關(guān)鍵幀后單擊該按鈕，幀的參數(shù)便被剪切到剪貼板中。
粘貼幀按鈕：剪貼板中的幀參數(shù)可以被粘貼到時(shí)間軸的任意幀數(shù)、任意層(骨骼層和插槽層的幀不能互相粘貼，關(guān)鍵幀中記錄的參數(shù)是與上一個(gè)關(guān)鍵幀的相對變動(dòng)值，0幀的相對變動(dòng)值為0)，也可以覆蓋已存在關(guān)鍵幀。
刪除幀按鈕：刪除當(dāng)前選中幀。
添加關(guān)鍵幀按鈕：該按鈕具有3種狀態(tài)按鈕，白色表示無改動(dòng)，無關(guān)鍵幀?！痢痢帘硎居懈膭?dòng)，未添加或更新關(guān)鍵幀。紅色表示無改動(dòng)已添加或更新關(guān)鍵幀。白色或×××狀態(tài)下，單擊該按鈕，將在綠×××放指針?biāo)趲拖鄳?yīng)骨骼層或插槽層上添加或更新關(guān)鍵幀。紅色狀態(tài)下點(diǎn)擊無效果。紅色或白色狀態(tài)下，改動(dòng)骨骼或插槽，該按鈕將變?yōu)椤痢痢翣顟B(tài)，表示骨骼或插槽發(fā)生改動(dòng)。無骨骼或插槽選中時(shí)，該按鈕不可用。
曲線圖面板按鈕:開關(guān)曲線圖面板。
· 時(shí)間軸縮放工具
時(shí)間軸縮工具用于控制時(shí)間軸的比例縮放，如圖16所示。左側(cè)為適合屏幕按鈕，—和+按鈕控制縮小和放大拖動(dòng)滑塊也可以控制縮放。如圖16所示。
圖16
· 洋蔥皮工具
開啟洋蔥皮功能后，會同時(shí)顯示前后N幀（默認(rèn)為3幀)的影圖，方便動(dòng)畫師更好地定位角色動(dòng)作，使連續(xù)動(dòng)畫更流暢。進(jìn)入動(dòng)畫模式，單擊時(shí)間軸工具欄上的洋蔥皮按鈕開啟洋蔥皮功能，如圖17所示。
圖17
洋蔥皮功能開啟后，主場景上的動(dòng)畫出現(xiàn)藍(lán)色（前導(dǎo)幀）和紅色（后續(xù)幀）的影圖，動(dòng)畫呈現(xiàn)影圖效果，如圖18所示。
圖18
同時(shí)，時(shí)間軸的綠×××放指針會出現(xiàn)前后默認(rèn)覆益3幀的洋蔥皮顯示區(qū)城、左側(cè)的調(diào)整手柄為紅色，右側(cè)的調(diào)整手柄為藍(lán)色，如圖19所示。
圖19
拖動(dòng)藍(lán)色或紅色手柄可以調(diào)整藍(lán)色或紅色洋蔥皮顯示的幀數(shù)。覆蓋的幀數(shù)越多，在主場餐中顯示的影圖越多。洋蔥皮顯示區(qū)會隨著綠×××放指針的移動(dòng)而移動(dòng)。在動(dòng)畫播放過程中，綠×××放指針上的洋蔥皮顯示區(qū)域會隱藏。主場景上，紅色和藍(lán)色的影圖會隨原始動(dòng)畫一起播放，藍(lán)色影圖的動(dòng)畫動(dòng)作超前于原始動(dòng)畫，紅色影圖的動(dòng)畫動(dòng)作后滯于原始動(dòng)畫。洋蔥皮的特性：藍(lán)色或紅色的洋蔥皮顯示區(qū)域最長不能超過動(dòng)畫剪輯本身的長度。雖然動(dòng)畫剪輯默認(rèn)循環(huán)播放、但當(dāng)綠×××放指針在第0幀的時(shí)候，主場景中沒有紅色洋蔥皮影圖顯示。當(dāng)綠色插放指針在最末一幀時(shí)，主場景中沒有藍(lán)色洋蔥皮影圖顯示。
· 時(shí)間軸
骨骼層內(nèi)關(guān)鍵幀為白色，插槽層內(nèi)關(guān)鍵幀為×××，事件層內(nèi)關(guān)鍵幀為紅色，含有事件、跳轉(zhuǎn)、聲音的骨骼關(guān)鍵幀為粉色。時(shí)間軸的第一層為動(dòng)面的排層，不能直接編輯，在其他任意層添加關(guān)鍵幀后，動(dòng)畫剪輯層便會出現(xiàn)菱形方塊，表示當(dāng)前幀下某層或多層存在關(guān)鍵幀。白色表示為骨骼層關(guān)鍵幀，×××表示插槽層關(guān)鍵幀，紅色為事件層關(guān)鍵幀，粉色為存在多種層混合的天鍵幀。選中菱形方塊便選中這一幀數(shù)下的所有關(guān)鍵幀。可以進(jìn)行整體左右平移、拖拽、復(fù)制、剪切、粘貼、刪除。只要相應(yīng)幀數(shù)下存在關(guān)鍵幀，時(shí)間軸標(biāo)尺上便會出現(xiàn)紅線，時(shí)間軸標(biāo)尺個(gè)會隨時(shí)間軸的上下滾動(dòng)條滾動(dòng)，始終可見。時(shí)間軸的第一級為骨骼層或事件層，第二級為插槽層，插槽層相對骨骼層向右縮進(jìn)一層。時(shí)間軸內(nèi)不體現(xiàn)父子骨骼的層級關(guān)系。事件層只有一層。選中的層會高亮，對應(yīng)層的骨骼或插槽也會被選中，反之，選中骨骼或插槽，對應(yīng)的層也會被選中。關(guān)鍵幀可以在時(shí)間軸同層內(nèi)任意拖拽。時(shí)間軸面板如圖20 所示。
圖20
· 曲線編輯器
曲線編輯器在這個(gè)面板中，你可以對幀與幀間的補(bǔ)間應(yīng)用實(shí)現(xiàn)不同的補(bǔ)間效果。例如，你希望一個(gè)人物跑步動(dòng)作中手臂的擺動(dòng)是先快后慢、那么你可以在手臂擺動(dòng)動(dòng)作的前兩個(gè)關(guān)鍵幀中選擇第一個(gè)關(guān)鍵幀，然后單擊時(shí)間軸上的曲線按鈕如圖21所示，打開曲線編輯器面板。
圖21
關(guān)鍵幀之間默認(rèn)使用的是線性補(bǔ)間。在曲線編排器中就是一條直線。你可以在面板的最下方看到一排按鈕，是工具中預(yù)設(shè)的一些緩動(dòng)效果，如圖22所示。
圖22
單擊這些按鈕能夠使曲線快速變成相應(yīng)的效果，從左至右依次是：無補(bǔ)間、線性補(bǔ)間、談入、談出、淡入談出(淡入代表先慢后快，淡出代表先快后慢，淡入談出代表一快一慢)，如圖23所示。
圖23
如果你對這些預(yù)設(shè)的效果不滿意，也可以通過拖動(dòng)曲線兩端控制桿上的控制點(diǎn)(白色的空心圓點(diǎn))來自由調(diào)節(jié)曲線，如圖24所示。目前控制點(diǎn)只能在100%~200%之間調(diào)節(jié)，以后的版本會放開這個(gè)限制。曲線進(jìn)入負(fù)值區(qū)域代表動(dòng)畫先往反方向運(yùn)行一段，再正向運(yùn)行。曲線超過100%代表動(dòng)畫會超過目標(biāo)位運(yùn)行，再反向運(yùn)行到目標(biāo)位。
圖24
值得一提的是，對曲線的編輯效果，是能夠?qū)崟r(shí)反映到場景的動(dòng)畫上的，設(shè)計(jì)師可以一邊播放動(dòng)畫，一邊調(diào)節(jié)曲線預(yù)覽效果。另外，對曲線的調(diào)節(jié)是即時(shí)更改動(dòng)畫數(shù)據(jù)的，并不需要設(shè)計(jì)師再次單擊關(guān)鍵幀按鈕確認(rèn)修改。如果對修改效果不滿意，可以通過撤銷功能，回到修改之前的狀態(tài)。
三、新建動(dòng)畫項(xiàng)目
DragonBonesPro提供了方便快捷的項(xiàng)目。
1.新建項(xiàng)目
在歡迎首頁打開新建項(xiàng)目，會彈出一個(gè)對話框，選擇創(chuàng)建龍骨動(dòng)畫，如圖25所示。
圖25
點(diǎn)擊創(chuàng)建龍骨動(dòng)畫會出現(xiàn)如下幾個(gè)選擇：骨骼動(dòng)畫模板、逐幀動(dòng)畫模板、補(bǔ)間動(dòng)畫模板、自定義，如圖26所示。
圖26
點(diǎn)擊相應(yīng)的模板在創(chuàng)建欄里會選擇相對模板，它們只是參數(shù)不同，功能是一樣的，你也可以在創(chuàng)建完成項(xiàng)目，在資源里點(diǎn)擊右鍵，出現(xiàn)新建元件，如圖27所示。
圖27
點(diǎn)擊新建元件，同樣會出現(xiàn)如同圖上選擇，如圖28。
圖28
2.圖片添加刪除
由資源庫拖拽圖片到主窗口：
· 如果沒有圖層被選中或選中圖層當(dāng)前幀已有非空關(guān)鍵幀，便會在時(shí)間軸自動(dòng)添加一個(gè)以圖片名命名的圖片層。
· 如果選中圖層，當(dāng)前幀沒有關(guān)鍵幀，則當(dāng)前幀會添加關(guān)鍵幀，圖片被加入關(guān)鍵幀。
· 如果選中圖層，當(dāng)前幀為空關(guān)鍵幀，圖片將被添加到空關(guān)鍵幀，空關(guān)鍵幀變?yōu)榉强贞P(guān)鍵幀。
3.圖層順序
可以在時(shí)間軸內(nèi)拖拽改變圖層的疊加順序。
四、項(xiàng)目的導(dǎo)入與導(dǎo)出
導(dǎo)入項(xiàng)目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ù)文件所在的日錄尋找紋理集文件，如果沒有找到或者找到的不對，記得要手動(dòng)修改一下路徑，否則會出現(xiàn)找不到圖片的情況。如果導(dǎo)入的是數(shù)據(jù)包文件就不會有找不到紋理集的情況。另外軟件會自動(dòng)生成項(xiàng)目名，需要修改的話可以手動(dòng)修改一下。
DragonBonesPro可以將項(xiàng)目導(dǎo)成json或xml格式，圖片可以是紋理集或圖片文件形式，導(dǎo)出窗口如圖30所示。
圖30
輸出路徑默認(rèn)為“我的文檔+項(xiàng)目名”，用戶可以手動(dòng)指定，如果導(dǎo)出 zip包，則包文件會出現(xiàn)在指定的輸出路徑下。如果導(dǎo)出項(xiàng)目文件夾，則會在指定的輸出路徑下建立和項(xiàng)目名相同的子目錄，其下包含數(shù)據(jù)文件和圖片。輸出比例默認(rèn)為 1。用戶可以輸入數(shù)值來控制導(dǎo)出項(xiàng)目的縮放。“填充色” 復(fù)選框，默認(rèn)為不勾選(透明背景)狀態(tài)，勾選后用戶可以單擊右邊的顏色方塊兒打開顏色選擇窗口，選擇需要作為背景色的顏色“打包zip” 復(fù)選框，默認(rèn)為不勾選狀態(tài)，也就是導(dǎo)出項(xiàng)目文件夾，勾選后則導(dǎo)出zip包形式的項(xiàng)目文件，下面會將psd文件轉(zhuǎn)換成DragonBones數(shù)據(jù)文件，在DragonBones Pro的安裝目錄中提供了一個(gè)腳本文件PSExportDB,jsx. 用于將Photoshop中的設(shè)計(jì)圖導(dǎo)出皮DragonBones格式數(shù)據(jù)+圖片。注意：在Mac系統(tǒng)中，需要在應(yīng)用程序中找到DragonBones Pro.app，然后右鍵單擊選擇顯示包內(nèi)容。腳本文件就在/Contents/Resources/日錄下，導(dǎo)出的方式如下：在Photshop中打開設(shè)計(jì)圖，然后依次在菜單中選擇“文件—>腳本—>瀏覽”命令，然后在打開的系統(tǒng)定位例口中找到PSExportDBjsx文件，選擇打開，彈出如下對話框：
Export PNGs導(dǎo)出圖片
ExportISON導(dǎo)出json文件
Ignore Hidden Layers忽略隱藏圖層
Image Scale整體縮放比例
依照需求設(shè)置好，單擊OK按鈕Photoshop便開始導(dǎo)出，導(dǎo)出完成后，在設(shè)計(jì)圖所在的日錄下會生成一個(gè)DrgonBmes{PSD的文件名}的目錄，如果你導(dǎo)出同時(shí)勾選PNGs和JSON，其下會有和psd文件同名的一個(gè)json文件和一個(gè)Textuer目錄。Texture下是所有的png圖片文件。在之后只需將導(dǎo)出的數(shù)據(jù)文件拖進(jìn)DragonBones Pro設(shè)置好圖片日錄，即可完成導(dǎo)入。導(dǎo)入后，圖片的相對位置大小和相互間的層級關(guān)系都和Photoshop中完全相同。
怎么樣，通過本篇文章你學(xué)會DragonBonesPro工具的基本使用方法和骨骼動(dòng)畫中的常用術(shù)語了嗎？有任何技術(shù)問題或者覺得這篇文章對你有所幫助，歡迎留言與我們交流互動(dòng)。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
