VerticalBoxは、子ウィジェットを垂直（縦方向）に並べるためのコンテナウィジェットです。

ボタンやテキストを縦に配置したい場合に使用します。

役割と目的

・UI要素を縦に整列させる

・子ウィジェットの配置やサイズを簡単に管理

・メニューやリストなど、縦方向のレイアウトを作成

例）ゲームのオプションメニューやスコア一覧などに適しています。

主なプロパティ

プロパティ	説明
Slot	子ウィジェットごとに設定可能な配置・サイズ情報
Padding	子ウィジェットの内側余白
Alignment	水平方向の配置（左寄せ・中央・左寄せ）
Size	ウィジェットのサイズ（自動・固定・割合）

他のパネルとの比較

パネル	方向	使いどころ
Vertical Box	縦	リスト・メニュー
Horizontal Box	横	ボタンの並びなど
Grid Panel	縦横	表形式のレイアウト
Uniform Grid Panel	均等なグリッド	アイテム一覧

Slot関連設定

設定名	説明
Size	サイズのタイプ（Auto/Fill）
Padding	子ウィジェットの内側の余白
Horizontal Alignment	水平方向の整列（Left/Center/Right/Fill）
Vertical Alignment	垂直方向の整列（Top/Center/Bottom）

サイズの自動調整

サイズを合わせたい際には「Size to Content」にチェックを入れると自動でサイズを調整してくれます。

手順
詳細タブ→スロット→Size to Content→☑

Layout（レイアウト関連）

Vertical Box全体のレイアウト設定を調整できます。

設定名	説明
Padding	Vertical Boxの外側の余白
Alignment	配置の基準点（Left/Center/Right）
Visibillity	ウィジェットの表示状態（Visible/Collapsed/Hidden）
Clipping	描画範囲の設定

💡VisibilityをCollapsedにすると消えたように見える（スペースを取らない）
💡Hiddenは見えないだけで、スペースは保持される

Appearance（外観構造）

設定名	説明
Is Enabled	無効化（Falseにするとクリック不可）
Render Opacity	透明化（0.0～1.0）
Render Transform	位置・サイズ・回転の変更
Render Scale	拡大・縮小率

💡Render Opacityを0.5にすると、半透明のUIになる

Behavior（動作関連）

設定名	説明
Tool Tip	マウスオーバー時に表示するツールチップ
Is Enable	ウィジェットの有効/無効
Cursor	マウスカーソルの種類

💡CursorをHandにするとマウスオーバー時に手のアイコンになる

Accessibility（アクセシビリティ関連）

設定名	説明
Accessible	スクリーンリーダー用の設定
Accessible Text	説明文のカスタマイズ

💡UIを音声で読み上げる設定も可能

まとめ

・Slot設定で個々のウィジェットの配置を調整

・Layout設定でVertical Box全体のレイアウトを調整

・Appearance設定で透明度やサイズを変更可能

・Behavior設定でツールチップやカーソルの挙動を設定

💡実際のゲームUI制作では、「Size」「Padding」「Alignment」を良く使うようです