小黃老師嘿技術

【免費動畫軟體】DragonBones 龍骨教學：0 元取代 Spine，獨立遊戲開發必備神器

如果說遊戲程式碼是角色的靈魂，那麼美術動畫就是角色的軀體。對於獨立遊戲開發者（Indie Game Dev）來說，想要讓角色從靜止的圖片變成生動的戰士，通常面臨兩個選擇：一是傳統的「逐格動畫（Frame-by-frame）」，這需要極高的美術成本；二是「骨骼動畫（Skeletal Animation）」。

提到骨骼動畫，業界的標準無疑是 Spine 2D。Spine 非常強大，但它的授權費用對於預算有限的學生或小型團隊來說是一筆不小的負擔（專業版約 300 美金以上）。

這就是為什麼在 2025 年，我們依然強烈推薦 DragonBones（龍骨）。作為一款完全免費、開源且功能強大的替代方案，它依然是讓你的遊戲角色「活起來」的最佳捷徑。這篇超過 3000 字的深度指南，將手把手帶你從零開始，征服這套傳說中的免費神器。

第一章：為什麼選擇 DragonBones？除了免費還有什麼？

很多人認為「免費沒好貨」，但在 DragonBones 上這並不完全正確。雖然官方維護頻率下降，但其核心功能已經非常成熟，足以應付 90% 的 2D 遊戲需求。

1. 核心優勢解析

• 成本為零： 不只是軟體免費，它的 Runtime（運行庫）也是開源的，這意味著你可以隨意將其用於商業專案而無需支付版稅。
• 網格變形（Mesh Deformation）： 這是區分「高級動畫」與「生硬動畫」的關鍵。DragonBones 允許你為圖片建立網格，拉動頂點來模擬布料飄動、胸部起伏或肌肉擠壓，這是許多免費工具所缺乏的。
• 強大的曲線編輯器： 動畫的靈魂在於「節奏」。透過曲線編輯器，你可以輕鬆做出「慢進快出（Ease-in/Ease-out）」的效果，告別機器人般的生硬動作。
• 跨平台支援： 完美支援 Unity、Cocos Creator、PixiJS、Egret 等主流引擎。

第二章：環境建置與安裝避雷指南

這是新手最容易卡關的一步，因為官網有時會無法存取。請遵循以下步驟確保你能順利安裝。

1. 下載正確的版本

我們推薦使用 DragonBones Pro 5.6.3 版本。請盡量尋找備份的離線安裝包，或者前往 GitHub 上的 DragonBones 相關倉庫尋找 Release。如果你在官網下載遇到困難，這是正常的現象，請善用 Google 搜尋「DragonBones 5.6.3 offline installer」。

2. 安裝與登入跳過技巧

安裝完成後，DragonBones 啟動時通常會要求登入（因為它曾是白鷺時代生態系的一部分）。

3. 介面導覽

打開軟體後，你會看到類似 Flash 或 After Effects 的介面佈局：

• 中央視窗（Viewport）： 你的畫布，在這裡組裝角色。
• 左側（Scene/Library）： 場景樹狀圖（顯示骨骼層級）與資源庫（存放圖片）。
• 右側（Properties）： 屬性面板，調整位置、旋轉、透明度等數值。
• 下方（Timeline）： 時間軸，動畫師的戰場，設定關鍵影格（Keyframes）的地方。

第三章：美術素材準備（PS/Sai 拆解心法）

骨骼動畫的品質，有一半取決於你的圖是怎麼「拆」的。你不能直接把一張畫好的角色丟進去，你必須像製作紙娃娃一樣，把各個部位分開。

1. 拆圖原則

假設你要做一個揮劍的騎士，你需要將圖層拆分為：

• 頭部： 如果要做表情，眼睛、嘴巴還要另外拆開。
• 身體（軀幹）： 通常是核心。
• 上臂、前臂、手掌： 手臂必須分三段，才能自然彎曲。
• 大腿、小腿、腳掌： 同樣分三段。
• 武器： 獨立一層。

2. 補圖的重要性

3. 匯入 DragonBones

DragonBones 支援直接匯入 PSD 檔案（Photoshop 格式）。這是最快的方法！

1. 在 Photoshop 中整理好圖層，命名清楚（如 L_Hand, R_Leg）。
2. 存檔為 PSD。
3. 打開 DragonBones，選擇「匯入資源」，選取該 PSD。
4. 軟體會自動根據你的圖層位置將圖片擺好，省去重新拼湊的時間。

第四章：骨骼綁定（Rigging）——賦予角色骨架

這是最技術性的一步。圖片是肉，骨骼是骨，我們要把它們連起來。

1. 建立骨骼（Create Bones）

使用工具列上的「骨骼工具（Bone Tool，快捷鍵 N）」。

