Menu

© 2025 ういやまラボ

BLOGTOOLSPRODUCTNOTES
    リストに戻る
    JAEN
    日本語English

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

    作成: 2025-12-08最終更新: 2025-12-16

    Godot EngineのControlノードとレイアウトコンテナを使って、様々な画面サイズに対応するレスポンシブなUIを構築する方法を解説します。

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

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

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

    1. Controlノードとは何か

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

    1. アンカーとオフセット: Controlノードは、親ノードに対する相対的な位置とサイズを定義するための アンカー（Anchors）と オフセット（Offsets）というプロパティを持ちます。
    2. 入力処理: ボタンのクリックやスライダーの操作など、UI特有の入力イベントを処理するためのシグナルとメソッドを備えています。
    3. テーマとスタイル: UI要素の見た目を一元管理するための テーマ システムに対応しています。

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

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

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

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

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

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

    コンテナノード機能ユースケース
    VBoxContainer子ノードを垂直（縦）方向に上から下へ整列させます。メインメニュー、設定項目リスト、縦長のダイアログ
    HBoxContainer子ノードを水平（横）方向に左から右へ整列させます。ツールバー、横並びの確認ボタン（OK/キャンセル）
    GridContainer子ノードを指定した列数でグリッド（格子）状に配置します。インベントリ画面、スキルツリー、レベル選択画面
    MarginContainer子ノードの周囲に**均一な余白（マージン）**を追加します。画面全体やUIセクションの外周に安全な余白を確保する
    CenterContainer子ノードを自身の矩形の中央に配置します。タイトルロゴ、ローディングアイコン、ポップアップウィンドウ
    PanelContainerStyleBoxに基づいたパネル背景を描画し、その内側に子を配置します。UIウィンドウの背景、情報表示エリアの区切り
    ScrollContainer子ノードが自身のサイズを超えた場合にスクロールバーを表示します。長文のテキスト表示、アイテム数が可変のリスト

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

    実際のUI設計では、複数のコンテナを組み合わせて使用するのが一般的です。

    # 典型的な設定画面の構造例
MarginContainer (画面全体の余白を確保)
  └─ VBoxContainer (各設定項目を縦に並べる)
       ├─ Label (タイトル: 「グラフィック設定」)
       ├─ HBoxContainer (解像度設定を横に並べる)
       │    ├─ Label (項目名: 「解像度」)
       │    └─ OptionButton (解像度選択ドロップダウン)
       ├─ HBoxContainer (フルスクリーン設定)
       │    ├─ Label (項目名: 「フルスクリーン」)
       │    └─ CheckBox
       └─ HBoxContainer (確認ボタンを右寄せで配置)
            ├─ Control (スペースを埋めるためのダミーノード)
            └─ Button (「適用」ボタン)

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

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

    シーンの構築

    1. ルートノード: Controlノードをシーンのルートとして追加し、名前をMainMenuとします。
    2. コンテナの追加: MainMenuの子としてVBoxContainerを追加します。
    3. コンテナの配置: VBoxContainerを選択し、インスペクタの「レイアウト」メニューから 「Full Rect」 プリセットを選択します。
    4. ボタンの追加: VBoxContainerの子として、Buttonノードを3つ追加し、それぞれ「ゲーム開始」「設定」「終了」とテキストを設定します。

    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():
    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()

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

    レイアウトコンテナ内で子ノードのサイズを細かく制御するために、サイズフラグ が非常に重要になります。

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

    もし3つのボタン全てにExpandフラグを設定すると、3つのボタンは高さを均等に分け合います。特定のボタンを2倍の高さにしたい場合は、そのボタンの 「ストレッチ比率」（Stretch Ratio）を2に設定します。

    よくある間違いとベストプラクティス

    よくある間違いベストプラクティス
    全てのUI要素を手動で配置し、positionを直接変更する。コンテナを積極的に利用し、レイアウトはコンテナに任せる。手動調整は最小限に。
    画面サイズが変わるたびに手動でレイアウトを調整するコードを書く。アンカーとサイズフラグを正しく設定し、Godotのレスポンシブシステムを最大限に活用する。
    UIのスタイル（色、フォント）を各ノードで個別に設定する。Themeリソースを作成し、プロジェクト全体でUIの見た目を一元管理する。
    複雑なUIを一つの巨大なシーンで作ってしまう。HPバーやボタンなど、再利用可能なUI部品は個別のシーンとして作成し、インスタンス化して使う。
    get_node("path/to/node") を多用し、パスの変更に弱いコードを書く。@onready とシーンユニークノード (%) を使い、ノード参照をより安全かつ堅牢にする。

    パフォーマンスと代替案

    • コンテナのコスト: コンテナは非常に便利ですが、ネストが深くなりすぎたり、一つのコンテナに数百〜数千の子要素を持たせたりすると、リサイズ時の再計算にコストがかかる場合があります。UIの構造は、意味のあるグループ分けを意識しつつ、可能な限りシンプルに保ちましょう。

    • カスタム描画: _draw() 関数を使えば、Controlノード上に線や円、テクスチャなどを自由に描画できます。コンテナでは表現が難しいUI（例：グラフ、カスタム形状のゲージ）を作成する場合に強力な選択肢となります。

    まとめ

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

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

    これらの概念を理解し、実践的なコード例を通じて手を動かすことで、プロフェッショナルで使いやすいUIを持つゲームを構築できるでしょう。