【Unity 插件推薦】Live2D Cubism 2D 模型大師，虛擬人物互動超簡單！

 

前言

 

今天要推薦的是來自 Live2D 官方推出的虛擬角色互動開發套件 —— Live2D Cubism！

無論你是【角色動畫設計師】、【遊戲開發者】，還是想打造屬於自己的虛擬 VTuber，Live2D Cubism 都能幫你輕鬆實現角色的【眼神追蹤】、【表情控制】、【觸控互動】等進階效果，創造更具生命力的 2D 人物體驗！

本篇文章將帶你快速掌握 Live2D Cubism 的【模型導入流程】與【互動功能實作】，結合【實例程式碼】、【官方資源】與【實用教學】，讓你能快速上手，打造屬於自己的虛擬角色互動場景！

 

 

Unity Live2D Cubism 插件介紹

 

Live2D Cubism 是一款由 Live2D 官方團隊所開發的 2D 模型驅動工具套件，為了讓開發者能在 Unity 中順利實現互動式角色應用，Live2D Cubism 特別提供了專屬的 SDK，讓開發者能夠將靜態角色模型轉化為【可互動】、【可動作】的虛擬人物，打造出如【遊戲角色】、【虛擬實況主】或【動態桌布等】豐富應用場景。

它可以將透過 Live2D Cubism Editor 製作的 .moc3 模型，無縫整合進 Unity 專案中，實現如真實角色般的【動畫】、【表情變化】與【互動效果】。

 

功能特色

1. 完整支援 Live2D 模型匯入
   支援將 Cubism Editor 製作的 .moc3 模型檔匯入 Unity，自動產生 Prefab 結構，方便直接拖曳使用。
2. 靈活的動畫控制系統
   內建 Cubism Motion Controller 與 Parameter 系統，可自由【播放動作】、【切換表情】，並支援動畫混合與優先級設定。
3. 實現角色眼神追蹤效果
   透過 Cubism Look Target 與 Look Controller 組件，可讓角色自動追蹤滑鼠位置，打造栩栩如生的互動體驗。

 

適用場景

1. 遊戲角色動畫與表情控制
   可應用於【RPG】、【模擬經營】、【戀愛養成】等遊戲中的【主角】與【NPC】，實現豐富的【動畫】與【互動表現】。
2. 虛擬實況主／VTuber 系統開發
   配合【網路攝影機】或【語音辨識】，可打造專屬 VTuber ，支援【臉部動畫】、【情緒反應】與【互動演出】。
3. 動態桌布與視覺展示應用
   適用於開發【互動式桌布】、【角色展示介面】、【動畫廣告】等視覺效果需求場景，讓角色更具吸引力。

 

 

Unity Live2D Cubism 例子

 

碧藍航線、夢幻模擬戰、雙生世界、虛擬實況主、 結合 AE 軟體做的動態桌布。

 

 

Unity Live2D Cubism 2D 模型獲取

 

官方提供了一些 Live2D 實例模型給大家下載使用。

 

 

下載 Live2D Cubism SDK for Unity

 

 

結果

 

 

Unity Live2D Cubism 限制

 

Cubism3 或更高版本的 Cubism SDK for Unity 支援的 Unity 版本為 2019.x。

若小於 2018.3，SDK 內的資產（.mat 等）中序列化的資訊將被放棄。

 

 

Unity Live2D Cubism 導入並使用 Live2D 模型

 

1、將SDK載入到項目

 

2、載入模型

直接把前面官網下載的案例檔案全部拖入。

 

如果載入成功，SDK 中包含的 Cubism 的 Importer 會自動產生一個 Prefab。

 

3、顯示模型

您可以透過將產生的 Prefab 追加到 Hierarchy 視圖或 Scene 視圖，注意預設是不會顯示模型的，需要運行一次係統才會在場景中置入模型。

 

4、 播放動畫

動畫檔案在 motion下。

 

播放效果。

 

 

Unity Live2D Cubism 表情動作修改參數

 

這裡的 cubism parameters inspector 組合，修改這裡的參數發現模型也會進行相應的變化

這些參數其實就是對應模型各個部位的參數，並且和 parameters 下面的各個子物體一一對應。

 

 

