骨架動畫軟體常用於遊戲與動畫的製作，也稱作計算式動作軟體，比起flash的沒落，骨架動畫反而崛起盛行，功能不斷推層出新，其內容包含了flash基礎、3D應用概念，並能導入Html5使用，雷亞日前推出的新遊戲(Sdorica萬象物語)，大量運用此技術來研發，神魔之塔、刀塔傳奇也都非常仰賴骨架動畫所帶來的動態表現，在手遊市場逐漸變成趨勢。
常見的軟體有spine、live2D與DragonBones，功能大致上都差不多(能利用程式控制動畫的高階運用)，基本操作並不複雜，介面包含工作區、圖層區、時間軸、工具列等等，若是首次接觸的設計工作者，應該會感到有點熟悉，但實際要得心應手的運用，也必須有足夠的動態學基礎。
在專業的動畫公司，是可以獨立的工作項目，”動作”是一個龐大且複雜的感性邏輯處理，工作重點則”除了調整還是調整”，骨架動畫不需要3D動畫龐大複雜的功能，並能將3D概念提取應用，如骨架系統、蒙皮；與傳統逐幀動畫比較，所需要的資源較少，反過來利用骨架數據演釋動作細節；另外也能有效率的製作動態表情符號，成果會比連續圖片(傳統補間動畫)來得更為順暢，或巧妙地添加在網頁與APP也會有不錯的加分效果，以下介紹DragonBones的運用與優點。
動畫基礎關鍵幀、中間幀
一個動作開始與結束的地方可以當作“關鍵幀”，在開始與結束之間的連續動作則是“中間幀”；關鍵幀為動作中最主要的畫面，可清楚知道是什麼動作(簡單的如舉手)，像跑步動作就需要非常多的關鍵幀組成，而中間幀把這些關鍵幀連結起來，幀數的多寡影響到動作的順暢度。決定關鍵幀定位的範圍沒有標準答案，如果難度較大的動作，關鍵幀就必須設置多一些。
“差值中間幀”為骨架動畫的優勢，可使用較少量的中間幀來完成動作，保有一定的順暢度；在動作的開始到結束，並非死板板的均速播放，而是會計算時間差值來釋出中間幀，達到快緩交替的效果。
設計能力、運動規律的把握力
在動作設定前，要先規劃好每個部件(圖片)結構，如何去拆解圖片，在骨架動畫中，不只有單純的人體動作可以完成，也包含其他能見物的動作變化，從堅體碰撞的反應到果凍Ｑ彈效果皆可以靠參數設定來完成。
除了基礎的圖幀關係，賦予作品動感表現也是必要的環節，想像一下與制式的機械動作不同，如同手同腳走路好像違反了人體的動態線；運動規律可當作動態線來看(軟體中使用曲線設定)，除了要了解主體本身固定的運動途徑，也緊密牽引著附屬物的動態線，像植物枝葉擺動、動物尾巴甩甩(植物的著主體為根莖、尾巴的主體可能是狗狗)。
一些可以學習運動規律的方向，如觀察特定動植物的動作影片，或用一些簡單的線條來規劃動態線，目標是讓動作具有和諧感。
DragonBones優勢
介面
- 骨架裝配、動畫製作工作區，在動作調整上常進行切換。
- 非常重要的核心功能
- 選擇工具：搭配滑鼠進行物件選擇，操作體驗覺得人性化(右鍵選擇、滾輪縮放、左鍵取消與拖曳移動畫面，不用再加上shift或ctrl輔助鍵)。
- pose工具：名符其實的擺姿勢使用，可匡選多個物件，使用拖曳方式檢視物件的動作與綁定的層級關係。
- 骨骼工具：新增骨骼就只能靠它了。
- 權重工具：在蒙皮後常用來調整物件之間的動作權重，在調整工作上幾乎會佔掉大半時間，如單一骨骼對N個網格的細部調整。
- 圖層區，顯示骨骼與物件的層級關係，拆解越多的物件就會使圖層越來越長，在物件綁定的狀態下很容易搞混目前層級關係，希望可顯示支線提示讓層級關係更好辨識。
- 選定骨骼或物件時，可調整特定的參數設定。
- 動畫時間軸，看似普通卻有很多指令工具可以操作。
- 調整動畫曲線來控制時間差值，使圖幀動作更加和諧生動。
優點
- 中文化且免費，並有開源社群分享。
- 檔案容量小。
- 對設計者來說，操作介面易懂。
- 可直接讀取常用文件(如PSD)，並直接轉移圖層。
- 跨骨架複製，部份或整個骨架可模組化，分別套用不同圖片(例如紙娃娃系統)。
- 2D動畫高仿3D動畫效果，並可邊播放邊調整曲線功能。
缺點
- 並非向量圖不能無限放大解析度。
- 需要同時出現物體正反兩面時，動畫上表現較困難。
DragonBones實作
- 骨骼/骨架：
創建的骨架若需要連動，則需要綁定好每一根骨骼的層級關係；骨骼長度不影響層級的任何關係(包含移動、縮放)，僅方便操作辨識。
IK約束、IK約束目標，綁定骨骼或骨架的方向目標，在執行動作的時候依然朝向設定的方向，可調整被約束的權重比例。
同一個完成好的骨架可分別新增不同動作參數，與套用不同的圖片。
- 網格：
將拆解好的圖片加上網格，依圖片是否有自由變形需求而使用，如”蒙皮動畫”。
在添加外部網格時，內部網格為自動產生，常會導致歪圖現象，因此需要經常手動調整網格；外部網格添加時，不需要緊貼著圖形邊緣，否則容易在動作時切割到圖片。
網格的組織有點類似3D的三角面網狀結構(以兩點為一線，三點為一面)，骨架動畫追求的是平面的動態效果，因此不太需要複雜的四角面來做網格布局。
會依灰色的線來做變形的依據，必須照圖形的紋理、或依設定動作去思考網格結構的添加。
- 動畫：
關鍵幀可以個別針對骨骼/骨架、網格進行動畫調整，在網格上的點添加的越多，動作也會越細膩。
從動畫模式校正骨骼、網格圖片的權重分配，常需要反覆修改(因圖層包含所有骨骼與綁定的圖片，因此從動畫模式進行調整，比較不會干涉到骨架的裝配)。
好用的罐頭參數設定：”旋轉骨架”時可自動產生中間幀，縮減在時間軸調整上的時間；通過”曲線編輯”調整幀與幀之間的差值，可以增加動畫的生動感。
結論
可運用於原表情符號的優化，並可使用現有圖案進行製作，減少新圖片製作的時程；利用圖檔匯出串接成GIF、APNG動畫；未來若與HTML5遊戲結合，也能自行搞定動畫相關元件，DragonBones實作範例的原始檔案大小為150KB，所導出的動畫數據與紋理所佔空間也不大。
可當成贈送使用者的虛擬財產，可能是免費貼圖，但必須是達成某個條件時獲得；或作為頁面過場效果、執行儲值步驟等提醒互動使用；或使用者個人展示榮譽的道具，如殺手金牌動畫效果。
One thought to “骨架動畫DragonBones”
Comments are closed.