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.

剪紙動畫

它是什麼?

傳統意義上, 剪影動畫 是一種 定格動畫 . 在剪影動畫中, 人們把紙片(或者其他的薄材料)剪成特殊的形狀, 來組合成角色和物體的二維形象. 角色的身體通常是由幾個元件組成的. 這些元件在動畫的每一影格中形成一種組合, 之後對其攝影. 動畫製作者在兩次攝影之間將這些部分進行很小幅度的移動和旋轉, 這樣, 當這些攝影的畫面以很快的速度連續依次播放時, 就可以造成這些角色和物體在連續運動的假像.

現在可以用軟體製作剪紙動畫的模擬,如`《南方公園》 <https://zh.wikipedia.org/zh-cn/%E5%8D%97%E6%96%B9%E5%85%AC%E5%9C%92>`__和`《傑克與夢幻島海盜》 <https://zh.wikipedia.org/zh-cn/%E5%82%91%E5%85%8B%E8%88%87%E5%A4%A2%E5%B9%BB%E5%B3%B6%E6%B5%B7%E7%9B%9C>`__。

在影片遊戲中,這種技術也變得流行。例如`《紙片馬里奧》 <https://en.wikipedia.org/wiki/Super_Paper_Mario>`__或 《雷曼 起源》

Godot 中的剪紙動畫

Godot 提供了一些工具,用於剪紙動畫的綁定,而且是工作流的理想選擇:

  • 動畫系統與引擎完全集成:這意味著動畫可以控制的不僅僅是物體的運動。紋理、精靈大小、軸心、不透明度、顏色調變等都可以進行動畫和混合。

  • 混合動畫風格 : 動畫精靈允許將傳統賽璐璐動畫與剪紙動畫一起使用. 在賽璐璐動畫中, 不同的動畫影格使用完全不同的繪圖, 而不是相同的片段位置不同. 在其他基於剪紙的動畫中, 賽璐璐動畫可以選擇性地用於複雜的元件, 例如手, 腳, 改變面部表情等.

  • 自訂形狀元素 : 可以用 Polygon2D 建立自訂形狀, 允許UV動畫, 變形等.

  • 粒子系統 : 剪紙式動畫配件可以與粒子系統相結合, 這對魔法效果, 噴氣背包等很有用.

  • 自訂碰撞器:在骨架的不同部位設定碰撞器和影響區域,非常適合 Boss 和格鬥遊戲。

  • 動畫樹 : 允許在幾個動畫之間進行複雜的組合和混合, 與3D動畫的工作方式相同.

以及更多!

製作 GBot

在本教學中,我們將使用由 Andreas Esau 建立的 GBot 角色作為演示。

../../_images/tuto_cutout_walk.gif

取得您的資源:cutout_animation_assets.zip

設定裝配

建立一個空的Node2D作為場景的根, 我們將在它下面工作:

../../_images/tuto_cutout1.png

模型的第一個節點是臀部。一般來說,無論是 2D 還是 3D,臀部都是骨架的根部。這使得它更容易製作動畫:

../../_images/tuto_cutout2.png

接下來將是軀幹, 軀幹需要是臀部的子級, 所以要建立一個子級精靈, 並載入軀幹紋理, 然後適當地調整它:

../../_images/tuto_cutout3.png

這看起來不錯。讓我們通過旋轉軀幹來看看層次結構是否能像骨架一樣工作。可以按 E 進入旋轉模式,然後用滑鼠左鍵拖動。要退出旋轉模式,請按 ESC

../../_images/tutovec_torso1.gif

旋轉軸心錯誤,需要調整。

Sprite 中間的這個小十字就是旋轉軸心:

../../_images/tuto_cutout4.png

調整軸心

可以通過更改 Sprite 中的 offset 屬性來調整軸心:

../../_images/tuto_cutout5.png

軸心也可以進行*視覺化*的調整。將滑鼠懸停在所需的軸心點上時,按 V 移動所選 Sprite 的軸心。工具列中還有一個工具也有類似的功能。

../../_images/tutovec_torso2.gif

繼續新增身體元件, 從右臂開始. 確保將每個精靈放在其在層次結構中的正確位置, 其旋轉和平移都是相對於其父級而言的:

../../_images/tuto_cutout6.png

左臂有些問題. 在二維中, 子節點出現在父節點的前面:

../../_images/tuto_cutout7.png

