[UE5]「Motion Design」を使ってみよう！その1～セットアップ＆基本機能編～

執筆バージョン: Unreal Engine 5.5.4

こんにちは！
UE5.4から追加されたプラグイン「Motion Design」を知っていますか？

Motion Designは簡単に言えばUnreal Engine上でモーショングラフィックス（以下、MG）を作成するためのプラグインです。

現在、Unreal Engineでは多彩な映像表現が可能です。映像表現機能として代表的なのはシーケンサーでしょう。
シーケンサーは非常に適用範囲が広いため、これを利用してMG表現することももちろん可能です。しかし、シーケンサー単体で高度なMG表現を実現するのは意外と骨の折れる作業です。

Motion DesignではMG用の様々な機能が提供されているため、利用すればより効率的にMG作品を作ることができます。
自分で試した結果ですが、例えば数時間程度でこのぐらいのローディング風のMG動画を作ることが可能でした。

今回はこのMotion Designのセットアップまでの手順と基本機能を紹介していきます。ちなみに、上の動画はこの記事で扱っている機能のみを使用して作成可能です。

※今回は「とりあえず使ってみよう、遊んでみよう」というテーマのため、Material DesignerやRundownなどといった機能については解説しません。ご承知おきください。

※現バージョンUE5.5.4ではMotion Designは実験的機能となっています。プロジェクトでの使用などの際はご注意ください。また、将来のバージョンでMotion Designの機能、UIなどが大幅に変更される可能性があります。こちらもご承知おきください。

Motion Designを使用する前の準備

まずはMotion Designのプラグインを有効化して再起動しましょう。

再起動したらMotion Design用に新しくレベルを作成します。開いたらツールバー右上の「Motion Design」ボタンを押すとエディタがMotion Designのモードへと切り替わります。

加えて、「Motion Design Outliner」のパネルを出しておくことをお勧めします。Window→Motion Design Outlinerでこのパネルを追加することができます。

新しく追加されたツールバーの中から「Create Defaults」ボタンを押すと、MG用に調整されたカメラや光源などの一式が簡単に用意できます。

これでMotion Designを使う準備が整いました。

図形を画面に配置する

まずは背景として大きな長方形を配置してみましょう。左側にあるパネルから「Rectangle（長方形）」をクリックし、ビューポート上でドラッグ&ドロップすると、長方形の形状が配置できます。画面いっぱいに広げましょう。

図形選択した後に右クリックでキャンセルできたり、Shiftキーと同時にドラッグで同じ縦横比で配置することができたりします。この辺りは図形によって仕様が微妙に異なるようです。

Motion Designは3D空間の撮影のため、オブジェクト同士の位置関係でレイヤー表現をすることができます。デフォルトのカメラ視点だとyz座標系になっているので、背景はデフォルトよりほんの少しだけ奥側（+x方向）に配置するなどするといいと思います。

図形はDetailsパネルのSimple Colorで自由に色を変更できます。また、Materialカテゴリは非常にパラメーターが豊富です。背景として使うなら、Use Unlit Materialで陰影なしのマテリアルに切り替えたほうがいいかもしれません。

左のパネルには長方形のほかにも矢印やリング、V字のようなMGでよく使用する図形が用意されています。画面上にいろいろと並べてみましょう。

左パネルからは2D用の図形以外にも3Dモデルやカメラ、ライト、特殊な扱いのActorなどさまざまなオブジェクトを配置することができます。

1つ1つのオブジェクトはレベル上にActorとして存在しているので、通常と同じやり方でシーケンサーに登録することができます。図形に直接動きなどを付けたい場合はシーケンサーでキーフレームを登録します。シーケンサーの基本については公式ドキュメントや過去の記事などをご覧ください。

「Create Defaults」で追加されるカメラは1つだけですが、カメラ数に制限などはありません。角度を付けて撮影したい時やカメラに動きを付けたい時などは普通のシーケンサーと同じようにカットやShot Trackを挿入することができます。

オブジェクトのパラメーターを操作する

それぞれの図形のDetailsパネルにはMG表現に必要な色々なパラメーターが用意されており、操作できます。例えば、「Ring」の「Angle degree」や「Inner Size」などは操作してみると変化が分かりやすいと思います。

また、これらのパラメーターも「◇」をクリックすることでシーケンサーに登録し、キーフレームを付けることができます。これを使うとより高度で柔軟な動きを付けられるようになります。

オブジェクトをまとめて動かす

MGでは多くのオブジェクトを扱うことが多いので、複数のオブジェクトをまとめて動かしたい時などがあると思います。Motion Designでは複数のオブジェクトを動かす際に、いくつか便利な手段が用意されています。

〇 Null Actor

Null Actorはその名の通り空のActorで、複数のActorをアタッチできます。これにアタッチすることでActorをまとめて扱うことができます。

Null Actorは左側のパネルのActors→Null Actorから追加できます。また、Motion Design OutlinerでActorを選択してマークをクリックすることで、そのActorを子にした親のNull Actorを作成することができます。

ただしNull Actorでは共通の”親”を持った動きしか実現できません。そこで「共通の親を持たずに各Actorに同じ動きを付けたい」という場合には次のRemote Controlが利用できます。

〇 Remote Control

Remote Controlは各々のActorのプロパティを登録し、Remote Controlのプロパティと関連付けることができます。

例えば、複数のActorに同じ回転をかけたい場合、Rotationにアンテナのようなアイコンをクリックすると、Remote ControlのPropertiesにRotationを登録することができます。

Propatiesに登録されたプロパティはControllerにパラメーターを追加し、そのパラメーターに各プロパティをバインドすることでまとめて扱うことができます。下は各星形を「共通の親を持たせずに」回転させたい場合の例です。

今のところ、Remote Controlのプロパティ自体にキーフレームを付けることはできないようです。動いたActorのキーフレームを登録をしないとすぐに元に戻ってしまうのでご注意ください。

Text Actorを使用してみる

Motion Desginでは多彩なMG用のActorをレベルに追加することができます。全ては紹介しきれませんが、今回はその内の1つとして「Text Actor」をご紹介します。

Text Actorはその名の通りテキストを表示させるActorです。
単に文字表示をするだけなら「Text Render Actor」や「Text 3D」といったUEの既存のActorもあるのですが、Text Actorにはそれらにはない強みがいくつかあります。

まずは英語のシステムフォントが直接使用できます。これでシステムフォントを利用したい時に一度インポートする手間が省けます。

さらに、インポートしたフォントは自動的にリストに追加され、Text Actor内で利用できるようになります。デフォルトでは日本語対応のフォントが少ないですが、日本語フォントをインポートすれば問題なく扱えます。

また、Text Actorはとても面白いパラメーターを多く備えています。テキストの押し出し、ベベルなどの3D表現に加え、文字にオフセットをかけたアニメーションなど触っているだけで楽しいパラメーターが多いです。

今のところアウトラインを付ける機能はありませんが、アウトラインのみにすることはできるので、文字を重ねればアウトラインと同等の表現も可能だったりします。

さて、非常にざっくりとですがMotion Desginのセットアップの仕方と基本の使い方は抑えられたと思います。Actorを配置して、キーフレーム登録で動かすのが基本ということで、ここまでは「ちょっとMGに寄せたシーケンサー機能」程度に簡単に考えてもらって大丈夫だと思います。

しかし、Motion Designの機能はこれだけではありません。次回はModifierとAnimatorという、より独自性の強い機能をご紹介いたします。乞うご期待！