Unreal EngineにおけるUIアニメーション実践ワークフロー

Unreal Engineでの UIアニメーション実践ワークフロー Widget Animation × Material × Niagara によるUI表現設計と最適化 Epic Games Japan Lead Software Engineer, Developer Relations 鍬農 健⼆郎

本講演について 対象者 ● UIデザイナー、UIテクニカルアーティスト向け ○ 中級レベル向け（Unreal Engine の基本的な⽤語を知っている） ゴール ● UIアニメーションの選び⽅ ● パフォーマンス判断基準

UIアニメーションのワークフロー 要件 設計 実装 今回のターゲット 最適化

● 導⼊ Table of contents ● UIアニメーション設計 ● UIアニメーション実装 ● パフォーマンスと最適化 ● まとめ

第2章 UIアニメーション設計

UIアニメーションのワークフロー どの実装⼿法を選ぶか 要件 設計 実装 最適化

3つのUIアニメーション実装⼿法 Widget Animation Material Niagara タイムラインで動かす デザイナーフレンドリーな⼿法 シェーダで描く 再利⽤しやすい⼿法 パーティクルで描く リッチな演出に強い⼿法

Widget Animation を使⽤したアニメーション 概要 ● ● 時間軸ベースの演出を作る⼿法 タイムラインを利⽤して位置やスケール調整 強み ● ● ● デザイナーがタイムライン上で調整しやすい 短時間で実装しやすい Blueprint から制御しやすい ユースケース ● ● ポップアップ表⽰ / メニュー開閉 局所的で短い UI アニメーション

Widget Animationを利⽤したユースケース ポップアップの出現‧退場 ホバー時の⾊変化‧スケール ボタンステート切り替え 画⾯全体の遷移

Widget Animation 設計のポイント タイムライン化のルール アニメーション再⽣⽅法 再⽣時間 Timelineを利⽤するアニメーションの制約 ループか、単発か、Widget連動とするか アニメーションの再⽣時間を統⼀ アニメーション名 プロパティ変更のルール 表⽰制御 In/Out, Hover/Unhoverなど名称の統⼀ RenderTransform優先で極⼒Slotは避ける Widgetの表⽰はアニメーション内か外か

Material を使⽤したアニメーション 概要 ● ● ● UI Material を利⽤したシェーダーベースの演出 ⾊変化‧マスク‧グローなどを表現しやすい Parameter を使って柔軟に制御できる 強み ● ● ● 再利⽤しやすい（MF, MI, MPC） 複数 Widget の同期に強い ループ表現や継続演出に強い ユースケース ● ● HPバー/ ゲージ / クールダウン表⽰ 背景の流れ / スキャンライン / グロー

Material を利⽤したユースケース プログレスバー ループエフェクト UVアニメーション 複雑な形状‧SDF⾓丸‧グラデーション

Material 設計のポイント 汎⽤化 再利⽤ 更新タイミング管理 Master Material を作成してInstanceで量産 Material Function を活⽤して効率化 Timeノード利⽤か、Parameter変更か パラメータ命名規則 パラメータの持ち⽅ パラメータの更新 外部制御を想定しプロジェクトで統⼀ MPCでグローバル化か、インスタンス毎か 極⼒少ないパラメータをトラックやBPで制御

Niagara を使⽤したアニメーション 概要 ● ● Niagara を UI 上で再⽣してUIに描画する⼿法 実装⽅法が複数ある（次ページ以降で説明） 強み ● ● 表現⼒が⾼い 瞬間的なフィードバックや視線誘導に強い ユースケース ● ● 報酬獲得∕レベルアップ 通知表⽰∕重要ボタンの強調

Render Target を利⽤してNiagaraを描画 NiagaraをRender Target (RT)に描画してUI上にTextureを貼り付ける⼿法 ● 通常の Niagara の表現を使いやすい ○ ● Niagaraの利⽤の制約がない Render Targetの使⽤により、メモリと 描画コストを考慮する必要がある ● Post Process の影響を受ける点やマス クの背景抜きの考慮が必要 ワールド上のエフェクト(左)を RTテクスチャとしてUI(右)に貼り付け

Niagara UI Renderer plugin (Fab) NiagaraをUI上に描画するためのThird-party Plugin ● Fabで無料で公開 ● UMG Widget として配置できる ● RT経由よりUIに組み込みやすい ● CPU Sim のみ ● Sprite / Ribbon が主なRenderer ● 対応プラットフォームやバージョン での制約がある Niagara UI Renderer (Fab)のサンプル

• https://www.fab.com/listings/1bd04141-c553-4b63-8ee9-277595475195?lang=en

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描画する様⼦

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以降で拡張可なら〇

