猫でも分かるUMG

263.5K Views

October 01, 17

スライド概要

2017/9/30に行われた 第2回UE4勉強会 in 大阪 で登壇した際の資料です。

https://ue4study-osaka.connpass.com/event/64903/

profile-image

Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

猫でも分かるUMG 第2回UE4勉強会 in 大阪 Epic Games Japan 岡田和也 #UE4Osaka

2.

自己紹介 Epic games Japan サポートエンジニア 岡田 和也 ( おかず @pafuhana1213 ) 最近、Undertaleに今更ドハマリしました #UE4Osaka

3.

お品書き • そもそもUMGってなに? • UMGってどんな機能があるの? • よく頂く質問とその回答 #UE4Osaka

4.

そもそもUMGってなんやねん? 公式ドキュメントより • Unreal Motion Graphics UI デザイナ (UMG) は、 ビジュアル UI オーサリングツールです ユーザー向けに表示するインゲームの HUD、メニューや その他のインターフェース関連のグラフィックスを 作成するために使用できます https://docs.unrealengine.com/latest/JPN/Engine/UMG/index.html #UE4Osaka

5.

そもそもUMGってなんやねん? 公式ドキュメントより • Unreal Motion Graphics UI デザイナ (UMG) は、 ビジュアル UI オーサリングツールです ユーザー向けに表示するインゲームの HUD、メニューや その他のインターフェース関連のグラフィックスを 作成するために使用できます https://docs.unrealengine.com/latest/JPN/Engine/UMG/index.html #UE4Osaka

6.

#UE4Osaka

7.

ゲーム中に表示されるUIの “殆ど” は UMGでできている! #UE4Osaka

8.

あれ…? HUDとか Slate とか ときどき聞くんだけど…あれは? #UE4Osaka

9.

HUD UE3から引き継いだ Head-Up Display用の機能 • UE4では、主にデバッグ用として使用されることが多い 主な機能 • プリミティブな図形・テキストを描画するキャンバス • 単純なヒットボックス • マウスクリックの検出 #UE4Osaka

10.

#UE4Osaka

11.

HUDに対しての 個人的な意見 UMGでいいのでは!? #UE4Osaka

12.

HUDじゃなくてもいい理由 • UMGでも線・矩形・テキスト描画可能 • UMGのonPaint関数をoverride • 実行しないと表示が確認できない • テキスト表示が汚すぎる • 古い機能なので正直保証できない #UE4Osaka

13.

UMGを使ったデバッグ表示用のアセット #UE4Osaka

14.

しいて良い所を挙げるなら… テクスチャやマテリアルを簡単に表示できる… • UMGの場合、Image Widgetを用意する必要がある • ただ…いつ使う…? #UE4Osaka

15.

HUDの説明 おわり #UE4Osaka

16.

Slate 公式ドキュメントより • Slate はカスタム仕様のプラットフォームに依存しない UI フレームワークで、 例えばアンリアルエディタやインゲーム UI の独自の楽しみや効率性など、 ツールやアプリケーションのユーザーインターフェースの構築にあわせた 設計となっています。 • スレートは宣言記法を簡単にデザイン、レイアウト、及び スタイルコンポーネントを作成する機能と組み合わせることによって、 UI の作成や UI 上でのイタレーションが簡単にできます。 • https://docs.unrealengine.com/latest/JPN/Programming/Slate/Overview/ind ex.html #UE4Osaka

17.

Slate 公式ドキュメントより • Slate はカスタム仕様のプラットフォームに依存しない UI フレームワークで、 例えばアンリアルエディタやインゲーム UI の独自の楽しみや効率性など、 ツールやアプリケーションのユーザーインターフェースの構築にあわせた 設計となっています。 • スレートは宣言記法を簡単にデザイン、レイアウト、及び スタイルコンポーネントを作成する機能と組み合わせることによって、 UI の作成や UI 上でのイタレーションが簡単にできます。 • https://docs.unrealengine.com/latest/JPN/Programming/Slate/Overview/ind ex.html #UE4Osaka

18.

#UE4Osaka

19.

Slateの例 #UE4Osaka

