iT邦幫忙

2024 iThome 鐵人賽

DAY 21
0
Software Development

初心者限定!設計師帶你學 Unity 3D 遊戲程式設計系列 第 21 篇

Day21 / Unity 簡單動畫簡單做-程式寫動畫 DOTween 入門

  • 分享至 

  • xImage
  •  

Day21

DOTween 應用

STEP 1

下載並導入 DOTween


前往 Unity Asset Store 搜尋並下載 DOTween (HOTween v2)

➔ 點擊 Add to My Assets 下載 ➔ 點擊 Import 導入

➔ 跳出 New Version of DOTween Imported 視窗

➔ 點擊 Open DOTween Utility Panel ➔ 點擊 Setup DOTween

➔ 點擊 Apply 並關閉視窗就完成了

01

下載連結|https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676

02
03
04
05

STEP 2

建立一個名為 ShowManager 的腳本


對 Assets 資料夾 點擊右鍵 ➔ 選擇 Create ➔ 點選 Folder ➔ 命名為 Script

➔ 對 Script 資料夾 點擊右鍵 ➔ 選擇 Create ➔ 點選 C# Script ➔ 命名為 ShowManager

06
07

STEP 3

利用 DOTween 控制舞台移動


開啟 ShowManager 腳本,輸入以下程式碼並存檔

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening; // 新增DOTween的Library

public class ShowManager : MonoBehaviour
{

    public GameObject stage;

    void Start()
    {
        stage.transform.DOMoveY(-15f, 0);
    }

    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Q))
        {
            // 升起
            stage.transform.DOMoveY(-1.5f, 1);
        }

        if (Input.GetKeyDown(KeyCode.W))
        {
            // 往前
            stage.transform.DOMoveZ(-3f, 1);
        }

        if (Input.GetKeyDown(KeyCode.E))
        {
            // 往後
            stage.transform.DOMoveZ(15f, 1);
        }

        if (Input.GetKeyDown(KeyCode.R))
        {
            // 轉兩圈
            stage.transform.DORotate(new Vector3(0,1440,0), 2);
        }
    }
}

➔ 回到 Unity 介面,建立一個空物件( Create Empty )並命名為 Game Manager

➔ 將 ShowManager 腳本拖曳至 Game Manager 物件 上

➔ 將 Stage 物件 綁定至 Game Manager 物件的 Stage 欄位 中

08
09
10
11

Animator 應用

STEP 1

修改 Animator 的流程轉換方式


點擊 RMan 並在 Animator 視窗中將 Entry 及 Exit 分別與 四個動畫片段 進行連接

➔ 點擊 Animator 視窗右上角的 Parameters 開啟參數視窗

➔ 點擊 加號 新增一個 整數欄位,並命名為 select

12
13
14

STEP 2

修改各個動畫片段的條件設定


點擊 Entry 與 turnRight 相連接之 箭頭

➔ 點擊 Conditions 視窗右下角的 加號 新增一個 條件式

➔ 將條件式修改為 select Equals 1

➔ 重複上述動作,將 turnLeft 與 walk 分別新增條件式設定

15

示意圖以 turnRight 的條件設定為例

16

turnRight 動畫片段的條件式設定為 select Equals 1

17

turnLeft 動畫片段的條件式設定為 select Equals 2

18

walk 動畫片段的條件式設定為 select Equals 3

💡古古的小提醒:
idle 為預設的 Animation,當 select = 0 時便會自動播放 idle 片段。

STEP 3

控制 RMan 動作變化


開啟 ShowManager 腳本,將原本的程式碼修改為以下版本並存檔

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;

public class ShowManager : MonoBehaviour
{

    public GameObject stage;
		public List<GameObject> RManFriends = new List<GameObject>();

    void Start()
    {
        stage.transform.DOMoveY(-15f, 0);
				stage.transform.DOMoveY(-1.5f, 3);
    }

    void Update()
    {
				stageAnimation();
        rManAnimation();
    }

		void stageAnimation()
    {
				if (Input.GetKeyDown(KeyCode.Q))
        {
            // 升起
            stage.transform.DOMoveY(-1.5f, 1);
        }

        if (Input.GetKeyDown(KeyCode.W))
        {
            // 往前
            stage.transform.DOMoveZ(-3f, 1);
        }

        if (Input.GetKeyDown(KeyCode.E))
        {
            // 往後
            stage.transform.DOMoveZ(15f, 1);
        }

        if (Input.GetKeyDown(KeyCode.R))
        {
            // 轉兩圈
            stage.transform.DORotate(new Vector3(0,1440,0), 2);
        }
		}

		void rManAnimation()
    {
        if (Input.GetKeyDown(KeyCode.Z))
        {
            for (int i = 0; i < RManFriends.Count; i++)
            {
                RManFriends[i].GetComponent<Animator>().SetInteger("select", 0);
            }
        }

        if (Input.GetKeyDown(KeyCode.X))
        {
            for (int i = 0; i < RManFriends.Count; i++)
            {
                RManFriends[i].GetComponent<Animator>().SetInteger("select", 1);
            }
        }

        if (Input.GetKeyDown(KeyCode.C))
        {
            for (int i = 0; i < RManFriends.Count; i++)
            {
                RManFriends[i].GetComponent<Animator>().SetInteger("select", 2);
            }
        }

        if (Input.GetKeyDown(KeyCode.V))
        {
            for (int i = 0; i < RManFriends.Count; i++)
            {
                RManFriends[i].GetComponent<Animator>().SetInteger("select", 3);
            }
        }

    }
}

➔ 回到 Unity 介面,在 Game Manager 物件 中會增加一個名為 R Man Friends 的 List

➔ 將 R Man Friends 的數值由 0 修改為 8,新增 8 個 Element 欄位

➔ 點擊鎖頭,將 Inspector 介面鎖定在 Game Manager 上

➔ 分別將 RMan , RMan(1) …… RMan(7) 依序綁定至 Element 欄位 中即可

19
示意圖為 ShowManager 腳本上半部修改後之程式碼

20

示意圖為 ShowManager 腳本下半部修改後之程式碼

21
22
23


上一篇
Day20 / Unity 動畫控制器 Animator
下一篇
Day22 / Unity 可愛的 NewJeans 2D 遊戲 - 遊戲主流程控制
系列文
初心者限定!設計師帶你學 Unity 3D 遊戲程式設計 共 31 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言