Motion Design: Unreal Engineでのモーショングラフィックス 最前線【UNREAL FEST 2024 TOKYO】

Motion Design: Unreal Engineでのモーショングラフィックス 最前線 エピック ゲームズ ジャパン 向井 秀哉

この講演・資料について この講演資料のほとんどで動画を使用しているため 機能の挙動など、より詳細な情報はアーカイブ動画をご覧ください。 アーカイブ動画にはない質疑応答は下記で回答しております https://x.com/syu_ya23/status/1853724484668469754 2

• https://x.com/syu_ya23/status/1853724484668469754

自己紹介 エピック ゲームズ ジャパン Senior Solutions Architect 向井 秀哉 (Syuya Mukai) • 3Dアーティスト・テクニカルアーティストとして 映像やVRなどのコンテンツ制作に携わった後に エピック ゲームズ ジャパンに入社 • 映像、自動車、建築などのノンゲーム分野での Unreal Engine の技術的な説明や提案が主なお仕事 X: @syu_ya23 3

• https://twitter.com/syu_ya23

本日の内容 • Motion Design とは？ • Motion Designの機能を紹介 • UE5.5 新機能 • Motion Designを使用した作品 4

2D and 3D viewports Procedural Geometry Artist Workflows Cloners & Effectors 3D Text and Fonts World Outliner Transition Logic Animators Modifiers Released in 5.4 Vector Importer Broadcast Output Remote Control Logic Storm Sync Material Designer Rundown / Show Control Media Playback

Motion Design とは？ 2D/3D リアルタイム モーショングラフィックス ツール • CM、MV、SNSなどの動画制作 • スポーツ番組、ニュースなどの放送 などあらゆる用途で 5.5の時点では実験的機能 ※このスライドの画像、動画は、UE5.5 Preview を使用してキャプチャしています UIや仕様が5.4や5.6以降と異なる場合があります 6

実験的機能(Experimental) とは？ 7

Rundown - ブロードキャスト Motion Designの機能 8

Motion Design モード モードを切り替えことでMotion Design用のUIに 9

Motion Design モード - Utility Toolbar モードを切り替えことでMotion Design用のUIに 10

Motion Design で作業をはじめる テンプレートから始める 既存のレベルに最低限のアクターを追加 11

Motion Design タブ Motion Designでよく使うアクタ 12

Motion Design タブ - 2D Shape(2D形状) 9種類の2Dシェイプの作成 13

Motion Design タブ - 2D Shape プロシージャルな形状調整やマテリアルの変更 14

Motion Design タブ - 3D Shape 4種類の3Dシェイプの作成 15

Motion Design タブ - 3D Shape プロシージャルな形状調整やマテリアルの変更 16

Motion Design タブ – Text 日本語フォントの使用や細かな設定が可能 17

Motion Design タブ – SVG SVGのインポートや3D化、色も反映 18

Operator Stack - Modifiers (モディファイア) アクタのレイアウトや形状変化、レンダリング周りの機能付与など 2Dアクタ選択時 3Dアクタ選択時 19

Modifiers – Grid Arrange 縦、横にアクタを整列 “Null”にGrid Arrangeを追加すると、Nullの子供が整列する 20

Modifiers – Grid Arrange 表やランキング表示などに 21

Modifiers - AutoSize 特定のアクタの大きさに自動でサイズを合わせる 22

Modifiers - Extrude, Bevel 2DをExtrude(押し出し)で3D化 23

Modifiers - Boolean プロシージャルなリアルタイム ブーリアン 24

Operator Stack - Animators(アニメータ) トランスフォームなどの各プロパティにアニメーションを追加 25

Animators - Bounce バウンスアニメーション Z軸の位置に適用した例 26

Animators - Curve (5.5～) カーブアセットを使用したイン、アウト アニメーション インのカーブ(コンスタント) アウトのカーブ Z軸の位置に適用した例 27

Animators - Oscillate 行って帰っての繰り返しアニメーション(正弦波など) Z軸の位置に適用した例 28

Animators - Pulse イン、アウト、もしくは両方に正弦波などのアニメーション Z軸の位置に適用した例 29

Animators - Sound 音に合わせたアニメーション(音圧で値を変化させる) エフェクタのMagnitudeに適用 30

Animators - Wiggle ウィグルアニメーション Z軸の位置に適用した例 31