20.

Slateのツライ点 黒魔術すぎてツライ ビルドしないと表示が確認できなくてツライ BPとの連携がツライ • UObjectを管理するシステム外にあるため ドキュメント・サンプルが少なくてツライ • 本当にゴメンナサイ。何とかします #UE4Osaka

21.

Slateを使うのは、エディタ拡張するとき! 標準パネルのカスタマイズ • 公式ドキュメント 独自ウィジェットの作成 • Empowering your team with UE4 エディタの拡張とブループリントを 使いこなせば、あなたのゲーム開発は もっと拡がる! • 【2015/12/03 - 2015/12/03】 ボタンを激しく連打するとD言語くんが 大暴れする UE4 エディタ拡張 #UE4Osaka

22.

ちょっと待って! 実現したい機能は、 本当にSlateじゃないと実現できないの? Slateを使ったエディタ拡張におけるデメリット • 実装・保守・運用コスト • エンジンアップデート時のマージコスト #UE4Osaka

23.

エディタ拡張をする際に検討すべき案 BPを活用したい場合 • Construction Script • 公式ドキュメント • Blutility : • UE4 Blutilityによるお手軽なエディター拡張 • [TUTORIAL] Blutility - Running Blueprint functions inside Editor #UE4Osaka

24.

エディタ拡張をする際に検討すべき案 Slateの利用が必須な場合 • クラスの継承・プラグイン化することで、 エンジン本体との繋がりを薄める #UE4Osaka

25.

エディタ拡張をする際に検討すべき案 Unreal.js (非公式) • マーケットプレイスで無料配布中 • Unreal.js 入門 • [UE4]Unreal.jsでUE4のエディタ拡張を作る マーケットプレイスのPluginカテゴリを眺める • https://www.unrealengine.com/ marketplace/content-cat/assets/codeplugins #UE4Osaka

26.

マーケットプレイスのアセットの利用規約について • すべて商用利用・改変可能。 • 利用・共有範囲について • 購入者(個人・会社)が所属する全プロジェクトで利用可能 • 購入者の所属プロジェクトに関わる開発者・会社間で共有可能 • その他 • 著作権に関する問題はEpicGames内でレビュー済み • 記載がない限り、権利表記は不要 (表記すると製作者は嬉しいので是非!) • 公式サイト マーケットプレイス F&Qページ #UE4Osaka

27.

今後入る予定のエディタ拡張用機能 UE4 Roadmapより #UE4Osaka

28.

乞うご期待!!! とりあえず、UE4.18では入りません #UE4Osaka

29.

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 #UE4Osaka

30.

Slateの説明 おわり #UE4Osaka

31.

ようやくUMGの話へ #UE4Osaka

32.

UMG Slateをインゲームで使いやすいように拡張したもの • UObjectを継承する形にすることで BPでも扱えるように • エディタが用意されているので その場で編集結果を確認できるように • タイムラインによる アニメーション制御が可能に インゲーム用UIならUMG”ほぼ”一択 #UE4Osaka

33.

UMGの豆知識 間接的にSlateを制御する形になってます 例: Image.h / cpp → SImage.h / cpp #UE4Osaka

34.

お品書き • そもそもUMGってなに? • UMGってどんな機能があるの? • よく頂く質問とその回答 #UE4Osaka

35.

UMGによるUI作り Widget と呼ばれるパーツを 階層的に組み合わせることで 独自の Widget BP を製作 #UE4Osaka

36.

D&DでWidgetを簡単配置・編集 #UE4Osaka

37.

各Widgetのパラメータを詳細パネルで編集 #UE4Osaka

38.

タイムラインエディタによるアニメーション作成 #UE4Osaka

39.

Widgetに対する入力に BPによる処理を紐付け #UE4Osaka

40.

アーティストにとって とても優しい作りに!!! #UE4Osaka

41.

もう少し掘り下げ #UE4Osaka

42.

どんなWidgetが用意されているの? #UE4Osaka

43.

用意されている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 #UE4Osaka • 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.

多すぎるので 個人的に紹介したいWidgetを紹介! (よく使うもの & 公式ドキュメントの説明がよくわからないもの) #UE4Osaka

45.

用意されている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 #UE4Osaka • 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.

Border 子Widgetを1つ格納できるコンテナWidget 色・テクスチャ・マテリアルを指定 #UE4Osaka 子オブジェクトの色・配置を制御

47.

Button ボタン 入力状況に応じた 表示・音の設定 #UE4Osaka 背景・子オブジェクト の色設定 各入力と BPイベントの紐付け

48.

Named Slot 自作のWidgetを より柔軟に よりバリエーション豊かに 使いまわすための仕組み https://docs.unrealengine.com/latest/JPN/ Engine/UMG/UserGuide/ WidgetTypeReference/NamedSlot/index.html #UE4Osaka

49.

Widgetの流用 作成したWidget BPは 他のWidget BPでも使いまわせる 新規で作成した UMG_Item UMG_ItemList #UE4Osaka

50.

Widgetを流用することで得られるメリット • 製作コストの削減と人的エラーの回避 • 修正コストの削減 UMG_Item #UE4Osaka UMG_ItemList

51.

なぜ修正コストが重要なのか? UIは開発フローの下流部分になりがち… くそぉ… さらに、仮のUIは出さないといけない… うぐぅ… しかも、その仮UIも頻繁に変更リクエストがくる… こんちきしょう… UIは炎上しがち! 少しでも早く鎮火するためにも、 製作コスト・修正コストは重要!!! #UE4Osaka

52.

問題 流用はしたいけど、微妙に変えたいケースがある • 個別に作るのは大変だけど、そのまま流用だと自由度が低すぎる… • BPで差し替える手もあるけど・・・ アイテムリスト 例 : 「ヘッダー + ???」 #UE4Osaka • • • • • • やくそう やくそう やくそう やくそう やくそう やくそう 今日はもう寝ますか? はい いいえ

53.

そこでNamed Slotの出番 流用先で上書きすることを前提としたWidget 流用先で上書きしたい内容 ( Widget )を子にする UMG_MenuBase #UE4Osaka UMG_Menu

54.

Named Slot 自作のWidgetを より柔軟に よりバリエーション豊かに 使いまわすための仕組み https://docs.unrealengine.com/latest/JPN/ Engine/UMG/UserGuide/ WidgetTypeReference/NamedSlot/index.html #UE4Osaka

55.

Expandable Area いわゆる、折りたたみUI #UE4Osaka

56.

配置直後 #UE4Osaka

57.

Native Widget Host 公式ドキュメントより 子スレート ウィジェットを 1 つ格納できるコンテナ ウィジェットです。 UMG ウィジェット内部にネイティブ ウィジェットを ネスティングすることだけが必要な場合に使用します。 #UE4Osaka

58.

Native Widget Host UMG担当の方曰く 「NativeWidgetHost はかなり 'PleaseHackHere'ウィジェットです」 用途 UMGには公開されていない UI ( Slate )を使いたい場合 独自拡張したUI ( Slate )をUMGで使いたい場合 #UE4Osaka

59.

花繁吹き [UMG]NativeWidgetHostを継承してカラーピッカーを作る Yuki Ogura (@unwitherer ) さん #UE4Osaka

60.

Input Key Selector 公式ドキュメントより 「単一キー または 修飾子を持つ単一キーを選択するためのウィジェットです。」 #UE4Osaka

61.

Input Key Selectorの使用例 キーコンフィグ #UE4Osaka

62.

Window Title Bar Area 公式ドキュメントより 「UI の領域を定義するためのパネルで、ユーザーはこのウィンドウを デスクトップ プラットフォームにドラッグすることができます。」 #UE4Osaka

63.

UE4.14 リリースノートより • 新機能:デスクトッププラットフォーム上でゲームウィンドウの枠線を 無制限にする(システム境界線やタイトルバーなし)ためのサポート が追加されました。 デフォルトでは無効です。 • 有効にするには、DefaultGame.iniの [/Script/EngineSettings.GeneralProjectSettings]に "UseBorderlessWindow = True"を追加する必要があります。 • これを使用するゲームは、ウィンドウの最小化/最大化/閉じるボタン と同様に、UIに「ウィンドウタイトルバーエリア」ウィジェットを追加する 責任があります。 #UE4Osaka

64.

#UE4Osaka

65.

UseBorderlessWindow = false #UE4Osaka UseBorderlessWindow = true

66.

UE4.14 リリースノートより • 新機能:デスクトッププラットフォーム上でゲームウィンドウの枠線を 無制限にする(システム境界線やタイトルバーなし)ためのサポート が追加されました。 デフォルトでは無効です。 • 有効にするには、DefaultGame.iniの [/Script/EngineSettings.GeneralProjectSettings]に "UseBorderlessWindow = True"を追加する必要があります。 • これを使用するゲームは、ウィンドウの最小化/最大化/閉じるボタン と同様に、UIに「ウィンドウタイトルバーエリア」ウィジェットを追加する 責任があります。 #UE4Osaka

67.

Panel系 レイアウト・子ウィジェットの配置調整用 • 開発効率が大きく向上させるすごいやつ! • • • • • • Canvas Panel Grid Panel Horizontal Box Overlay Safe Zone Scale Box #UE4Osaka • • • • • • Scroll Box Size Box Uniform Grid Panel Vertical Box Widget Switcher Warp Box

68.

Canvas Panel UMG作成時にデフォルトで入っているPanel • 子ウィジェットは アンカーを基準にして 手動で配置 • 「用途に応じて子ウィジェットを自動配置」 というのは苦手 アンカーについて #UE4Osaka

69.

Overlay Panel 子ウィジェットのPaddingとAlignment設定に応じて 子ウィジェットの配置を調整 #UE4Osaka

70.

Vertical / Horizontal Box 垂直 / 水平方向に子ウィジェットを自動配置するPanel #UE4Osaka

71.

WrapBox 子ウィジェットを左から右に並べて、 その幅を超えたウィジェットを次の行に配置するPanel • 幅の長さを変更可能 #UE4Osaka

72.

Grid Panel 垂直 / 水平方向に子ウィジェットを自動配置するPanel • 隙間なく敷き詰めていくタイプ #UE4Osaka

73.

Uniform Grid Panel 垂直 / 水平方向に子ウィジェットを自動配置するPanel • 個数に応じて間隔を調整するタイプ #UE4Osaka

74.

Grid Panel vs Uniform Grid Panel #UE4Osaka

75.

Scroll Box スクロールバー付きの 垂直(水平)方向のリスト • 仮想化は未サポート ( 表示範囲外でも存在するので注意 ) #UE4Osaka

76.

Spacer 自動配置された子ウィジェットの間隔の調整用 #UE4Osaka

77.

Spacer • Paddingによる調整は超大変なので、Spacerは神 • PanelのGet Child~ ノードに含まれてしまうので、Spacer君は少し残念 #UE4Osaka

78.

Scale Box サイズを変えた際に 子ウィジェットに対してスケーリング処理を行うPanel #UE4Osaka

79.

スケーリング方向を制限することも可能 Stretch Direction = DownOnly #UE4Osaka Stretch Direction = UpOnly

80.

Widget Switcher 子ウィジェットの内のひとつだけを表示するPanel • Active Widget Indexで指定されたWidgetだけが表示される • ブラウザのタブによるページ切り替えのようなUIを実装する際に有用 #UE4Osaka

81.

Safe Zone 公式ドキュメントより プラットフォームのセーフゾーン情報を引き出し、 パディングを追加します https://devs.ouya.tv/developers/docs/content-review-guidelines #UE4Osaka

82.

Background Blur 奥にある表示をぼかすウィジェット • UI同士の手前・奥判定は、Hierarchyの順番 と ZOrderの値を使用 (Epic的にはHierarchyによる調整を推奨) #UE4Osaka

83.

用意されている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 #UE4Osaka • 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.

お品書き • そもそもUMGってなに? • UMGってどんな機能があるの? • よく頂く質問とその回答 #UE4Osaka

85.

よく頂く質問① 処理が重い #UE4Osaka

86.

UMG最適化の基本方針 各ウィジェットの更新処理を • どれだけ省略できるか? • どれだけ複数フレームに分散できるか? #UE4Osaka

87.

プロファイリングした上で ボトルネックになっている箇所を 優先的に対処していきましょう! 参考: [CEDEC2017] UE4プロファイリングツール総おさらい(グラフィクス編) #UE4Osaka

88.

最適化のためのWidget • Invalidation Box • 子ウィジェットをキャッシュすることで、Slateのレンダリングを高速化 • Invalidation Box によってキャッシュされるウィジェットでは、 Prepassed、 Ticked、または Painted が行われません • Retainer Box • 子ウィジェットをレンダー ターゲットに描画し、その後 そのレンダー ターゲットを画面に表示することで、 UI の描画頻度を調整 • ウィジェットを描画した後にマテリアルをレンダー ターゲットに 適用できるという副次的なメリットもあり( ポストプロセス的な処理 ) #UE4Osaka

89.

UMG最適化の基本方針 各ウィジェットの更新処理を • どれだけ省略できるか? → Invalidation Box • どれだけ複数フレームに分散できるか? → Retainer Box #UE4Osaka

90.

Invalidation Box • 子ウィジェットをキャッシュすることで 不要な描画・更新処理をキャッシュ(スキップ) • 子ウィジェット毎にキャッシュするか否かを指定することも可能 • Is Volatileフラグ • Invalidation Boxの位置が変化する場合は 子オブジェクトとのRelative Transformsを保存 • 保存しない場合に比べて負荷が追加されるが 移動した際の処理負荷が大幅に軽減 #UE4Osaka

91.

Battle Breakersにおける高速化事例 Stat slateによる計測 • Invalidation panel使用前 • Processed : 573 • Invalidation panel使用後 • Processed : 231 • Cached:342 2倍以上の高速化を実現! #UE4Osaka

92.

Invalidation Panel用のデバッグ機能 • slate.InvalidationDebugging 1 • Green: キャッシュされたWidget • Blue : 子要素との 相対的な位置関係もキャッシュ • Dashed: キャッシュしないWidget • Red: invalidated widgets #UE4Osaka

93.

Invalidation Boxの注意点 キャッシュ中の子ウィジェットの形状が変化した場合、 キャッシュ処理が働かなくなります • キャッシュ処理のリクエストを行う必要があります BP : Invalidate Layout And Volatility C++ : SWidget::Invalidate • ウィジェットの頂点バッファに保存されない外観に 対する変更は例外として、キャッシュ処理が継続される • 例:マテリアルのパラメータ変更 #UE4Osaka

94.

ちょっと気になったので検証 TickでDelta Timeを出力する子ウィジェットで検証 • アニメーションによる形状変化 : NG • マテリアルによる形状変化 :OK #UE4Osaka

95.

Retainer Box 子ウィジェットの更新間隔を調整可能 • 処理を複数フレームに分散できる! #UE4Osaka

96.

Retainer Box TickでDelta Timeを出力する子ウィジェットで検証 Phase = 0 Phase Count = 1 #UE4Osaka Phase = 0 Phase Count = 2 Phase = 0 Phase Count = 10

97.

Retainer Boxはどんな時に使う…? 「本当は毎フレーム処理を走らせたいけど… 処理負荷的にそれは難しい…さてどうしよう… うーん…まあ、ここだったら… 数フレームスキップしても処理的にも演出的に問題ないかな…」 という時 (個人的な感想) #UE4Osaka

98.

Retainer Boxの注意点 ゲームの動作フレームレートが 処理間隔のベースになっているので注意 Phase = 0 Phase Count = 2 • 60fpsの場合 : 30fps動作 • 30fpsの場合 : 15fps動作 Phase = 0 Phase Count = 10 • 60fpsの場合 : 6 fps動作 • 30fpsの場合 : 3 fps動作 #UE4Osaka

99.

