【新】UnrealEngineでアバターを動かす方法【簡単】


## はじめに

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

[前回の記事](https://qiita.com/mintan/items/72d63cce4e6197b151b7)に、VRM4Uの作者である [はるべえ様](https://x.com/ruyo_h) よりアドバイスをいただき、新しい方法を教えていただきました！  この場を借りてお礼申し上げます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/b4a42949-12d9-1d30-9432-4e48ec26c55c.png)

**はるべえ様の説明はこちら**　(本記事で詳細説明します）

https://ruyo.github.io/VRM4U/08_vmc/


**前回の記事はこちら**

https://qiita.com/mintan/items/72d63cce4e6197b151b7




---

### 今回の方法について
前回の方法に比べて、この方法のポイントは次のとおりです：
- **UE5.1以上にも対応！**（最新アセットに対応できますね！）
- **手順が少なく、シンプル！**（前回必要だったUnityも不要！）

早くこの方法が知りたかった...というくらい簡単にできます( ﾟДﾟ)

初めてUnrealEngineに触れる方でも安心して進められる内容を試みています✨  
前回の記事を読まなくても設定できるようにしているので、一部内容が重複している点はご了承ください💦

---

🎉 **UnrealEngine×アバターの楽しみ方は無限大！** 🎉
- **VTuberデビュー** に挑戦  
- 自分だけの**映像制作**  
- お気に入りポーズで**アバターを愛でる**  

:sparkles::two_hearts: **UnrealEngineで遊んだ投稿を参考にどうぞ！** 🌟: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  


---

### 何か質問があれば
気軽に**X（旧Twitter）** やコメントで教えてください！ 
**フォロー**もいただけると泣いて喜びます🥹

https://x.com/MINTAbbl

---

## 1. UnrealEngineをダウンロード

まずはUnrealEngineを以下のリンクからダウンロードしましょう👇  
[Unreal Engine ダウンロードページ](https://www.unrealengine.com/ja/download)  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/d4df1e07-9602-afe6-5ec1-166004d81821.png)

---

## 2. UnrealEngine 5.4.4をインストール

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

:::note info
本来は **UE5.5.1** でも動作するはずですが、私が試した際はクラッシュしてしまいました💦  
そのため、この記事ではうまくいった実績のある **UE5.4.4** を使用します。
もし **UE5.5.1** で成功された方はぜひコメントで教えてください！
:::



## 3. プロジェクトを作成

1. **UnrealEngine 5.4.4** を起動し、「**Virtual Production**」を選択してプロジェクトを作成します。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/2d78be54-758b-129a-6443-5acf6fa0929a.png)

2. プロジェクトが立ち上がったら、一度「×」ボタンで閉じてください。

:::note info
新規プロジェクトフォルダを作成するのが目的です。
他のテンプレートを選んでも問題ありません！
:::


## 4. 必要なツールをダウンロード

ここで今回使用する **神ツール様** をダウンロードします！  
開発いただいた素晴らしい先人の方々に感謝しかありません🙏


### VRM4U
-  [VRM4U_5_4_20241227.zip](https://github.com/ruyo/VRM4U/releases) をダウンロードしてください
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/d340ea00-b38a-a47a-5c86-c768e68acafd.png)

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


## 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. **解凍したツールを追加**  
   解凍したVRM4Uの「Plugins」フォルダ内の内容をUnrealEngineの「Plugins」フォルダにコピーします。  


## 6. プラグインを有効化

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

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

4. プロジェクトを保存し、再起動のため一度プロジェクトごと閉じてください。
（最初からVRM4Uにチェックが付いていたら閉じなくても大丈夫です。）


## 7. アバターの準備

次に、動かしたいアバターファイル（VRM形式）を用意します。  
まだアバターを持っていない場合は、[VRoid Studio](https://vroid.com/ja/studio) を使えば簡単に作成可能です！


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

## 8. UnrealEngineにアバターをインポート

UnrealEngineを再び立ち上げ、VRMファイルをインポートします。

1. **動かしたいアバターファイル（VRM形式）** をUnrealEngineのコンテンツブラウザにドラッグ＆ドロップしてください。  
   ![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)



## 9. 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でプログラミングを簡単に行える便利なシステムです！
ノードを線でつなぐだけで設定が完了します。
:::

---

### 必要なノードを追加

1. Animブループリントを開くと、格子状のエディタ画面が表示されます。  
2. エディタ内で右クリックし、以下のノードを検索して追加してください：
   - **InputPose**  
   - **Local To Component**  
   - **VrmVMC**  
   - **Component To Local**  

---

### ノードを接続

1. 追加したノード同士を以下のようにドラッグして線でつなげます：  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/765623a0-4ceb-87f4-1a5f-37c2515be84d.png)

---

### vrmVMCノードの設定

- **デフォルト設定** で問題ありませんが、以下の点を調整してください：
  1. アバターが **VRM0** を利用している場合は、「**IgnoreLocalRotation**」を **ON** にします。  
  2. **Port番号** は「**39539**」の初期値にしてください。適宜変更可能です。
  3. **ServerAddress** は「**0.0.0.0**」のままにしてください。

---

### 保存

最後に、画面左上の「**コンパイル**」→「**保存**」ボタンをクリックして設定を保存します。  
これで、アバターを動かす準備が完了しました！

## 10. アバターを動かします！

あと一息です✨  
ここでは、手軽にカメラだけで手の動き含め全身キャプチャができる **「Webcam Motion Capture」** とモーションを送信する **「バーチャルモーションキャプチャー」** を利用します！

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

:::note info
**補足2:**  
**「Webcam Motion Capture」** 単体でも試してみたのですが、私はうまくいかなかったので、**「バーチャルモーションキャプチャ―」** と併用して実施しています。  
もし **「Webcam Motion Capture」** 単体で実施できた方は教えていただけるとすごく嬉しいです…！  
:::

---

### 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円）** を契約してください（執筆時点の価格です）。

---

### バーチャルモーションキャプチャーのダウンロード

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


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

---

### バーチャルモーションキャプチャーの設定

1. ダウンロードしたzipファイルを展開し、起動します。  
   フォルダ内の以下をダブルクリックして起動してください：  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/4a52105c-ae9b-b091-250d-cc10bbfe3b03.png)

2. 動かすアバターファイルを以下の順で取り込みます：  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/59de92a6-5ef4-cb11-c7da-9e7e696af1a8.png)

3. 詳細設定で以下のように設定してください：  
   - ポート番号は **39541** を設定（後のWebcam Motion Captureと合わせます）。  
   - 保存名称は任意でOKです。  
   - 適用する部位はデフォルトで問題ありません。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/4ce58df8-bd76-3b9c-2a35-daf963f958ca.png)  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/6a42fe50-dd9d-491f-520e-280e3151a873.png)

4. **CheckIP** ボタンを押して表示されたIPアドレス（２つある下の方）を控えておいてください。後で使用します。 
また、下記の２つのチェックを入れておいてください。 
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/28d2bd98-7524-95ae-60e6-dc8900a0aee7.png)

---

### Webcam Motion Captureの設定

1. Webcam Motion Captureを立ち上げ、以下のように設定してください：  
   - **IPアドレス**：先ほど控えたバーチャルモーションキャプチャーのIPを入力。  
   - **ポート番号**：**39541**（バーチャルモーションキャプチャーの設定と一致させます）。  
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/4de43d8e-3113-7d91-86cf-2573b3c36cb5.png)

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

---

### UnrealEngineで連動

1. UnrealEngine側のブループリント画面に戻り、画面上部の「**再生ボタン** ▶」を押します。  
   UnrealEngineとWebcam Motion Capture、バーチャルモーションキャプチャーが連動し、アバターが動き始めます！  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/a07c1594-dcec-5528-2020-8984e1bcc7a3.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)



## 11. アバターをビューポート内で動かす

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: **おめでとうございます！** :two_hearts::sparkles:  
   ![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/2865361a-eea7-b27b-0559-f31dd42e5ad6.gif)
:two_hearts::sparkles:  **背景もセットすれば、可愛い映像を簡単に作成できます✨**:two_hearts::sparkles:  
 ![名称未設定のデザイン (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/6953a5ee-c3d9-4a78-e093-87a312aaf491.gif)
![名称未設定のデザイン (4).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928901/7a526f05-698e-f657-4617-3ebc45f6b2f7.gif)




## （おまけ）アバターをよりリアルに動かしたい場合

「**バーチャルモーションキャプチャー**」を活用すると、Webcam Motion Captureのモーション情報に加え、**mocopi**などの他の機器から取得したモーションデータもブレンドでき、さらにリッチな動きを再現可能です。
iPhone等を活用したパーフェクトシンクでの**微細な表情操作**も組み合わせられますよ！

**mocopi＋Webcam Motion Captureでのフルトラッキング**

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

**パーフェクトシンクはこんなイメージです**（VRMモデルの改変要）

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


---

### 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で再現可能になります！



## おわりに
いかがでしたでしょうか？  
はるべえ様にもアドバイスをいただき、前回よりも**かなりシンプルな方法**を習熟することができました！
改めて感謝申し上げます！  
**早く知りたかったー！！（二回目）**

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

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

https://x.com/MINTAbbl


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