到目前為止我們學到了什麼

在本系列的第一部分中，我們學習瞭如何從Clip Studio Paint創建，編輯和導出精靈。

現在是時候使用該軟件來創建一些動畫精靈。

 

目前在行業中，2D遊戲的動畫通常是用2D骨骼和網格變形系統製作的 - 精靈的碎片是在特定的程序中導入的，它在它周圍創建一個多邊形網格。骨骼與此網格的不同區域相關聯，提供了一種“變形”精靈的方法，就像它是3D對像一樣。結果是一個超級平滑的動畫，只需要一個圖像用於精靈的整個動畫。

 

雖然2D骨骼動畫系統是當前的趨勢，但是剪切動畫系統仍然可以用於為遊戲創建精靈。這是一種節省時間的技術，您可以在第一個遊戲，原型甚至是可能具有兼容藝術風格的完整遊戲中使用。

 

這也是一種非常平易近人的方法，可以為視頻，社交媒體的GIF或流媒體通道的圖形創建動畫。

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Clip Studio Paint中的剪切動畫

從版本1.84開始，現在可以使用插值為圖層的內容設置動畫。這是動畫工具集的一個巨大增加。

讓我們通過一個有趣的彈跳球動畫來學習這個新功能：

 

1.創建一個新文件並繪製一個球以反彈。

2.確保您的時間軸面板可見，然後單擊此新時間線按鈕;在確認對話框中單擊“確定”。

3.單擊這個小“正在運行的紙張”按鈕以啟用此層上的關鍵幀;請注意添加到當前圖層的小圖標。

 

4.將子工具更改為OPERATION - OBJECT，您將注意到插值處於活動狀態時可以設置動畫的屬性。

 

5.回到時間軸，讓我們為第一個姿勢設置一個關鍵幀。

您可以稍微移動Ball圖形，以便程序將其註冊為關鍵幀。您會注意到藍色菱形圖標現在位於時間軸和對象的屬性中。

6.將時間軸移動到時間的一半（在我的示例中為第10幀）並將球從地面向上移動。請記住，首先將時間軸移動到第10幀然後移動到對象。您可以按住SHIFT約束球在Y軸上的移動。

 

7.現在將時間軸移動到第20幀並將球放回地面;

點擊播放，小紅球還活著。

8.為了使球的彈跳更有趣，你可以調整時間（每個關鍵幀的持續時間/曝光），以增加對象的“重量”感。

返回時間軸，點擊並拖動中間關鍵幀更靠近終點關鍵幀 - 球將花費更多時間在向上運動上並且會更快下降...

 

9.現在讓我們通過在此動畫中添加Squash和Stretch來使其更加卡通化。

回到時間軸，在球向上運動的中間（我的例子中的第7幀），使用SCALE調整其形狀 - 僅在Y軸上拉伸球。

請記住關閉FIXED ASPECT以啟用非均勻縮放。保持形狀的體積;如果你在X中伸展，則在Y中壓縮，反之亦然。

 

10.為了完成這個例子，我在最後一個之前添加了兩個Squash和Stretch幀;在第18幀，我在Y（伸展）中延長了球，在第19幀中，我在X（壁球）中做得更寬，這使得球對重力和對地面的影響做出反應。

這裡是均勻間隔的姿勢，沒有插值，所以你可以看到每幀的變形。

 

這裡是（下面）帶有插值的最終動畫和對時間的一些調整（通過縮短時間軸並添加額外的幀，在落下之前將球保持在天空中，使整個動作更快）。

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

在為角色製作動畫之前，有關文件對象的一些內容

在為彈跳球設置動畫時，你可能會注意到一些事情：當使用TRANSFORM工具（旋轉，縮放和移動）時，它使用整個畫佈區域進行變形，而不僅僅是對象的形狀。

 

如果我們計劃為更複雜的對象製作動畫，這可能是一個問題。在這些情況下，最好為FILE OBJECTS設置動畫而不是常用的圖層。

 

//關於此圖片：左圖：紅色球位於圖層上，變換工具將使用整個文檔區域作為變換對象的參考。

右：綠球是一個文件對象，現在轉換基於對象的大小。

 

FILE OBJECT是一個包含外部.CLIP文件內容的容器。這個（文件對象）可以放在任何文檔上。源文件的任何更改都將反映在使用文件對象的文檔中。

 

例如，讓我們開始使用FILE OBJECTS創建主角。此過程相當於在3D軟件和/或任何骨架動畫工具中裝配角色。

 

使用文件對象裝配你的遊戲精靈

讓我們首先創建一個新文檔並粘貼精靈的完整圖像，這樣我們就可以用它作為模板來創建裝備。調整畫布大小，以便為您計劃製作的動畫留出空間。

要導入精靈片段，請使用FILE - IMPORT - CREATE FILE OBJECT選項。導入您在本教程第一部分中創建的透明PNG或.CLIP文件。

您還可以將文件夾中的文件單擊並拖拽到ITEM BANK調色板。

 

 

將所有精靈放置在畫布中，並使用OPERATION - OBJECT子工具排列零件。

如果需要調整零件的Z-Ordering（哪個對象位於其他對象的前面/後面），只需在圖層堆棧中向上或向下移動相應的圖層。要快速選擇圖層，您可以按住CTRL + SHIFT並單擊畫布。

//關於此圖片：LEFT：錯誤的圖層排序，右圖：正確重疊部分。

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

現在讓我們準備動畫工作流程。我強烈建議您將時間軸調色板移動到畫布的一側 - 這樣更容易理解動畫的內容。