発生する可能性のある問題 例 : 1秒間隔でチェック処理 が走る仕様を Phase Count = 60 に 設定した Retainer Boxで実現した! 60fpsの場合は問題ないけど… もし仕様変更で30fpsのゲームになったら?低スペックな環境だったら? • この問題の場合はSetTimerノードで制御したほうが安心 #UE4Osaka

100.

Invalidation Boxと併用する際の注意点 Invalidation Boxによるキャッシュ処理は Retainer Boxには動作しない キャッシュ処理: 動作する キャッシュ処理: 動作しない • RetainerBoxの 設定が優先される #UE4Osaka

101.

その他の最適化テクニック Blueprintと共通のテクニック • Tickを使わず、イベントドリブンな設計に • 階層を複雑化させず、可能な限りシンプルに • 階層を横断する探索・更新コスト ・・・ #UE4Osaka

102.

その他の最適化テクニック UMGのBinding機能を使用しない • 特に、BP関数を含むBinding処理 • 理由:Binding処理は毎フレーム実行される為 #UE4Osaka

103.

例:プレイヤーの体力表示用UI イベントディスパッチャー機能で 更新処理を明示的に実行 プレイヤー側 #UE4Osaka UI側

104.

テキストの更新量・頻度に注意 ゲーム中初めて使用される文字は そのタイミングでFont Atlasに書き込まれます • 表示する文字列の多くが初めて使用する文字の場合 それなりに重い負荷が発生 対策 • 予め使用される文字がわかっている場合は 事前に使用して、 Font Atlasに書き込んでおく • 一気にテキストを更新するのではなく、複数フレームに分散 #UE4Osaka

105.

Widget ReflectorからFont Atlasを確認可能 #UE4Osaka

106.

大事なことなので… プロファイリングした上で ボトルネックになっている箇所を 優先的に対処していきましょう! 最悪なケース 無理に最適化して、あまり改善されず ただ作業効率落としただけ… #UE4Osaka

107.

よく頂く質問② 3DUIを作りたい #UE4Osaka

108.

3DUIの例 ( DeadSpaceシリーズ ) #UE4Osaka

109.

3DUIの例 (3Dモデルの表面にUIを貼る例) #UE4Osaka

110.

BPのWidgetコンポーネントを使う #UE4Osaka

111.

#UE4Osaka

112.

3DUIの形状を平面ではなく、シリンダーにすることも #UE4Osaka

113.

3DUIにおけるUMGの課題点 • 3DUIの形状が平面かシリンダーしか選べない • UIをテクスチャ化することで解決は可能ですが…スマートじゃない… • ポストプロセスの影響を受けてしまう • テキストがボケてしまうという問題 • VRの場合は、Stereo Layerで解決可能 • UMGエディタのみで作ることができない • UMGエディタのタイムラインを使うことが出来ない • Actor Sequenceを使えば…まだ実験段階だけど… #UE4Osaka

114.

まとめ UMG, HUD, Slateの違いについて説明 • HUD : UE3時代から続く古いUIシステム • Slate : エディタ拡張向け • UMG : インゲームUI用にSlateを拡張したもの #UE4Osaka

115.

まとめ 用意されているウィジェットの一部について説明 • テキストや画像のような基本的なものだけでなく、 ウィジェットのレイアウトを調整するためのPanel系や 特殊ケースのためのWidgetが用意されている • ウィジェットの流用を考慮した設計にすることで 作業・修正コストを削減する事が可能 #UE4Osaka

116.

まとめ よく聞かれる質問とその回答を紹介 • 最適化用の機能やテクニックは幾つかあるが 使用する際はそのメリット・デメリットを考慮する あと、プロファイリング! • Widgetコンポーネントを使った3DUI製作について #UE4Osaka

117.

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/ #UE4Osaka

118.

最後に UIの良さは ゲームのクオリティに直結します! 是非知見をシェアしあって、 より良いUIを作っていきましょう!!! #UE4Osaka

119.

UNREAL FEST EAST 2017 参加登録受付中! 公式サイト: https://unrealevent.eventcloudmix.com/ 日時: 2017/10/08 (日) 場所: パシフィコ横浜 会議センター 3F #UE4Osaka

120.

おわり #UE4Osaka