UIアニメーション⼿法別選択基準（どの⼿法を選ぶか） ⼿法 得意 不得意 ⽤途 Widget Animation 状態遷移や短い単発演出 ⼤量同時再⽣ メニュー開閉 デザイナーが調整する演出 常時ループ ポップアップ 動的値追従 Material 継続演出 単発の複雑な演出 ゲージ、アイコン マスク タイミングの細かい調整 背景演出 複数Widgetの⾒た⽬同期 Niagara ハイライト 瞬間的に豪華な演出 HUD常駐 視線誘導 視線誘導 ⼤量配置 重要ボタン 厳しいハードの性能条件

第3章 UIアニメーション実装

UIアニメーションのワークフロー 具体的にどう組むか 要件 設計 実装 最適化

Widget Animation 実装 ● テーマ ポップアップ表⽰ / ⾮表⽰ ● 実装フロー 1. Base Widget にアニメーションを作成 2. Base Widget を配置した Parent Widget を作成 3. Base Widget にアニメーション再⽣ロジック追加 → Activate時に Open / Deactivate時に Close 再⽣

WP_Popup : Animation 作成

WP_Popup : Animation 作成

WP_Popup : Base Widget ● Parent Class: User Widget ● アニメーション を持つ ● Named Slot を配置して要素を持たない WP_Popup_Settings : Parent Widget ● Parent Class: Common Activatable Widget ● アニメーションは持たない ● Named Slot に要素を持たせる

親Widgetとの対話 （Base Widgetでの実装）

Material でUIアニメーションの実装 ● テーマ Progress 値で動くゲージ ● 実装フロー 1. ゲージ⽤ Master Material を作成 2. Master Material から Material Instance作成 3. UMG の Image Brush に Material を割り当て 4. シーケンサー or BlueprintからProgress更新

Master Material作成 Material Instance作成

Image にMaterial設定 Parameter経由で更新

Niagara でUIアニメーションの実装 ● テーマ 瞬間的なパーティクル演出 ● 実装⽅法 1. 演出⽤の Niagara 作成 2. UI⽤ Material の作成 3. UMGで Niagara UI Widget 配置, Niagara 設定 ※Niagara UI Renderer Plugin (Engine) 利⽤

Material Domain を User Interface に設定 UI Sprite Renderer を追加 Niagara Material

Niagara UI Widget を配置 Niagara System を配置 UMG Designer

UIアニメーション⼿法別実装判断（どう組むか） ⼿法 実装ポイント 実装難度 Widget Animation Base Widget にアニメーションを集約 容易 タイムラインで実装しやすい 再利⽤構造の設計が必要 Named Slot で内容を差し替え Material 共通処理は Master Material に集約 Material Instance で差分を管理 標準 Material と外部制御の知識が必要 再利⽤性の⾼い構成にしやすい Parameter は値の変化時のみ更新 Niagara 実装⼿法によって制限の中で作成 ⽤途に次第では他の⼿法で代⽤を検討 ⾼度 利⽤できるNiagaraに制限がある UI描画の⾃由度も制限される

第4章 パフォーマンスと最適化

UIアニメーションのワークフロー 負荷の分析と制御 要件 設計 実装 最適化

おさらい：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

CPU と GPU の役割 CPU GPU CPU処理：画⾯を作る GPU処理：画⾯を描く VFX Animation UI AI Misc Nanite Light Shadow VFX Misc UI UI レイアウト計算、更新、アニメーション 実際の描画、ピクセル処理 UI は CPU と GPU の両⽅のパフォーマンスに影響 UI

UIのCPU負荷ポイント Layout Tick Paint 階層が深いほど 再計算コストが増⼤ 毎フレーム動く要素が多いほど CPU時間を消費 再描画が多いほど 描画リスト構築コストが増⼤ ☑ 最適化ポイント：「毎フレームのCPUが計算する量を減らす」 再レイアウトを減らす∕毎フレーム処理を減らす∕作り直しを減らす

UIのGPU負荷ポイント TextA TextB TextC Overdraw DrawCall Material 同じピクセルを何度も塗る無駄 （透明 UI の重なり） CPUからGPUへの 描画命令の回数 ピクセル単位の計算コスト ☑ 最適化ポイント：「毎フレームGPUが塗る量を減らす」 Overdrawを減らす∕DrawCallを減らす∕画素負荷を減らす

UIのパフォーマンス計測‧最適化について

CPUパフォーマンス検証 Console Command：stat slate CPU側のUIのトータルの負荷 Batch ≒ DrawCall数

GPUパフォーマンス検証 Console Command：stat gpu GPU側のUIのトータルの負荷

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をオフにして計測がおすすめ

