VBoxContainerとHBoxContainerの使い分けは？

VBoxContainerは子ノードを縦方向に、HBoxContainerは横方向に整列させます。メニューリストにはVBox、ツールバーにはHBoxが適しています。

GodotでレスポンシブUIを作るにはどうしますか？

レイアウトコンテナ（VBox、HBox、Gridなど）を使用し、子ノードのサイズフラグでExpandやFillを設定します。アンカーをFull Rectに設定すると画面全体に対応します。

Controlノードのアンカーとは何ですか？

ノードの四隅が親ノードのどの位置に固定されるかを定義するプロパティです。画面サイズが変わった際に、UI要素が自動的に再配置・リサイズされます。

MarginContainerは何に使いますか？

子ノードの周囲に均一な余白（マージン）を追加するコンテナです。画面端からの余白を確保しつつ、内部にVBoxContainerなどを配置するパターンが一般的です。

【Godot】Controlノードの基礎とレイアウトコンテナ - Godot EngineでレスポンシブUIを構築する基本

なぜUI構築の基本を学ぶ必要があるのか

ゲーム開発において、ユーザーインターフェース（UI）はプレイヤーとゲーム世界をつなぐ重要な接点です。しかし、画面サイズやアスペクト比が異なる多様なデバイスに対応したUIを構築することは、しばしば開発者を悩ませる課題となります。Godot Engineでは、このUI構築の課題を解決するために Controlノード と レイアウトコンテナ という強力なツールセットを提供しています。これらを理解し、使いこなすことは、あらゆる環境で一貫したユーザー体験を提供するレスポンシブなUIを効率的に作成するための鍵となります。

本記事では、Godot EngineにおけるUIの基礎であるControlノードの役割から、複雑なレイアウトを自動で調整してくれるレイアウトコンテナの具体的な使い方までを、初心者から中級者向けに分かりやすく解説します。

1. Controlノードとは何か

Godot Engineのノードツリーにおいて、UI要素の基盤となるのが Controlノード です。Controlノードは、CanvasItemを継承しており、画面上に描画される要素であるという点ではNode2Dと同じですが、主に以下の点で異なります。

アンカーとマージン: Controlノードは、親ノードに対する相対的な位置とサイズを定義するための アンカー（Anchors）と マージン（Margins）というプロパティを持ちます。これにより、画面サイズが変更された際に、UI要素が自動的に再配置・リサイズされる仕組みを提供します。
入力処理: ボタンのクリックやスライダーの操作など、UI特有の入力イベントを処理するためのシグナルとメソッドを備えています。
テーマとスタイル: UI要素の見た目（フォント、色、枠線など）を一元管理するための テーマ システムに対応しています。

Controlノードは、ボタン（Button）、ラベル（Label）、テキスト入力欄（LineEdit）など、すべてのUI関連ノードの親クラスであり、UI構築の「部品」としての役割を果たします。

Controlノードの主要プロパティ

Controlノードのレイアウトを決定する上で特に重要なプロパティは、アンカー と サイズフラグ（Size Flags）です。

プロパティ	役割	主な設定値
アンカー (Anchors)	ノードの四隅が親ノードのどの位置に固定されるかを定義します。	`Top Left` (デフォルト), `Full Rect` (全体に広がる), `Center` など
マージン (Margins)	アンカーで定義された位置からのオフセット（ピクセル単位）を定義します。	`Left`, `Top`, `Right`, `Bottom`
サイズフラグ (Size Flags)	親のレイアウトコンテナ内でノードがどのように振る舞うかを定義します。	`Fill` (利用可能なスペースを埋める), `Expand` (可能な限り拡張する)

2. レイアウトコンテナの力

Controlノード単体でも基本的なUIは構築できますが、画面サイズが変わるたびに手動で位置を調整するのは非効率的です。ここで登場するのが レイアウトコンテナ（Containerノード）です。

レイアウトコンテナは、その子であるControlノードのサイズと位置を自動的に管理・調整する特殊なControlノードです。これにより、開発者は個々のUI要素の正確な座標を気にすることなく、要素間の関係性や配置のルールに集中できます。

主要なレイアウトコンテナ

Godot Engineには、用途に応じた様々なレイアウトコンテナが用意されています。

コンテナノード	機能	ユースケース
HBoxContainer	子ノードを水平（横）方向に整列させます。	ツールバー、横並びのボタン群
VBoxContainer	子ノードを垂直（縦）方向に整列させます。	メインメニュー、設定リスト
GridContainer	子ノードを指定した列数でグリッド状に配置します。	インベントリ画面、タイル状のメニュー
CenterContainer	子ノードをコンテナの中央に配置します。	タイトルロゴ、画面中央のポップアップ
MarginContainer	子ノードの周囲に均一な余白（マージン）を追加します。	UI要素のグループ化と間隔調整

コンテナのネスト（入れ子）パターン

実際のUI設計では、複数のコンテナを組み合わせて使用するのが一般的です。よく使われるパターンをいくつか紹介します。