• 滑鼠左鍵拖曳： 從父節點拉向子節點。例如：從肩膀拉到手肘，再從手肘拉到手腕。
• 層級關係（Hierarchy）： 這是關鍵！你的場景樹狀圖應該呈現正確的父子關係：
  身體 (Root) -> 上臂 -> 前臂 -> 手
  這樣當你移動身體時，手會跟著動；但移動手時，身體不會動。

2. 綁定圖片（Parenting Images）

在「場景面板」中，將代表身體部位的圖片（Slot/插槽），拖曳到對應的骨骼（Bone）下方，使其成為該骨骼的子物件。

測試： 試著旋轉骨骼，如果圖片跟著旋轉且軸心正確，恭喜你，綁定成功！如果不正確，請選中圖片，按 L 鍵調整軸心點（Pivot Point）。

第五章：進階技法——網格與權重（Mesh & Weights）

如果只是簡單的旋轉，角色看起來會像皮影戲（紙片人）。要讓角色像 3D 模型一樣柔軟，你需要網格。

1. 轉換為網格（Mesh）

選中一張圖片（例如飄逸的裙擺或長髮），在屬性面板中勾選「Mesh」。此時圖片周圍會出現一圈線框。

2. 編輯頂點

點擊「編輯網格」，你可以加點、刪點。建議在需要彎曲的地方多加幾個點（例如膝蓋關節處）。

3. 權重綁定（Weight Binding）

這是最高級的技巧。假設是一個長髮角色，頭髮應該受「頭部骨骼」控制，但髮尾可能受「風力骨骼」控制。

• 選中網格圖片。
• 在屬性面板的「權重」區域，添加影響它的骨骼。
• 使用「權重筆刷」塗抹。紅色代表 100% 受控，藍色代表低影響。
• 效果： 當你移動骨骼時，圖片會根據權重發生柔和的拉伸變形，這是製作呼吸動作（Breathing Idle）的神技！

第六章：動畫製作（Animation）——讓角色動起來

切換到右上角的「動畫模式（Animation Mode）」。

1. 關鍵影格（Keyframes）

動畫的原理是：你在第 0 秒擺一個姿勢，在第 1 秒擺另一個姿勢，軟體會自動幫你計算中間的過程（Tweening）。

• 在時間軸第 0 幀，擺出「站立」姿勢，按下 K 鍵（打關鍵幀）。
• 移動到第 10 幀，讓身體稍微下沉，手部微調，按下 K 鍵。
• 移動到第 20 幀，恢復第 0 幀的姿勢（複製貼上）。
• 播放看看，你就有了一個簡單的「呼吸待機（Idle）」動畫。

2. 調整曲線（Curves）

預設的動畫是線性的（Linear），看起來很機械。點擊關鍵影格之間的連線，打開「曲線編輯器」。將線條拉成 S 型，讓動作有「緩入緩出」的感覺，質感瞬間提升兩倍。

第七章：輸出與 Unity 整合

做完動畫後，我們要把它放進遊戲裡。

1. 匯出設定

點擊「文件 -> 匯出」。

• 數據格式： 選擇 DragonBones JSON (較通用) 或 Binary (效能較好)。
• 紋理圖集（Texture Atlas）： 這是優化關鍵。勾選它，軟體會把你所有的身體碎片拼成一張大圖（Sprite Sheet）。這能大幅減少遊戲引擎的 Draw Calls。

2. 導入 Unity

1. 你需要先下載 DragonBones for Unity 的插件（通常在 GitHub 可以找到源碼，因為 Asset Store 版本可能過舊）。
2. 將插件放入 Unity 的 Assets 資料夾。
3. 將 DragonBones 匯出的三個檔案（_ske.json, _tex.json, _tex.png）拖入 Unity。
4. 對著生成的 Data 檔案點右鍵，選擇 Create -> DragonBones -> ArmatureObject。
5. 你的角色就出現在場景中了！你可以透過程式碼 unityArmature.animation.Play("Run"); 來控制它。

第八章：2025 年的替代方案與未來展望

雖然 DragonBones 很好用，但我們必須誠實面對它的狀態。截至 2025 年，原廠維護幾乎停止。

LoongBones 是什麼？

最近社群中出現了 LoongBones 的專案，這是一個基於 DragonBones 舊代碼進行重構或網頁化的分支嘗試，試圖加入 AI 輔助生成骨骼的功能。如果你喜歡嘗鮮，可以關注這個開源分支的發展。

如果不選 DragonBones？

• 預算充足： 秒選 Spine。
• UI 動畫為主： 考慮 Rive，它在 UI 互動上比 DragonBones 更強。
• 像素風格： 考慮 Pixel Game Maker 內建工具或單純的逐幀繪製。

結語：工具只是輔助，創意才是核心

DragonBones 證明了即使沒有預算，獨立開發者依然能做出擁有 3A 級動態表現的遊戲。它或許不再年輕，或許介面有點過時，但它依然是通往遊戲開發夢想最堅實的一塊墊腳石。

現在，打開你的繪圖軟體，拆分你的角色，啟動 DragonBones，賦予他們生命吧！