ノード解説「VBoxContainer」

はじめに
VBoxContainerとは？
このノードを使うべき場面
主なプロパティと機能
もっと使いこなす：カスタマイズできるパラメータ
まとめ
シリーズ：Godot 4 ノード解説

はじめに

ゲーム画面にボタンやテキストを配置していると「複数のUI要素を上から下へ、ピッタリ並べたい」という場面がよくあります。VBoxContainerは、子要素を自動的に上下方向に整列させてくれるコンテナノードです。この記事では、VBoxContainerの基本的な使い方と活用方法を解説します。

VBoxContainerとは？

VBoxContainer（Vertical Box Container）は、子要素を垂直方向（上から下へ）に自動配置するコンテナノードです。UI要素を手作業で位置調整する手間を大幅に削減できます。

VBoxContainerは「上から下への自動整列専門の店」。入ってきた要素を順番に上から下へきれいに並べてくれます。

VBoxContainerは BoxContainer を継承しており、その兄弟に HBoxContainer（水平配置版）があります。どちらもレイアウト自動化の強い味方です。

このノードを使うべき場面

ポーズメニュー：「再開」「設定」「タイトルに戻る」といったボタンを上下に並べたいとき
設定画面：複数の設定項目（スライダー、チェックボックスなど）を縦方向に並べるとき
パネル内のテキスト表示：複数のLabelやRichTextLabelを上下に積み重ねるとき
リスト表示：インベントリなど、アイテム一覧を縦スクロール可能な形で表示するとき
ダイアログボックス：メッセージを表示して、その下にボタンを配置するとき

使わない方がいい場面：

UI要素を格子状（行と列）に配置したい → GridContainer の方が適切
要素を左右方向に並べたい → HBoxContainer を使う

主なプロパティと機能

プロパティ/メソッド	説明	デフォルト値
`alignment`	子要素の垂直寄せ（開始・中央・終了）	`ALIGNMENT_BEGIN`
`separation`	子要素間の間隔（ピクセル）	`0`
`size_flags_vertical`	VBoxContainer自体の拡大方法（EXPAND/FILL など）	`SIZE_SHRINK_CENTER`
`add_child(node)`	子要素を追加する（GDScriptから動的に追加可能）	—
`get_child(index)`	指定インデックスの子要素を取得	—

使用例：VBoxContainerにボタンを3つ追加

extends Control

func _ready():
    var vbox = VBoxContainer.new()
    add_child(vbox)
    vbox.separation = 8  # ボタン間に8ピクセルの隙間

    var button1 = Button.new()
    button1.text = "再開"
    vbox.add_child(button1)

    var button2 = Button.new()
    button2.text = "設定"
    vbox.add_child(button2)

    var button3 = Button.new()
    button3.text = "タイトルに戻る"
    vbox.add_child(button3)

もっと使いこなす：カスタマイズできるパラメータ

まずは基本を動かしてみてから、余裕が出たら試してみてください。

separation：子要素間の隙間を調整する

separation プロパティを変更すると、ボタンやテキストの間隔を細かく調整できます。値を大きくするほど隙間が広がります。

vbox.separation = 16  # ボタン間を16ピクセル開ける

alignment：子要素の垂直位置を制御する

alignment を変更することで、VBoxContainer内での要素の並ぶ位置を変えられます。

値	説明
`ALIGNMENT_BEGIN`	上寄せ（デフォルト）
`ALIGNMENT_CENTER`	中央揃え
`ALIGNMENT_END`	下寄せ

vbox.alignment = BoxContainer.ALIGNMENT_CENTER  # 要素を中央に揃える

size_flags_vertical：VBoxContainer自体の拡大方法を設定する

画面全体に広がるVBoxContainerを作りたいときは、size_flags_vertical を SIZE_EXPAND_FILL に設定します。そうすると、VBoxContainer内の子要素が利用可能な空間を埋めるように広がります。

vbox.size_flags_vertical = Control.SIZE_EXPAND_FILL
vbox.size_flags_horizontal = Control.SIZE_EXPAND_FILL

各子要素の size_flags を個別に設定する

VBoxContainer内の特定の要素だけを大きくしたい場合、その要素の size_flags_vertical を SIZE_EXPAND_FILL に設定します。

var text_label = RichTextLabel.new()
text_label.size_flags_vertical = Control.SIZE_EXPAND_FILL  # このLabelだけ高さを伸ばす
vbox.add_child(text_label)

var button = Button.new()
button.text = "閉じる"
vbox.add_child(button)  # ボタンは内容に合わせたサイズ