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.

剪紙動畫

什麼是 InputEvent?

傳統上,剪紙動畫 是一種 定格動畫,會將紙張(或其他薄片材料)剪成特定形狀,排列成二維角色與物件的樣貌。角色的身體通常由多個部件組成。每個影格都要將這些部件重新排列並拍照一次。動畫師會在每次拍攝間,微幅移動並旋轉這些部件,當這些影像快速連續播放時,就能產生動作的錯覺。

現今也能透過軟體模擬剪紙動畫,例如《南方四賤客》<https://zh.wikipedia.org/zh-tw/南方四賤客> 和《傑克與夢幻島海盜》<https://zh.wikipedia.org/zh-tw/傑克與夢幻島海盜> 等作品。

這種技術在電子遊戲中也很常見,例如《紙片瑪利歐》<https://zh.wikipedia.org/zh-tw/紙片瑪利歐>或《雷射超人 起源》<https://zh.wikipedia.org/zh-tw/雷射超人_起源>。

Godot 中的剪紙動畫

Godot 提供完善的剪紙動畫綁定工具,非常適合製作這類動畫的流程:

  • 動畫系統與引擎深度整合:這代表動畫不僅能控制物件移動,連紋理、Sprite 尺寸、樞紐點(Pivot)、透明度、顏色調整等屬性都能進行動畫與混合。

  • 風格混合:AnimatedSprite2D 可以讓傳統的賽璐璐(Cel)動畫與剪紙動畫並用。在賽璐璐動畫中,不同的影格是完全不同的繪圖,而非僅僅是同一部件位置變化。在以剪紙為主的動畫裡,也能針對像手部、腳部或表情等複雜部位,局部採用賽璐璐動畫。

  • 自訂形狀元素:可利用 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

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

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

../../_images/tuto_cutout4.png

調整軸心

可以透過調整 Sprite2D 的 offset (偏移)屬性來設定旋轉軸心:

../../_images/tuto_cutout5.png

軸心也可以在畫面上*直接調整*。把滑鼠游標移到想要的軸心點,按 V 就會把選取的 Sprite2D 軸心移到那裡。工具列上也有其他相關工具可以用。

../../_images/tutovec_torso2.gif

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

../../_images/tuto_cutout6.png

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

../../_images/tuto_cutout7.png

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

備註

你也可以調整任何繼承自 Node2D 節點的 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 中,使用骨骼把節點和它的父節點連接起來。目前沒有手節點的子節點。有了這些知識,讓我們再試一次。

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

../../_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

『鑰匙』按鈕會在目前時間軸位置,幫選中的物件或骨骼同時插入位置、旋轉與縮放的關鍵影格。

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

舉例來說:假設你有一個節點,已有兩個只做縮放動畫的關鍵影格。你現在想在同個節點上另加旋轉動畫,且旋轉動畫的起訖時間和縮放動畫不同。這時只要開啟『旋轉』那個切換鈕,插入新關鍵影格時就只會記錄旋轉資訊,不會覆蓋到原本的縮放動畫。如此就能避免不小心插入多餘的縮放關鍵影格,讓動畫更好管理。

建立預設姿勢(Rest Pose)

Rest Pose(預設姿勢)是指當遊戲沒啟用其他動畫時,剪紙綁定會回到的預設站姿。建立方式如下:

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

  1. 建立一個新動畫,並命名為「rest」。

  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)

骨架變形(Skeletal Deform)可以進一步強化剪紙動畫綁定,讓單一部件能有自然的變形效果(例如昆蟲走路時會搖晃的觸角)。

這部分詳見 專門教學