UnrealEngineでアバターを動かす方法

## はじめに
本記事では **UnrealEngineでアバターをモーションキャプチャで動かす方法** について紹介します！  
**カメラ**があるだけでも手軽に始められますし、**mocopi** を使えば **フルトラッキング** でアバターを自由に動かせます✨

https://www.sony.jp/mocopi/

UnrealEngineでアバター（VRM形式）を動かすためのツールは、ありがたいことに **先人の方々** がたくさん開発してくださっています！
ただ、その活用方法が１つにまとまっておらず、私も最初は右往左往していました…。  

なので、この記事で手順をまとめてみました！  

🎉 **UnrealEngine×アバターの楽しみ方は無限大！** 🎉
- **VTuberデビュー** してみる
- 自分の思い通りの**映像制作**に挑戦  
- お好きなポージングで**アバターを愛でる** 

:sparkles::two_hearts:<font color="#ff6699">**下記は私が今までUnrealEngineでアバターを動かして遊んでいた投稿です🎉
こういうことが簡単にできちゃいます！🌟**</font>:two_hearts::sparkles:

https://x.com/MINTAbbl/status/1691419472769531904

https://x.com/MINTAbbl/status/1724068387649954183

https://x.com/MINTAbbl/status/1691122854048546816

https://x.com/MINTAbbl/status/1609438157795397634

https://x.com/MINTAbbl/status/1616122337677709314

https://x.com/MINTAbbl/status/1723612678529417253

https://x.com/MINTAbbl/status/1691477524038172672

初心者の方でも再現できるように丁寧に解説を試みます！  
Qiita初投稿なので、もし読みにくいところがあればごめんなさい💦 
何かあれば**X**かコメントで教えてもらえると嬉しいです💕

https://x.com/MINTAbbl


## 1. UnrealEngineをダウンロード
まずはUnrealEngineを以下のリンクからダウンロードしましょう👇  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/d4df1e07-9602-afe6-5ec1-166004d81821.png)

[Unreal Engine ダウンロードページ](https://www.unrealengine.com/ja/download)


## 2. UnrealEngine 5.1.1をインストール
ダウンロードしたランチャーを起動し、**UnrealEngine 5.1.1** をインストールします。  

:::note info
今回使用する神ツール様たちがUnrealEngine 5.1に対応しているため、最新バージョンではなく5.1を選択しています！  
ツール作成者の方々に感謝しつつ、環境を整えましょう。
:::


## 3. プロジェクトを作成
UnrealEngine 5.1.1を起動し、「**Virtual Production**」を選択してプロジェクトを作成します。  
作成後、プロジェクトが立ち上がったら、一度「×」ボタンで閉じてください。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/2d78be54-758b-129a-6443-5acf6fa0929a.png)

:::note info
新規プロジェクトフォルダを作成するのが目的です。
他が良い方は「Virtual Production」以外でも問題ありません。
:::


## 4. 必要なツールをダウンロード
ここで今回使用する **神ツール様** たちをダウンロードします！  
これらのツールは、素晴らしい先人の皆さまが開発してくださっています。
本当に感謝しかありません🙏

下記に指定しているものを全てダウンロードしてください。

### ツール一覧

- **VRM4U**  
  [VRM4U_5_1_20241213.zip](https://github.com/ruyo/VRM4U/releases)  
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/9fb22320-e40d-941f-69ea-84b5b4bf9a9b.png)

:::note info
 **VRM4Uとは？**  
