動畫與Funtion呼叫(前) - 圖檔切割

遊戲一定會有動畫需要製作，本篇教學會以線上免費素材網站為範例，一步一步介紹如何從圖檔做出能在Unity上跑的動畫。最後會再給動畫加上程式功能，製作完整的角色

免費網路素材

可以參考底下的網站，裡面有蠻多素材網站的介紹

• 46+ 個免費遊戲素材網站整理：2D、3D、人物、模型等免費下載
• 看這篇就夠！28 個免費 3D 模型下載、版權使用、資源網站整理

這裡再推薦其中我較常用的素材收集網站

• itch.io
• craftpix
• pixabay

圖檔切割

1. 以底下網址的素材為範例，登入後右邊點選「Free Download」即可下載素材

   https://craftpix.net/freebies/free-werewolf-sprite-sheets-pixel-art/

2. 解壓縮後，把想做成動畫的圖檔直接拉入Assets底下的資料夾，範例為Black_Werewolf的Run圖檔並匯入專案資料夾 Assets/AnimatedImage/Character/Wolf

3. 進入圖檔的「Inspector」面板(通常在右方)，並在下拉選單「Sprite Mode」選擇「Multiple」，選好後點選「Sprite Editor」進入切割畫面

4. 上方點選「Slice」出現切割選項，第一次通常先使用「Grid By Cell Count」，看底下有多少圖就選多少個Column。範例是9個跑步的狼，所以在Column填上9，再點Slice，就能成功切出動畫圖層。

5. 這種免費的素材上面會留很多空白，我會再調整到剛好的高度。但如果你需要的動圖是正方形或是不介意留白的話那可以保留。另外調整時最好每個圖大小都一樣，不然之後在遊戲中定位可能會跑掉。

6. 調好後可以直接按關閉存檔，會發現在Project面板上剛剛圖檔下面多了9個子項目

7. 全選9個子項目，並拖拉至「Hierarchy」或「Scene」面板，會跳出存檔視窗，選擇最一開始圖檔存放的資料夾，以我的範例就是Assets/AnimatedImage/Character/Wolf

8. 存好後會創建兩個名為Run跟Run_0的檔案，成功後可以點運行遊戲的按鈕，就可以看到狼在奔跑了

Sprite Editor面板

• Automatic : 自動偵測圖檔範圍切割，快速但可能切出來的圖大小不一
• Grid By Cell Size : 給定切割大小等分切割，但若留白過大也會切出純空白圖檔
• Grid By Cell Count : 給定幾欄幾列後切割
• Isometric Grid : 沒用過，但一般用於製作2.5D的物件才會用Isometric

結語

以上是動畫切割的第一步驟，成功後可以試著把角色的所有動作都切好並做成動畫，下一章會說明如何串連動作。