プラットフォーム別 UIのGPU負荷チェック 計測対象 UIのGPU負荷 GPU負荷全体でUIがボトルネックかどうか 詳細な描画パス情報 UIのどの描画パスがボトルネックか パス別アセット情報 描画パスのどのアセットがボトルネックか パス別描画情報 重なりや描画順番などの視覚的な情報 ハードウェアカウンタ ハードウェアレベルでどこがボトルネックか stat gpu Unreal Insights Profiler 〇 〇 〇 ✕ 〇 〇 ✕ 〇 〇 ✕ ✕ 〇 ✕ ✕ 〇

RenderDoc で⾒る描画パス単位の負荷

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

UIの負荷について理解したところで、 UIアニメーションにおける最適化について

Widget Animation のパフォーマンス分析 Unreal Insights アニメーション更新 UI更新 (Runner Flush) (Slate::DrawWindow) アニメーション更新が重い ⇒ シーケンサーの内容を⾒直し UI更新が重い ⇒ レイアウトや設定を⾒直し

Widget Animation の最適化 トラック 載せるプロパティは最⼩限 重い順（Slot→Render→Color→Visibility） 必要なチャネルのみ載せる Widgetのバインド数を抑える ● ● ● ● キー ● ● ● ● セクション 重複キーの削除 セクションの範囲外にキーを打たない 可能なら Reduce Keysで間引く 単発操作はシーケンサー外（BP等）で制御 ● ● ● ● セクション⻑を調整して必要な分だけ評価 全体の⻑さを必要最⼩に Restore/Keep のルールを決める 未使⽤の空セクション‧チャンネルは削除

Material のパフォーマンス分析 Unreal Insights RenderDoc どのマテリアルが重たいか： バッチ単位で出⼒される処理時間が⼤きいものを特定 ‧重たいマテリアルが特定できたら、Material の⾒直しを検討 ‧Material によっては、Blur, PostProcess など別の負荷が加算されることもある

Material の最適化 マテリアル設定 ● ● ● ● Domain を⽤途に合わせる Shading Model は Unlit 優先 Blend Mode 選定 (Translucent/Masked/Opaque) 不要な機能を切る グラフ‧シェーダー ● ● ● ● Platform Stats で命令数を確認 Texture Sample を最⼩に留める ⾼コストノードを避ける 動的値はパラメータ化 更新タイミング ● ● ● MID更新は必要時のみ 半透明の重ねを減らす ⾮表⽰時は更新停⽌

Niagara のパフォーマンス分析 Niagara Debugger Unreal Insights どの Niagara が動いているか？ ‧Niagara Debugger で確認が可能 どの Niagara がどれくらい重たいか？ ‧Unreal Insights (CPU/GPUチャネル, Niagaraチャネル: UE5.8〜) で計測

Niagara の最適化 Emitter‧Module ● ● ● ● Updateは必要最⼩ 物理シミュレーション系は必要時のみ Sprite+軽量Material FacingはUI向け固定 粒⼦数‧Spawn ● ● ● 粒⼦数はCPU/GPUに影響があるため上限設定 画⾯内に収まるよう過剰Spawnを避ける 常駐ループを避け、単発のみが望ましい 寿命‧表⽰期間 ● ● ● Active時間を極⼒短時間に留める ⾮表⽰時には⼿動でエフェクトを⽌める Scalabilityで段階削減

例：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としてプラットフォーム別の計測値をスケール

⼿法別パフォーマンスコスト ⼿法 Widget Animation Material Niagara CPU負荷 GPU負荷 中 低 トラック数‧バインド数‧レイアウト更新が 増えるほど負荷が⾼くなる アニメーション評価は主にCPU側 再描画やOverdrawによる影響はある 低 中 MID⽣成やParameter更新が 多い場合は負荷が増える 命令数‧表⽰⾯積‧半透明の重なりが 増えるほど負荷が⾼くなる ⾼ 中 Emitter‧粒⼦数‧Module‧Simulationの 内容によって負荷が⼤きくなる UI Rendererは⽐較的軽量 Render Target⽅式は負荷が⾼くなりやすい 実際の負荷は、実装⽅式、同時表⽰数、更新頻度、表⽰⾯積によって変動

第5章 まとめ

設計 表現の特性から⼿法を選ぶ 短い状態遷移は Widget Animation 継続‧再利⽤する表現は Material、瞬間的な演出は Niagara まとめ 実装 再利⽤と更新制御を設計する 共通処理は集約する、値が変化したときだけ更新する 不要になった処理は確実に停⽌する 最適化 計測して負荷の原因を分ける CPUは評価‧レイアウト‧毎フレーム処理 GPUはMaterial‧描画⾯積‧重ね描き 原因に応じて仕事量を減らす

UI アニメーションは ⾒た⽬だけの問題ではなく、 要件‧実装⼿法‧パフォーマンスを 同時に設計することが品質を決める

Thank