Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

2D 骨架

前言

在 3D 製作中,骨架變形是角色與生物動畫的常見方式,大多數 3D 建模軟體都支援。但在 2D 領域,這功能並不普及,因此很難找到主流且專注於這方面的軟體。

你可以選擇在 Spine、DragonBones 等第三方軟體中製作骨架動畫,不過 Godot 也有內建這項功能。

為什麼要在 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

你會注意到所有骨骼都顯示缺少靜止姿勢(Rest Pose)的警告。靜止姿勢是骨架的預設姿勢,你可以在需要時隨時回到該姿勢(對製作動畫非常方便)。要設定靜止姿勢,請在場景樹中點選 skeleton 節點,接著在工具列按下 Skeleton2D 按鈕,並在下拉選單選擇 Overwrite Rest Pose

../../_images/skel2d14.webp

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

多邊形的變形

選擇之前建立的多邊形,並將骨架節點分配給它們的 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