Chapter 56

🌁 Widget メモ

ポコ太郎
ポコ太郎
2022.01.20に更新

COMMON

🧱 Border

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

🧱 Button

背景・子オブジェクトの色を制御
BPイベント
流用先で子ウィジェットを上書きできるので柔軟性がある

  • Check Box
  • Image

🧱 Named Slot

自作のウィジェットを使い回す仕組み

EDITOR

  • 🧱 Details View
  • 🧱 Single Property View

INPUT

  • 🧱 ComboBox (String)
  • 🧱 Editable Text
  • 🧱 Editable Text (Multi-Line)
  • 🧱 Spin Box
  • 🧱 Text Box
  • 🧱 Text Box (Multi-Line)

LISTS

  • 🧱 List View
  • 🧱 Tile View
  • 🧱 Tree View

MISC

🧱 Expandable Area

折り畳みできるようにする

OPTIMIZATION

🧱 Invalidation Box

  • 子ウィジェットをキャッシュして Slate のレンダリングを高速化する
    • 不要な描画・更新処理をスキップ
    • Prepassed, Ticked または Painted が行われない
    • 子ウィジェット毎にキャッシュするかどうか指定できる(Is Volatile フラグ)

🧱 Retainer Box

  • 子ウィジェットをレンダーターゲットに描画した後にそのレンダーターゲットを画面に表示することで UI の描画頻度を調整できる
    • 処理を複数フレームに分散できる
    • 動作フレームレートが処理間隔のベースになっているので注意が必要
  • ウィジェットを描画した後にマテリアルをレンダーターゲットに適用できるという副次的なメリットがある(ポストプロセス的な処理)

PANEL

🧱 Canvas Panel

UMG 作成時にデフォルトで入っている
子ウィジェットはアンカーを基準に手動で配置
 Padding と Alignment 設定で調整
用途に応じて自動で子ウィジェットを配置するのは苦手

🧱 Grid Panel

水平・垂直に子ウィジェットを自動配置する
隙間なく敷き詰める

🧱 Horizontal Box / 🧱 Vertical Box

水平・垂直に子ウィジェットを自動配置する

  • Overlay

🧱 Safe Zone

プラットフォームのセーフゾーン情報を取得して Padding を追加する

🧱 Scale Box

サイズを変えた際に子ウィジェットに対してスケーリングを行う
スケーリングする方向を制限できる

🧱 Scroll Box

垂直(水平)のスクロールバー付きのリスト
表示範囲外でも存在するので注意が必要

  • Size Box

🧱 Uniform Grid Panel

水平・垂直に子ウィジェットを自動配置する
個数に応じて間隔を自動調整する

🧱 Widget Swicher

子ウィジェットから1つだけ表示する
 Active Widget Index で指定
 ブラウザのタブによるページ切り替えのような UI を実装するのに便利

🧱 Wrap Box

子ウィジェットを左から右に並べていき、端で自動で折り返して配置する

PRIMITIVE

  • 🧱 Circular Throbber
  • 🧱 Menu Anchor

🧱 Native Widget Host

小スレートウィジェットを1つ格納できるコンテナ
UMG に公開されていない UI(Slate) や独自拡張した UI(Slate) を使える

🧱 Spacer

自動配置された子ウィジェットの間隔の調整用
Padding よりお手軽
Panel の Get Child ~~ ノードに含まれてしまう

  • 🧱 Throbber

SPECIAL EFFECTS

🧱 Background Blur

奥にある表示をぼかす
 UI 同士の手前・奥判定は「Hierarchy順」と「ZOrderの値順」
 Epic は Hierarchy による調整を推奨

SYNTH

  • 🧱 Synth 2DSlider
  • 🧱 Synth Knob

USER CREATED

自身で作成したウィジェット(Editor Utility Widget 含む)を配置できる。

ADVANCED

  • 🧱 Dynamic Entry Box

🧱 Input Key Selector

単一キーまたは修飾子を持つ単一キーを選択できる
キーコンフィグなどに利用

🧱 Window Title Bar Area

UI の領域を定義するためのパネル

3D UI

BP の Widget Component を使えば実現できる。