Unity UGUI の GridLayoutGroup (グリッド レイアウト) コンポーネントの紹介と使用法

Unity UGUI の GridLayoutGroup (グリッド レイアウト) コンポーネントの紹介と使用法

1. GridLayoutGroup コンポーネントとは何ですか?

GridLayoutGroup は Unity UGUI のレイアウト コンポーネントであり、UI インターフェイスでグリッド レイアウトを作成するために使用されます。指定した行数、列数、間隔に従ってサブオブジェクトを自動的に配置し、グリッド状に配置することができます。

2. GridLayoutGroup の仕組み

GridLayoutGroup コンポーネントは、指定された行数と列数に従って、子オブジェクトを左から右、上から下の順序で配置します。また、間隔を設定して、サブオブジェクト間の間隔を制御することもできます。サブオブジェクトの数がグリッドの容量を超えると、GridLayoutGroup は冗長なサブオブジェクトに対応するために新しい行または列を自動的に作成します。

3. GridLayoutGroup の共通属性

• セル サイズ: 各セルのサイズを指定します。
• 間隔: サブオブジェクト間の間隔を指定します。
• 開始コーナー: グリッドの開始コーナーを指定します。
• 開始軸: グリッドの開始軸を指定します。
• 制約: グリッドの制約モードを指定します。行ごとまたは列ごとに指定できます。
• 制約数: 行または列ごとのサブオブジェクトの最大数を指定します。

4. GridLayoutGroupの共通機能

• CalculateLayoutInputhorizo​​ntal(): 水平方向のレイアウトを計算します。
• CalculateLayoutInputVertical(): 垂直方向のレイアウトを計算します。
• SetLayouthorizo​​ntal(): 水平方向のレイアウトを設定します。
• SetLayoutVertical(): 縦方向のレイアウトを設定します。

5. サンプルコード

例 1: 2x2 グリッド レイアウトを作成する

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.FixedColumnCount;
        gridLayout.constraintCount = 2;

        for (int i = 0; i < 4; i++)
        {
            Instantiate(prefab, transform);
        }
    }
}

手順:

1. 空の GameObject を作成し、それに GridLayoutExample スクリプトをアタッチします。
2. 「インスペクター」パネルで、GridLayoutGroup コンポーネントを GridLayout 変数にドラッグします。
3. プレハブを作成し、プレハブ変数にドラッグします。
4. ゲームを実行すると、プレハブが 2x2 のグリッド レイアウトで配置されていることがわかります。

予防：

• プレハブは事前に作成し、プレハブ変数にドラッグする必要があります。

例 2: 間隔のある 3x3 グリッド レイアウトを作成する

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.FixedColumnCount;
        gridLayout.constraintCount = 3;
        gridLayout.spacing = new Vector2(10, 10);

        for (int i = 0; i < 9; i++)
        {
            Instantiate(prefab, transform);
        }
    }
}

手順:

1. 空の GameObject を作成し、それに GridLayoutExample スクリプトをアタッチします。
2. 「インスペクター」パネルで、GridLayoutGroup コンポーネントを GridLayout 変数にドラッグします。
3. プレハブを作成し、プレハブ変数にドラッグします。
4. ゲームを実行すると、プレハブが間隔をあけて 3x3 のグリッド レイアウトで配置されていることがわかります。

予防：

• プレハブは事前に作成し、プレハブ変数にドラッグする必要があります。

例 3: アダプティブ グリッド レイアウトの作成

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.Flexible;
        gridLayout.spacing = new Vector2(10, 10);

        for (int i = 0; i < 10; i++)
        {
            Instantiate(prefab, transform);
        }
    }
}

手順:

1. 空の GameObject を作成し、それに GridLayoutExample スクリプトをアタッチします。
2. 「インスペクター」パネルで、GridLayoutGroup コンポーネントを GridLayout 変数にドラッグします。
3. プレハブを作成し、プレハブ変数にドラッグします。
4. ゲームを実行すると、プレハブが間隔をあけて適応型グリッド レイアウトで配置されていることがわかります。

予防：

• プレハブは事前に作成し、プレハブ変数にドラッグする必要があります。

例 4: グリッド レイアウトの行数と列数を動的に変更する

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.FixedRowCount;
        gridLayout.constraintCount = 2;

        for (int i = 0; i < 4; i++)
        {
            Instantiate(prefab, transform);
        }

        Invoke("ChangeConstraintCount", 3f);
    }

    void ChangeConstraintCount()
    {
        gridLayout.constraintCount = 3;
    }
}

手順:

1. 空の GameObject を作成し、それに GridLayoutExample スクリプトをアタッチします。
2. 「インスペクター」パネルで、GridLayoutGroup コンポーネントを GridLayout 変数にドラッグします。
3. プレハブを作成し、プレハブ変数にドラッグします。
4. ゲームを実行すると、プレハブが 2x2 のグリッド レイアウトで配置されていることがわかります。
5. 3 秒後、グリッド レイアウトの列数が 3 に変更され、プレハブが 3x2 のグリッド レイアウトで配置されます。

予防：

• プレハブは事前に作成し、プレハブ変数にドラッグする必要があります。

例 5: グリッド レイアウトの間隔を動的に変更する

using UnityEngine;
using UnityEngine.UI;

public class GridLayoutExample : MonoBehaviour
{
    public GridLayoutGroup gridLayout;
    public GameObject prefab;

    void Start()
    {
        gridLayout.constraint = GridLayoutGroup.Constraint.FixedColumnCount;
        gridLayout.constraintCount = 2;
        gridLayout.spacing = new Vector2(10, 10);

        for (int i = 0; i < 4; i++)
        {
            Instantiate(prefab, transform);
        }

        Invoke("ChangeSpacing", 3f);
    }

    void ChangeSpacing()
    {
        gridLayout.spacing = new Vector2(20, 20);
    }
}

手順:

1. 空の GameObject を作成し、それに GridLayoutExample スクリプトをアタッチします。
2. 「インスペクター」パネルで、GridLayoutGroup コンポーネントを GridLayout 変数にドラッグします。
3. プレハブを作成し、プレハブ変数にドラッグします。
4. ゲームを実行すると、プレハブが間隔をあけて 2x2 のグリッド レイアウトで配置されていることがわかります。
5. 3 秒後、グリッド レイアウトの間隔が (20, 20) に変更され、プレハブはより広い間隔で 2x2 グリッド レイアウトに配置されます。

予防：

• プレハブは事前に作成し、プレハブ変数にドラッグする必要があります。

参考文献

• Unity ドキュメント - GridLayoutGroup
• Unity マニュアル - UI GridLayoutGroup