單擊NEW TIMELINE並設置動畫的一些屬性，例如：動畫序列的名稱（Idle，Run，Walk）;動畫的幀速率（12或15 fps適合這種剪裁風格）和你要使用的幀數（我將從20開始）。

 

您可以通過將THUMBNAIL SIZE選項更改為NONE來更輕鬆地管理時間軸。此選項只顯示每個部件的名稱，類似於其他動畫包（Flash，Animate，Blender，例如......）

 

為了能夠在Clip Studio Paint中使用插值進行動畫處理，您必須在時間軸上啟用它。選擇所有圖層，然後單擊此層上的ENABLE KEYFRAME。你會注意到圖標圖標的變化。

現在，您必須在精靈的所有圖層中執行某些操作，在動畫的第一幀中優先選擇。

使用OPERATION - OBJECT子工具並將工件的轉換樞軸（旋轉中心）移動到正確的位置（在此示例中，我將此樞軸從中心移動到頭部的底部，頸部位於此處）

 

角色的手臂也需要樞軸在肩膀的位置。在進入下一步之前調整每個部件的樞軸...

 

在設置軸心點時，在Rig上進行一些測試 - 旋轉角色的關節，直到找到最佳方式為其設置動畫。

 

在示例中，由於樞軸放置不正確，指針不起作用...

 

通過調整樞軸位置，我可以旋轉手的關節，從而產生一種錯覺，即她的整個手臂都是由單個圖像構成的。

在任何時候，您都可以通過將ROTATION ANGLE選項設置為0來重置圖層的旋轉。對於SCALE，您也可以重置為100。

 

這是我如何調整每個關節的樞軸點的圖表。

 

請注意時間軸中每個部分如何設置關鍵幀。

如果您的某些圖層沒有關鍵幀，請通過在畫布上稍微移動一塊或使用ADD KEYFRAME按鈕手動創建一個關鍵幀。

 

完成。角色權利已準備好動畫。

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

動畫“空閒”類型的動畫

一旦設置了角色裝備（樞軸關節到位並且所有部分都是關鍵幀），就可以將第一個姿勢複製到動畫的最後一幀。

 

複製多個幀的最簡單方法是選擇時間軸中的每個關鍵幀，按住ALT鍵，然後選擇CLICK和DRAG到所需位置。

 

現在，將時間軸選擇移動到動畫的中間部分，選擇角色的所有部分（除了她的腿）並向下移動一點（我們創建呼吸的上/下）。

 

請記住，您可以使用CTRL + LEFT MOUSE單擊以快速切換並通過圖層進行選擇。您也可以使用鍵盤箭頭移動部件。

這是結果。很簡單，但這是一個開始。

打破動畫剛性的“簡單”方法是改變運動部件的時間：在下面的示例中，我延遲（向左移動）她身體的關鍵幀（女孩+身體層），因此運動開始一小部分比其他部分快的時間。我也按比例推遲了她的手臂和手。

 

最後，我延遲了頭部和頭髮的關鍵幀，所以看起來這些部分被身體“拖拽”。

 

整個想法是模擬從胸部開始的運動，並像鐵路車一樣依次拖動其他部分。

 

談到計時，你必須訓練你的眼睛注意那些微妙的變化。嘗試先看看哪個部分比其他部分開始移動。

在此之前，我們剛剛處理了片段的翻譯（Up and Down），現在讓我們添加一些旋轉。

 

從Head部分開始，選擇時間軸上的中間關鍵幀（單擊它以使其變為紅色）並逆時針旋轉它 - 只是一個微小的運動。

你還必須相應地修復她的頭髮旋轉。

 

看看這樣小的調整如何增加她的頭部和頭髮的重量。事情開始變得更有趣。

 

我為她的手臂和手做了同樣的事情 - 只是在每個部分的框架之間旋轉。

 

Scale屬性也可以設置動畫。

我選擇了她的兩條腿（GIRL_LEGL和GIRL_LEGR）並使用了OPERATION - OBJECT工具來“擠壓”腿部，以便對她的體重做出反應。

 

就像我們在Bouncing Ball練習中所做的那樣，記得關閉FIXED ASPECT屬性，這樣你就可以保持對象的體積（壓入Y，拉伸X，反之亦然）。

 

Squash和Stretch是你可以在動畫的各個部分使用的東西，所以看起來更卡通：在下面的例子中註意我如何使用Scale來擠壓/拉伸她的身體和頭髮的幀之間。他們現在看起來不太僵硬。

 

製作（和預覽）遊戲動畫循環時的“規則”是在動畫循環的開始和結束時始終具有相同的姿勢。 （按住ALT，拖放框架以復制它）。

 

這裡有一個提示：當你測試動畫時，確保從0到19播放動畫（如果你有20幀動畫） - 在Clip Studio Paint中你可以移動時間軸中的藍色手柄來限製播放。

這將更好地預覽循環，因為您不會兩次暴露相同的幀（1和20）。

 

查看動畫的第一階段和最新階段之間的比較。

請記住，我們只使用3個（實際上是2個）不同的姿勢來創建這個非常吸引人的動畫循環。

這個過程是您可以用來為精靈賦予生命的各種動作的一個很好的起點。

 

動畫複雜的對象（如角色）可能會令人困惑，因此請保持簡單，直到您開始更好地了解時間。試圖同時應用所有這12個經典動畫原理真是太過分了。

 

而已。我希望你喜歡它，讓我們繼續本系列的第三部分和最後一部分，我將向你展示一些提示和技巧，以加快動畫圖形的創建，當然，如何使這些藝術品為遊戲做好準備。

 

請在下面的鏈接中下載本練習的源文件。

 

下載材料