骨架動畫DragonBones

圖片來源:Dragon Bones

骨架動畫軟體常用於遊戲與動畫的製作,也稱作計算式動作軟體,比起flash的沒落,骨架動畫反而崛起盛行,功能不斷推層出新,其內容包含了flash基礎、3D應用概念,並能導入Html5使用,雷亞日前推出的新遊戲(Sdorica萬象物語),大量運用此技術來研發,神魔之塔、刀塔傳奇也都非常仰賴骨架動畫所帶來的動態表現,在手遊市場逐漸變成趨勢。

常見的軟體有spine、live2D與DragonBones,功能大致上都差不多(能利用程式控制動畫的高階運用),基本操作並不複雜,介面包含工作區、圖層區、時間軸、工具列等等,若是首次接觸的設計工作者,應該會感到有點熟悉,但實際要得心應手的運用,也必須有足夠的動態學基礎。

在專業的動畫公司,是可以獨立的工作項目,"動作"是一個龐大且複雜的感性邏輯處理,工作重點則"除了調整還是調整",骨架動畫不需要3D動畫龐大複雜的功能,並能將3D概念提取應用,如骨架系統、蒙皮;與傳統逐幀動畫比較,所需要的資源較少,反過來利用骨架數據演釋動作細節;另外也能有效率的製作動態表情符號,成果會比連續圖片(傳統補間動畫)來得更為順暢,或巧妙地添加在網頁與APP也會有不錯的加分效果以下介紹DragonBones的運用與優點。

動畫基礎關鍵幀、中間幀

一個動作開始與結束的地方可以當作“關鍵幀”,在開始與結束之間的連續動作則是“中間幀”;關鍵幀為動作中最主要的畫面,可清楚知道是什麼動作(簡單的如舉手),像跑步動作就需要非常多的關鍵幀組成,而中間幀把這些關鍵幀連結起來,幀數的多寡影響到動作的順暢度。決定關鍵幀定位的範圍沒有標準答案,如果難度較大的動作,關鍵幀就必須設置多一些。

“差值中間幀"為骨架動畫的優勢,可使用較少量的中間幀來完成動作,保有一定的順暢度;在動作的開始到結束,並非死板板的均速播放,而是會計算時間差值來釋出中間幀,達到快緩交替的效果。

設計能力、運動規律的把握力

在動作設定前,要先規劃好每個部件(圖片)結構,如何去拆解圖片,在骨架動畫中,不只有單純的人體動作可以完成,也包含其他能見物的動作變化,從堅體碰撞的反應到果凍Q彈效果皆可以靠參數設定來完成。

除了基礎的圖幀關係,賦予作品動感表現也是必要的環節,想像一下與制式的機械動作不同,如同手同腳走路好像違反了人體的動態線;運動規律可當作動態線來看(軟體中使用曲線設定),除了要了解主體本身固定的運動途徑,也緊密牽引著附屬物的動態線,像植物枝葉擺動、動物尾巴甩甩(植物的著主體為根莖、尾巴的主體可能是狗狗)。

一些可以學習運動規律的方向,如觀察特定動植物的動作影片,或用一些簡單的線條來規劃動態線,目標是讓動作具有和諧感。

DragonBones優勢

介面

  1. 骨架裝配、動畫製作工作區,在動作調整上常進行切換。
  2. 非常重要的核心功能
    • 選擇工具:搭配滑鼠進行物件選擇,操作體驗覺得人性化(右鍵選擇、滾輪縮放、左鍵取消與拖曳移動畫面,不用再加上shift或ctrl輔助鍵)。
    • pose工具:名符其實的擺姿勢使用,可匡選多個物件,使用拖曳方式檢視物件的動作與綁定的層級關係。
    • 骨骼工具:新增骨骼就只能靠它了。
    • 權重工具:在蒙皮後常用來調整物件之間的動作權重,在調整工作上幾乎會佔掉大半時間,如單一骨骼對N個網格的細部調整。
  3. 圖層區,顯示骨骼與物件的層級關係,拆解越多的物件就會使圖層越來越長,在物件綁定的狀態下很容易搞混目前層級關係,希望可顯示支線提示讓層級關係更好辨識。
  4. 選定骨骼或物件時,可調整特定的參數設定。
  5. 動畫時間軸,看似普通卻有很多指令工具可以操作。
  6. 調整動畫曲線來控制時間差值,使圖幀動作更加和諧生動。

優點

  • 中文化且免費,並有開源社群分享。
  • 檔案容量小。
  • 對設計者來說,操作介面易懂。
  • 可直接讀取常用文件(如PSD),並直接轉移圖層。
  • 跨骨架複製,部份或整個骨架可模組化,分別套用不同圖片(例如紙娃娃系統)。
  • 2D動畫高仿3D動畫效果,並可邊播放邊調整曲線功能。

缺點

  • 並非向量圖不能無限放大解析度。
  • 需要同時出現物體正反兩面時,動畫上表現較困難。

DragonBones實作

  • 骨骼/骨架:
骨骼必須綁定在適當的層級之下

創建的骨架若需要連動,則需要綁定好每一根骨骼的層級關係;骨骼長度不影響層級的任何關係(包含移動、縮放),僅方便操作辨識。

不論怎麼擺動整個手臂,拳頭依然指著紅點方向

IK約束、IK約束目標,綁定骨骼或骨架的方向目標,在執行動作的時候依然朝向設定的方向,可調整被約束的權重比例。

同一個完成好的骨架可分別新增不同動作參數,與套用不同的圖片。

  • 網格:

將拆解好的圖片加上網格,依圖片是否有自由變形需求而使用,如"蒙皮動畫"。

左圖:標注外部網格;右圖:調整內部網格佈局

在添加外部網格時,內部網格為自動產生,常會導致歪圖現象,因此需要經常手動調整網格;外部網格添加時,不需要緊貼著圖形邊緣,否則容易在動作時切割到圖片。

網格的組織有點類似3D的三角面網狀結構(以兩點為一線,三點為一面),骨架動畫追求的是平面的動態效果,因此不太需要複雜的四角面來做網格布局。

會依灰色的線來做變形的依據,必須照圖形的紋理、或依設定動作去思考網格結構的添加。

  • 動畫:

關鍵幀可以個別針對骨骼/骨架、網格進行動畫調整,在網格上的點添加的越多,動作也會越細膩。

調整骨骼綁定網格的權重比例

從動畫模式校正骨骼、網格圖片的權重分配,常需要反覆修改(因圖層包含所有骨骼與綁定的圖片,因此從動畫模式進行調整,比較不會干涉到骨架的裝配)。

好用的罐頭參數設定:"旋轉骨架"時可自動產生中間幀,縮減在時間軸調整上的時間;通過"曲線編輯"調整幀與幀之間的差值,可以增加動畫的生動感。

結論

可運用於原表情符號的優化,並可使用現有圖案進行製作,減少新圖片製作的時程;利用圖檔匯出串接成GIF、APNG動畫;未來若與HTML5遊戲結合,也能自行搞定動畫相關元件,DragonBones實作範例的原始檔案大小為150KB,所導出的動畫數據與紋理所佔空間也不大。

可當成贈送使用者的虛擬財產,可能是免費貼圖,但必須是達成某個條件時獲得;或作為頁面過場效果、執行儲值步驟等提醒互動使用;或使用者個人展示榮譽的道具,如殺手金牌動畫效果。

 

One thought to “骨架動畫DragonBones”

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *