【UE5.5】MotionDesignToolを配信ツールとして使う

![スクリーンショット 2024-12-12 021246.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/d3d3bc49-ca12-7c70-ef5c-867d1598a4c3.png)
## UE5.4より導入された新機能MotionDesignToolを配信システムとして試してみた。
```
1.UnrelEngine5新機能「MotionDesignTools」の真骨頂
2.NDIToolsを入れよう！
3.NDIネイティブサポートになったUE5.5でセットアップ
4.MotionDesign Rundownセットアップ
5.OBSStudio側セットアップ
6.レベルを分ける理由
7.まとめ
```


  　
### 1.UnrelEngine5新機能「MotionDesignTools」の真骨頂
　昨今、Adobe　AfterEffectsや、Cinema4Dを超えるモーショングラフィックツールとして注目されている機能ですが、この機能はもとよりEスポーツやニュース番組のライブストリーミングツールとして開発されており、その真骨頂は配信機能にあります。
 
 　配信機能を極限まで使いやすくするためにNDIという通信手法を使います！
　これを使えば今まで高くて手が出なかったATEMやDECKLINKといった外部デバイスが不要になるだけでなく、LANケーブルやケーブルレスのオンライン接続でつなぐので、取り回しも非常に楽なものになります。


  　
### NDIToolsを入れよう！
https://tricaster.jp/ndi-central/ndi-tools/
↑まずはこちらよりNDI Toolsをインストールします。

### 3.NDIネイティブサポートになったUE5.5でセットアップ
![スクリーンショット 2024-12-12 002612.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/ff0ab9d4-af53-e259-280c-dbf087ed97a7.png)
 ![スクリーンショット 2024-12-12 002740.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/27be0314-ad90-13e4-7f83-6f443b86ae31.png)
UE5.5を立ち上げ、画像のプラグインをオンにし、エディタ再起動します。

　
![スクリーンショット 2024-12-12 025851.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/6af0d3e3-c381-bbf7-2c44-0943c7050552.png)
背景用にするレベルを用意します。今回はLV_BGというアセットです。新規レベルで作ったデフォルトレベルです。ご自身で作った背景でOKです。
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/2219b1fd-86a9-d423-4bbc-8aa5917daf20.png)
上部よりモーションデザインエディターを開く。（この工程をしないとRundownでテンプレートに追加できないレベルになってしまうので注意）
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/ebc12257-79bc-92e6-79be-519132ae0fd9.png)
モーションデザインモードに切り替え
　
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/78d2663a-7fda-41f0-6e99-839bcdb206f7.png)
カメラを作成する。


  　
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/eb7df785-1d7f-c8e0-da94-e7b43fcd548d.png)
前景のセットアップ
右クリック→レベル選択。テキストやUIなどを表示する前景用レベルを作成します。LV_Forwardと名付けました。
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/9f3221ad-07b0-9765-cc65-d1d050a1bf54.png)
上部モーションデザインエディタに切り替え（この工程をしないとRundownでテンプレートに追加できないレベルになってしまうので注意。再掲）
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/446ed1b6-d756-4e05-2f79-9b552ca152c6.png)
LV_Forwardをダブルクリックで開いたら、モーションデザインアウトライナーを表示し
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/58f45605-1785-2642-516d-cdce202dda6a.png)
モードをモーションデザインモードに切り替え、カメラとポストプロセスボリューム（エフェクト用などに使う）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/2f66c785-7d51-c3e7-117a-2cc9b0af1242.png)
サンプルとしてテキストを追加をする。


 　
### 4.MotionDesign Rundownセットアップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/c6f17187-4d9f-fd32-775b-49d40495113a.png)
右クリックよりMoionDesighinRundownアセットを作り、ダブルクリックで入る。今回はRD_Tutorialという名前にしました。
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/2d108ce0-bc40-ff32-8a1c-b2ab820baac6.png)
Rundownエディタ上部右のブロードキャストをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/a69d2034-e822-076b-b803-686837bea5a3.png)
新規のチャンネルをクリックし、必要なレイヤー分Channelを作成。
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/d10469ea-fdfe-8cf0-593f-0f83ae797132.png)
出力デバイスよりNDIMedia Outputをドラッグ・アンド・ドロップでChannelに入れる。
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/c98082e8-b4fb-84fc-34a8-50e6b3041170.png)
Channel_1にも同様に入れる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/66a46c09-ecc7-1fed-4827-fda9f41db4d7.png)
Channel_0の名前をBGにし、DesiredSizeに出力解像度を入れる。FrameRateも指定する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/2544371e-a830-3ffe-0d24-5ffc6c702f96.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/9d55d1b4-7712-cd2d-919f-7ba32bcf57be.png)
Channel_1の名前をFWにし、Fill&Keyを出力させる。出力解像度・FrameRateはBG側と合わせる。※前景はkeyも出力させます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/be2c562f-52e9-35c8-d81a-bde6079c9d77.png)
背景レベルと前景レベルをRundownテンプレートリストにドラッグアンドドロップする。
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/c99751da-8ce9-feef-9b97-d4a80dc0eb43.png)
さらに今テンプレートに入れた2つのレベルを下部ページパネル（概要パネル）にドラッグアンドドロップで入れる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/a99f6e1b-bab3-03f4-f8af-1b3629735b33.png)
出力チャンネルをブロードキャストのチャンネルと合わせる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/d08ee336-b5a6-830e-a29b-cc32e765404a.png)
ページパネル（概要パネル）の二つを選択し、▶取り込みを押す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/78425180-77be-ab2a-1efe-6ff389830187.png)
ブロードキャストの方は▶すべてのチャンネルを開始を押す。

　
UE側のセットアップは以上です。
　
　
　
### 5.OBSStudio側セットアップ
https://github.com/DistroAV/DistroAV
↑よりOBS Studio用NDIプラグインDistroAV（obs-ndi）をインストールします。
NDIソースから送ったBGとFWソースを受信するためのプラグインです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/8b63cc72-7130-16c7-2d97-e97a1f05cbf9.png)
インストールされるとソースの中にNDI Sourceが追加されているのでこちらを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/3c784a9b-5584-506e-f073-169fa5b951f4.png)
名前はわかりやすくNDI Source BGとNDI Source FWとつけました。適宜該当するソースを選んでください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854687/8a453001-27a2-af30-0acf-0136f1d949c9.png)
二つとも表示されると想定通りの動きで表示されると思います
　
 　
　
### 6.レベルを分ける理由
レベルを分ける理由は、モーションデザインの設定がレベルに格納されてしまうことから、背景制作とモーションツール制作を別作業者が行う際もコンフリクトしないようにするためです。(またOBS側でも表示非表示のコントロールが出来ます。)
モーションデザインアウトライナー上でFWレベルにBGレベルを入れることで一つにすることも出来ますし、ロジックでリアルタイムに切り替えも可能です。
　
　
  　
### 7.まとめ
　今回UE5での配信をモーションデザインツールで行う方法を試してみた感想です。
　モーショングラフィックもできるツールで、配信もできるという強力なツールになっています。
　UEによってまた一つ新たな職種が生まれたといっても過言でないほどに多岐にわたり、そしてアーティストが活躍できる領域。機能に進化していくのではないかなと思っております。
 　
 さらなるグレードアップに期待したくなります。
 テレビやYouTube配信担当者、DJ、VJ、エフェクトアーティスト、UIデザイナー、モーショングラフィッカー、ミュージックビデオ制作、vtuber制作さん方におすすめです。


 NDIを使えば、国内にいながらにしてリアルタイム海外公演も可能となります。(学会発表やバーチャルライブを双方向で行いたい人向きです。)
 NDIは配信業界の標準になるであろうツールなので、DiscordやZOOMで画面共有を使ってる人にとって代替となるツールです。
 ぜひ入れてみてください。


配信機能導入編を書きましたが。今後ロジックや遷移、モーショングラフィックエフェクトなどもお伝え出来たらと思っております。
ＸやZenn、YouTubeに載せていくのでそちらも合わせてご覧ください。

X https://x.com/michi7to9
Zenn https://zenn.dev/miisancat/books/0f5fe3b52ca4b2





プレイリストウインドウ
トランジションロジック通りに遷移操作していく