我們希望左臂出現在臀部和軀幹的 後面 . 我們可以將左臂節點在場景層次結構中移到臀部節點上面, 但這樣一來, 左臂在層次結構中的位置就不對了, 這意味著它不會受到軀幹移動的影響. 我們用 RemoteTransform2D 節點來解決這個問題.

備註

還可以通過調整從二維節點繼承的任何節點的Z屬性, 來修復深度排序問題.

RemoteTransform2D 節點

RemoteTransform2D 節點對層次結構中其他地方的節點進行變換. 這個節點將自己的變換, 包括它從父節點繼承的任何變換, 應用到它所針對的遙控節點.

這使我們能夠修正元素的可見性順序, 這些部分獨立於在剪裁層次結構中的位置.

建立一個 RemoteTransform2D 節點作為軀幹的子節點。命名為 remote_arm_l。在第一個節點中再建立一個 RemoteTransform2D 節點並將其命名為 remote_hand_l。讓這兩個新節點的 Remote Path 屬性分別指向 arm_lhand_l 精靈:

../../_images/tuto_cutout9.png

移動 RemoteTransform2D 節點現在可以移動精靈. 所以可以通過調整 RemoteTransform2D 變換來建立動畫:

../../_images/tutovec_torso4.gif

完成骨架

按照其餘部分的相同步驟完成骨架。生成的場景應該類似於:

../../_images/tuto_cutout10.png

生成的裝備很容易製作動畫. 通過選擇節點並旋轉它們, 您可以有效地為前向運動學(FK)設定動畫.

對於簡單的物體和裝配來說已經足夠了, 但仍然有限制:

  • 在複雜的裝配中, 在主視口中選擇精靈會變得很困難. 場景樹最終被替代, 用來選擇元件, 這可能會比較慢.

  • 反向動力學(Inverse Kinematics、IK)對於手腳等肢體的運動非常有用,目前我們的綁定還無法使用。

為了解決這些問題,我們將會使用 Godot 的骨架。

骨架

在 Godot 中,有一個在節點之間建立“骨骼”的輔助工具。骨骼連接起的節點稱為骨架。

舉個例子,讓我們把右臂變成一個骨架。要建立一個骨架,必須從上到下選擇節點鏈:

../../_images/tuto_cutout11.png

然後按一下“骨架”功能表並選擇 製作骨骼

../../_images/tuto_cutout12.png

這將增加覆蓋在手臂上的骨頭, 但結果可能令人驚訝.

../../_images/tuto_cutout13.png

為什麼這只手缺少一根骨骼?在 Godot 中,使用骨骼把節點和它的父節點連接起來。目前沒有手節點的子節點。有了這些知識,讓我們再試一次。

第一步是建立端點節點. 任何型別的節點都可以, 但是 Position2D 是首選, 因為它在編輯器中可見. 端點節點將確保最後一個骨骼具有方向.

../../_images/tuto_cutout14.png

現在選擇整個鏈, 從端點到手臂並建立骨骼:

../../_images/tuto_cutout15.png

結果更像骨架了,現在可以選擇手臂和前臂並設定動畫。

為所有重要的末端建立端點. 為剪紙的所有可關節部分生成骨骼, 臀部是它們之間的最終連接.

你可能會注意到,在連接臀部和軀幹時,會多出一根骨骼。Godot 用骨骼將臀部節點連接到了場景根部,我們不希望這樣。要解決這個問題,選擇根部和臀部節點,打開“骨架”功能表,點擊 清除骨骼

../../_images/tuto_cutout15_2.png

您的骨架最後看上去應該是這樣的:

../../_images/tuto_cutout16.png

你可能已經注意到了手上的第二組端點. 這很快就會有意義.

現在整個人物已經裝配好了,下一步就是設定 IK 鏈。IK 鏈可以更自然的控制四肢。

IK 鏈

IK 是反向動力學(Inverse Kinematics)的縮寫,給手部、足部以及其它肢體的動畫帶來便利。想像一下,您想要將角色的腳放在地面上的特定位置。如果沒有 IK 鏈,腳的每次運動都需要旋轉和定位其他幾個骨骼(至少得涉及大腿及小腿)。這將非常複雜並導致不精確的結果。

備註

Godot 中的 IK 鏈目前僅在編輯器中工作,而不是在運作時工作。它們旨在簡化設定關鍵影格的過程,目前對於程式動畫等技術沒有用處。