VRM形式のアバターをUnrealEngineで扱えるようにする超重要プラグインです！
開発者: [はるべえ haru様](https://x.com/ruyo_h)  
:::

 

---

- **VMC4UE**  
  [VMC4UE_5_1.zip](https://github.com/HAL9HARUKU/VMC4UE/releases)  
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/9b3be307-09ae-d30f-d850-57f1a8758efa.png)

:::note info
**VMC4UEとは？**  
モーションキャプチャデータをUnrealEngineに送るためのプラグインです！
これがあるからアバターを動かせる✨
開発者: [はるく様](https://x.com/HAL9_HARUKU)  
:::



---

- **ueOSC**  
  [ueOSC_5_1.zip](https://github.com/HAL9HARUKU/ueOSC/releases)  
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/66fe5b0a-58db-cb97-1480-3e0e7e807407.png)

:::note info
**ueOSCとは？**  
UnrealEngineに対してモーションデータをリアルタイムでやり取りするための便利なツールです！
開発者: [はるく様](https://x.com/HAL9_HARUKU) 
:::



---

- **UniVRM**  
  [UniVRM-0.128.0_264a.unitypackage](https://github.com/vrm-c/UniVRM/releases)  
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/9b76d1aa-b83e-1116-24d5-57b000dfe6b4.png)

:::note info
**UniVRMとは？**  
UnityでVRM形式のアバターを扱うための必須ツールです！
後ほど使うので忘れずにダウンロードしてください。
開発者: [こちらの皆様🙏](https://github.com/vrm-c/UniVRM/graphs/contributors) 
:::



---

- **VRMMapExporter**  
  [VRMMapExporter.unitypackage](https://github.com/HAL9HARUKU/VRMMapExporter/releases)  
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/7ca80d66-b769-e042-6f79-1ae42dc6f5bd.png)
  
:::note info
**VRMMapExporterとは？**  
アバターをUnrealEngineで動かすための設定データ（VRMMap）を出力するツールです！
開発者: [はるく様](https://x.com/HAL9_HARUKU) 
:::


## 5. ダウンロードしたツールをUnrealEngineのプロジェクトに追加
ダウンロードしたツールをUnrealEngineプロジェクトに追加します。

1. **プロジェクトのフォルダを開く**  
   UnrealEngineランチャーで、先ほど新規に作成したプロジェクトを右クリックし、「**フォルダで開く**」を選択します👇  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/6c5212a8-d364-b913-e20a-8b84a083822c.png)

2. **Pluginsフォルダを作成**  
   開いたプロジェクトフォルダに「**Plugins**」という名前の新しいフォルダを作成します。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/c61a08b5-677e-e884-0d5d-ac263b9e27d2.png)

3. **解凍したツールを追加**  
   以下の3つのツールを解凍し、それぞれの「Plugins」フォルダの内容をUnrealEngineの「Plugins」フォルダにコピーします。  

   - VRM4U  
   - VMC4UE  
   - ueOSC  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/b7d55645-c7af-f1a2-3d84-965fe1502450.png)

:::note warn
**注意:**  
UniVRMやVRMMapExporterはUnrealEngineの「Plugins」フォルダには追加しません！これらはUnityで使用します。

:::



## 6. プラグインを有効化
作成したUnrealEngineプロジェクトをダブルクリックして立ち上げます。  
上部メニューの「**編集**」から「**プラグイン**」をクリックしてください。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/4ca5ceac-34c6-04bb-b408-c55bae952249.png)

---

### プラグインの有効化
以下の3つのプラグインをそれぞれ検索し、有効化してください。

1. **VRM4U**  
   検索バーに「VRM4U」と入力し、表示された項目にチェックを入れます。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/ab63d2c5-9d3f-6ab6-7ed5-1e72903bfab5.png)

2. **VMC4UE**  
   検索バーに「VMC4UE」と入力して、有効化します。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/26ad5a34-3981-bc55-eb9b-28ec8dffd2af.png)

3. **ueOSC**  
   検索バーに「ueOSC」と入力して、有効化します。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/84372e3f-7519-af10-e404-2ca59095a41c.png)


すべてのプラグインを有効化したら、プロジェクトを保存し、再びプロジェクトごと閉じてください。

## 7. アバターの準備
次に、動かしたいアバターファイル（VRM形式）を用意します。  
まだアバターを持っていない方は、**VRoid Studio** を使って簡単に作成することができます。  

[VRoid Studio](https://vroid.com/ja/studio)

:::note info
私自身もアバターの作成を受注しています！気になる方はこちらからどうぞ👇  
https://minta.base.ec/items/87467982

:::



## 8. 設定ファイル（VRMMap）の作成
ここでUnityを一時的に使用します。  
Unityをまだインストールしていない方は、以下のリンクからダウンロードしてください👇  
[Unity ダウンロードページ](https://unity.com/ja/download)

Unity 2022.3 LTS以降のバージョンをインストールして使用します。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/77497f62-9390-d43d-c794-b49733bbce16.png)

---

### Unityプロジェクトの作成
1. Unity Hubを起動し、**3Dテンプレート**を選択して新規プロジェクトを作成します。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/9c508b2a-7106-b609-1a60-37d8719bfcea.png)

2. 先ほどダウンロードした以下の2つのファイルをUnityプロジェクトにドラッグ＆ドロップしてください。  
   - **UniVRM**  
   - **VRMMapExporter**  
   各ファイルを追加すると「Import」画面が表示されるので、「**Import**」をクリックします。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/6dca19c0-d3f8-281a-53f3-8c972c024484.png)

3. 動かしたいVRMアバターファイルをUnityプロジェクトにドラッグ＆ドロップします。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/dc3e3605-73c1-13c6-5027-84dcdfee4d44.png)

4. アバターがUnity内に表示されたら、左側のシーンビューにドラッグ＆ドロップしてください。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/5a307805-fa75-5e17-1c54-aafc8ddfe072.png)

