ノード解説「HBoxContainer」

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

はじめに

ゲームの UI を作っていて、複数のボタンやテキストを一列に並べたいと思ったことはありませんか？そんなときに活躍するのが HBoxContainer です。この記事では、HBoxContainer の基本から実践的な使い方まで、わかりやすく説明します。

HBoxContainer とは？

HBoxContainer は、子ノードを 左から右へ（水平方向） 自動的に並べるコンテナノードです。画面のサイズが変わっても、子ノードは常に整列されたまま自動でレイアウトが調整されます。

複数の荷物をひとつの箱に左から詰めていくイメージです。箱の幅が広がれば、自動的に余白が増えますし、狭まれば縮みます。

HBoxContainer は BoxContainer を継承しており、Godot の UI システムの中核を担うノードです。

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

UI ボタン配置： ポーズメニューの「決定」「キャンセル」などのボタンを横並びにしたい
ステータス表示： HP、MP、経験値などの複数の値を左から並べて表示したい
インベントリUI： アイテムを行単位で表示する際の1行を作る（複数行は VBoxContainer と組み合わせ）
ツールバー： ゲーム画面上部のツールアイコンを一列に配置したい
スコアボード： プレイヤー名とスコアを並べて表示したい

使わない場面： 子ノードを縦に並べたい場合は VBoxContainer、グリッド状に配置したい場合は GridContainer を使いましょう。

主なプロパティと機能

プロパティ / メソッド	説明
`separation`	子ノード間のスペース（ピクセル）。デフォルト 0。
`alignment`	子ノードの揃え方（BEGIN、CENTER、END）。
`add_child(node)`	子ノードを追加。自動でレイアウトに反映される。
`size_flags_horizontal`	子ノードの横幅の扱い（FILL、SHRINK_CENTER など）。

基本的な使用例です：

extends Control

func _ready():
    # HBoxContainer を作成
    var hbox = HBoxContainer.new()
    hbox.separation = 10  # 子ノード間のスペースを 10 ピクセルに
    add_child(hbox)

    # ボタンを 3 つ追加
    var button1 = Button.new()
    button1.text = "決定"
    hbox.add_child(button1)

    var button2 = Button.new()
    button2.text = "キャンセル"
    hbox.add_child(button2)

    var button3 = Button.new()
    button3.text = "リセット"
    hbox.add_child(button3)

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

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

子ノード間の間隔を調整する（separation）

separation プロパティで子ノード間のスペースを変えると、UI の見た目が大きく変わります。

値	効果
`separation = 0`	ボタンが隙間なく密着（タイル状の見た目）
`separation = 10`	標準的な UI 配置。呼吸感のある見た目になる
`separation = 30`	要素が大きく離れる。大型ツールバーに向く

例：

hbox.separation = 15  # 15 ピクセル間隔を指定

子ノードの揃え方を変える（alignment）

デフォルトでは左寄せですが、alignment で変更できます：

BoxContainer.ALIGNMENT_BEGIN：左寄せ（デフォルト）
BoxContainer.ALIGNMENT_CENTER：中央揃え
BoxContainer.ALIGNMENT_END：右寄せ

hbox.alignment = BoxContainer.ALIGNMENT_CENTER  # 中央揃え

子ノードに異なる幅を持たせる

デフォルトでは全ノードが同じ幅になりますが、個別に size_flags_horizontal を設定することで、特定のノードだけ広くできます。

# あるボタンだけ大きくする
button1.size_flags_horizontal = Control.SIZE_FILL
button1.custom_minimum_size = Vector2(200, 40)

VBoxContainer と組み合わせてグリッドを作る

HBoxContainer を複数 VBoxContainer に追加することで、表のようなレイアウトが実現できます：

var vbox = VBoxContainer.new()
add_child(vbox)

for row in range(3):
    var hbox = HBoxContainer.new()
    hbox.separation = 5
    vbox.add_child(hbox)

    for col in range(4):
        var button = Button.new()
        button.text = str(row * 4 + col)
        hbox.add_child(button)

動的にノードを追加・削除する

UI はゲーム中に変わることが多いです。HBoxContainer は add_child() や remove_child() で動的に対応できます：

# 新しいアイテムをインベントリに追加
var new_item = Button.new()
new_item.text = "新しいアイテム"
hbox.add_child(new_item)

# 不要になったら削除
hbox.remove_child(new_item)
new_item.queue_free()