Unity Live2D Cubism 眼神跟隨看向鼠標效果

 

在模型上加入 Cubism Look Target 和 Cubism Look Controller 兩個元件，並把 Cubism Look Target 賦值給 Cubism Look Controller 的 Target。

 

效果，按住鼠標左鍵，人物就會看向我們的鼠標。

 

如果發現效果不明顯，調大這個參數即可，例如這裡調大頭左右擺動幅度。

 

 

Unity Live2D Cubism 部位觸摸效果

 

動畫配置。

 

為模型加入 Cubism Raycaster 組合，主要用於 live2d 的射線檢測。

 

然後給人物想要進行射線檢測的部位，添加 Cubism Raycastable 組件，用來表示哪些部位可以進行射線檢測。

 

添加 Live2DStaticData 定義觸摸部位枚舉。

// 觸摸部位

public static class Live2DStaticData

{

   // 左手

   public const string LeftHand = "D_ARM_L_02";

   // 右手

   public const string RightHand = "D_ARM_R_02";

   // 左腿

   public const string LeftLeg = "D_FOOT_00";

   // 右腿

   public const string RightLeg = "D_FOOT_01";

   // 頭部

   public const string Head = "D_HAIR_BACK_002_00";

   // 胸部

   public const string Chest = "D_BODY_00"; 
}
 

新增 Epsilon ，實現觸控不同位置播放不同動畫。

using Live2D.Cubism.Framework;

using Live2D.Cubism.Framework.Raycasting;

using UnityEngine;

public class Epsilon : MonoBehaviour

{

   Animator animator;

   CubismRaycaster cubismRaycaster; // Cubism 射線檢測器

   int count; // 射線檢測結果計數

   CubismRaycastHit[] hits = new CubismRaycastHit[1]; // 射線檢測命中數組   

   public static Epsilon Instance;

   private void Awake()

   {

       Instance = this;

       animator = this.GetComponent<Animator>();       cubismRaycaster = this.GetComponent<CubismRaycaster>();

   }

   // 設置 Live2D 動作

   public void SetLive2dAction(string hitPart)

   {

       switch (hitPart)

       {

           case Live2DStaticData.Head:

               animator.SetTrigger("Curious"); // 頭部觸摸時，設置好奇觸發

               break;

           case Live2DStaticData.Chest:

               animator.SetTrigger("UnHappy"); // 胸部觸摸時，設置不開心觸發

               break;

           case Live2DStaticData.LeftHand:

           case Live2DStaticData.RightHand:

               animator.SetTrigger("Wink"); // 左右手觸摸時，設置眨眼觸發

               break;

           case Live2DStaticData.RightLeg:

           case Live2DStaticData.LeftLeg:

               animator.SetTrigger("Hate"); // 左右腿觸摸時，設置厭惡觸發

               break;

           default:

               break; // 其他情況不處理

       }

   }

   void Update()

   {

       // 檢測鼠標左鍵按下

       if (Input.GetMouseButtonDown(0))

       {

           count = cubismRaycaster.Raycast(Camera.main.ScreenPointToRay(Input.mousePosition), hits); // 執行射線檢測

       }

       if (Input.GetMouseButtonUp(0))

       {

           // 如果沒有檢測到命中，直接返回

           if (count == 0) return;

           SetLive2dAction(hits[0].Drawable.Id); // 設置 Live2D 動作

       }

   }

}
 

掛載腳本。

 

效果。

 

 

Unity Live2D Cubism 摸頭效果

 

首先我們來製作進度條，這裡我直接放一個滑動條。

 

修改 Live2DStaticData，定義摸頭結束枚舉。
 

//摸頭結束命令

public const string EndTouchCommand = "EndTouchCommand";

 

修改 Epsilon。

public bool isTouching;

public void SetLive2dAction(string hitPart)

{

   switch (hitPart)

   {

       //…

       case Live2DStaticData.EndTouchCommand:

           animator.SetTrigger("Shy");

           count = 0;//清除當前的觸摸信息

           break;

       default:

           break; // 其他情況不處理

   }

}

void Update()