---

### VRMMapのエクスポート
1. シーンに配置したアバターを選択した状態で、上部メニューの「**VRMMap**」→「**Export**」をクリックします。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/a62e92c9-195c-1f15-eaad-012d58ed6792.png)

2. エクスポートが成功すると、画面下部に「**Export Successful**」とともにフォルダパスが表示されます。  
   **.vrmmapファイル** が作成されているので、そのパスを控えておいてください。
   Unityはもう閉じて大丈夫です。

:::note info
**補足:**  
他のアバターを動かしたい場合も、このUnityプロジェクトを再利用できるので保存しておくことをお勧めします。
:::



## 9. UnrealEngineにアバターをインポート
UnrealEngineを再び立ち上げ、Unityで作成したVRMMapファイルをインポートします。

1. **VRMMapファイル** をUnrealEngineのコンテンツブラウザにドラッグ＆ドロップしてください。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/4fcdaa1f-ef42-b63c-f6b4-3a2312b5fb0b.png)

2. 動かしたいアバターファイル（VRM）も同様にインポートします。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/49093c88-3562-5bcf-a7a1-3b0d108f395e.png)

---

### マテリアル設定
1. アバターのインポート時に表示されるオプションで、**Material Type** を選択します。  
   個人的には「**Subsurface**」が好きですが、お好みの設定を選んでください！
   VTuberぽいのはデフォルトの「**MToon Unlit**」だと思います。
   残りの設定値はそのままで「Import」を押します。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/9efcada9-0dd8-5a09-ebc2-efe396ad0d82.png)

## 10. UnrealEngineでアバターを動かす設定
次に、インポートしたアバターを動かす設定を行います。



### アバターファイルの配置
1. アバターファイルインポート後、たくさんのファイルが生成されます。その中から「**SKEL_**」で始まるアバターファイルを探してください。
2. このファイルをビューポート（メインの画面）にドラッグ＆ドロップします。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/16f87c5c-7c9f-0ab6-6495-b84b25234f17.png)

3. アバターがビューポート内に配置されます！（ｶﾜｲｲ！💗）  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/38bd7809-c746-54c8-961a-ef50531c50d4.png)

---

### Animブループリントの作成
1. 「**SKEL_**」で始まるアバターファイルを右クリックし、「**作成する**」→「**Animブループリント**」を選択します。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/14aa29d5-98b5-2673-19d1-51c8991a6d6e.png)

2. 「**○○_AnimBluePrint**」という名前のファイルが作成されます。これをダブルクリックしてください。

:::note info
**補足:**  
**ブループリント**は、UnrealEngineでプログラミングができる便利なシステムです。
ノードを線でつなげるだけで簡単に設定できます！
:::



---

### VMC4UEのノードを追加
1. Animブループリントを開くと、格子状のエディタ画面が表示されます。
そこで右クリックし、「**VMC4UE**」と検索してください。
2. 以下の2つのノードを追加します。  
   - **Modify VMC4UE Bones**  
   - **Modify VMC4UE Morph**  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/4a839d89-5db2-6a2c-4fb3-baa36863524e.png)

---

### VRMMappingの設定
1. 追加した2つのノードそれぞれに「**VRMMapping**」という項目があります。  
   この項目の「**アセットを選択**」をクリックしてください。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/b8bf8c7c-a9ca-4791-6832-56bec9bf8fd1.png)

2. 一覧に先ほどインポートしたVRMMapが表示されるので、それを選択してください。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/3b24d949-d94e-0a7b-db94-e7f563b0404b.png)

---

### ノードを接続
1. 追加したノード同士をドラッグして線でつなぎます。以下のように「**Bones**」→「**Morph**」の順で接続してください。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/96fd9e1b-9e62-6728-cb39-1e7a676f5ca7.png)

---

### Portの設定
1. **Port** の項目に「**39539**」と入力してください。  　
   ※他の数字でも問題ありませんが、ここではこの数字を使用します。後で調整可能です。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/0bc07dc7-c801-7c88-6f5b-0e1e8d29ba6b.png)

---

### 保存
最後に、左上の「**保存**」ボタンをクリックして設定を保存します。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/4cfb9843-92c9-3e5e-4b19-49211e337c1c.png)

これで、アバターを動かす準備が完了しました！

## 11. アバターを動かします！
やっとちょっと大変な設定が終わりました！あと一息です✨  
ここでは、手軽にカメラだけで手の動き含め全身キャプチャができる **「Webcam Motion Capture」** を利用します。

