--- title: Unreal EngineにおけるUIアニメーション実践ワークフロー tags: #ue5 author: [エピック ゲームズ ジャパン](https://image.docswell.com/user/EpicGamesJapan) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/VJNYQ58178.jpg?width=480 description: UE5のUIアニメーション設計および最適化を開設する資料です。 published: June 25, 26 canonical: https://image.docswell.com/s/EpicGamesJapan/5E1J1G-Workshop-0625 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/VJNYQ58178.jpg) Unreal Engineでの UIアニメーション実践ワークフロー Widget Animation × Material × Niagara によるUI表現設計と最適化 Epic Games Japan Lead Software Engineer, Developer Relations 鍬農 健⼆郎 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/YE9PDYKYJ3.jpg) 本講演について 対象者 ● UIデザイナー、UIテクニカルアーティスト向け ○ 中級レベル向け（Unreal Engine の基本的な⽤語を知っている） ゴール ● UIアニメーションの選び⽅ ● パフォーマンス判断基準 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/GE8D36RKED.jpg) UIアニメーションのワークフロー 要件 設計 実装 今回のターゲット 最適化 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/LELMV9KP7R.jpg) ● 導⼊ Table of contents ● UIアニメーション設計 ● UIアニメーション実装 ● パフォーマンスと最適化 ● まとめ # Page. 5 ![Page Image](https://bcdn.docswell.com/page/4JMYGZ22JW.jpg) 第2章 UIアニメーション設計 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/PJR9Z6M579.jpg) UIアニメーションのワークフロー どの実装⼿法を選ぶか 要件 設計 実装 最適化 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/PEXQ9MVXJX.jpg) 3つのUIアニメーション実装⼿法 Widget Animation Material Niagara タイムラインで動かす デザイナーフレンドリーな⼿法 シェーダで描く 再利⽤しやすい⼿法 パーティクルで描く リッチな演出に強い⼿法 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/3EK9PGQ9ED.jpg) Widget Animation を使⽤したアニメーション 概要 ● ● 時間軸ベースの演出を作る⼿法 タイムラインを利⽤して位置やスケール調整 強み ● ● ● デザイナーがタイムライン上で調整しやすい 短時間で実装しやすい Blueprint から制御しやすい ユースケース ● ● ポップアップ表⽰ / メニュー開閉 局所的で短い UI アニメーション # Page. 9 ![Page Image](https://bcdn.docswell.com/page/L73WXNP975.jpg) Widget Animationを利⽤したユースケース ポップアップの出現‧退場 ホバー時の⾊変化‧スケール ボタンステート切り替え 画⾯全体の遷移 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/87DK2WL8JG.jpg) Widget Animation 設計のポイント タイムライン化のルール アニメーション再⽣⽅法 再⽣時間 Timelineを利⽤するアニメーションの制約 ループか、単発か、Widget連動とするか アニメーションの再⽣時間を統⼀ アニメーション名 プロパティ変更のルール 表⽰制御 In/Out, Hover/Unhoverなど名称の統⼀ RenderTransform優先で極⼒Slotは避ける Widgetの表⽰はアニメーション内か外か # Page. 11 ![Page Image](https://bcdn.docswell.com/page/VJPK192WE8.jpg) Material を使⽤したアニメーション 概要 ● ● ● UI Material を利⽤したシェーダーベースの演出 ⾊変化‧マスク‧グローなどを表現しやすい Parameter を使って柔軟に制御できる 強み ● ● ● 再利⽤しやすい（MF, MI, MPC） 複数 Widget の同期に強い ループ表現や継続演出に強い ユースケース ● ● HPバー/ ゲージ / クールダウン表⽰ 背景の流れ / スキャンライン / グロー # Page. 12 ![Page Image](https://bcdn.docswell.com/page/2EVVYMD9EQ.jpg) Material を利⽤したユースケース プログレスバー ループエフェクト UVアニメーション 複雑な形状‧SDF⾓丸‧グラデーション # Page. 13 ![Page Image](https://bcdn.docswell.com/page/57GL9GY4EL.jpg) Material 設計のポイント 汎⽤化 再利⽤ 更新タイミング管理 Master Material を作成してInstanceで量産 Material Function を活⽤して効率化 Timeノード利⽤か、Parameter変更か パラメータ命名規則 パラメータの持ち⽅ パラメータの更新 外部制御を想定しプロジェクトで統⼀ MPCでグローバル化か、インスタンス毎か 極⼒少ないパラメータをトラックやBPで制御 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/4EQYWXMRJP.jpg) Niagara を使⽤したアニメーション 概要 ● ● Niagara を UI 上で再⽣してUIに描画する⼿法 実装⽅法が複数ある（次ページ以降で説明） 強み ● ● 表現⼒が⾼い 瞬間的なフィードバックや視線誘導に強い ユースケース ● ● 報酬獲得∕レベルアップ 通知表⽰∕重要ボタンの強調 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/KJ4WK6VQ71.jpg) Render Target を利⽤してNiagaraを描画 NiagaraをRender Target (RT)に描画してUI上にTextureを貼り付ける⼿法 ● 通常の Niagara の表現を使いやすい ○ ● Niagaraの利⽤の制約がない Render Targetの使⽤により、メモリと 描画コストを考慮する必要がある ● Post Process の影響を受ける点やマス クの背景抜きの考慮が必要 ワールド上のエフェクト(左)を RTテクスチャとしてUI(右)に貼り付け # Page. 16 ![Page Image](https://bcdn.docswell.com/page/LE1YXV3L7G.jpg) Niagara UI Renderer plugin (Fab) NiagaraをUI上に描画するためのThird-party Plugin ● Fabで無料で公開 ● UMG Widget として配置できる ● RT経由よりUIに組み込みやすい ● CPU Sim のみ ● Sprite / Ribbon が主なRenderer ● 対応プラットフォームやバージョン での制約がある Niagara UI Renderer (Fab)のサンプル # Page. 17 ![Page Image](https://bcdn.docswell.com/page/GEWGNLPQJ2.jpg) Niagara UI Renderer plugin (Engine) NiagaraをUI上に描画するためのEngine プラグイン ● UE5.8 で追加された Experimental 機能 ○ Niagara Preview 表⽰にバグがある ● UMG Widget として配置できる ● RT経由よりUIに組み込みやすい ● CPU Sim のみ対応 ● 現時点では Sprite が主なRenderer Niagara UI Renderer (Engine)でUI描画する様⼦ # Page. 18 ![Page Image](https://bcdn.docswell.com/page/47ZL3MK3J3.jpg) Niagara を⽤いたUIアニメーションまとめ ⼿法 Render Target UI Renderer (Fab) UI Renderer (Engine) Platform 全プラットフォーム対応 Win/Android (他PF要ビルド) 全プラットフォーム対応 Niagara Renderer 制限なし Sprite, Ribbon のみ Sprite のみ Niagara Sim CPU/GPU対応 CPUのみ CPUのみ CPU Performance Capture＋Simが主要因（⾼） 個数に⽐例して増加 （軽〜中） Fab版よりやや有利 （軽〜中） GPU Performance フル3D描画＋RT（⾼） Slate描画のみ（軽〜中） Slate描画のみ（軽〜中） 総括 柔軟だがコスト⾯でやや不利 ⾮公式、拡張可なら〇 UE5.8以降で拡張可なら〇 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/YJ6WXNQZJV.jpg) UIアニメーション⼿法別選択基準（どの⼿法を選ぶか） ⼿法 得意 不得意 ⽤途 Widget Animation 状態遷移や短い単発演出 ⼤量同時再⽣ メニュー開閉 デザイナーが調整する演出 常時ループ ポップアップ 動的値追従 Material 継続演出 単発の複雑な演出 ゲージ、アイコン マスク タイミングの細かい調整 背景演出 複数Widgetの⾒た⽬同期 Niagara ハイライト 瞬間的に豪華な演出 HUD常駐 視線誘導 視線誘導 ⼤量配置 重要ボタン 厳しいハードの性能条件 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/GJ5MX5R9J4.jpg) 第3章 UIアニメーション実装 # Page. 21 ![Page Image](https://bcdn.docswell.com/page/LE3WXNP2E5.jpg) UIアニメーションのワークフロー 具体的にどう組むか 要件 設計 実装 最適化 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/8EDK2WL67G.jpg) Widget Animation 実装 ● テーマ ポップアップ表⽰ / ⾮表⽰ ● 実装フロー 1. Base Widget にアニメーションを作成 2. Base Widget を配置した Parent Widget を作成 3. Base Widget にアニメーション再⽣ロジック追加 → Activate時に Open / Deactivate時に Close 再⽣ # Page. 23 ![Page Image](https://bcdn.docswell.com/page/V7PK194ZJ8.jpg) WP_Popup : Animation 作成 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/2JVVYMXMJQ.jpg) WP_Popup : Animation 作成 # Page. 25 ![Page Image](https://bcdn.docswell.com/page/5EGL9GVXJL.jpg) WP_Popup : Base Widget ● Parent Class: User Widget ● アニメーション を持つ ● Named Slot を配置して要素を持たない WP_Popup_Settings : Parent Widget ● Parent Class: Common Activatable Widget ● アニメーションは持たない ● Named Slot に要素を持たせる # Page. 26 ![Page Image](https://bcdn.docswell.com/page/4JQYWX657P.jpg) 親Widgetとの対話 （Base Widgetでの実装） # Page. 27 ![Page Image](https://bcdn.docswell.com/page/K74WK64VE1.jpg) # Page. 28 ![Page Image](https://bcdn.docswell.com/page/LJ1YXV44EG.jpg) Material でUIアニメーションの実装 ● テーマ Progress 値で動くゲージ ● 実装フロー 1. ゲージ⽤ Master Material を作成 2. Master Material から Material Instance作成 3. UMG の Image Brush に Material を割り当て 4. シーケンサー or BlueprintからProgress更新 # Page. 29 ![Page Image](https://bcdn.docswell.com/page/GJWGNLXZ72.jpg) Master Material作成 Material Instance作成 # Page. 30 ![Page Image](https://bcdn.docswell.com/page/4EZL3M6L73.jpg) Image にMaterial設定 Parameter経由で更新 # Page. 31 ![Page Image](https://bcdn.docswell.com/page/Y76WXN2M7V.jpg) # Page. 32 ![Page Image](https://bcdn.docswell.com/page/G75MX52Q74.jpg) Niagara でUIアニメーションの実装 ● テーマ 瞬間的なパーティクル演出 ● 実装⽅法 1. 演出⽤の Niagara 作成 2. UI⽤ Material の作成 3. UMGで Niagara UI Widget 配置, Niagara 設定 ※Niagara UI Renderer Plugin (Engine) 利⽤ # Page. 33 ![Page Image](https://bcdn.docswell.com/page/9J29XN4WER.jpg) Material Domain を User Interface に設定 UI Sprite Renderer を追加 Niagara Material # Page. 34 ![Page Image](https://bcdn.docswell.com/page/DEY48PM9JM.jpg) Niagara UI Widget を配置 Niagara System を配置 UMG Designer # Page. 35 ![Page Image](https://bcdn.docswell.com/page/VJNYQ5WD78.jpg) UIアニメーション⼿法別実装判断（どう組むか） ⼿法 実装ポイント 実装難度 Widget Animation Base Widget にアニメーションを集約 容易 タイムラインで実装しやすい 再利⽤構造の設計が必要 Named Slot で内容を差し替え Material 共通処理は Master Material に集約 Material Instance で差分を管理 標準 Material と外部制御の知識が必要 再利⽤性の⾼い構成にしやすい Parameter は値の変化時のみ更新 Niagara 実装⼿法によって制限の中で作成 ⽤途に次第では他の⼿法で代⽤を検討 ⾼度 利⽤できるNiagaraに制限がある UI描画の⾃由度も制限される # Page. 36 ![Page Image](https://bcdn.docswell.com/page/YE9PDYX8J3.jpg) 第4章 パフォーマンスと最適化 # Page. 37 ![Page Image](https://bcdn.docswell.com/page/GE8D362ZED.jpg) UIアニメーションのワークフロー 負荷の分析と制御 要件 設計 実装 最適化 # Page. 38 ![Page Image](https://bcdn.docswell.com/page/LELMV9217R.jpg) おさらい：UIとパフォーマンスの関連性 60fpsとは？ 画⾯を1秒間に60回(フレーム)更新すること ⇒ 画⾯が滑らかで快適な動きに⾒える ‧‧‧ 1フレーム⽬ 2フレーム⽬ 3フレーム⽬ ‧‧‧ 60フレーム⽬ 1000ms (1秒) 1フレームの描画には 1秒/60回=16.6ms ⇒ 処理が重いと16.6msを超えて画⾯にカクツキが発⽣ (UIも含めた全処理を16.6ms以内に収める必要) CPU GPU 画⾯を作る 画⾯を描く 1フレーム⽬ 16.6ms # Page. 39 ![Page Image](https://bcdn.docswell.com/page/4JMYGZ85JW.jpg) CPU と GPU の役割 CPU GPU CPU処理：画⾯を作る GPU処理：画⾯を描く VFX Animation UI AI Misc Nanite Light Shadow VFX Misc UI UI レイアウト計算、更新、アニメーション 実際の描画、ピクセル処理 UI は CPU と GPU の両⽅のパフォーマンスに影響 UI # Page. 40 ![Page Image](https://bcdn.docswell.com/page/PJR9Z65Z79.jpg) UIのCPU負荷ポイント Layout Tick Paint 階層が深いほど 再計算コストが増⼤ 毎フレーム動く要素が多いほど CPU時間を消費 再描画が多いほど 描画リスト構築コストが増⼤ ☑ 最適化ポイント：「毎フレームのCPUが計算する量を減らす」 再レイアウトを減らす∕毎フレーム処理を減らす∕作り直しを減らす # Page. 41 ![Page Image](https://bcdn.docswell.com/page/PEXQ9MK1JX.jpg) UIのGPU負荷ポイント TextA TextB TextC Overdraw DrawCall Material 同じピクセルを何度も塗る無駄 （透明 UI の重なり） CPUからGPUへの 描画命令の回数 ピクセル単位の計算コスト ☑ 最適化ポイント：「毎フレームGPUが塗る量を減らす」 Overdrawを減らす∕DrawCallを減らす∕画素負荷を減らす # Page. 42 ![Page Image](https://bcdn.docswell.com/page/3EK9PG5MED.jpg) UIのパフォーマンス計測‧最適化について # Page. 43 ![Page Image](https://bcdn.docswell.com/page/L73WXNK275.jpg) CPUパフォーマンス検証 Console Command：stat slate CPU側のUIのトータルの負荷 Batch ≒ DrawCall数 # Page. 44 ![Page Image](https://bcdn.docswell.com/page/87DK2W36JG.jpg) GPUパフォーマンス検証 Console Command：stat gpu GPU側のUIのトータルの負荷 # Page. 45 ![Page Image](https://bcdn.docswell.com/page/VJPK19PZE8.jpg) UIアニメーションの負荷計測を⾏うには？ 計測対象 使うツール CPU負荷 Unreal Insights, Slate Insights, stat slate Widget構造 Widget Reflector GPU負荷 stat gpu, ProfileGPU, Unreal Insights 描画状態 RenderDoc, プラットフォームGPUプロファイラ Niagara負荷 Niagara Debugger, Unreal Insights 2DUIだけの負荷は、空のレベルか World Renderingをオフにして計測がおすすめ # Page. 46 ![Page Image](https://bcdn.docswell.com/page/2EVVYM2MEQ.jpg) プラットフォーム別 UIのGPU負荷チェック 計測対象 UIのGPU負荷 GPU負荷全体でUIがボトルネックかどうか 詳細な描画パス情報 UIのどの描画パスがボトルネックか パス別アセット情報 描画パスのどのアセットがボトルネックか パス別描画情報 重なりや描画順番などの視覚的な情報 ハードウェアカウンタ ハードウェアレベルでどこがボトルネックか stat gpu Unreal Insights Profiler 〇 〇 〇 ✕ 〇 〇 ✕ 〇 〇 ✕ ✕ 〇 ✕ ✕ 〇 # Page. 47 ![Page Image](https://bcdn.docswell.com/page/57GL9GRXEL.jpg) RenderDoc で⾒る描画パス単位の負荷 # Page. 48 ![Page Image](https://bcdn.docswell.com/page/4EQYWXV5JP.jpg) RenderDoc で⾒る描画パス単位の負荷 DefaultTextureの表⽰ Opaque×1: 0.036 ms Translucent×1: 0.055 ms ×1.52 Opaque×3: 0.107 ms Translucent×3: 0.154 ms ×1.43 # Page. 49 ![Page Image](https://bcdn.docswell.com/page/KJ4WK6MV71.jpg) UIの負荷について理解したところで、 UIアニメーションにおける最適化について # Page. 50 ![Page Image](https://bcdn.docswell.com/page/LE1YXV847G.jpg) Widget Animation のパフォーマンス分析 Unreal Insights アニメーション更新 UI更新 (Runner Flush) (Slate::DrawWindow) アニメーション更新が重い ⇒ シーケンサーの内容を⾒直し UI更新が重い ⇒ レイアウトや設定を⾒直し # Page. 51 ![Page Image](https://bcdn.docswell.com/page/GEWGNLZZJ2.jpg) Widget Animation の最適化 トラック 載せるプロパティは最⼩限 重い順（Slot→Render→Color→Visibility） 必要なチャネルのみ載せる Widgetのバインド数を抑える ● ● ● ● キー ● ● ● ● セクション 重複キーの削除 セクションの範囲外にキーを打たない 可能なら Reduce Keysで間引く 単発操作はシーケンサー外（BP等）で制御 ● ● ● ● セクション⻑を調整して必要な分だけ評価 全体の⻑さを必要最⼩に Restore/Keep のルールを決める 未使⽤の空セクション‧チャンネルは削除 # Page. 52 ![Page Image](https://bcdn.docswell.com/page/47ZL3M1LJ3.jpg) Material のパフォーマンス分析 Unreal Insights RenderDoc どのマテリアルが重たいか： バッチ単位で出⼒される処理時間が⼤きいものを特定 ‧重たいマテリアルが特定できたら、Material の⾒直しを検討 ‧Material によっては、Blur, PostProcess など別の負荷が加算されることもある # Page. 53 ![Page Image](https://bcdn.docswell.com/page/YJ6WXNLMJV.jpg) Material の最適化 マテリアル設定 ● ● ● ● Domain を⽤途に合わせる Shading Model は Unlit 優先 Blend Mode 選定 (Translucent/Masked/Opaque) 不要な機能を切る グラフ‧シェーダー ● ● ● ● Platform Stats で命令数を確認 Texture Sample を最⼩に留める ⾼コストノードを避ける 動的値はパラメータ化 更新タイミング ● ● ● MID更新は必要時のみ 半透明の重ねを減らす ⾮表⽰時は更新停⽌ # Page. 54 ![Page Image](https://bcdn.docswell.com/page/GJ5MX51QJ4.jpg) Niagara のパフォーマンス分析 Niagara Debugger Unreal Insights どの Niagara が動いているか？ ‧Niagara Debugger で確認が可能 どの Niagara がどれくらい重たいか？ ‧Unreal Insights (CPU/GPUチャネル, Niagaraチャネル: UE5.8〜) で計測 # Page. 55 ![Page Image](https://bcdn.docswell.com/page/9E29XN1W7R.jpg) Niagara の最適化 Emitter‧Module ● ● ● ● Updateは必要最⼩ 物理シミュレーション系は必要時のみ Sprite+軽量Material FacingはUI向け固定 粒⼦数‧Spawn ● ● ● 粒⼦数はCPU/GPUに影響があるため上限設定 画⾯内に収まるよう過剰Spawnを避ける 常駐ループを避け、単発のみが望ましい 寿命‧表⽰期間 ● ● ● Active時間を極⼒短時間に留める ⾮表⽰時には⼿動でエフェクトを⽌める Scalabilityで段階削減 # Page. 56 ![Page Image](https://bcdn.docswell.com/page/D7Y48PZ9EM.jpg) 例：Niagara UI Renderer (Fab) プラットフォーム別パフォーマンス⽐較 CPU負荷 Windows Platform A Platform B Platform C GPU負荷 Windows Platform A Platform B Platform C ※ Unreal Engine 5.7, Testビルド, Global Invalidation=ONの環境下でテスト, Windows でのパフォーマンスを1.0としてプラットフォーム別の計測値をスケール # Page. 57 ![Page Image](https://bcdn.docswell.com/page/VENYQ53DJ8.jpg) ⼿法別パフォーマンスコスト ⼿法 Widget Animation Material Niagara CPU負荷 GPU負荷 中 低 トラック数‧バインド数‧レイアウト更新が 増えるほど負荷が⾼くなる アニメーション評価は主にCPU側 再描画やOverdrawによる影響はある 低 中 MID⽣成やParameter更新が 多い場合は負荷が増える 命令数‧表⽰⾯積‧半透明の重なりが 増えるほど負荷が⾼くなる ⾼ 中 Emitter‧粒⼦数‧Module‧Simulationの 内容によって負荷が⼤きくなる UI Rendererは⽐較的軽量 Render Target⽅式は負荷が⾼くなりやすい 実際の負荷は、実装⽅式、同時表⽰数、更新頻度、表⽰⾯積によって変動 # Page. 58 ![Page Image](https://bcdn.docswell.com/page/Y79PDY98E3.jpg) 第5章 まとめ # Page. 59 ![Page Image](https://bcdn.docswell.com/page/G78D369Z7D.jpg) 設計 表現の特性から⼿法を選ぶ 短い状態遷移は Widget Animation 継続‧再利⽤する表現は Material、瞬間的な演出は Niagara まとめ 実装 再利⽤と更新制御を設計する 共通処理は集約する、値が変化したときだけ更新する 不要になった処理は確実に停⽌する 最適化 計測して負荷の原因を分ける CPUは評価‧レイアウト‧毎フレーム処理 GPUはMaterial‧描画⾯積‧重ね描き 原因に応じて仕事量を減らす # Page. 60 ![Page Image](https://bcdn.docswell.com/page/L7LMV9W1JR.jpg) UI アニメーションは ⾒た⽬だけの問題ではなく、 要件‧実装⼿法‧パフォーマンスを 同時に設計することが品質を決める # Page. 61 ![Page Image](https://bcdn.docswell.com/page/4EMYGZ95EW.jpg) Thank