總結這三部分系列，我將向您展示如何利用文件對像功能來加速遊戲的多個資產的動畫過程，以及如何導出圖形以用於遊戲引擎。

 

在這個原型中，拼圖的所有部分共享相同的動畫。

在以下步驟中，我將演示完成此任務的有效方法。

動畫代理對象

首先，讓我們首先創建一個代理/模板圖形，稍後將用彩色圖形替換它。我簡單地製作了一塊紅色的碎片並將其轉換為灰色。這個拼圖的部分由兩部分組成：貓和塊。

 

將圖形導出為透明PNG。

 

現在創建一個新文檔並使用FILE - IMPORT - CREATE FILE OBJECT將導出的圖形作為文件對象放置。

 

啟用“時間軸”面板並創建新時間線。與角色一樣，您可以為棋子製作不同的動畫序列。我將從IDLE動畫循環開始。

 

 

不要忘記 - 要啟用INTERPOLATION，您必須選擇圖層，然後單擊此層上的ENABLE KEYFRAMES。

 

使用我之前使用的相同方法，我為播放器需要提示時播放的循環設置了動畫。它基本上是一個壁球和拉伸部分，但速度略有不同。

 

我將創建一個新的TIMELINE來添加另一個動畫序列，這次是一個片段“爆炸”（或離開舞台）的動作。

 

您可以在下面看到此動畫的主要進度：

 

我能夠使用Opacity屬性使內部元素動畫消失。動畫不透明度時，關鍵幀下方會顯示半鑽石。

 

我覺得缺少了一些東西，所以我添加了一個額外的圖層並繪製了這個'扭曲'形狀，以便與貓圖形一起旋轉。在嘗試使用插值模式進行動畫處理之前，請不要忘記將任何新繪圖轉換為FILE OBJECT。

 

下面你可以看到這個動畫的進展;旋轉的圖形變為白色，外部的部分具有動畫的不透明度，因此整個部分從遊戲場景中消失。

 

 

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

替換動畫的圖形

好。因此，如果這是我們的資產動畫，我們如何將其傳播到遊戲的所有其他圖形？

讓我告訴你一個簡單的方法。

 

讓我們首先導出要替換灰色代理對象的剩餘部分。這些將是這個拼圖的主要舞台上的不同顏色（紅色，藍色，綠色和黃色），如下所示。

 

現在回到您在其中創建動畫的文件，選擇要替換的片段的圖層，然後選擇FILE OBJECT - CHANGE FILE OF FILE OBJECT。

 

找到內部部分（cat）和外部部分（框架）的彩色圖形 - 圖形將被替換，動畫仍然有效。

 

你只需要為每個彩色片重複這個過程。

 

這裡的所有部件都已替換並為我們的遊戲做好準備：

 

而已。只要您不保存源文件（帶有灰色圖形動畫的文件），您就可以將其用作模板，並在保留動畫的同時將內容替換為您需要的其他圖形或變體。

 

這種技術可用於具有多個角色的遊戲，例如：您首先創建一個模板（代理）圖形，在遊戲中完成每個部分和動畫，然後您可以在這些圖形中添加“皮膚”，應用相同的動畫循環。

 

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

導出動畫

這不是強制性的，但我建議優化您要導出的圖像。一件非常重要的事情是確保動畫的主題被限制在一個“邊界框”上，周圍沒有額外的透明度（空白空間）。

 

您可以做的一個很好的技巧是：在圖形周圍創建一個SELECTION BOX並移動動畫時間軸以檢查選擇之外是否有任何像素。

 

在下面的示例中：左圖顯示頭部的頂部是如何在選擇區域之外的;右圖顯示了精靈在整個動畫中如何在選擇區域內。

 

選擇仍然有效，請轉到文件 - 導出動畫並選擇圖像序列。

 

在下面的對話框中，找到要導出圖像的文件夾，並確保注意以下選項：

 

• 文件命名：為文件名添加前綴;

 