{

   // ...      

   if (Input.GetMouseButton(0) && Input.GetAxisRaw("Mouse Y") != 0)

   {

       if (count == 0) return;

       if (isTouching == false && hits[0].Drawable.Id == Live2DStaticData.Head)

       {

           TouchHeadPanel.Instance.Show();

       }

   }

}
 

新增 TouchHeadPanel，控制進度條變化。

public class TouchHeadPanel : MonoBehaviou

{

   public static TouchHeadPanel Instance;

   Slider slider;

   private void Awake()

   {

       // 初始化單例

       Instance = this;

       Hide(); // 在初始化時隱藏面板

   }

   private void OnEnable()

   {

       slider = GetComponent<Slider>();

       slider.value = 0;

   }

   void Update()

   {

       if (slider.value >= 1)

       {

           // 摸頭結束

           Epsilon.Instance.SetLive2dAction(Live2DStaticData.EndTouchCommand);

           // 設置動畫並隱藏自己

           Hide();

           return;

       }

       // 逐幀更新位置

       slider.value += Time.deltaTime; // 逐漸向上移動

   }

   // 隱藏面板

   public void Hide()

   {

       this.gameObject.SetActive(false); // 將遊戲對象設為不活動

       if (Epsilon.Instance)

       {

           Epsilon.Instance.isTouching = false;

       }

   }

   // 顯示面板

   public void Show()

   {

       this.gameObject.SetActive(true); // 將遊戲對象設為活動

       if (Epsilon.Instance)

       {

           Epsilon.Instance.isTouching = true;

       }

   }

}
 

掛載腳本。

 

效果。

 

 

Unity Live2D Cubism 摸頭閉眼效果

 

我們可以透過這裡的 Cubism Eye Blink Controller 元件，設定這個 Eye Opening 參數來實現閉眼效果 Eye Opening = 0 表示完全閉眼。

 

修改 TouchHeadPanel。

// 隱藏面板

public void Hide(){

   this.gameObject.SetActive(false); // 將遊戲對象設為不活動

   if (Epsilon.Instance)   {

       Epsilon.Instance.

isTouching = false;

       Epsilon.Instance.cubismEyeBlinkController.EyeOpening = 1;//睜眼

   }

}

// 顯示面板

public void Show()

{

   this.gameObject.SetActive(true); // 將遊戲對象設為活動

   if (Epsilon.Instance)

   {

       Epsilon.Instance.isTouching = true;

       Epsilon.Instance.cubismEyeBlinkController.EyeOpening = 0;//閉眼

   }

}
 

效果。

 

 

Unity Live2D Cubism 相關介紹 & 教學影片

 

Live2d + Unity: Importing the SDK and Model to your project

 

【CEDEC2023】Live2D Cubism SDK for Unity 紹介

 

Cubism SDK ワークショップ#4 「4.2新機能対応！SDK for Unity を使ってポートフォリオアプリを作ろう！」

 

 

Unity Live2D Cubism 2D 模型大師相關網站 & 插件下載點

 

【Live2D Cubism】

Live2D Cubism 官方網站：Live2D Cubism

Live2D Cubism 使用手冊：Live2D Cubism

Live2D Cubism 教學課程：Live2D Cubism

Live2D Cubism 免費素材：Live2D Cubism

Live2D Cubism 下載鏈結：Live2D Cubism

————————————————

以上內容改編節錄自：CSDN 作者：向宇it

 

更多好用插件：【Unity 好用插件推薦】持續更新，一起讓遊戲開發事半功倍！

 

 

 

本文原創(或整理)於亞洲電玩通，未經作者與本站同意不得隨意引用、轉載、改編或截錄。

特約作家簡介

---

支持贊助 / DONATE

 

亞洲電玩通只是很小的力量，但仍希望為復甦台灣遊戲研發貢獻一點動能，如果您喜歡亞洲電玩通的文章，或是覺得它們對您有幫助，歡迎給予一些支持鼓勵，不論是按讚追蹤或是贊助，讓亞洲電玩通持續產出，感謝。

BTC

352Bw8r46rfXv6jno8qt9Bc3xx6ptTcPze

ETH

0x795442E321a953363a442C76d39f3fbf9b6bC666

TRON

TCNcVmin18LbnXfdWZsY5pzcFvYe1MoD6f