Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

猫でも分かるUMG

9,656 views

Published on

2017/9/30に行われた 第2回UE4勉強会 in 大阪 で登壇した際の資料です。
https://ue4study-osaka.connpass.com/event/64903/

Published in: Engineering
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

猫でも分かるUMG

  1. 1. #UE4Osaka 猫でも分かるUMG 第2回UE4勉強会 in 大阪 Epic Games Japan 岡田和也
  2. 2. #UE4Osaka 自己紹介 Epic games Japan サポートエンジニア 岡田 和也 ( おかず @pafuhana1213 ) 最近、Undertaleに今更ドハマリしました
  3. 3. #UE4Osaka お品書き • そもそもUMGってなに? • UMGってどんな機能があるの? • よく頂く質問とその回答
  4. 4. #UE4Osaka そもそもUMGってなんやねん? 公式ドキュメントより • Unreal Motion Graphics UI デザイナ (UMG) は、 ビジュアル UI オーサリングツールです ユーザー向けに表示するインゲームの HUD、メニューや その他のインターフェース関連のグラフィックスを 作成するために使用できます https://docs.unrealengine.com/latest/JPN/Engine/UMG/index.html
  5. 5. #UE4Osaka そもそもUMGってなんやねん? 公式ドキュメントより • Unreal Motion Graphics UI デザイナ (UMG) は、 ビジュアル UI オーサリングツールです ユーザー向けに表示するインゲームの HUD、メニューや その他のインターフェース関連のグラフィックスを 作成するために使用できます https://docs.unrealengine.com/latest/JPN/Engine/UMG/index.html
  6. 6. #UE4Osaka
  7. 7. #UE4Osaka ゲーム中に表示されるUIの “殆ど” は UMGでできている!
  8. 8. #UE4Osaka あれ…? HUDとか Slate とか ときどき聞くんだけど…あれは?
  9. 9. #UE4Osaka HUD UE3から引き継いだ Head-Up Display用の機能 • UE4では、主にデバッグ用として使用されることが多い 主な機能 • プリミティブな図形・テキストを描画するキャンバス • 単純なヒットボックス • マウスクリックの検出
  10. 10. #UE4Osaka
  11. 11. #UE4Osaka HUDに対しての 個人的な意見 UMGでいいのでは!?
  12. 12. #UE4Osaka HUDじゃなくてもいい理由 • UMGでも線・矩形・テキスト描画可能 • UMGのonPaint関数をoverride • 実行しないと表示が確認できない • テキスト表示が汚すぎる • 古い機能なので正直保証できない
  13. 13. #UE4Osaka UMGを使ったデバッグ表示用のアセット
  14. 14. #UE4Osaka しいて良い所を挙げるなら… テクスチャやマテリアルを簡単に表示できる… • UMGの場合、Image Widgetを用意する必要がある • ただ…いつ使う…?
  15. 15. #UE4Osaka HUDの説明 おわり
  16. 16. #UE4Osaka Slate 公式ドキュメントより • Slate はカスタム仕様のプラットフォームに依存しない UI フレームワークで、 例えばアンリアルエディタやインゲーム UI の独自の楽しみや効率性など、 ツールやアプリケーションのユーザーインターフェースの構築にあわせた 設計となっています。 • スレートは宣言記法を簡単にデザイン、レイアウト、及び スタイルコンポーネントを作成する機能と組み合わせることによって、 UI の作成や UI 上でのイタレーションが簡単にできます。 • https://docs.unrealengine.com/latest/JPN/Programming/Slate/Overview/ind ex.html
  17. 17. #UE4Osaka Slate 公式ドキュメントより • Slate はカスタム仕様のプラットフォームに依存しない UI フレームワークで、 例えばアンリアルエディタやインゲーム UI の独自の楽しみや効率性など、 ツールやアプリケーションのユーザーインターフェースの構築にあわせた 設計となっています。 • スレートは宣言記法を簡単にデザイン、レイアウト、及び スタイルコンポーネントを作成する機能と組み合わせることによって、 UI の作成や UI 上でのイタレーションが簡単にできます。 • https://docs.unrealengine.com/latest/JPN/Programming/Slate/Overview/ind ex.html
  18. 18. #UE4Osaka
  19. 19. #UE4Osaka Slateの例
  20. 20. #UE4Osaka Slateのツライ点 黒魔術すぎてツライ ビルドしないと表示が確認できなくてツライ BPとの連携がツライ • UObjectを管理するシステム外にあるため ドキュメント・サンプルが少なくてツライ • 本当にゴメンナサイ。何とかします
  21. 21. #UE4Osaka Slateを使うのは、エディタ拡張するとき! 標準パネルのカスタマイズ • 公式ドキュメント 独自ウィジェットの作成 • Empowering your team with UE4 エディタの拡張とブループリントを 使いこなせば、あなたのゲーム開発は もっと拡がる! • 【2015/12/03 - 2015/12/03】 ボタンを激しく連打するとD言語くんが 大暴れする UE4 エディタ拡張
  22. 22. #UE4Osaka ちょっと待って! 実現したい機能は、 本当にSlateじゃないと実現できないの? Slateを使ったエディタ拡張におけるデメリット • 実装・保守・運用コスト • エンジンアップデート時のマージコスト
  23. 23. #UE4Osaka エディタ拡張をする際に検討すべき案 BPを活用したい場合 • Construction Script • 公式ドキュメント • Blutility : • UE4 Blutilityによるお手軽なエディター拡張 • [TUTORIAL] Blutility - Running Blueprint functions inside Editor
  24. 24. #UE4Osaka エディタ拡張をする際に検討すべき案 Slateの利用が必須な場合 • クラスの継承・プラグイン化することで、 エンジン本体との繋がりを薄める
  25. 25. #UE4Osaka エディタ拡張をする際に検討すべき案 Unreal.js (非公式) • マーケットプレイスで無料配布中 • Unreal.js 入門 • [UE4]Unreal.jsでUE4のエディタ拡張を作る マーケットプレイスのPluginカテゴリを眺める • https://www.unrealengine.com/ marketplace/content-cat/assets/codeplugins
  26. 26. #UE4Osaka マーケットプレイスのアセットの利用規約について • すべて商用利用・改変可能。 • 利用・共有範囲について • 購入者(個人・会社)が所属する全プロジェクトで利用可能 • 購入者の所属プロジェクトに関わる開発者・会社間で共有可能 • その他 • 著作権に関する問題はEpicGames内でレビュー済み • 記載がない限り、権利表記は不要 (表記すると製作者は嬉しいので是非!) • 公式サイト マーケットプレイス F&Qページ
  27. 27. #UE4Osaka 今後入る予定のエディタ拡張用機能 UE4 Roadmapより
  28. 28. #UE4Osaka 乞うご期待!!! とりあえず、UE4.18では入りません
  29. 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
  30. 30. #UE4Osaka Slateの説明 おわり
  31. 31. #UE4Osaka ようやくUMGの話へ
  32. 32. #UE4Osaka UMG Slateをインゲームで使いやすいように拡張したもの • UObjectを継承する形にすることで BPでも扱えるように • エディタが用意されているので その場で編集結果を確認できるように • タイムラインによる アニメーション制御が可能に インゲーム用UIならUMG”ほぼ”一択
  33. 33. #UE4Osaka UMGの豆知識 間接的にSlateを制御する形になってます 例: Image.h / cpp → SImage.h / cpp
  34. 34. #UE4Osaka お品書き • そもそもUMGってなに? • UMGってどんな機能があるの? • よく頂く質問とその回答
  35. 35. #UE4Osaka UMGによるUI作り Widget と呼ばれるパーツを 階層的に組み合わせることで 独自の Widget BP を製作
  36. 36. #UE4Osaka D&DでWidgetを簡単配置・編集
  37. 37. #UE4Osaka 各Widgetのパラメータを詳細パネルで編集
  38. 38. #UE4Osaka タイムラインエディタによるアニメーション作成
  39. 39. #UE4Osaka Widgetに対する入力に BPによる処理を紐付け
  40. 40. #UE4Osaka アーティストにとって とても優しい作りに!!!
  41. 41. #UE4Osaka もう少し掘り下げ
  42. 42. #UE4Osaka どんなWidgetが用意されているの?
  43. 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対応のリファレンス
  44. 44. #UE4Osaka 多すぎるので 個人的に紹介したいWidgetを紹介! (よく使うもの & 公式ドキュメントの説明がよくわからないもの)
  45. 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対応のリファレンス
  46. 46. #UE4Osaka Border 子Widgetを1つ格納できるコンテナWidget 色・テクスチャ・マテリアルを指定 子オブジェクトの色・配置を制御
  47. 47. #UE4Osaka Button ボタン 入力状況に応じた 表示・音の設定 背景・子オブジェクト の色設定 各入力と BPイベントの紐付け
  48. 48. #UE4Osaka Named Slot 自作のWidgetを より柔軟に よりバリエーション豊かに 使いまわすための仕組み https://docs.unrealengine.com/latest/JPN/ Engine/UMG/UserGuide/ WidgetTypeReference/NamedSlot/index.html
  49. 49. #UE4Osaka Widgetの流用 作成したWidget BPは 他のWidget BPでも使いまわせる 新規で作成した UMG_Item UMG_ItemList
  50. 50. #UE4Osaka Widgetを流用することで得られるメリット • 製作コストの削減と人的エラーの回避 • 修正コストの削減 UMG_Item UMG_ItemList
  51. 51. #UE4Osaka なぜ修正コストが重要なのか? UIは開発フローの下流部分になりがち… くそぉ… さらに、仮のUIは出さないといけない… うぐぅ… しかも、その仮UIも頻繁に変更リクエストがくる… こんちきしょう… UIは炎上しがち! 少しでも早く鎮火するためにも、 製作コスト・修正コストは重要!!!
  52. 52. #UE4Osaka 流用はしたいけど、微妙に変えたいケースがある • 個別に作るのは大変だけど、そのまま流用だと自由度が低すぎる… • BPで差し替える手もあるけど・・・ アイテムリスト • やくそう • やくそう • やくそう • やくそう • やくそう • やくそう 今日はもう寝ますか? はい いいえ 例 : 「ヘッダー + ???」 問題
  53. 53. #UE4Osaka そこでNamed Slotの出番 流用先で上書きすることを前提としたWidget UMG_MenuBase UMG_Menu 流用先で上書きしたい内容 ( Widget )を子にする
  54. 54. #UE4Osaka Named Slot 自作のWidgetを より柔軟に よりバリエーション豊かに 使いまわすための仕組み https://docs.unrealengine.com/latest/JPN/ Engine/UMG/UserGuide/ WidgetTypeReference/NamedSlot/index.html
  55. 55. #UE4Osaka Expandable Area いわゆる、折りたたみUI
  56. 56. #UE4Osaka 配置直後
  57. 57. #UE4Osaka Native Widget Host 公式ドキュメントより 子スレート ウィジェットを 1 つ格納できるコンテナ ウィジェットです。 UMG ウィジェット内部にネイティブ ウィジェットを ネスティングすることだけが必要な場合に使用します。
  58. 58. #UE4Osaka Native Widget Host UMG担当の方曰く 「NativeWidgetHost はかなり 'PleaseHackHere'ウィジェットです」 用途 UMGには公開されていない UI ( Slate )を使いたい場合 独自拡張したUI ( Slate )をUMGで使いたい場合
  59. 59. #UE4Osaka 花繁吹き [UMG]NativeWidgetHostを継承してカラーピッカーを作る Yuki Ogura (@unwitherer ) さん
  60. 60. #UE4Osaka Input Key Selector 公式ドキュメントより 「単一キー または 修飾子を持つ単一キーを選択するためのウィジェットです。」
  61. 61. #UE4Osaka Input Key Selectorの使用例 キーコンフィグ
  62. 62. #UE4Osaka Window Title Bar Area 公式ドキュメントより 「UI の領域を定義するためのパネルで、ユーザーはこのウィンドウを デスクトップ プラットフォームにドラッグすることができます。」
  63. 63. #UE4Osaka UE4.14 リリースノートより • 新機能:デスクトッププラットフォーム上でゲームウィンドウの枠線を 無制限にする(システム境界線やタイトルバーなし)ためのサポート が追加されました。 デフォルトでは無効です。 • 有効にするには、DefaultGame.iniの [/Script/EngineSettings.GeneralProjectSettings]に "UseBorderlessWindow = True"を追加する必要があります。 • これを使用するゲームは、ウィンドウの最小化/最大化/閉じるボタン と同様に、UIに「ウィンドウタイトルバーエリア」ウィジェットを追加する 責任があります。
  64. 64. #UE4Osaka
  65. 65. #UE4Osaka UseBorderlessWindow = false UseBorderlessWindow = true
  66. 66. #UE4Osaka UE4.14 リリースノートより • 新機能:デスクトッププラットフォーム上でゲームウィンドウの枠線を 無制限にする(システム境界線やタイトルバーなし)ためのサポート が追加されました。 デフォルトでは無効です。 • 有効にするには、DefaultGame.iniの [/Script/EngineSettings.GeneralProjectSettings]に "UseBorderlessWindow = True"を追加する必要があります。 • これを使用するゲームは、ウィンドウの最小化/最大化/閉じるボタン と同様に、UIに「ウィンドウタイトルバーエリア」ウィジェットを追加する 責任があります。
  67. 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. 68. #UE4Osaka Canvas Panel UMG作成時にデフォルトで入っているPanel • 子ウィジェットは アンカーを基準にして 手動で配置 • 「用途に応じて子ウィジェットを自動配置」 というのは苦手 アンカーについて
  69. 69. #UE4Osaka Overlay Panel 子ウィジェットのPaddingとAlignment設定に応じて 子ウィジェットの配置を調整
  70. 70. #UE4Osaka Vertical / Horizontal Box 垂直 / 水平方向に子ウィジェットを自動配置するPanel
  71. 71. #UE4Osaka WrapBox 子ウィジェットを左から右に並べて、 その幅を超えたウィジェットを次の行に配置するPanel • 幅の長さを変更可能
  72. 72. #UE4Osaka Grid Panel 垂直 / 水平方向に子ウィジェットを自動配置するPanel • 隙間なく敷き詰めていくタイプ
  73. 73. #UE4Osaka Uniform Grid Panel 垂直 / 水平方向に子ウィジェットを自動配置するPanel • 個数に応じて間隔を調整するタイプ
  74. 74. #UE4Osaka Grid Panel vs Uniform Grid Panel
  75. 75. #UE4Osaka Scroll Box スクロールバー付きの 垂直(水平)方向のリスト • 仮想化は未サポート ( 表示範囲外でも存在するので注意 )
  76. 76. #UE4Osaka Spacer 自動配置された子ウィジェットの間隔の調整用
  77. 77. #UE4Osaka Spacer • Paddingによる調整は超大変なので、Spacerは神 • PanelのGet Child~ ノードに含まれてしまうので、Spacer君は少し残念
  78. 78. #UE4Osaka Scale Box サイズを変えた際に 子ウィジェットに対してスケーリング処理を行うPanel
  79. 79. #UE4Osaka スケーリング方向を制限することも可能 Stretch Direction = DownOnly Stretch Direction = UpOnly
  80. 80. #UE4Osaka Widget Switcher 子ウィジェットの内のひとつだけを表示するPanel • Active Widget Indexで指定されたWidgetだけが表示される • ブラウザのタブによるページ切り替えのようなUIを実装する際に有用
  81. 81. #UE4Osaka Safe Zone 公式ドキュメントより プラットフォームのセーフゾーン情報を引き出し、 パディングを追加します https://devs.ouya.tv/developers/docs/content-review-guidelines
  82. 82. #UE4Osaka Background Blur 奥にある表示をぼかすウィジェット • UI同士の手前・奥判定は、Hierarchyの順番 と ZOrderの値を使用 (Epic的にはHierarchyによる調整を推奨)
  83. 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. 84. #UE4Osaka お品書き • そもそもUMGってなに? • UMGってどんな機能があるの? • よく頂く質問とその回答
  85. 85. #UE4Osaka よく頂く質問① 処理が重い
  86. 86. #UE4Osaka UMG最適化の基本方針 各ウィジェットの更新処理を • どれだけ省略できるか? • どれだけ複数フレームに分散できるか?
  87. 87. #UE4Osaka プロファイリングした上で ボトルネックになっている箇所を 優先的に対処していきましょう! 参考: [CEDEC2017] UE4プロファイリングツール総おさらい(グラフィクス編)
  88. 88. #UE4Osaka 最適化のためのWidget • Invalidation Box • 子ウィジェットをキャッシュすることで、Slateのレンダリングを高速化 • Invalidation Box によってキャッシュされるウィジェットでは、 Prepassed、 Ticked、または Painted が行われません • Retainer Box • 子ウィジェットをレンダー ターゲットに描画し、その後 そのレンダー ターゲットを画面に表示することで、 UI の描画頻度を調整 • ウィジェットを描画した後にマテリアルをレンダー ターゲットに 適用できるという副次的なメリットもあり( ポストプロセス的な処理 )
  89. 89. #UE4Osaka UMG最適化の基本方針 各ウィジェットの更新処理を • どれだけ省略できるか? → Invalidation Box • どれだけ複数フレームに分散できるか? → Retainer Box
  90. 90. #UE4Osaka Invalidation Box • 子ウィジェットをキャッシュすることで 不要な描画・更新処理をキャッシュ(スキップ) • 子ウィジェット毎にキャッシュするか否かを指定することも可能 • Is Volatileフラグ • Invalidation Boxの位置が変化する場合は 子オブジェクトとのRelative Transformsを保存 • 保存しない場合に比べて負荷が追加されるが 移動した際の処理負荷が大幅に軽減
  91. 91. #UE4Osaka Battle Breakersにおける高速化事例 Stat slateによる計測 • Invalidation panel使用前 • Processed : 573 • Invalidation panel使用後 • Processed : 231 • Cached:342 2倍以上の高速化を実現!
  92. 92. #UE4Osaka Invalidation Panel用のデバッグ機能 • slate.InvalidationDebugging 1 • Green: キャッシュされたWidget • Blue : 子要素との 相対的な位置関係もキャッシュ • Dashed: キャッシュしないWidget • Red: invalidated widgets
  93. 93. #UE4Osaka Invalidation Boxの注意点 キャッシュ中の子ウィジェットの形状が変化した場合、 キャッシュ処理が働かなくなります • キャッシュ処理のリクエストを行う必要があります BP : Invalidate Layout And Volatility C++ : SWidget::Invalidate • ウィジェットの頂点バッファに保存されない外観に 対する変更は例外として、キャッシュ処理が継続される • 例:マテリアルのパラメータ変更
  94. 94. #UE4Osaka ちょっと気になったので検証 TickでDelta Timeを出力する子ウィジェットで検証 • アニメーションによる形状変化 : NG • マテリアルによる形状変化 :OK
  95. 95. #UE4Osaka Retainer Box 子ウィジェットの更新間隔を調整可能 • 処理を複数フレームに分散できる!
  96. 96. #UE4Osaka Retainer Box TickでDelta Timeを出力する子ウィジェットで検証 Phase = 0 Phase Count = 1 Phase = 0 Phase Count = 2 Phase = 0 Phase Count = 10
  97. 97. #UE4Osaka Retainer Boxはどんな時に使う…? 「本当は毎フレーム処理を走らせたいけど… 処理負荷的にそれは難しい…さてどうしよう… うーん…まあ、ここだったら… 数フレームスキップしても処理的にも演出的に問題ないかな…」 という時 (個人的な感想)
  98. 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. 99. #UE4Osaka 発生する可能性のある問題 例 : 1秒間隔でチェック処理 が走る仕様を Phase Count = 60 に 設定した Retainer Boxで実現した! 60fpsの場合は問題ないけど… もし仕様変更で30fpsのゲームになったら?低スペックな環境だったら? • この問題の場合はSetTimerノードで制御したほうが安心
  100. 100. #UE4Osaka Invalidation Boxと併用する際の注意点 Invalidation Boxによるキャッシュ処理は Retainer Boxには動作しない キャッシュ処理: 動作する キャッシュ処理: 動作しない • RetainerBoxの 設定が優先される
  101. 101. #UE4Osaka その他の最適化テクニック Blueprintと共通のテクニック • Tickを使わず、イベントドリブンな設計に • 階層を複雑化させず、可能な限りシンプルに • 階層を横断する探索・更新コスト ・・・
  102. 102. #UE4Osaka その他の最適化テクニック UMGのBinding機能を使用しない • 特に、BP関数を含むBinding処理 • 理由:Binding処理は毎フレーム実行される為
  103. 103. #UE4Osaka 例:プレイヤーの体力表示用UI プレイヤー側 UI側 イベントディスパッチャー機能で 更新処理を明示的に実行
  104. 104. #UE4Osaka テキストの更新量・頻度に注意 ゲーム中初めて使用される文字は そのタイミングでFont Atlasに書き込まれます • 表示する文字列の多くが初めて使用する文字の場合 それなりに重い負荷が発生 対策 • 予め使用される文字がわかっている場合は 事前に使用して、 Font Atlasに書き込んでおく • 一気にテキストを更新するのではなく、複数フレームに分散
  105. 105. #UE4Osaka Widget ReflectorからFont Atlasを確認可能
  106. 106. #UE4Osaka 大事なことなので… プロファイリングした上で ボトルネックになっている箇所を 優先的に対処していきましょう! 最悪なケース 無理に最適化して、あまり改善されず ただ作業効率落としただけ…
  107. 107. #UE4Osaka よく頂く質問② 3DUIを作りたい
  108. 108. #UE4Osaka 3DUIの例 ( DeadSpaceシリーズ )
  109. 109. #UE4Osaka 3DUIの例 (3Dモデルの表面にUIを貼る例)
  110. 110. #UE4Osaka BPのWidgetコンポーネントを使う
  111. 111. #UE4Osaka
  112. 112. #UE4Osaka 3DUIの形状を平面ではなく、シリンダーにすることも
  113. 113. #UE4Osaka 3DUIにおけるUMGの課題点 • 3DUIの形状が平面かシリンダーしか選べない • UIをテクスチャ化することで解決は可能ですが…スマートじゃない… • ポストプロセスの影響を受けてしまう • テキストがボケてしまうという問題 • VRの場合は、Stereo Layerで解決可能 • UMGエディタのみで作ることができない • UMGエディタのタイムラインを使うことが出来ない • Actor Sequenceを使えば…まだ実験段階だけど…
  114. 114. #UE4Osaka まとめ UMG, HUD, Slateの違いについて説明 • HUD : UE3時代から続く古いUIシステム • Slate : エディタ拡張向け • UMG : インゲームUI用にSlateを拡張したもの
  115. 115. #UE4Osaka まとめ 用意されているウィジェットの一部について説明 • テキストや画像のような基本的なものだけでなく、 ウィジェットのレイアウトを調整するためのPanel系や 特殊ケースのためのWidgetが用意されている • ウィジェットの流用を考慮した設計にすることで 作業・修正コストを削減する事が可能
  116. 116. #UE4Osaka まとめ よく聞かれる質問とその回答を紹介 • 最適化用の機能やテクニックは幾つかあるが 使用する際はそのメリット・デメリットを考慮する あと、プロファイリング! • Widgetコンポーネントを使った3DUI製作について
  117. 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/
  118. 118. #UE4Osaka 最後に UIの良さは ゲームのクオリティに直結します! 是非知見をシェアしあって、 より良いUIを作っていきましょう!!!
  119. 119. #UE4Osaka UNREAL FEST EAST 2017 参加登録受付中! 公式サイト: https://unrealevent.eventcloudmix.com/ 日時: 2017/10/08 (日) 場所: パシフィコ横浜 会議センター 3F
  120. 120. #UE4Osaka おわり

×