Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
電子工程系
Unity遊戲程式設計(03)
2D動畫製作及應用
吳錫修
Jun 26, 2017
shapethefuture
 素材Pixel Per Unit設定為100,表示Unity裡的1單位代表100 pixel
 Camera Size建議值為視野半高
 假設遊戲畫面為1024*768,Camera視野半高為7.68/2 ...
shapethefuture
 Sprite可以是單張圖片,或由動作分鏡及相關圖片所組成
Sprite物件 1/2
3 Wu, ShyiShiou Dept. of E.E., NKUT
sprite 1
sprite 2
shapethefuture
 Sprite Mode
 Single單張矩形裁切
 Multiple裁切成多張素材
 Polygon單張多邊形裁切
Sprite物件 2/2
4 Wu, ShyiShiou Dept. of E.E.,...
shapethefuture
 在Assets下新增Sprite目錄
 Assets快顯功能表Create/Folder
 將素材圖片拖曳到Assets/Sprite目錄
 屬性編輯器 (inspector)
 將貼圖類型 (Text...
shapethefuture
 由Slice下拉選單設定剪裁方式 (Type),之後點擊「Slice」按鈕
 Automatic 自動剪裁
 Grid By Cell Size 固定大小剪裁
 Grid By Cell Count 指定...
shapethefuture
 剪裁後每幅sprite會自動設定個別的名稱,並可個別使用
 自動裁切後可依需求調整剪裁後的sprite素材屬性,完成後點擊
Apply按鈕
剪裁Sprite 3/3
7 Wu, ShyiShiou Dept....
shapethefuture
 Filter Mode是指圖片在3D空間中被拉扯或扭曲時pixel間的顏色如
何填補顯示
素材Filter Mode
8 Wu, ShyiShiou Dept. of E.E., NKUT
 Point 單點...
shapethefuture
 透過sprite位移、縮放、旋轉,達到動畫效果
 砲塔發射炮彈,變化砲塔位置來產生後座力效果
 攻擊怪物,變化怪物大小來產生被攻擊受傷效果
 由動作分鏡之⼀連串sprite,連續播放達到動畫效果
動畫原理...
shapethefuture
 將turret.png滙入到專案AssetsSprite資料夾
 開啟Sprite Editor,將Pivot設定到砲座下方中央位置
火炮動畫製作I 1/15
10 Wu, ShyiShiou Dept. o...
shapethefuture
 將turret素材拖曳到場景中,並命名為Turret
 把Turret的Position座標初始值設定為(x,y,z)=(6, -2, 0)
 把Turret的Rotation向左旋轉180度(x,y,z)...
shapethefuture
 火砲發射砲彈時,火砲會因瞬間後座力而往後彈,再慢慢往前收
 選取Turret元件
 選單命令Window> Animation,開啟動畫編輯工具
 可以將Animation Tab停靠到習慣的作業窗格上
...
shapethefuture
 點擊Animation工具之「Create」按鈕建立動畫檔
 動畫檔命名為TurretShoot,並儲存到專案中的AssetsAnimation
資料夾底下
火炮動畫製作I 4/15
13 Wu, ShyiS...
shapethefuture
 Animation Tab初始狀態會是這樣
 滑鼠滾輪可調整時間軸解析度
火炮動畫製作I 5/15
14 Wu, ShyiShiou Dept. of E.E., NKUT
「錄製鈕」壓下去表示正在錄製Key...
shapethefuture
 點選Turret,將X座標變更為6.35;在第零秒第零Frame 處(0:00)會
自動建立keyframe紀錄
火炮動畫製作I 6/15
15 Wu, ShyiShiou Dept. of E.E., NKUT
shapethefuture
 點擊箭頭展開可以檢視細節設定
 目前記錄在0:00 key frame,Position X為6.35,Position Y為2,
Position Z為0
火炮動畫製作I 7/15
16 Wu, ShyiS...
shapethefuture
 滑鼠點擊紅線區域處,可以移動時間軸
 將紅線移至0.1秒處
火炮動畫製作I 8/15
17 Wu, ShyiShiou Dept. of E.E., NKUT
shapethefuture
 將座標X設回6;在0.1秒第零Frame 處(0:10)會自動新增keyframe
紀錄
火炮動畫製作I 9/15
18 Wu, ShyiShiou Dept. of E.E., NKUT
shapethefuture
 點擊播放按鈕可以預覽動態效果
 點擊左下角的Curve按鈕可以調整key frame與key frame間的轉換
細節
 拖曳滑桿四個端點,可調整顯示比例
火炮動畫製作I 10/15
19 Wu, Shyi...
shapethefuture
 由控制點快顯功能表點選「Free Smooth」,會出現⼀條灰色的斜
率控制線
火炮動畫製作I 11/15
20 Wu, ShyiShiou Dept. of E.E., NKUT
shapethefuture
 拉動灰色點點可以調整斜率
火炮動畫製作I 12/15
21 Wu, ShyiShiou Dept. of E.E., NKUT
shapethefuture
 外⼀端點套用同樣的方法調整斜率
 調整Samples值可以動畫速度
 若要增加畫面張力,砲管向後時可以同時放大,再慢慢復原
火炮動畫製作I 13/15
22 Wu, ShyiShiou Dept. of E...
shapethefuture
 點擊Animation視窗左上角Clip下拉式選單,點選「Create New
Clip…」建立另⼀動畫檔,檔名TurretIdle
火炮動畫製作I 14/15
23 Wu, ShyiShiou Dept. o...
shapethefuture
 TurretIdle動畫中只設定⼀個Frame,讓砲塔回到初始狀態
 任意變更Position X值,再重置為6
 完成動畫錄製後,點⼀下錄製按鈕,使它彈起停⽌錄製
火炮動畫製作I 15/15
24 Wu,...
shapethefuture
 完成動作錄製後,要透過Animator編輯器設定動作狀態切換
 開啟Animator編輯器
 由Project窗格雙擊建立Turret動畫時自動產生的Controller;
 或選取Turret物件,執行...
shapethefuture
 第⼀個建立的動畫clip會被設定為default state
 由TurretIdle快顯功能表,選擇Set as Layer Default State
火炮狀態切換控制 2/9
26 Wu, ShyiSh...
shapethefuture
 由TurretIdle快顯功能表,選擇Make Transition
 把Transition的箭頭拉到TurretShoot
火炮狀態切換控制 3/9
27 Wu, ShyiShiou Dept. of E...
shapethefuture
 由TurretShoot快顯功能表,選擇Make Transition
 把Transition的箭頭拉到TurretIdle
火炮狀態切換控制 4/9
28 Wu, ShyiShiou Dept. of E...
shapethefuture
 建立動作狀態切換控制變數
 點擊左上角的Parameters,切換到參數作業面板
 點擊+號,新增⼀個狀態控制參數
 選擇Trigger,並取名為Shoot
火炮狀態切換控制 5/9
29 Wu, Shy...
shapethefuture
 設定TurretIdleTurretShoot動作狀態切換條件
 點選TurretIdleTurretShoot轉換線
 取消Has Exit Time
 Settings/Transtion Dur...
shapethefuture
 設定TurretShootTurretIdle動作狀態切換條件
 點選TurretShootTurretIdle轉換線
 勾選Has Exit Time
 Settings/Exit Time設定為1...
shapethefuture
 選取AssetsAnimationTurretShoot,關閉Loop Time (不重複播
放)
 選取AssetsAnimationTurretIdle,關閉Loop Time (不重複播放)
火炮狀態切...
shapethefuture
 測試動畫狀態切換
 點擊執行遊戲按鈕
 每點擊Animator編輯器中的Shoot,應該會觸發⼀次TurretShoot
火炮狀態切換控制 9/9
33 Wu, ShyiShiou Dept. of E.E...
shapethefuture
 剛才製作的火炮動畫是以移動火炮位置達到動畫效果,但火炮位置
已寫死在動畫中,就算將火炮移到場景其它位罝,執行時火炮還是
會回到動畫中所設定的位置
 除非在你的遊戲中,動畫道具是要放固定位置 (且沒有複本),否...
shapethefuture
 將turret.png滙入到專案AssetsSprite資料夾,命名為turret2a。開
啟Sprite Editor,將Pivot設定到砲座底部中央位置
 將turret_fire.png滙入到專案Ass...
shapethefuture
 將turret2a素材拖曳到場景中,並命名為Turret2
 把Turret2的Position座標初始值設定為(x,y,z)=(-6, -2, 0)
 把Turret2的Rotation向左旋轉180度(...
shapethefuture
 選單命令Window> Animation,開啟動畫編輯工具
 點擊Animation工具之「Create」按鈕建立動畫檔
 動畫檔命名為Turret2Shoot,並儲存到專案中的AssetsAnimati...
shapethefuture
 點擊Animation視窗左上角Clip下拉式選單,點選「Create New
Clip…」建立另⼀動畫檔,檔名Turret2Idle
火炮動畫製作II 4/9
38 Wu, ShyiShiou Dept. o...
shapethefuture
 拖曳turret2a到Turret2Idle動畫,讓砲塔回到初始狀態
 完成動畫錄製後,點⼀下錄製按鈕,使它彈起停⽌錄製
火炮動畫製作II 5/9
39 Wu, ShyiShiou Dept. of E.E....
shapethefuture
 雙擊Assets/Animation資料夾中的Turret2動畫狀態控制器,開啟
Animator編輯器
火炮動畫製作II 6/9
40 Wu, ShyiShiou Dept. of E.E., NKUT
shapethefuture
 Turret2Idle設定為Default State
 建立Turret2Idle到Turret2Shoot轉換線
 建立Turret2Shoot到Turret2Idle轉換線
 建立⼀個名為Shoot...
shapethefuture
 設定Turret2IdleTurret2Shoot動作狀態切換條件
 點選Turret2IdleTurret2Shoot轉換線
 取消Has Exit Time
 Settings/Transtion...
shapethefuture
 選取AssetsAnimationTurret2Shot,關閉Loop Time (不重複播
放)
 選取AssetsAnimationTurret2Idle,關閉Loop Time (不重複播放)
 測試...
shapethefuture
 在Assets/Scripts資料夾中新增⼀個名為TurretController之C#
Script檔
 編輯TurretController程式如下:
public class TurretControl...
shapethefuture
 由Project面板將TurretController程式腳本拖曳到Hierarchy面板中
的Turret及Turret2元件上
套用動畫控制程式腳本
45 Wu, ShyiShiou Dept. of E....
shapethefuture
 執行遊戲專案
 按空白鍵發射火炮
測試動畫控制程式腳本
46 Wu, ShyiShiou Dept. of E.E., NKUT
shapethefuture
 將num0.png~num5.png滙入到專案AssetsSprites資料夾
 將num5素材拖曳到場景中,並命名為Countdown
製作倒數動畫 1/5
47 Wu, ShyiShiou Dept. o...
shapethefuture
 Countdown物件加入CountdownController腳本程式
 編輯CountdownController程式如下:
public class CountdownControl : MonoBeh...
shapethefuture
 選取Countdown物件
 選單命令Window> Animation,開啟動畫編輯工具
 點擊Animation工具之「Create」按鈕建立動畫檔;動畫檔命名為
Countdown,並儲存到Asset...
shapethefuture
 在時間軸5秒下方點擊滑鼠右鍵,執行Add Animation Event,時間
軸下方會建立⼀事件指示條
製作倒數動畫 4/5
50 Wu, ShyiShiou Dept. of E.E., NKUT
shapethefuture
 點選事件指示條
 設定DestroyMyself()做為事件函式
 執行測試,倒數5秒後動畫會自動消失
製作倒數動畫 5/5
51 Wu, ShyiShiou Dept. of E.E., NKUT
shapethefuture
角色動畫製作 1/5
52 Wu, ShyiShiou Dept. of E.E., NKUT
 匯入角色動畫素材到Assets/Sprites資料夾
 https://gameart.eu.org/files...
shapethefuture
 拖曳idle_000到場景中,命名為Ninja,並適度調整大小
 選單命令Window/Animation,開啟動畫編輯工具
 點擊Animation工具右下方「Create」按鈕建立動畫檔
 動畫檔名N...
shapethefuture
 將所有的Idle分鏡動畫素材依序拖曳到Animation影格中,適度調整
撥放時間
角色動畫製作 3/5
54 Wu, ShyiShiou Dept. of E.E., NKUT
shapethefuture
 點擊Animation視窗左上角Clip下拉式選單,點選「Create New
Clip…」建立動畫檔,檔名Ninja_Attack
角色動畫製作 4/5
55 Wu, ShyiShiou Dept. of E...
shapethefuture
 比照Idle動畫製作方式,將attack分鏡動畫素材逐⼀拖曳到
Animation影格中,並適度調整撥放時間
 以同樣方式建立Ninja_Run及Ninja_Jump動畫檔
角色動畫製作 5/5
56 Wu,...
shapethefuture
 雙擊Ninja動畫控制器,開啟Animator編輯器,編輯動作狀態切換
控制
角色動畫控制 1/6
57 Wu, ShyiShiou Dept. of E.E., NKUT
shapethefuture
 將Ninja_Idle設設定為Default State
 建立Ninja_Idle與Ninja_Run轉換線
 建立Ninja_Idle與Ninja_Jump轉換線
 建立Ninja_Idle與Ninj...
shapethefuture
 設定NinjaIdleNinjaAttack動作狀態切換條件
 取消Has Exit Time
 Settings/Transtion Duration設為0
 在Consitions中新增Action...
shapethefuture
 設定NinjaIdleNinjaRun動作狀態切換條件
 取消Has Exit Time
 Settings/Transtion Duration設為0
 在Consitions中新增Action Eq...
shapethefuture
 在Assets/Script資料夾中新增⼀個名為NinjaController之C# Script
檔
 編輯NinjaController程式如下:
public class NinjaController...
shapethefuture
void Update () {
if (Input.GetKey (KeyCode.Z)) {
PlayAnimation (1);
} else if (Input.GetKey (KeyCode.X)) {
...
Upcoming SlideShare
Loading in …5
×

Unity遊戲程式設計(03) 2D動畫製作及應用

6,180 views

Published on

Updated on Jun 26, 2017
介紹使用Sprite Editor、Animation、Animator等工具製作2D動畫,並透過腳本程式控制動畫

Published in: Software
  • Sex in your area is here: ♥♥♥ http://bit.ly/39sFWPG ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ♥♥♥ http://bit.ly/39sFWPG ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Unity遊戲程式設計(03) 2D動畫製作及應用

  1. 1. 電子工程系 Unity遊戲程式設計(03) 2D動畫製作及應用 吳錫修 Jun 26, 2017
  2. 2. shapethefuture  素材Pixel Per Unit設定為100,表示Unity裡的1單位代表100 pixel  Camera Size建議值為視野半高  假設遊戲畫面為1024*768,Camera視野半高為7.68/2 = 3.84,則 Camera Size建議值為3.84 Camera size設定 2 Wu, ShyiShiou Dept. of E.E., NKUT
  3. 3. shapethefuture  Sprite可以是單張圖片,或由動作分鏡及相關圖片所組成 Sprite物件 1/2 3 Wu, ShyiShiou Dept. of E.E., NKUT sprite 1 sprite 2
  4. 4. shapethefuture  Sprite Mode  Single單張矩形裁切  Multiple裁切成多張素材  Polygon單張多邊形裁切 Sprite物件 2/2 4 Wu, ShyiShiou Dept. of E.E., NKUT
  5. 5. shapethefuture  在Assets下新增Sprite目錄  Assets快顯功能表Create/Folder  將素材圖片拖曳到Assets/Sprite目錄  屬性編輯器 (inspector)  將貼圖類型 (Texture Type)設定為Sprite (2D and UI)  將圖片類型 (Sprite Mode)設定為Multiple  點擊「Sprite Editor」按鈕 剪裁Sprite 1/3 5 Wu, ShyiShiou Dept. of E.E., NKUT
  6. 6. shapethefuture  由Slice下拉選單設定剪裁方式 (Type),之後點擊「Slice」按鈕  Automatic 自動剪裁  Grid By Cell Size 固定大小剪裁  Grid By Cell Count 指定行列個數方式剪裁 剪裁Sprite 2/3 6 Wu, ShyiShiou Dept. of E.E., NKUT
  7. 7. shapethefuture  剪裁後每幅sprite會自動設定個別的名稱,並可個別使用  自動裁切後可依需求調整剪裁後的sprite素材屬性,完成後點擊 Apply按鈕 剪裁Sprite 3/3 7 Wu, ShyiShiou Dept. of E.E., NKUT
  8. 8. shapethefuture  Filter Mode是指圖片在3D空間中被拉扯或扭曲時pixel間的顏色如 何填補顯示 素材Filter Mode 8 Wu, ShyiShiou Dept. of E.E., NKUT  Point 單點插值,近看時邊緣有明顯鋸齒狀  Bilinear 雙線性插值,近看時邊緣顯得模糊化  Trilinear 三線性插值,類似Bilinear,並且在 mipmap級別間進行混合  配合Max Size及Compression設定,在品質與 執行效能間取得最佳效果
  9. 9. shapethefuture  透過sprite位移、縮放、旋轉,達到動畫效果  砲塔發射炮彈,變化砲塔位置來產生後座力效果  攻擊怪物,變化怪物大小來產生被攻擊受傷效果  由動作分鏡之⼀連串sprite,連續播放達到動畫效果 動畫原理 9 Wu, ShyiShiou Dept. of E.E., NKUT
  10. 10. shapethefuture  將turret.png滙入到專案AssetsSprite資料夾  開啟Sprite Editor,將Pivot設定到砲座下方中央位置 火炮動畫製作I 1/15 10 Wu, ShyiShiou Dept. of E.E., NKUTPivot位置
  11. 11. shapethefuture  將turret素材拖曳到場景中,並命名為Turret  把Turret的Position座標初始值設定為(x,y,z)=(6, -2, 0)  把Turret的Rotation向左旋轉180度(x,y,z)=(0, 180, 0)  把Turret的Scale縮小0.8倍(x,y,z)=(0.8, 0.8, 1) 火炮動畫製作I 2/15 11 Wu, ShyiShiou Dept. of E.E., NKUT
  12. 12. shapethefuture  火砲發射砲彈時,火砲會因瞬間後座力而往後彈,再慢慢往前收  選取Turret元件  選單命令Window> Animation,開啟動畫編輯工具  可以將Animation Tab停靠到習慣的作業窗格上 火炮動畫製作I 3/15 12 Wu, ShyiShiou Dept. of E.E., NKUT
  13. 13. shapethefuture  點擊Animation工具之「Create」按鈕建立動畫檔  動畫檔命名為TurretShoot,並儲存到專案中的AssetsAnimation 資料夾底下 火炮動畫製作I 4/15 13 Wu, ShyiShiou Dept. of E.E., NKUT
  14. 14. shapethefuture  Animation Tab初始狀態會是這樣  滑鼠滾輪可調整時間軸解析度 火炮動畫製作I 5/15 14 Wu, ShyiShiou Dept. of E.E., NKUT 「錄製鈕」壓下去表示正在錄製Key Frame 紅線代表我們在第幾秒
  15. 15. shapethefuture  點選Turret,將X座標變更為6.35;在第零秒第零Frame 處(0:00)會 自動建立keyframe紀錄 火炮動畫製作I 6/15 15 Wu, ShyiShiou Dept. of E.E., NKUT
  16. 16. shapethefuture  點擊箭頭展開可以檢視細節設定  目前記錄在0:00 key frame,Position X為6.35,Position Y為2, Position Z為0 火炮動畫製作I 7/15 16 Wu, ShyiShiou Dept. of E.E., NKUT
  17. 17. shapethefuture  滑鼠點擊紅線區域處,可以移動時間軸  將紅線移至0.1秒處 火炮動畫製作I 8/15 17 Wu, ShyiShiou Dept. of E.E., NKUT
  18. 18. shapethefuture  將座標X設回6;在0.1秒第零Frame 處(0:10)會自動新增keyframe 紀錄 火炮動畫製作I 9/15 18 Wu, ShyiShiou Dept. of E.E., NKUT
  19. 19. shapethefuture  點擊播放按鈕可以預覽動態效果  點擊左下角的Curve按鈕可以調整key frame與key frame間的轉換 細節  拖曳滑桿四個端點,可調整顯示比例 火炮動畫製作I 10/15 19 Wu, ShyiShiou Dept. of E.E., NKUT 播放
  20. 20. shapethefuture  由控制點快顯功能表點選「Free Smooth」,會出現⼀條灰色的斜 率控制線 火炮動畫製作I 11/15 20 Wu, ShyiShiou Dept. of E.E., NKUT
  21. 21. shapethefuture  拉動灰色點點可以調整斜率 火炮動畫製作I 12/15 21 Wu, ShyiShiou Dept. of E.E., NKUT
  22. 22. shapethefuture  外⼀端點套用同樣的方法調整斜率  調整Samples值可以動畫速度  若要增加畫面張力,砲管向後時可以同時放大,再慢慢復原 火炮動畫製作I 13/15 22 Wu, ShyiShiou Dept. of E.E., NKUT
  23. 23. shapethefuture  點擊Animation視窗左上角Clip下拉式選單,點選「Create New Clip…」建立另⼀動畫檔,檔名TurretIdle 火炮動畫製作I 14/15 23 Wu, ShyiShiou Dept. of E.E., NKUT
  24. 24. shapethefuture  TurretIdle動畫中只設定⼀個Frame,讓砲塔回到初始狀態  任意變更Position X值,再重置為6  完成動畫錄製後,點⼀下錄製按鈕,使它彈起停⽌錄製 火炮動畫製作I 15/15 24 Wu, ShyiShiou Dept. of E.E., NKUT
  25. 25. shapethefuture  完成動作錄製後,要透過Animator編輯器設定動作狀態切換  開啟Animator編輯器  由Project窗格雙擊建立Turret動畫時自動產生的Controller;  或選取Turret物件,執行選單命令Window> Animator 火炮狀態切換控制 1/9 25 Wu, ShyiShiou Dept. of E.E., NKUT
  26. 26. shapethefuture  第⼀個建立的動畫clip會被設定為default state  由TurretIdle快顯功能表,選擇Set as Layer Default State 火炮狀態切換控制 2/9 26 Wu, ShyiShiou Dept. of E.E., NKUT
  27. 27. shapethefuture  由TurretIdle快顯功能表,選擇Make Transition  把Transition的箭頭拉到TurretShoot 火炮狀態切換控制 3/9 27 Wu, ShyiShiou Dept. of E.E., NKUT
  28. 28. shapethefuture  由TurretShoot快顯功能表,選擇Make Transition  把Transition的箭頭拉到TurretIdle 火炮狀態切換控制 4/9 28 Wu, ShyiShiou Dept. of E.E., NKUT
  29. 29. shapethefuture  建立動作狀態切換控制變數  點擊左上角的Parameters,切換到參數作業面板  點擊+號,新增⼀個狀態控制參數  選擇Trigger,並取名為Shoot 火炮狀態切換控制 5/9 29 Wu, ShyiShiou Dept. of E.E., NKUT
  30. 30. shapethefuture  設定TurretIdleTurretShoot動作狀態切換條件  點選TurretIdleTurretShoot轉換線  取消Has Exit Time  Settings/Transtion Duration設為0  在Consitions中新增Shoot 火炮狀態切換控制 6/9 30 Wu, ShyiShiou Dept. of E.E., NKUT
  31. 31. shapethefuture  設定TurretShootTurretIdle動作狀態切換條件  點選TurretShootTurretIdle轉換線  勾選Has Exit Time  Settings/Exit Time設定為1  Settings/Transtion Duration設為0 火炮狀態切換控制 7/9 31 Wu, ShyiShiou Dept. of E.E., NKUT
  32. 32. shapethefuture  選取AssetsAnimationTurretShoot,關閉Loop Time (不重複播 放)  選取AssetsAnimationTurretIdle,關閉Loop Time (不重複播放) 火炮狀態切換控制 8/9 32 Wu, ShyiShiou Dept. of E.E., NKUT
  33. 33. shapethefuture  測試動畫狀態切換  點擊執行遊戲按鈕  每點擊Animator編輯器中的Shoot,應該會觸發⼀次TurretShoot 火炮狀態切換控制 9/9 33 Wu, ShyiShiou Dept. of E.E., NKUT
  34. 34. shapethefuture  剛才製作的火炮動畫是以移動火炮位置達到動畫效果,但火炮位置 已寫死在動畫中,就算將火炮移到場景其它位罝,執行時火炮還是 會回到動畫中所設定的位置  除非在你的遊戲中,動畫道具是要放固定位置 (且沒有複本),否則 在設計時要避免使用絕對位置方式  解決方式,選單命令GameObject>Create Empty先建立⼀個空遊 戲物件,將turret素材做為子物件,再依照先前程序製作turret動畫 隱藏在火炮動畫的問題 34 Wu, ShyiShiou Dept. of E.E., NKUT
  35. 35. shapethefuture  將turret.png滙入到專案AssetsSprite資料夾,命名為turret2a。開 啟Sprite Editor,將Pivot設定到砲座底部中央位置  將turret_fire.png滙入到專案AssetsSprite資料夾,命名為 turret2b。開啟Sprite Editor,將Pivot設定到砲座底部中央位置  將turret.png滙入到專案AssetsSprite資料夾,命名為turret2c。開 啟Sprite Editor,將Pivot設定到砲座底部前側位置 火炮動畫製作II 1/9 35 Wu, ShyiShiou Dept. of E.E., NKUT turret2a turret2cturret2b
  36. 36. shapethefuture  將turret2a素材拖曳到場景中,並命名為Turret2  把Turret2的Position座標初始值設定為(x,y,z)=(-6, -2, 0)  把Turret2的Rotation向左旋轉180度(x,y,z)=(0, 0, 0)  把Turret2的Scale縮小0.8倍(x,y,z)=(0.8, 0.8, 1) 火炮動畫製作II 2/9 36 Wu, ShyiShiou Dept. of E.E., NKUT
  37. 37. shapethefuture  選單命令Window> Animation,開啟動畫編輯工具  點擊Animation工具之「Create」按鈕建立動畫檔  動畫檔命名為Turret2Shoot,並儲存到專案中的AssetsAnimation 資料夾底下  依序將turret2a、 turret2b、 turret2c、 turret2a拖曳到 Animation影格中,適度調整key frame時間點 火炮動畫製作II 3/9 37 Wu, ShyiShiou Dept. of E.E., NKUT
  38. 38. shapethefuture  點擊Animation視窗左上角Clip下拉式選單,點選「Create New Clip…」建立另⼀動畫檔,檔名Turret2Idle 火炮動畫製作II 4/9 38 Wu, ShyiShiou Dept. of E.E., NKUT
  39. 39. shapethefuture  拖曳turret2a到Turret2Idle動畫,讓砲塔回到初始狀態  完成動畫錄製後,點⼀下錄製按鈕,使它彈起停⽌錄製 火炮動畫製作II 5/9 39 Wu, ShyiShiou Dept. of E.E., NKUT
  40. 40. shapethefuture  雙擊Assets/Animation資料夾中的Turret2動畫狀態控制器,開啟 Animator編輯器 火炮動畫製作II 6/9 40 Wu, ShyiShiou Dept. of E.E., NKUT
  41. 41. shapethefuture  Turret2Idle設定為Default State  建立Turret2Idle到Turret2Shoot轉換線  建立Turret2Shoot到Turret2Idle轉換線  建立⼀個名為Shoot的Trigger參數 火炮動畫製作II 7/9 41 Wu, ShyiShiou Dept. of E.E., NKUT
  42. 42. shapethefuture  設定Turret2IdleTurret2Shoot動作狀態切換條件  點選Turret2IdleTurret2Shoot轉換線  取消Has Exit Time  Settings/Transtion Duration設為0  在Consitions中新增Shoot  設定Turret2ShootTurret2Idle動作狀態切換條件  點選Turret2ShootTurret2Idle轉換線  勾選Has Exit Time  Settings/Exit Time設定為1  Settings/Transtion Duration設為0 火炮動畫製作II 8/9 42 Wu, ShyiShiou Dept. of E.E., NKUT
  43. 43. shapethefuture  選取AssetsAnimationTurret2Shot,關閉Loop Time (不重複播 放)  選取AssetsAnimationTurret2Idle,關閉Loop Time (不重複播放)  測試動畫狀態切換  點擊執行遊戲按鈕  每點擊Animator編輯器中的Shoot,應該會觸發⼀次Turret2Shoot 火炮動畫製作II 9/9 43 Wu, ShyiShiou Dept. of E.E., NKUT
  44. 44. shapethefuture  在Assets/Scripts資料夾中新增⼀個名為TurretController之C# Script檔  編輯TurretController程式如下: public class TurretController : MonoBehaviour { private Animator _animator; void Start () { _animator = this.GetComponent<Animator> (); } private void PlayShootAnimation(){ _animator.SetTrigger ("Shoot"); } void Update () { if (Input.GetKeyDown (KeyCode.Space)) { PlayShootAnimation (); } } } 撰寫動畫控制程式腳本 44 Wu, ShyiShiou Dept. of E.E., NKUT
  45. 45. shapethefuture  由Project面板將TurretController程式腳本拖曳到Hierarchy面板中 的Turret及Turret2元件上 套用動畫控制程式腳本 45 Wu, ShyiShiou Dept. of E.E., NKUT
  46. 46. shapethefuture  執行遊戲專案  按空白鍵發射火炮 測試動畫控制程式腳本 46 Wu, ShyiShiou Dept. of E.E., NKUT
  47. 47. shapethefuture  將num0.png~num5.png滙入到專案AssetsSprites資料夾  將num5素材拖曳到場景中,並命名為Countdown 製作倒數動畫 1/5 47 Wu, ShyiShiou Dept. of E.E., NKUT
  48. 48. shapethefuture  Countdown物件加入CountdownController腳本程式  編輯CountdownController程式如下: public class CountdownControl : MonoBehaviour { void Start () { } void Update () { } public void DestroyMyself(){ Destroy (gameObject); } } 製作倒數動畫 2/5 48 Wu, ShyiShiou Dept. of E.E., NKUT
  49. 49. shapethefuture  選取Countdown物件  選單命令Window> Animation,開啟動畫編輯工具  點擊Animation工具之「Create」按鈕建立動畫檔;動畫檔命名為 Countdown,並儲存到AssetsAnimation資料夾  依序將num5、num4、num3、num2、num1及num0拖曳到 Animation影格中,num0 key frame間隔1.2秒,其餘key frame間 隔1秒 製作倒數動畫 3/5 49 Wu, ShyiShiou Dept. of E.E., NKUT
  50. 50. shapethefuture  在時間軸5秒下方點擊滑鼠右鍵,執行Add Animation Event,時間 軸下方會建立⼀事件指示條 製作倒數動畫 4/5 50 Wu, ShyiShiou Dept. of E.E., NKUT
  51. 51. shapethefuture  點選事件指示條  設定DestroyMyself()做為事件函式  執行測試,倒數5秒後動畫會自動消失 製作倒數動畫 5/5 51 Wu, ShyiShiou Dept. of E.E., NKUT
  52. 52. shapethefuture 角色動畫製作 1/5 52 Wu, ShyiShiou Dept. of E.E., NKUT  匯入角色動畫素材到Assets/Sprites資料夾  https://gameart.eu.org/files/adventure_girl.zip
  53. 53. shapethefuture  拖曳idle_000到場景中,命名為Ninja,並適度調整大小  選單命令Window/Animation,開啟動畫編輯工具  點擊Animation工具右下方「Create」按鈕建立動畫檔  動畫檔名Ninja_Idle,並儲存到專案中的AssetsAnimation資料夾 角色動畫製作 2/5 53 Wu, ShyiShiou Dept. of E.E., NKUT
  54. 54. shapethefuture  將所有的Idle分鏡動畫素材依序拖曳到Animation影格中,適度調整 撥放時間 角色動畫製作 3/5 54 Wu, ShyiShiou Dept. of E.E., NKUT
  55. 55. shapethefuture  點擊Animation視窗左上角Clip下拉式選單,點選「Create New Clip…」建立動畫檔,檔名Ninja_Attack 角色動畫製作 4/5 55 Wu, ShyiShiou Dept. of E.E., NKUT
  56. 56. shapethefuture  比照Idle動畫製作方式,將attack分鏡動畫素材逐⼀拖曳到 Animation影格中,並適度調整撥放時間  以同樣方式建立Ninja_Run及Ninja_Jump動畫檔 角色動畫製作 5/5 56 Wu, ShyiShiou Dept. of E.E., NKUT
  57. 57. shapethefuture  雙擊Ninja動畫控制器,開啟Animator編輯器,編輯動作狀態切換 控制 角色動畫控制 1/6 57 Wu, ShyiShiou Dept. of E.E., NKUT
  58. 58. shapethefuture  將Ninja_Idle設設定為Default State  建立Ninja_Idle與Ninja_Run轉換線  建立Ninja_Idle與Ninja_Jump轉換線  建立Ninja_Idle與Ninja_Attack轉換線  建立⼀個名為Action的Int參數 角色動畫控制 2/6 58 Wu, ShyiShiou Dept. of E.E., NKUT
  59. 59. shapethefuture  設定NinjaIdleNinjaAttack動作狀態切換條件  取消Has Exit Time  Settings/Transtion Duration設為0  在Consitions中新增Action Equals 1  設定NinjaIdleNinjaJump動作狀態切換條件  取消Has Exit Time  Settings/Transtion Duration設為0  在Consitions中新增Action Equals 2 角色動畫控制 3/6 59 Wu, ShyiShiou Dept. of E.E., NKUT
  60. 60. shapethefuture  設定NinjaIdleNinjaRun動作狀態切換條件  取消Has Exit Time  Settings/Transtion Duration設為0  在Consitions中新增Action Equals 3  設定其它狀態NinjaIdle動作狀態切換條件  取消Has Exit Time  Settings/Transtion Duration設為0  在Consitions中新增Action Equals 0 角色動畫控制 4/6 60 Wu, ShyiShiou Dept. of E.E., NKUT
  61. 61. shapethefuture  在Assets/Script資料夾中新增⼀個名為NinjaController之C# Script 檔  編輯NinjaController程式如下: public class NinjaController : MonoBehaviour { private Animator _animator; void Start () { _animator = this.GetComponent<Animator> (); } private void PlayAnimation(int action){ _animator.SetInteger ("Action", action); } 角色動畫控制 5/6 61 Wu, ShyiShiou Dept. of E.E., NKUT
  62. 62. shapethefuture void Update () { if (Input.GetKey (KeyCode.Z)) { PlayAnimation (1); } else if (Input.GetKey (KeyCode.X)) { PlayAnimation (2); } else if (Input.GetKey (KeyCode.C)) { PlayAnimation (3); } else PlayAnimation (0); } } 角色動畫控制 6/6 62 Wu, ShyiShiou Dept. of E.E., NKUT

×