猫でも分かるUMG
•
54 likes•59,902 views
2017/9/30に行われた 第２回UE4勉強会 in 大阪 で登壇した際の資料です。 https://ue4study-osaka.connpass.com/event/64903/
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (9)
Similar to 猫でも分かるUMG
Similar to 猫でも分かるUMG (20)
More from エピック・ゲームズ・ジャパン Epic Games Japan
More from エピック・ゲームズ・ジャパン Epic Games Japan (20)
猫でも分かるUMG
- 1. ＃UE4Osaka 猫でも分かるUMG 第２回UE4勉強会 in 大阪 Epic Games Japan 岡田和也
- 2. ＃UE4Osaka 自己紹介 Epic games Japan サポートエンジニア 岡田 和也 ( おかず @pafuhana1213 ) 最近、Undertaleに今更ドハマリしました
- 3. ＃UE4Osaka お品書き • そもそもUMGってなに？ • UMGってどんな機能があるの？ • よく頂く質問とその回答
- 4. ＃UE4Osaka そもそもUMGってなんやねん？ 公式ドキュメントより • Unreal Motion Graphics UI デザイナ (UMG) は、 ビジュアル UI オーサリングツールです ユーザー向けに表示するインゲームの HUD、メニューや その他のインターフェース関連のグラフィックスを 作成するために使用できます https://docs.unrealengine.com/latest/JPN/Engine/UMG/index.html
- 5. ＃UE4Osaka そもそもUMGってなんやねん？ 公式ドキュメントより • Unreal Motion Graphics UI デザイナ (UMG) は、 ビジュアル UI オーサリングツールです ユーザー向けに表示するインゲームの HUD、メニューや その他のインターフェース関連のグラフィックスを 作成するために使用できます https://docs.unrealengine.com/latest/JPN/Engine/UMG/index.html
- 6. ＃UE4Osaka
- 9. ＃UE4Osaka HUD UE3から引き継いだ Head-Up Display用の機能 • UE4では、主にデバッグ用として使用されることが多い 主な機能 • プリミティブな図形・テキストを描画するキャンバス • 単純なヒットボックス • マウスクリックの検出
- 10. ＃UE4Osaka
- 12. ＃UE4Osaka HUDじゃなくてもいい理由 • UMGでも線・矩形・テキスト描画可能 • UMGのonPaint関数をoverride • 実行しないと表示が確認できない • テキスト表示が汚すぎる • 古い機能なので正直保証できない
- 16. ＃UE4Osaka Slate 公式ドキュメントより • Slate はカスタム仕様のプラットフォームに依存しない UI フレームワークで、 例えばアンリアルエディタやインゲーム UI の独自の楽しみや効率性など、 ツールやアプリケーションのユーザーインターフェースの構築にあわせた 設計となっています。 • スレートは宣言記法を簡単にデザイン、レイアウト、及び スタイルコンポーネントを作成する機能と組み合わせることによって、 UI の作成や UI 上でのイタレーションが簡単にできます。 • https://docs.unrealengine.com/latest/JPN/Programming/Slate/Overview/ind ex.html
- 17. ＃UE4Osaka Slate 公式ドキュメントより • Slate はカスタム仕様のプラットフォームに依存しない UI フレームワークで、 例えばアンリアルエディタやインゲーム UI の独自の楽しみや効率性など、 ツールやアプリケーションのユーザーインターフェースの構築にあわせた 設計となっています。 • スレートは宣言記法を簡単にデザイン、レイアウト、及び スタイルコンポーネントを作成する機能と組み合わせることによって、 UI の作成や UI 上でのイタレーションが簡単にできます。 • https://docs.unrealengine.com/latest/JPN/Programming/Slate/Overview/ind ex.html
- 18. ＃UE4Osaka
- 21. ＃UE4Osaka Slateを使うのは、エディタ拡張するとき！ 標準パネルのカスタマイズ • 公式ドキュメント 独自ウィジェットの作成 • Empowering your team with UE4 エディタの拡張とブループリントを 使いこなせば、あなたのゲーム開発は もっと拡がる！ • 【2015/12/03 - 2015/12/03】 ボタンを激しく連打するとD言語くんが 大暴れする UE4 エディタ拡張
- 23. ＃UE4Osaka エディタ拡張をする際に検討すべき案 BPを活用したい場合 • Construction Script • 公式ドキュメント • Blutility : • UE4 Blutilityによるお手軽なエディター拡張 • [TUTORIAL] Blutility - Running Blueprint functions inside Editor
- 25. ＃UE4Osaka エディタ拡張をする際に検討すべき案 Unreal.js (非公式) • マーケットプレイスで無料配布中 • Unreal.js 入門 • [UE4]Unreal.jsでUE4のエディタ拡張を作る マーケットプレイスのPluginカテゴリを眺める • https://www.unrealengine.com/ marketplace/content-cat/assets/codeplugins
- 26. ＃UE4Osaka マーケットプレイスのアセットの利用規約について • すべて商用利用・改変可能。 • 利用・共有範囲について • 購入者（個人・会社）が所属する全プロジェクトで利用可能 • 購入者の所属プロジェクトに関わる開発者・会社間で共有可能 • その他 • 著作権に関する問題はEpicGames内でレビュー済み • 記載がない限り、権利表記は不要 （表記すると製作者は嬉しいので是非！） • 公式サイト マーケットプレイス F&Qページ
- 29. ＃UE4Osaka Slateを弄りたい・弄らないといけない あなたへ • 公式ドキュメント • Empowering your team with UE4エディタの拡張とブループリントを 使いこなせば、あなたのゲーム開発はもっと拡がる！ • 【2015/12/03 - 2015/12/03】 ボタンを激しく連打するとD言語くんが大暴れする UE4 エディタ拡張 • 【UE4】エディタ拡張（準備編） • [UE4] プラグインによるエディタ拡張(1) 空のプラグインを追加する • UE4初心者がエディタ拡張をやってみた • C++ Extending the Editor | Live Training | Unreal Engine
- 32. ＃UE4Osaka UMG Slateをインゲームで使いやすいように拡張したもの • UObjectを継承する形にすることで BPでも扱えるように • エディタが用意されているので その場で編集結果を確認できるように • タイムラインによる アニメーション制御が可能に インゲーム用UIならUMG”ほぼ”一択
- 33. ＃UE4Osaka UMGの豆知識 間接的にSlateを制御する形になってます 例： Image.h / cpp → SImage.h / cpp
- 34. ＃UE4Osaka お品書き • そもそもUMGってなに？ • UMGってどんな機能があるの？ • よく頂く質問とその回答
- 35. ＃UE4Osaka UMGによるUI作り Widget と呼ばれるパーツを 階層的に組み合わせることで 独自の Widget BP を製作
- 43. ＃UE4Osaka 用意されているWidget一覧 • Common • Border • Button • Check Box • Image • Named Slot • Progress Bar • Slider • Text • Text Box • Extra • Expandable Area • Input • Combo Box • Spin Box • Text Box • Optimization • Invalidation Box • Retainer Box • Panel • Canvas Panel • Grid Panel • Horizontal Box • Overlay • Safe Zone • Scale Box • Scroll Box • Size Box • Uniform Grid Panel • Vertical Box • Widget Switcher • Warp Box • Primitive • Circular Throbber • Editable Text • Editable Text( Multi-Line ) • Menu Anchor • Native Widget Host • Spacer • Throbber • Special Effects • Background Blur • Uncategorized • Input Key Selector • Window Title Bar Area 公式ドキュメント Widget対応のリファレンス
- 45. ＃UE4Osaka 用意されているWidget一覧 • Common • Border • Button • Check Box • Image • Named Slot • Progress Bar • Slider • Text • Text Box • Extra • Expandable Area • Input • Combo Box • Spin Box • Text Box • Optimization • Invalidation Box • Retainer Box • Panel • Canvas Panel • Grid Panel • Horizontal Box • Overlay • Safe Zone • Scale Box • Scroll Box • Size Box • Uniform Grid Panel • Vertical Box • Widget Switcher • Warp Box • Primitive • Circular Throbber • Editable Text • Editable Text( Multi-Line ) • Menu Anchor • Native Widget Host • Spacer • Throbber • Special Effects • Background Blur • Uncategorized • Input Key Selector • Window Title Bar Area 公式ドキュメント Widget対応のリファレンス
- 48. ＃UE4Osaka Named Slot 自作のWidgetを より柔軟に よりバリエーション豊かに 使いまわすための仕組み https://docs.unrealengine.com/latest/JPN/ Engine/UMG/UserGuide/ WidgetTypeReference/NamedSlot/index.html
- 49. ＃UE4Osaka Widgetの流用 作成したWidget BPは 他のWidget BPでも使いまわせる 新規で作成した UMG_Item UMG_ItemList
- 51. ＃UE4Osaka なぜ修正コストが重要なのか？ UIは開発フローの下流部分になりがち… くそぉ… さらに、仮のUIは出さないといけない… うぐぅ… しかも、その仮UIも頻繁に変更リクエストがくる… こんちきしょう… UIは炎上しがち！ 少しでも早く鎮火するためにも、 製作コスト・修正コストは重要！！！
- 52. ＃UE4Osaka 流用はしたいけど、微妙に変えたいケースがある • 個別に作るのは大変だけど、そのまま流用だと自由度が低すぎる… • BPで差し替える手もあるけど・・・ アイテムリスト • やくそう • やくそう • やくそう • やくそう • やくそう • やくそう 今日はもう寝ますか？ はい いいえ 例 ： 「ヘッダー + ？？？」 問題
- 53. ＃UE4Osaka そこでNamed Slotの出番 流用先で上書きすることを前提としたWidget UMG_MenuBase UMG_Menu 流用先で上書きしたい内容 ( Widget )を子にする
- 54. ＃UE4Osaka Named Slot 自作のWidgetを より柔軟に よりバリエーション豊かに 使いまわすための仕組み https://docs.unrealengine.com/latest/JPN/ Engine/UMG/UserGuide/ WidgetTypeReference/NamedSlot/index.html
- 56. ＃UE4Osaka 配置直後
- 57. ＃UE4Osaka Native Widget Host 公式ドキュメントより 子スレート ウィジェットを 1 つ格納できるコンテナ ウィジェットです。 UMG ウィジェット内部にネイティブ ウィジェットを ネスティングすることだけが必要な場合に使用します。
- 58. ＃UE4Osaka Native Widget Host UMG担当の方曰く 「NativeWidgetHost はかなり 'PleaseHackHere'ウィジェットです」 用途 UMGには公開されていない UI ( Slate )を使いたい場合 独自拡張したUI ( Slate )をUMGで使いたい場合
- 59. ＃UE4Osaka 花繁吹き [UMG]NativeWidgetHostを継承してカラーピッカーを作る Yuki Ogura (@unwitherer ) さん
- 60. ＃UE4Osaka Input Key Selector 公式ドキュメントより 「単一キー または 修飾子を持つ単一キーを選択するためのウィジェットです。」
- 62. ＃UE4Osaka Window Title Bar Area 公式ドキュメントより 「UI の領域を定義するためのパネルで、ユーザーはこのウィンドウを デスクトップ プラットフォームにドラッグすることができます。」
- 63. ＃UE4Osaka UE4.14 リリースノートより • 新機能：デスクトッププラットフォーム上でゲームウィンドウの枠線を 無制限にする（システム境界線やタイトルバーなし）ためのサポート が追加されました。 デフォルトでは無効です。 • 有効にするには、DefaultGame.iniの [/Script/EngineSettings.GeneralProjectSettings]に "UseBorderlessWindow = True"を追加する必要があります。 • これを使用するゲームは、ウィンドウの最小化/最大化/閉じるボタン と同様に、UIに「ウィンドウタイトルバーエリア」ウィジェットを追加する 責任があります。
- 64. ＃UE4Osaka
- 65. ＃UE4Osaka UseBorderlessWindow = false UseBorderlessWindow = true
- 66. ＃UE4Osaka UE4.14 リリースノートより • 新機能：デスクトッププラットフォーム上でゲームウィンドウの枠線を 無制限にする（システム境界線やタイトルバーなし）ためのサポート が追加されました。 デフォルトでは無効です。 • 有効にするには、DefaultGame.iniの [/Script/EngineSettings.GeneralProjectSettings]に "UseBorderlessWindow = True"を追加する必要があります。 • これを使用するゲームは、ウィンドウの最小化/最大化/閉じるボタン と同様に、UIに「ウィンドウタイトルバーエリア」ウィジェットを追加する 責任があります。
- 67. ＃UE4Osaka Panel系 • Canvas Panel • Grid Panel • Horizontal Box • Overlay • Safe Zone • Scale Box • Scroll Box • Size Box • Uniform Grid Panel • Vertical Box • Widget Switcher • Warp Box レイアウト・子ウィジェットの配置調整用 • 開発効率が大きく向上させるすごいやつ！
- 68. ＃UE4Osaka Canvas Panel UMG作成時にデフォルトで入っているPanel • 子ウィジェットは アンカーを基準にして 手動で配置 • 「用途に応じて子ウィジェットを自動配置」 というのは苦手 アンカーについて
- 70. ＃UE4Osaka Vertical / Horizontal Box 垂直 / 水平方向に子ウィジェットを自動配置するPanel
- 72. ＃UE4Osaka Grid Panel 垂直 / 水平方向に子ウィジェットを自動配置するPanel • 隙間なく敷き詰めていくタイプ
- 73. ＃UE4Osaka Uniform Grid Panel 垂直 / 水平方向に子ウィジェットを自動配置するPanel • 個数に応じて間隔を調整するタイプ
- 74. ＃UE4Osaka Grid Panel vs Uniform Grid Panel
- 75. ＃UE4Osaka Scroll Box スクロールバー付きの 垂直（水平）方向のリスト • 仮想化は未サポート ( 表示範囲外でも存在するので注意 )
- 77. ＃UE4Osaka Spacer • Paddingによる調整は超大変なので、Spacerは神 • PanelのGet Child～ ノードに含まれてしまうので、Spacer君は少し残念
- 79. ＃UE4Osaka スケーリング方向を制限することも可能 Stretch Direction = DownOnly Stretch Direction = UpOnly
- 80. ＃UE4Osaka Widget Switcher 子ウィジェットの内のひとつだけを表示するPanel • Active Widget Indexで指定されたWidgetだけが表示される • ブラウザのタブによるページ切り替えのようなUIを実装する際に有用
- 82. ＃UE4Osaka Background Blur 奥にある表示をぼかすウィジェット • UI同士の手前・奥判定は、Hierarchyの順番 と ZOrderの値を使用 (Epic的にはHierarchyによる調整を推奨)
- 83. ＃UE4Osaka 用意されているWidget一覧 • Common • Border • Button • Check Box • Image • Named Slot • Progress Bar • Slider • Text • Text Box • Extra • Expandable Area • Input • Combo Box • Spin Box • Text Box • Optimization • Invalidation Box • Retainer Box • Panel • Canvas Panel • Grid Panel • Horizontal Box • Overlay • Safe Zone • Scale Box • Scroll Box • Size Box • Uniform Grid Panel • Vertical Box • Widget Switcher • Warp Box • Primitive • Circular Throbber • Editable Text • Editable Text( Multi-Line ) • Menu Anchor • Native Widget Host • Spacer • Throbber • Special Effects • Background Blur • Uncategorized • Input Key Selector • Window Title Bar Area 公式ドキュメント Widget対応のリファレンス
- 84. ＃UE4Osaka お品書き • そもそもUMGってなに？ • UMGってどんな機能があるの？ • よく頂く質問とその回答
- 87. ＃UE4Osaka プロファイリングした上で ボトルネックになっている箇所を 優先的に対処していきましょう！ 参考: [CEDEC2017] UE4プロファイリングツール総おさらい（グラフィクス編）
- 88. ＃UE4Osaka 最適化のためのWidget • Invalidation Box • 子ウィジェットをキャッシュすることで、Slateのレンダリングを高速化 • Invalidation Box によってキャッシュされるウィジェットでは、 Prepassed、 Ticked、または Painted が行われません • Retainer Box • 子ウィジェットをレンダー ターゲットに描画し、その後 そのレンダー ターゲットを画面に表示することで、 UI の描画頻度を調整 • ウィジェットを描画した後にマテリアルをレンダー ターゲットに 適用できるという副次的なメリットもあり（ ポストプロセス的な処理 ）
- 89. ＃UE4Osaka UMG最適化の基本方針 各ウィジェットの更新処理を • どれだけ省略できるか？ → Invalidation Box • どれだけ複数フレームに分散できるか？ → Retainer Box
- 90. ＃UE4Osaka Invalidation Box • 子ウィジェットをキャッシュすることで 不要な描画・更新処理をキャッシュ（スキップ） • 子ウィジェット毎にキャッシュするか否かを指定することも可能 • Is Volatileフラグ • Invalidation Boxの位置が変化する場合は 子オブジェクトとのRelative Transformsを保存 • 保存しない場合に比べて負荷が追加されるが 移動した際の処理負荷が大幅に軽減
- 91. ＃UE4Osaka Battle Breakersにおける高速化事例 Stat slateによる計測 • Invalidation panel使用前 • Processed : 573 • Invalidation panel使用後 • Processed : 231 • Cached：342 ２倍以上の高速化を実現！
- 92. ＃UE4Osaka Invalidation Panel用のデバッグ機能 • slate.InvalidationDebugging 1 • Green: キャッシュされたWidget • Blue : 子要素との 相対的な位置関係もキャッシュ • Dashed: キャッシュしないWidget • Red: invalidated widgets
- 93. ＃UE4Osaka Invalidation Boxの注意点 キャッシュ中の子ウィジェットの形状が変化した場合、 キャッシュ処理が働かなくなります • キャッシュ処理のリクエストを行う必要があります BP : Invalidate Layout And Volatility C++ : SWidget::Invalidate • ウィジェットの頂点バッファに保存されない外観に 対する変更は例外として、キャッシュ処理が継続される • 例：マテリアルのパラメータ変更
- 94. ＃UE4Osaka ちょっと気になったので検証 TickでDelta Timeを出力する子ウィジェットで検証 • アニメーションによる形状変化 : NG • マテリアルによる形状変化 ：OK
- 96. ＃UE4Osaka Retainer Box TickでDelta Timeを出力する子ウィジェットで検証 Phase = 0 Phase Count = 1 Phase = 0 Phase Count = 2 Phase = 0 Phase Count = 10
- 98. ＃UE4Osaka Retainer Boxの注意点 ゲームの動作フレームレートが 処理間隔のベースになっているので注意 Phase = 0 Phase Count = 2 • 60fpsの場合 ： 30fps動作 • 30fpsの場合 ： 15fps動作 Phase = 0 Phase Count = 10 • 60fpsの場合 ： 6 fps動作 • 30fpsの場合 ： 3 fps動作
- 99. ＃UE4Osaka 発生する可能性のある問題 例 ： 1秒間隔でチェック処理 が走る仕様を Phase Count = 60 に 設定した Retainer Boxで実現した！ 60fpsの場合は問題ないけど… もし仕様変更で30fpsのゲームになったら？低スペックな環境だったら？ • この問題の場合はSetTimerノードで制御したほうが安心
- 100. ＃UE4Osaka Invalidation Boxと併用する際の注意点 Invalidation Boxによるキャッシュ処理は Retainer Boxには動作しない キャッシュ処理： 動作する キャッシュ処理： 動作しない • RetainerBoxの 設定が優先される
- 101. ＃UE4Osaka その他の最適化テクニック Blueprintと共通のテクニック • Tickを使わず、イベントドリブンな設計に • 階層を複雑化させず、可能な限りシンプルに • 階層を横断する探索・更新コスト ・・・
- 104. ＃UE4Osaka テキストの更新量・頻度に注意 ゲーム中初めて使用される文字は そのタイミングでFont Atlasに書き込まれます • 表示する文字列の多くが初めて使用する文字の場合 それなりに重い負荷が発生 対策 • 予め使用される文字がわかっている場合は 事前に使用して、 Font Atlasに書き込んでおく • 一気にテキストを更新するのではなく、複数フレームに分散
- 111. ＃UE4Osaka
- 113. ＃UE4Osaka 3DUIにおけるUMGの課題点 • 3DUIの形状が平面かシリンダーしか選べない • UIをテクスチャ化することで解決は可能ですが…スマートじゃない… • ポストプロセスの影響を受けてしまう • テキストがボケてしまうという問題 • VRの場合は、Stereo Layerで解決可能 • UMGエディタのみで作ることができない • UMGエディタのタイムラインを使うことが出来ない • Actor Sequenceを使えば…まだ実験段階だけど…
- 114. ＃UE4Osaka まとめ UMG, HUD, Slateの違いについて説明 • HUD ： UE3時代から続く古いUIシステム • Slate ： エディタ拡張向け • UMG ： インゲームUI用にSlateを拡張したもの
- 117. ＃UE4Osaka UMGに関する知見を積極的に公開している オススメサイトのリスト • みつまめ杏仁 http://limesode.hatenablog.com/ • 花繁吹き http://unwitherer.blogspot.jp/ • ヒストリアさんによるUMGに関する解説記事 http://historia.co.jp/archives/tag/umg • 凛(kagring)のUE4とUnityとQt勉強中ブログ http://kagring.blog.fc2.com/blog-category-7.html • 非現実的な話 http://meganeo.blog.shinobi.jp/ue4/
- 119. ＃UE4Osaka UNREAL FEST EAST 2017 参加登録受付中！ 公式サイト： https://unrealevent.eventcloudmix.com/ 日時： 2017/10/08 (日) 場所： パシフィコ横浜 会議センター 3F
- 120. ＃UE4Osaka おわり
Editor's Notes
- UMGコンポーネントNativeWidgetHostは、UMGウィジェット内でネイティブのスレートウィジェットを表示するためのコンテナとして使用することを目的としています。 私はこれをSlate Compound Widgetsのコンテナとして使用して、UMGベースのUIでこれらを使用できるようにしたいと考えています。 私はこのコンポーネントについて少ししか触れていませんが、SColourPickerのようなものを作成してNativeWidgetHostに追加するのが正しいワークフローについての助けに感謝します。
- 仮想化はしていない