ノード解説「GridContainer」

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

はじめに

複数のボタンやパネルを格子状に並べたいとき、どうしていますか？GridContainerは、子ノードを自動的に行と列に整列させてくれるコンテナです。この記事では、GridContainerの基本的な使い方と、ゲーム開発での実践的な活用法を解説します。

GridContainerとは？

GridContainerは、子ノードを指定した列数で自動的に格子（グリッド）状に配置するコンテナノードです。行や列の数を自動で計算して、きれいに整列します。

GridContainerは「将棋盤のように子ノードを並べるコンテナ」です。列数を指定すれば、あとは自動的に行が増えて、子ノードが埋まっていく仕組みです。

GridContainerは Container を継承しています。VBoxContainerやHBoxContainerが「縦」「横」の一方向しか対応していないのに対し、GridContainerは「2次元」で子ノードを配置できるのが特徴です。

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

インベントリUI： アイテムグリッドを実装するとき（3列4行など）。ゲームのアイテム画面によく見られます
ボタンパネル： 複数のボタンを縦横に整列させたい場合。メニュー画面のボタン配置など
タイル表示： 複数のパネルやカード（キャラクター選択画面など）を格子状に表示するとき
設定画面： チェックボックスやスライダーを複数行×複数列で配置するとき
ゲームボード： チェス盤やマインスイーパーのようなグリッドベースのゲーム

別のノードが適切な場合：

「横一列」なら HBoxContainer の方がシンプル
「縦一列」なら VBoxContainer の方が直感的
グリッドのセルサイズを細かくカスタマイズしたいなら、GridMap や Control ノードの手動配置も選択肢

主なプロパティと機能

プロパティ	役割	デフォルト値
`columns`	グリッドの列数を指定。ここで指定した数に応じて、行が自動計算される	1
`h_separation`	隣同士の列の間隔（ピクセル）	0
`v_separation`	隣同士の行の間隔（ピクセル）	0
`child_controls/bottom` など	子ノードが余白を埋めるかどうか（マージン設定）	無効

基本的な使い方は、シーンツリーで GridContainer ノードを作成し、columns プロパティを編集画面で変更するだけです。


extends GridContainer

func _ready():
    # GDScriptで列数を動的に変更することもできます
    columns = 3
    h_separation = 10
    v_separation = 10

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

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

1. 列数を動的に変更する

ゲーム画面のサイズが変わったときに、グリッドの列数も調整できます。


func _on_window_resized():
    # ウィンドウの幅に応じて列数を自動調整
    var width = get_viewport_rect().size.x
    columns = max(1, int(width / 150))  # 1アイテム150pxと仮定

2. セル間隔を整える

h_separation と v_separation でセル間の隙間を調整し、見た目をすっきりさせられます。


func _ready():
    # 横方向に10px、縦方向に15pxの隙間
    h_separation = 10
    v_separation = 15

3. 子ノードのサイズをそろえる

GridContainer内の子ノード（Button、Panel など）は、自動的に均等なサイズで配置されます。インスペクタで各子ノードの size_flags_horizontal と size_flags_vertical を「Fill」に設定すると、セルいっぱいに広がります。

4. グリッドの強制更新

子ノードを動的に追加・削除したとき、グリッド再計算が自動で走りますが、手動で強制したい場合があります。


# 子ノードを追加してから、レイアウトを強制更新
add_child(new_button)
queue_sort()  # 次フレームでレイアウトが再計算される

5. セルごとのスタイル分け（CSSクラス）

複数のボタンをGridContainerで並べるとき、GDScriptで子ノードのテーマやスタイルを変えることで、視覚的な表現が広がります。


func _ready():
    for i in range(get_child_count()):
        var child = get_child(i)
        # 行の奇数・偶数で背景色を切り替える例
        if (i / columns) % 2 == 0:
            child.modulate = Color.WHITE
        else:
            child.modulate = Color(0.95, 0.95, 0.95)