:::note info
**補足:**  
**「Webcam Motion Capture」** は有料版の契約が必要です！
無料で試したい方は「**VSeeFace**」がオススメです！
顔のトラッキングだけですが、無料で非常に優秀なツールです
（今回は詳細割愛します）。
:::



---

### Webcam Motion Captureのダウンロード
1. 以下のリンクから **Webcam Motion Capture** をダウンロードしてください👇  
   [Webcam Motion Capture ダウンロードページ](https://webcammotioncapture.info/ja/index.php#download)  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/6f2e0e71-53a3-d114-769b-6bd8aee01172.png)

2. **有料版（月額199円）** を契約してください（執筆時点の価格です）。

---

### Webcam Motion Captureの設定
1. Webcam Motion Captureを立ち上げ、以下のように設定してください。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/b79175ac-6268-f02e-edc6-865478879199.png)

2. 設定後、「**送信開始**」をクリックします。

---

### UnrealEngineで連動
1. UnrealEngine側のブループリント画面に戻り、画面上部の「**再生ボタン** ▶」を押します。  
   UnrealEngineとWebcam Motion Captureが連動し、アバターが動き始めます！  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/e80f08cf-27ec-f1f5-75e3-69e9b9d37f7d.png)

2. ブループリント画面を「×」で閉じます。

---

### アニメーション設定
1. UnrealEngineメイン画面の「**アウトライナー**」部分で、先ほど追加した「**SKEL_○○**」を見つけて選択してください。
2. 下部の詳細ウィンドウで「**Animation**」セクションを探し、**AnimClass** に先ほど作成した **Animブループリント** を設定します。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/c9a48e89-6e1e-dda1-4b72-7ed51dfd2ea3.png)


## 12. アバターをビューポート内で動かす
1. UnrealEngineメイン画面上部の「**…**」から「**シミュレート**」を選択します。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/9721e740-8eff-91c9-5765-de4501afe5b5.png)

2. モーションキャプチャに合わせてアバターが可愛く動き始めました！！🎉  
:sparkles::two_hearts:<font color="#ff6699">**おめでとうございます！**</font>:two_hearts::sparkles:
 
   ![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/2865361a-eea7-b27b-0559-f31dd42e5ad6.gif)
**かわいいいいい( * ˘ཀ˘)** :sparkles:💘
   


## （おまけ）アバターをよりリアルに動かしたい場合
私は、アバターを動かす際に「**バーチャルモーションキャプチャー**」をよく利用しています。  
このツールを使うと、Webcam Motion Captureのモーション情報に加え、他の機器から取得したモーションデータもブレンドでき、さらにリッチな動きを再現可能です。

https://x.com/MINTAbbl/status/1720475589436678351

---

### バーチャルモーションキャプチャーのダウンロード
1. 以下のリンクから **バーチャルモーションキャプチャー** をダウンロードしてください👇  
   [公式サイト](https://vmc.info/)  
   [支援版はこちらから！](https://akira.fanbox.cc/)  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/59de92a6-5ef4-cb11-c7da-9e7e696af1a8.png)

:::note info
UnrealEngineで使用する場合は**支援版**を契約ください💗
VR配信するときにも使える超神ツールです⚡
開発者: [あきら☎︎@VMC様](https://x.com/sh_akira)  
:::

---

### VMCプロトコルの設定
1. Webcam Motion Captureで指の動きを取得し、mocopiで全身の動きを取得する場合、以下のように **VMCプロトコル** のポート番号を複数設定します。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/2f749d18-e091-db04-091b-131c4f7393b1.png)

2. どのポートで身体のどの部分を制御したいかは適宜設定してください。  
mocopiの細かい設定方法などはここでは割愛します。
![スクリーンショット 2024-12-14 225710.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/d69f7561-b923-c247-1378-83450857ecb6.png)

3. 最後に「**OSCでモーション送信を有効にする**」にチェックを入れて適用します。  
   これで、よりリッチな動きをUnrealEngineで再現可能です！


## おわりに
いかがでしたでしょうか？  
私自身、UnrealEngineは趣味で触っているだけなので、もっと効率的な方法があるかもしれません。
しかし、この手順は **アバターをとにかく動かしたい！** という執念で初心者ながら試行錯誤してたどり着いたものです。  

ぜひ、自分のアバターをハイクオリティな空間で自由に動かしてみてください！
思いっきり愛でてあげましょう✨

もし何かわからないことがあれば、**X（旧Twitter）** で気軽にリプしてください！  
**拡散**や**フォロー**していただけると喜んで**懐きます**🐾

https://x.com/MINTAbbl


本記事が皆さんのお役に立てれば幸いです！😊
ここまでお読みいただきありがとうございました！:sparkles::two_hearts: