猫でも分かるUMG

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

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

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

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

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

＃UE4Osaka

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

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

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

＃UE4Osaka

HUDに対しての 個人的な意見 UMGでいいのでは！？ ＃UE4Osaka

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

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

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

HUDの説明 おわり ＃UE4Osaka

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

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

＃UE4Osaka

Slateの例 ＃UE4Osaka

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

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

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

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

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

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

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

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

乞うご期待！！！ とりあえず、UE4.18では入りません ＃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 ＃UE4Osaka

Slateの説明 おわり ＃UE4Osaka

ようやくUMGの話へ ＃UE4Osaka

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

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

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

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

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

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

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

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

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

もう少し掘り下げ ＃UE4Osaka

どんなWidgetが用意されているの？ ＃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 ＃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対応のリファレンス

多すぎるので 個人的に紹介したいWidgetを紹介！ （よく使うもの & 公式ドキュメントの説明がよくわからないもの） ＃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 ＃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対応のリファレンス

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

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

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

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

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

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

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

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

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

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

配置直後 ＃UE4Osaka

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

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

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

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

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

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

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

＃UE4Osaka

UseBorderlessWindow = false ＃UE4Osaka UseBorderlessWindow = true

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

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

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

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

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

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

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

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

Grid Panel vs Uniform Grid Panel ＃UE4Osaka

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

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

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

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

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

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

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

Background Blur 奥にある表示をぼかすウィジェット • UI同士の手前・奥判定は、Hierarchyの順番 と ZOrderの値を使用 (Epic的にはHierarchyによる調整を推奨) ＃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 ＃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対応のリファレンス

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

３DUIの例 ( DeadSpaceシリーズ ) ＃UE4Osaka

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

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

＃UE4Osaka

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

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

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

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

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

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

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

おわり ＃UE4Osaka