猫でも分かるUMG

＃UE4Osaka
猫でも分かる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
ゲーム中に表示されるUIの “殆ど” は
UMGでできている！

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

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

＃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のツライ点
黒魔術すぎてツライ
ビルドしないと表示が確認できなくてツライ
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による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
• 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対応のリファレンス

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

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

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

＃UE4Osaka
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 UMG_ItemList

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

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

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

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

＃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
UseBorderlessWindow = false UseBorderlessWindow = true

＃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
レイアウト・子ウィジェットの配置調整用
• 開発効率が大きく向上させるすごいやつ！

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

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

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

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

＃UE4Osaka
Grid Panel
• 隙間なく敷き詰めていくタイプ

＃UE4Osaka
Uniform Grid 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 Stretch Direction = UpOnly

＃UE4Osaka
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
よく頂く質問①
処理が重い

＃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
Phase = 0
Phase Count = 2
Phase = 0
Phase Count = 10

＃UE4Osaka
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
プレイヤー側 UI側
イベントディスパッチャー機能で
更新処理を明示的に実行

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

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

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

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

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

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

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

＃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

猫でも分かるUMG

More Related Content

What's hot

Viewers also liked

Similar to 猫でも分かるUMG

More from エピック・ゲームズ・ジャパン Epic Games Japan

猫でも分かるUMG

Editor's Notes