要建立 IK 鏈,請選擇從端點到鏈基的骨骼鏈。例如,要為右腿建立一條 IK 鏈,選擇以下:

../../_images/tuto_cutout17.png

然後為 IK 啟用此鏈。轉到“編輯 > 製作 IK 鏈”。

../../_images/tuto_cutout18.png

結果,鏈的基部將變為*黃色*。

../../_images/tuto_cutout19.png

一旦 IK 鏈設定完畢,抓住任何鏈基(例如腳部)的任意巢狀子節點並移動。你會看到鏈的剩餘部分跟隨你的移動調整位置。

../../_images/tutovec_torso5.gif

動畫

下一節將是建立剪紙動畫的技巧集合。關於 Godot 中的動畫系統如何工作的更多資訊,請參閱 建置系統簡介

設定關鍵影格和排除屬性

當動畫編輯器視窗打開時, 特殊的本文元素會出現在頂部工具列中:

../../_images/tuto_cutout20.png

按鍵按鈕在目前遊戲開始位置為選定的物件或骨骼插入位置, 旋轉和縮放關鍵影格.

通過切換關鍵影格按鈕左邊的 "位置" , "旋轉" 和 "縮放" 按鈕, 可以修改其功能, 允許您指定將為三個屬性中的哪一個建立關鍵影格.

下面是一個例子, 說明如何使用其的: 假設您有一個節點, 其中已經有兩個關鍵影格只對其縮放進行動畫. 您想在同一個節點重疊新增旋轉移動. 旋轉運動應該在不同的時間開始和結束, 與已經設定的縮放變化不同. 在新增新關鍵影格時, 可以使用切換按鈕, 只新增旋轉資訊. 這樣, 您就可以避免新增不需要的縮放關鍵影格, 破壞現有的縮放動畫.

建立內容

將放鬆姿勢視為預設姿勢,當遊戲中沒有其他姿勢處於活動狀態時,應該將其設定為剪紙綁定。創造一個放鬆姿勢如下:

1. Make sure the rig parts are positioned in what looks like a "resting" arrangement.

  1. 建立內容

  2. 選擇裝配中的所有節點(應該可以框選).

4. Make sure the "loc", "rot", and "scl" toggle buttons are all active in the toolbar.

5. Press the key button. Keys will be inserted for all selected parts storing their current arrangement. This pose can now be recalled when necessary in your game by playing the "rest" animation you've created.

../../_images/tuto_cutout21.png

只修改旋轉

當製作剪紙動畫綁定時, 通常只需要改變節點的旋轉. 很少使用位置和比例.

因此, 在插入鍵時, 你可能會發現在大多數時間裡只有 "rot" 切換鍵處於啟動狀態, 會很方便:

../../_images/tuto_cutout22.png

這將避免為座標和縮放建立不必要的動畫軌道.

關鍵影格 IK 鏈

編輯IK鏈時, 不需要選擇整個鏈來新增關鍵影格. 選擇鏈的端點並插入關鍵影格將自動為鏈的所有其他部分插入關鍵影格.

視覺上移動父級後面的精靈

有時, 在動畫過程中, 需要讓節點相對於其父節點更改其可視深度. 想像一個面對鏡頭的角色, 他從背後拿出一個東西放在面前. 在這個動畫過程中, 整個手臂和他手中的物體都需要改變相對於角色身體的視覺深度.

為了幫助解決這個問題,在所有 Node2D 的衍生節點上都有一個可製作關鍵影格的“Behind Parent”(在父級之後)屬性。規劃綁定時,請考慮它需要執行的動作,並考慮如何使用“Behind Parent”和/或 RemoteTransform2D 節點。它們提供重疊的功能。

../../_images/tuto_cutout23.png

為多個關鍵影格設定緩動曲線

要將同一緩動曲線同時應用於多個關鍵影格:

  1. 選擇相關的關鍵影格.

  2. 點擊動畫面板右下角的鉛筆圖示. 這將打開過渡編輯器.

  3. 在過渡編輯器中, 點擊所需曲線進行應用.

../../_images/tuto_cutout24.png

2D 骨架變形

骨架變形(Skeletal Deform)可以用來增強剪紙綁定,允許單個元件有組織地變形(例如,像昆蟲走路時擺動的觸角一樣)。

這個過程在:ref:`單獨的教學 <doc_2d_skeletons>`中講述。