• 選擇PNG格式以保持透明度;

 

• 在SIZE SETTINGS中選擇SELECTION AREA以在您創建的邊界框內導出圖像; （請參閱下面有關此選項的說明）

 

如果需要，您還可以從此屏幕調整精靈的大小;

 

//注意：“大小設置 - 選擇區域”選項僅適用於Clip Studio Paint EX版本;如果你有Pro版本，你可以在導出之前將圖像壓縮到正確的大小。 //

完成！現在您可以在遊戲引擎中加載這些圖像。

 

幾乎所有遊戲創建工具包都使用圖像序列作為在屏幕上顯示動畫角色的方式。這是最常用的技術，但很高興記住，在遊戲開發方面，優化（這個詞再次）總是首選。

 

在下一步中，我將向您展示如何使用Free獨立工具創建Sprite表和Atlas Images。

 

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

創建Atlas圖像和SpriteSheets

在遊戲開發場景中，Sprite Sheets和Atlas Images有助於降低用於在系統內存中加載圖像的處理能力。

 

您可以提供包含動畫的所有幀的單個圖像以及包含坐標和信息的數據文件，以便引擎可以“讀取”spritesheet並在特定時間定位特定圖像，而不是加載不同的PNG來顯示動畫。

 

Atlas圖像是相同的，但不是動畫幀，而是在一張圖像上打包遊戲的各種圖形。

 

不幸的是，使用Clip Studio Paint創建spritesheet或Atlas圖像並不容易（自動）。

 

對於這個例子，我將使用一個名為“Free Texture Packer”的工具。它是一個免費工具，甚至可以使用在線版本（鏈接在本文的腳註中）。

 

以下是如何使用它的一步一步：

 

[ 步驟1。]

 

打開程序並加載圖像;你也可以拖放到這個（藍色）區域。

 

[ 第2步。]

 

加載圖像後，您可以開始調整Sprite表的屬性。您必須與您的程序員或首席藝術家交談，以獲取有關如何將資產導入引擎的詳細信息。

 

這裡最重要的選擇是：

 

• 寬度/高度是spritesheet / atlas的大小;遊戲引擎通常使用256,512,1024,2048的地圖......大多數時候需要檢查POWER OF TWO選項，如果你需要強制你的紋理具有相同的大小，也需要固定大小。

 

• 允許旋轉，允許修改和修剪模式可以更改，以便您可以在spritesheet中放入更多圖像。靜態圖像（圖集）首選啟用修剪和旋轉模式;對於動畫，你關閉那些更安全，所以精靈對齊，並在它周圍有相同的透明空間。

在下面的例子中，我選擇以2048x2048平方紋理打包女孩空閒動畫。

 

要在工具中預覽動畫，請選擇右側面板上的所有圖像，然後單擊ANIMATIONS按鈕。使用滑塊控制速度。

 

要完成此過程，請選擇數據/坐標文件的格式（這將由您的程序員和您正在使用的引擎通知），找到要保存的文件夾，然後單擊導出。

 

最終結果將是紋理貼圖圖像和數據文件（可以在任何文本編輯器上打開） - 那些需要具有相同的時間。

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

 

結論

多年來我一直在使用Flash，Animate和最近的Spine為原型和獨立遊戲創建簡單的動畫，但是當Celsys將Interpolation添加為動畫功能時，我終於看到了簡化我工作流程的機會。

 

我希望這個系列內容豐富，您可以使用這些技術中的任何一種來開始您的第一個遊戲項目。

 

值得記住的是，這種類型的動畫工作流程可用於為其他類型的項目創建資源：Stream或Youtube頻道的動畫圖形，社交媒體的有趣小GIF和模因，甚至是使用剪切樣式的動畫短片。

 

如果您在閱讀本文後創建了一些內容，請告訴我，以便我可以推廣您的Feed。

 

謝謝閱讀。

在下一個提示中見。

 

• Dado

 

下載材料和鏈接