Animators - Time 値Aから値Bに時間指定で変化していくアニメーション Z軸の位置に適用した例 32

Animators - Clock(テキストのみ) (5.5～) PCの時間表示やシーケンサーの時間の表示 PCの時間を表示した例 33

Animators - Counter(テキストのみ) (5.5～) 経過時間などの表示 経過時間を表示した例 34

Operator Stack - Animators トランスフォームなどの各プロパティにアニメーションを追加 35

Cloner(クローナ) アクタを大量にスポーン、アニメーション 36

Cloner - Layout Grid Line Honeycomb Circle Mesh Cylinder Spline Sphere Uniform Sphere Random 37

Cloner + Shape Clonerを使用しながら、シェイプのプロパティ変更やモディファイアの使用も可能 38

Effector(エフェクター) クローナにトランスフォームアニメーションやノイズを追加 39

Effector(エフェクタ) バウンスの範囲で様々なアニメーション、エフェクトを追加 +100 Z方向に移動するエフェクターの例 40

Effector - Shape Shapeでエフェクトが適用されるバウンスの形を変更 Sphere Plane Box Unbound(全範囲) Torus (5.5～) Radial (5.5～) 41

Effector - Ease Shapeの形に変化を付ける Shapeは全てSphere 42

Effector - Force フォースやノイズを加え動きを付ける Orientation Vortex Curl Noise Attraction Gravity Vector Noise 44

Material Designer レイヤーベースのマテリアル作成機能 45

Storm Sync .spak形式でアセットをエクスポート アセットやレベルを手軽かつ軽量に共有 46

Remote Control(遠隔操作) プロパティの一括操作やバリエーションの作成 プロパティ公開ボタン 47

Rundown 複数のモーションの再生(放送)準備 • レベルをテンプレート として読み込む • テンプレートを使用して ページを作る • ページごとにRemote Control で設定したプロパティの変更 • ページのプレビュー 48

Rundown レイヤーでテンプレートを重ねる 49

Tag Collection と Transition Tree Tag Collection レイヤーの作成や管理 Transition Tree レイヤーをどのように再生させていくかの定義 50

シーケンサー タグ 1つのシーケンスに複数のシーケンス(ラベル)を作成できる 51

Transition Tree 前後のページのレイヤーとシーン(レベル)によって どのようにトランジションさせるかを定義する 「Reuse」にすることで ページに重ねることができる ↓ Transition Treeで 表示させるか消すか どのシーケンサーを再生させるか などを制御する 52

Rundown - Broadcast 出力先(チャンネル)の設定と放送 53

Motion Design UE5.5 新機能 54

Cloner & Effector - Color クローナー、エフェクターで色の設定が可能に(Particle Color) 55

Cloner & Effector - Color EmissiveにParticle Colorを入れた例(Cloner：黒、Effector：赤を設定) 56

Cloner & Effector - Cloner Effector Parameter Cloner と Effector のいくつかのプロパティをマテリアルで Progressの値を使って色を変化させた例 57

Cloner - Collison コリジョンを使用した物理シミュレーション • Surface Collison: 他のメッシュとの作用 • Particle Collision: Clonerで複製された メッシュ同士の作用 Niagara Cache Trackで キャッシュの保存、再生も 58

Cloner - Twist クローナーにひねりを加える 59

Material Designer - PBR Workflow 手軽かつ素早くマテリアルの作成 • テクスチャセットビルダー • テクスチャの素早いアサイン • 命名規則によるテクスチャの自動 アサイン • レイヤーエフェクト • レベル、コントラスト、色相 • ブラー • ノイズ、ディストーション • Panner などなど 60

Material Designer -レイヤーエフェクト ピクセル化やノイズなどの様々なレイヤーエフェクトを追加 61

Material Designer - 動画の再生 動画の再生やマスク、レイヤーエフェクトを使用したトランジションなども 62

Animator Curve等の追加でよりモーショングラフィックらしいアニメーションの作成が可能に 63

Transition Tree - Sub-Layer 細かなアニメーションを１つのレベル、シーケンスで Courtesy of Pixel Prof チュートリアル https://www.youtube.com/watch?v=zkpqzGDW2xQ 64

• https://www.youtube.com/watch?v=zkpqzGDW2xQ

