2024年11月2日,「Unreal Engine」の無料大型勉強会「UNREAL FEST 2024 TOKYO」にて,エピック ゲームズ ジャパンのSenior Solutions Architect・向井秀哉氏による「Motion Design: Unreal Engineでのモーショングラフィックス 最前線」と題したセッションが実施された。
![画像集 No.001のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367278_927_001.jpg)
エピック ゲームズ ジャパンの向井秀哉氏
![画像集 No.002のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367279_632_002.jpg)
Motion Design(旧:Avalanche)は,UE5.4から「実験的機能」としてプラグイン実装された2D/3Dのリアルタイムモーショングラフィックスツールである。
セッションでは,Motion Designの基本的な説明や実際の使用例,10月2日にリリースされたUE5.5 Previewで追加された機能など,数多くの機能が紹介された。
なお,実験的機能とはベータの前段階にあたるもので,動作保証や後方互換性はなく,機能の削除や追加など大幅な変更の可能性がある状態だ。
Motion Designは,UE5.6でベータ,UE5.7で正式リリースを目指して開発を進めているという。
![画像集 No.003のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367281_900_003.jpg)
関連記事


Epic Gamesは本日(2024年10月2日),Unreal Engineの最新バージョン「Unreal Engine 5.5 Preview」をリリースし,「Unreal Fest Seattle 2024」で技術デモを公開した。桁違いのライトを使用できるという「MegaLights」を利用した,フォトリアルな空間が披露された。
[2024/10/02 11:11]
キーワード:
HARDWARE:Unreal Engine
HARDWARE
開発ツール
Epic Games
ニュース
編集部:或鷹
モーショングラフィックスとは,CM映像やミュージックビデオで利用されている表現で,文字や画像,アニメーションなどを組み合わせて効果的な演出を作り出すものだ。
Project Avalanche: a Dedicated Toolset for Motion and Broadcast Graphics | Unreal Fest 2023(外部リンク)より
![画像集 No.005のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367284_671_005.jpg)
![画像集 No.007のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367285_719_007.jpg)
![画像集 No.008のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367287_918_008.jpg)
![画像集 No.004のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367288_116_004.jpg)
![画像集 No.009のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367289_347_009.jpg)
![画像集 No.006のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367290_153_006.jpg)
モーショングラフィックスで有名なツールだと,Adobeの「After Effects」(外部リンク)などが挙げられる。セッション後半の質疑応答で,他社のツールとの違いを問われると,Motion Designは,あくまでUEの機能の一部であることを強調した。
UEはゲーム制作や映像制作など,さまざまな用途で利用されており,追加の機能として導入しやすい点やリアルタイムに描画でき,何かを変更したらすぐに確認できるメリットがあるという。
![画像集 No.010のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367291_90_010.jpg)
Motion Designには,専用のUIが用意されている。利用する際は,Motion Design用のモードに切り替えて,テンプレートから作業を開始することはもちろん,既存のレベル上でMotion Designの機能を使用することもできる。
専用UIのタブからは,9種類の2Dシェイプや4種類の3Dシェイプを追加できるほか,日本語を含むPC内のフォントを使用したテキストオブジェクトの作成や調整などを行える。
![画像集 No.011のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367292_255_011.jpg)
![画像集 No.012のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367293_86_012.jpg)
![画像集 No.013のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367295_916_013.jpg)
![画像集 No.014のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367296_933_014.jpg)
![画像集 No.015のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367297_292_015.jpg)
![画像集 No.016のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367298_948_016.jpg)
また,After Effectsのように「Null」オブジェクトも作成できる。このNullオブジェクトは,要素をまとめるための親として利用でき,作成したNullにGrid Arrange(整列機能)を追加して,Nullの子を自動的に整列させることも可能だ。
この機能を利用すれば,eスポーツでのランキング表示など,順番や数がリアルタイムに入れ替わったりするものを,素早く変更できる。
![画像集 No.017のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367299_373_017.jpg)
アニメーション機能では,バウンスなどの動きを簡単につけられるほか,アニメーションの開始後と終了前それぞれで,動きを緩やかにしたり,緩急を付けたりなど細かく調整することが可能だ。
また,音圧の変化に合わせた動きを付けたり,現在時刻やフレーム数を表示させたりもできる。
![画像集 No.018のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367300_684_018.jpg)
Motion Designの基本的な機能の紹介の次に,目玉となる機能として,「Cloner」(クローナ)が紹介された。
![画像集 No.021のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367301_618_021.jpg)
Clonerは,オブジェクトの位置や回転などを調整しながら,複製して出現させられる機能だ。オブジェクトの形状も,プロパティやモディファイアを調整して,自由に変更できる。
![画像集 No.022のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367303_982_022.jpg)
![画像集 No.023のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367304_537_023.jpg)
![画像集 No.024のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367305_682_024.jpg)
なお,内部的な処理は,単純に複製しているのではなく,Niagaraのパーティクルエフェクトで表示されているようだ。
また,Clonerで複製したオブジェクトに対して細かいエフェクトを付けられる強力な機能「Effector」(エフェクター)も紹介された。
![画像集 No.025のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367306_962_025.jpg)
Effectorは,円や球,平面などさまざまな形状で範囲を設定し,範囲内のオブジェクトだけに変化を加えられる。
範囲の形状だけでなく,中心から離れるとエフェクトの影響を減らすなどといった変化も加えられる。
赤い部分がEffectorの影響範囲
![画像集 No.026のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367307_869_026.jpg)
![画像集 No.027のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367308_951_027.jpg)
UE5.5では,ClonerとEffectorの機能がさらに強化され,複製したオブジェクトの色を変更したり,コリジョン(当たり判定)を使用した物理シミュレーションを有効にしたりできる。
![画像集 No.031のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367310_338_031.jpg)
![画像集 No.032のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367311_594_032.jpg)
![画像集 No.033のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367312_869_033.jpg)
Case Studyとして,Motion Designを活用して制作された作品もいくつか紹介された。
本セッションでは,Motion Designに限らずUE5.4やUE5.5で登場した多数の機能が紹介された。
まず,マテリアル作成機能「Material Designer」だ。ノードベースではなく,レイヤーベースとなっており,画像や色を重ねるようにして,手軽にマテリアルを作成できる。
![画像集 No.028のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367313_188_028.jpg)
![画像集 No.029のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/029.jpg)
UE5.5では,ピクセル化やノイズなどのレイヤーエフェクトに加え,PBR(物理ベースレンダリング)にも対応し,Metallic(金属っぽさ)やRoughness(表面の粗さ)なども調整可能だ。
![画像集 No.034のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367316_537_034.jpg)
![画像集 No.035のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367317_959_035.jpg)
また,アセットを簡単に共有できる「Storm Sync」も紹介された。アセットを別プロジェクトに移行する従来の機能「Migrate」では,移行先のプロジェクトを指定する必要があった。
Storm Syncでは,移行したいアセットを右クリックしてエクスポートを選択すると,依存関係のあるものが「.spak」形式でまとめて書き出される。このファイルを共有するだけで,別プロジェクトで簡単にインポートできるそうだ。
![画像集 No.030のサムネイル画像 / UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367318_717_030.jpg)
本セッションでは,魅力的な機能が多数紹介され,質疑応答ではかなり多くの質問が寄せられた。
Motion Designのゲーム利用については,まだパフォーマンスがそれほど良くないので現時点では難しいそうだ。今後パフォーマンスが改善されていくので,リアルタイムのコンテンツでもいずれ利用できる可能性はあるという。
また,Motion DesignやMaterial Designerなどのように,After EffectsやBlenderなどでできることのすべてがUEで実現可能になるか,という問いに対しては,あくまでこれらはプラスアルファの便利ツールとして実装していると回答していた。
UEでは,モデリングやリギング,コントロールリグ,ウェイトの調整など,ほとんどの作業が可能となっており,今後も機能を拡張していく予定だ。
一方で,UEで完結させるのではなく,ほかのツールも展開し,さまざまなものを組み合わせてクリエイターをサポートしていけるように開発を進めているという。
ほかにも多くの質問が寄せられ,会場で回答しきれなかったものは,向井氏のXアカウントで回答している。
Unreal Festの講演「Motion Design: Unreal Engineでのモーショングラフィックス 最前線」にて
当日、回答できなかった質問の回答をこちらのリプに記載していきます!#uefest #UE5 https://t.co/9w4035Mkri
— しゅーや / Syuya Mukai (@syu_ya23) November 5, 2024
Motion Designは,現在実験的な機能となっているが,今後ベータや正式リリースの流れで,機能がどんどん追加されていく。覚えることが多すぎると学習も大変になっていくので,UE5.5の段階で一通り触ってみて,そのうえでUE5.6で追加された機能を覚えていくと学習しやすいかな,と向井氏はまとめた。
![UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO] UE5でAfter Effectsのようなモーショングラフィックスが作れちゃう。機能もりもり「Motion Design」[UEFest’24TOKYO]](https://www.wacoca.com/news/wp-content/uploads/2024/11/1731367325_001.jpg)
WACOCA: People, Life, Style.