Godot Engineで2Dゲームを制作するための備忘録です。
この記事はGeminiを活用して作成しました。
1. はじめに
ゲームのメニュー画面や設定画面を作るときに ボタンを1つずつ手動で等間隔に並べるのは非常に大変です。また 後からボタンを増やした場合は再度位置の再調整が必要になってしまいます
そんな問題を解決してくれるのが HBoxContainer（水平コンテナ）と VBoxContainer（垂直コンテナ）です。複数のボタンやテキストを「縦」または「横」に自動で綺麗に並べてくれる超便利なノードです
このノードの子ノードに設定したボタンやラベルは ノードのサイズに合わせて自動的に等間隔・綺麗に整列されます
2つのノードの違い
-
HBoxContainer (Horizontal)
- 子ノードを**横一列（水平方向）**に並べます（例：ゲーム画面下の「戻る」「決定」ボタンの並びなど）
-
VBoxContainer (Vertical)
- 子ノードを**縦一列（垂直方向）**に並べます（例：タイトル画面の「はじめから」「つづきから」「設定」の並びなど）
2. 代表的なプロパティ（Theme Overridesでの設定）
コンテナノード自体にはあまり多くのプロパティはありませんが インスペクターの「Theme Overrides」内にある以下の項目で並び方を調整できます
| プロパティ名（Theme Overrides） | 説明 |
|---|---|
| Constants -> Separation | 整列させる子ノード同士の「すき間（間隔）」をピクセル単位で指定します |
子ノード側（ButtonやLabelなど）でよく設定する重要プロパティ
コンテナの中に配置された子ノード側（インスペクターの「Container Sizing」）で 全体の広がり方を制御します
| プロパティ名（Container Sizing） | 説明 |
|---|---|
| Horizontal / Vertical -> Fill | コンテナの隙間を埋めるように 子ノードのサイズを自動で広げます（デフォルトでON） |
| Horizontal / Vertical -> Expand | 他のノードと均等に コンテナ内の余白スペースを奪い合って引き延ばします |
3. 使い方（タイトル画面のメニューを縦に並べる実装例）
よく使う VBoxContainer を使って タイトル画面の縦並びメニューを作る基本手順です
🛠️ 設定の全体フロー
-
Step 1: シーンに
VBoxContainerノードを追加する -
Step 2: 子ノードとして
Buttonを複数追加する - Step 3: インスペクターで全体のサイズやすき間（Separation）を調整する
📌 Step 1: ノードの追加
- メインとなるUIシーンのツリーを選択します
-
+ボタンを押しVBoxContainerを検索して追加します - 画面上に細長い枠が表示されます
📌 Step 2: ボタンの追加（自動整列の確認）
- 追加した
VBoxContainerを選択した状態で さらに+ボタンを押してButtonノードを3つ追加します - 各ボタンのテキスト（Textプロパティ）に「はじめから」「設定」「終了」などと入力します
- この時点で ボタンの位置を手動で触らなくても自動で綺麗な縦並びになっていることが確認できます
📌 Step 3: 間隔（Separation）の調整
-
VBoxContainerノードを選択します - インスペクターで
Theme Overrides->Constantsを開きます -
Separationにチェックを入れ 数値を20などに増やします - ボタンとボタンの間の隙間が広がり より見やすいメニュー画面になります
[ボタンが自動で綺麗に縦に並んでいる画面のスクショをここに挿入]
4. 応用：HBox と VBox を組み合わせる
これらは組み合わせて使うことで さらに真価を発揮します
たとえば「ショップ画面」を作る場合 以下のような階層構造にすることで 複雑なレイアウトも自動で維持されます
📦 VBoxContainer (画面全体の縦並び)
┣ 📄 Label (「ショップメニュー」というタイトル)
┗ 📦 HBoxContainer (アイテムを横に並べる枠)
┣ 📦 VBoxContainer (アイテム1の枠)
┃ ┣ 🖼️ TextureRect (アイテム画像)
┃ ┗ 🔘 Button (「100Gで購入」ボタン)
┗ 📦 VBoxContainer (アイテム2の枠)
┣ 🖼️ TextureRect (アイテム画像)
┗ 🔘 Button (「250Gで購入」ボタン)