Work in progress

The content of this page was not yet updated for Godot 4.2 and may be outdated. If you know how to improve this page or you can confirm that it's up to date, feel free to open a pull request.

2D 骨架

前言

When working with 3D, skeletal deforms are common for characters and creatures and most 3D modeling applications support it. For 2D, as this function is not used as often, it's difficult to find mainstream software aimed for this.

你可以在 Spine、Dragonbones 等協力廠商軟體中建立動畫。不過,Godot 從 3.1 版本開始就已經內建了這個功能。

為什麼要在 Godot 中直接處理骨骼動畫?答案是這樣做有很多好處:

  • 能更好地與引擎集成, 從而減少使用外部工具匯入和編輯的麻煩.

  • 能夠控制粒子系統, 著色器, 聲音, 呼叫腳本, 顏色, 透明度等動畫.

  • Godot內建的骨骼系統非常高效, 並且是為性能而設計的.

接下來的教學將講解 2D 骨架變形。

設定

也參考

在開始之前, 我們建議您先瀏覽一下 剪紙動畫 教學, 以便對Godot中的動畫製作有一個大致的瞭解.

在本教學中, 我們將使用單張圖片來建構我們的角色. 從這裡下載 gBot_pieces.png 或保存下圖.

../../_images/gBot_pieces.png

並且建議下載最終的角色圖片 gBot_complete.png 將不同部分放在一起,以便進行參考。

../../_images/gBot_complete.png

建立內容

為您的模型建立一個新場景(如果它是一個動畫角色,您可能需要使用 KinematicBody2D)。為便於使用,建立一個空的 2D 節點作為多邊形的根節點。

Polygon2D 節點開始。現在不需要把它放在場景何處,所以簡單建立如下:

../../_images/skel2d1.png

為您之前下載的角色元件選擇並指定紋理:

../../_images/skel2d2.png

不建議直接繪製多邊形。請打開該多邊形的“UV”對話方塊:

../../_images/skel2d3.png

轉到 模式, 選擇鉛筆, 在需要的區域繪製一個多邊形:

../../_images/skel2d4.png

複製多邊形節點, 並給它一個合適的名字. 然後, 再次進入 "UV" 對話方塊, 在新的所需設計中用另一個多邊形替換舊的多邊形.

當複製節點且下一塊具有相似形狀時, 可以編輯上一個多邊形, 而不是繪製新多邊形.

移動多邊形後, 請記住通過在多邊形2D UV編輯器中選擇編輯->"多邊形->UV" 來更新UV.

../../_images/skel2d5.png

繼續這樣做, 直到你對應所有的元件.

../../_images/skel2d6.png

你會注意到, 節點的部分與它們在原始紋理中的佈局是一樣的. 這是因為預設情況下, 當你繪製一個多邊形時,UV和點是一樣的.

重新排列元件, 建立角色. 這個過程應該很快. 沒必要改變軸心, 因此, 不必費心確保每個元件的旋轉軸心都正確;你可以暫時不用理會它們.

../../_images/skel2d7.png

啊, 這些作品的視覺順序還不正確, 因為有些覆蓋到錯誤的部分. 重新排列節點的順序來解決這個問題:

../../_images/skel2d8.png

恭喜你完成本節教學!它肯定比剪紙動畫教學簡單得多.

建立內容

建立一個 Skeleton2D 節點作為根節點的子項。我們將其作為骨架的基礎:

../../_images/skel2d9.png

建立一個 Bone2D 節點作為骨架的子項。把它放在臀部(通常從這裡開始建立骨架)。骨骼會指向右邊,但是現在你可以忽略這個。

../../_images/skel2d10.png

在層級結構中繼續建立骨骼並依次命名它們.

../../_images/skel2d11.png

在這根鏈條的末端,會有一個*下巴*節點。它很短小,也指向右邊。這根單根骨正常情況下沒有子骨骼。*提示*單根骨的長度屬性可以通過屬性面板來改變:

../../_images/skel2d12.png

在這種情況下, 我們不需要旋轉骨頭, 巧合的是, 精靈中的下巴指向右邊, 但萬一需要, 可以隨意旋轉. 同樣, 這只是對尖端骨骼的真正需要, 因為帶有子節點通常不需要長度或特定的旋轉.

繼續建構整個骨架:

../../_images/skel2d13.png

你會注意到,所有骨骼節點旁都有一個煩人的警告,提示你缺少放鬆姿勢。這意味著是時候設定一個了。轉到*骨架*節點並建立一個放鬆姿勢。這個姿勢是預設的,你可以隨時回來修改(對於製作動畫來說非常方便):

../../_images/skel2d14.png

警告消失了。如果你修改骨架(新增/移除骨骼)你需要重新設定放鬆姿勢。

多邊形的變形

選擇之前建立的多邊形,並將骨架節點分配給它們的 Skeleton 屬性。這將確保它們最終能被變形。

../../_images/skel2d15.png

按一下上面突出顯示的屬性並選擇骨架節點:

../../_images/skel2d16.png

再次打開多邊形的 UV 編輯器,進入 Bones 部分。

../../_images/skel2d17.png

現在您還不能繪製權重。為此,您首先需要將骨架中的骨骼列表與多邊形同步。此步驟僅需手動執行一次(除非您通過新增/刪除/重命名骨骼來修改骨架)。它確保您的綁定資訊保存在多邊形中,即使骨架節點意外丟失或被修改。按“同步骨骼到多邊形”按鈕來同步列表。

../../_images/skel2d18.png

骨骼列表將自動顯示。預設情況下,您的多邊形沒有被分配任何權重資訊。選擇您想要分配權重的骨骼,並在它們上面繪製:

../../_images/skel2d19.png

白色點完全受到權重影響,而黑色點完全不受影響。如果在多根骨骼上,繪製了相同的白色點,那麼權重的影響將平均分配在這些骨骼之間。(所以通常不需要過多使用中間色調,除非你想仔細打磨彎曲效果)。

../../_images/skel2d20.gif

繪製完權重後,製作骨骼的動畫(不是多邊形的動畫!)會具有修改和彎曲多邊形的預期效果。因為你只需用這種方法驅動骨骼,工作就變得容易得多!

但這並不完美。嘗試調調骨骼的動畫,彎曲的多邊形往往會產生意想不到的結果:

../../_images/skel2d21.gif

這是因為Godot在繪製多邊形時, 產生了內部三角形來連接這些點. 它們並不總是按你所期望的方式彎曲. 如果要解決這個問題, 你需要在幾何圖形中設定提示, 以明確希望它如何變形.

內部頂點

再次打開每根骨骼的 UV 功能表,進入 Points 部分。在你期望幾何體彎曲的地方新增一些內部頂點:

../../_images/skel2d22.png

現在轉到 多邊形 部分, 重新繪製細節更豐富的多邊形. 這樣, 當多邊形彎曲時, 你需要確保它們變形的可能性最小, 慢慢嘗試找出正確的設定.

../../_images/skel2d23.png

一旦你開始繪製, 原來的多邊形會消失, 你可以自由建立自己的多邊形:

../../_images/skel2d24.png

通常這個數量的細節沒有問題, 儘管你想更精細地控制三角形. 請多多嘗試, 直到獲得你滿意的結果.

注意: 不要忘記你新新增的內部頂點也需要繪製權重!再次轉到 骨骼 部分, 將它們分配到正確的骨骼.

一旦你設定好了, 你會得到更好的結果:

../../_images/skel2d25.gif