パターン1: MarginContainer + VBoxContainer 画面端からの余白を確保しつつ、縦並びのUIを作成する基本パターンです。

MarginContainer (画面端から20pxの余白)
  └─ VBoxContainer
       ├─ Label (タイトル)
       ├─ Button (開始)
       └─ Button (終了)

パターン2: VBoxContainer + HBoxContainer 縦に並んだ項目の中に、横並びの要素を配置するパターンです。

VBoxContainer
  ├─ Label (設定)
  ├─ HBoxContainer
  │    ├─ Label (音量)
  │    └─ HSlider
  └─ HBoxContainer
       ├─ Button (キャンセル)
       └─ Button (OK)

パターン3: CenterContainer + コンテンツ ポップアップやダイアログを画面中央に配置する際に使用します。

CenterContainer (Full Rect)
  └─ PanelContainer
       └─ MarginContainer
            └─ VBoxContainer (ダイアログ内容)

3. 実践例: メインメニューの構築

レイアウトコンテナを活用して、縦に並んだボタンを持つシンプルなメインメニューを構築する手順とコード例を見てみましょう。

シーンの構築

ルートノード: Controlノードをシーンのルートとして追加し、名前をMainMenuとします。
コンテナの追加: MainMenuの子としてVBoxContainerを追加します。
コンテナの配置: VBoxContainerを選択し、インスペクタの「レイアウト」メニューから 「Full Rect」 プリセットを選択します。これにより、コンテナが画面全体に広がり、レスポンシブの基盤ができます。
ボタンの追加: VBoxContainerの子として、Buttonノードを3つ追加し、それぞれ「ゲーム開始」「設定」「終了」とテキストを設定します。

この状態でシーンを実行すると、3つのボタンが画面全体に広がるVBoxContainer内で、縦方向に均等に配置されていることが確認できます。

GDScriptによるボタンの機能実装

次に、ボタンが押されたときの処理をGDScriptで実装します。

# MainMenu.gd
extends Control

# ボタンノードへの参照をエディタで設定
@onready var start_button = $VBoxContainer/ButtonStart
@onready var settings_button = $VBoxContainer/ButtonSettings
@onready var quit_button = $VBoxContainer/ButtonQuit

func _ready():
    # 各ボタンのpressedシグナルに接続
    start_button.pressed.connect(_on_start_button_pressed)
    settings_button.pressed.connect(_on_settings_button_pressed)
    quit_button.pressed.connect(_on_quit_button_pressed)

func _on_start_button_pressed():
    # ゲーム開始処理（例: 別のシーンに切り替え）
    print("ゲーム開始！")
    # get_tree().change_scene_to_file("res://game_scene.tscn")

func _on_settings_button_pressed():
    # 設定画面表示処理
    print("設定画面を開く")

func _on_quit_button_pressed():
    # ゲーム終了処理
    print("ゲームを終了します")
    get_tree().quit() # アプリケーションを終了

このコードでは、@onreadyでノードへの参照を取得し、_ready関数内でpressedシグナルにカスタム関数を接続しています。これにより、UIの見た目と機能が分離され、管理しやすいコード構造となります。

4. より高度なレイアウト調整: Size Flagsの活用

レイアウトコンテナ内で子ノードのサイズを細かく制御するために、サイズフラグ が非常に重要になります。サイズフラグは、水平（Horizontal）と垂直（Vertical）の2つの軸で設定できます。

例えば、VBoxContainer内で特定のボタンだけを他のボタンよりも大きく表示したい場合を考えます。

Fill: ノードが利用可能なスペースを埋めるように拡張されます。
Expand: ノードがコンテナの残りのスペースを均等に分割して占有します。

もし3つのボタン全てにExpandフラグを設定すると、3つのボタンは高さを均等に分け合います。特定のボタン（例: ButtonStart）だけを2倍の高さにしたい場合は、そのボタンの垂直サイズフラグの隣にある**「ストレッチ比率」**（Stretch Ratio）を2に設定し、他のボタンを1に設定します。

このストレッチ比率の調整により、コンテナ内のスペースを柔軟に分配し、デザインの意図に沿ったUIレイアウトを実現できます。

まとめ

Godot EngineにおけるUI構築は、Controlノード を基本とし、レイアウトコンテナ によってその配置を自動化・レスポンシブ化することが基本戦略となります。

Controlノード: UI要素の基盤であり、アンカーとマージンで相対的な位置を定義します。
レイアウトコンテナ: 子ノードの配置を自動で管理し、様々な画面サイズに対応するレスポンシブUIを実現します。
サイズフラグとストレッチ比率: コンテナ内でのノードの振る舞いとスペースの分配を細かく制御します。

これらの概念を理解し、実践的なコード例を通じて手を動かすことで、あなたのゲームはよりプロフェッショナルで使いやすいUIを持つことができるでしょう。Godot Engineの強力なUIシステムを活用し、プレイヤーにとって快適なゲーム体験を提供してください。