Chapter 56

🌁 Widget メモ

ポコ太郎
ポコ太郎
2022.01.20に更新
このチャプターの目次
  1. COMMON
    1. 🧱 Border
    2. 🧱 Button
    3. 🧱 Named Slot
  2. EDITOR
  3. INPUT
  4. LISTS
  5. MISC
    1. 🧱 Expandable Area
  6. OPTIMIZATION
    1. 🧱 Invalidation Box
    2. 🧱 Retainer Box
  7. PANEL
    1. 🧱 Canvas Panel
    2. 🧱 Grid Panel
    3. 🧱 Horizontal Box / 🧱 Vertical Box
    4. 🧱 Safe Zone
    5. 🧱 Scale Box
    6. 🧱 Scroll Box
    7. 🧱 Uniform Grid Panel
    8. 🧱 Widget Swicher
    9. 🧱 Wrap Box
  8. PRIMITIVE
    1. 🧱 Native Widget Host
    2. 🧱 Spacer
  9. SPECIAL EFFECTS
    1. 🧱 Background Blur
  10. SYNTH
  11. USER CREATED
  12. ADVANCED
    1. 🧱 Input Key Selector
    2. 🧱 Window Title Bar Area
  13. 3D UI

COMMON

🧱 Border

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

🧱 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

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

🧱 Wrap Box

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

PRIMITIVE

  • 🧱 Circular Throbber
  • 🧱 Menu Anchor

🧱 Native Widget Host

小スレートウィジェットを１つ格納できるコンテナ
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 を使えば実現できる。