Rundown - ブロードキャスト Case Study 65

INDUSTRIA by Author Baum & Aaron Hagedorn Courtesy of Author Baum & Aaron Hagedorn https://www.youtube.com/watch?v=SAJlzfyCrTk 66

• https://de.linkedin.com/in/arthur-baum?trk=public_post_reshare_feed-actor-name
• https://www.youtube.com/watch?v=SAJlzfyCrTk

Unreal Engine 5.4 | Motion Design by The 8 Inc. Courtesy of The 8 Inc. https://www.youtube.com/watch?v=StO1oCw3NtE 67

• https://www.youtube.com/watch?v=StO1oCw3NtE

FanFuel: Stadium & Arena Graphics by Emissive Labs Courtesy of Emissive Labs 68

Object Knitting effect by Wallace David(sumours) Courtesy of sumours チュートリアル https://www.youtube.com/watch?v=uxq_oLWZYXY 69

• https://www.youtube.com/watch?v=uxq_oLWZYXY

Hologram & Nanotech by Pixel Prof Courtesy of Pixel Prof Breakdown https://www.youtube.com/watch?v=unJW3AtTROU 70

• https://www.youtube.com/watch?v=unJW3AtTROU

interactive motion design/procedural music jam by Tapes Club Courtesy of Tapes Club https://youtu.be/ji9Y_QUVYT8 71

• https://youtu.be/ji9Y_QUVYT8

OSC(OpenSound Control)を使ったコントロール by Arman Jangmiri Courtesy of Arman Jangmiri https://80.lv/articles/controlling-unreal-engine-5cloners-with-galaxy-buds-case/ 72

• https://80.lv/articles/controlling-unreal-engine-5-cloners-with-galaxy-buds-case/

Rocket League Championship by Blast Courtesy of Blast & RLCS 73

Rocket League Championship by Blast Courtesy of Blast & RLCS 74

Rocket League Championship by Blast Courtesy of Blast & RLCS 75

2D and 3D viewports Procedural Geometry Cloners & Effectors Modifiers 3D Text and Fonts World Outliner Artist Workflows Animators Material Designer Powerful Motion Graphic Toolsets Transition Logic Vector Importer Broadcast Output Remote Control Logic Storm Sync Rundown / Show Control Media Playback

学習リソース • 公式ドキュメント https://dev.epicgames.com/documentation/ja-jp/unreal-engine/motion-design-in-unreal-engine • Your First Graphic with Motion Design(チュートリアル) https://dev.epicgames.com/community/learning/courses/XRV/unreal-engine-your-first-graphic-with-motion-design/Vp00/unreal-enginemotion-design-getting-started • Your first hour with motion designer(動画チュートリアル) https://dev.epicgames.com/community/learning/courses/oyL/unreal-engine-your-first-hour-with-motion-designer/m30k/unreal-enginegetting-started-with-motion-design • Pixel Profさんのチュートリアル https://youtube.com/playlist?list=PLWXvQZSGgrsNGW51vpohMZ27d_grNuxey&si=fGZ6R5V8mlb7Fgsl • Your First Hour in Unreal Engine 5.2 https://dev.epicgames.com/community/learning/courses/3ke/your-first-hour-in-unreal-engine-5-2/vvdk/your-first-hour-in-unreal-engine-5-2overview • シーケンサーと Movie Render Queue の使い方 https://www.youtube.com/watch?v=-qKSJLNLV94 77

• https://dev.epicgames.com/documentation/ja-jp/unreal-engine/motion-design-in-unreal-engine
• https://dev.epicgames.com/community/learning/courses/XRV/unreal-engine-your-first-graphic-with-motion-design/Vp00/unreal-engine-motion-design-getting-started
• https://dev.epicgames.com/community/learning/courses/oyL/unreal-engine-your-first-hour-with-motion-designer/m30k/unreal-engine-getting-started-with-motion-design
• https://youtube.com/playlist?list=PLWXvQZSGgrsNGW51vpohMZ27d_grNuxey&si=fGZ6R5V8mlb7Fgsl
• https://dev.epicgames.com/community/learning/courses/3ke/your-first-hour-in-unreal-engine-5-2/vvdk/your-first-hour-in-unreal-engine-5-2-overview
• https://www.youtube.com/watch?v=-qKSJLNLV94