Unityで図鑑のようなUIを作りたい ～ GridLayoutGroupを使ってスクロールさせて中にセルを生成 ～

こんばんは。VyseArtのトナカイです。

今回は完全に私のための備忘録記事です。

「odekakeneko 図鑑 UI 」（またはプラス「スクロール セル」）の検索ワードで引っかかったら私個人として使いやすいなと思います。

目次

現在VyseArtは新しいゲームを作成するするため打ち合わせをしております。

本日VyseArtチームで ゲーム案出し→絞り込み→一つに決める　の工程が完了しまして、作りたいゲームのアイディアが決まりました^^

その後ゲーム案を具体化させたり、ゲームルールを作ったり、仕様書を作る前段階まで来ました。

良くまとまったので、さっそく帰宅してゲームに使いそうなコードを探しました。

本日探したコードは、表題の通りになります。

図鑑のようなUIを作りたい。

こちらのサイトのパクほぼリライトになります。
このサイトでは、縦のスクロール図鑑を作っていますが、
私の方では、横スクロールを作ってみました。

qiita.com

図鑑のようなUIを作るには、GridLayoutGroupを使いセルを生成していくことになります。

それではGridLayoutGroupを使って横にスクロールするUIを作ってみましょう。

図鑑のようなUIの作り方

初期画面

Create→UI→Canvasで

Canvas ScalerをScale With Screen Sizeにします。

キャンバスを作る

次に、Create→UI→ScrollViewでScrollViewを作る、

ScrollViewのインスペクタから、画像の赤丸を選択すると、
Anchor Presetsが出てくるので右下の赤丸のstrechを選択。

Stretchは親オブジェクトから何ピクセル離れるか、ということらしいです。
私が作りたいのは、画面の下方に現れる図鑑なので、
Left : 50
Top : 600
PosZ : 0
Right : 50
Bottom : 50
にしました。こうすると、画像の白っぽい四角のようになりました。

今回は参考サイトとは異なり、横方向の移動だけでよいので、Scroll RectのVerticalのチェックを外して、Scrollbar verticalのオブジェクトをヒエラルキーから削除しました。

ScrollViewのViewPortの子にContentがあり、ここに画像やボタンを配置していくそうです。

ここに、GridLayoutGroupを配置していきます。

contentにAdd Componentし、
・GridLayoutGroup
・Content size Fitter
を追加します。

下記Unityのドキュメントから引用です。

以下は推奨される Content Size Fitter と Layout System を併用する方法です。

幅を可変にし、高さを固定する
要素が加えられるにつれて、グリッドが横に広がるように、グリッドを可変の幅と固定の高さで設定するには、以下のようにプロパティーを設定します。

Grid Layout Group コンポーネントの Constraint: Fixed Row Count
Content Size Fitter コンポーネントの Horizontal Fit: Preferred Size
Content Size Fitter コンポーネントの Vertical Fit: Preferred Size か Unconstrained
Vertical Fit で Unconstrained を使用する場合、特定のセルの行数に合うようにグリッドの高さを大きくするかは、ニーズに合わせて判断してください。

Grid Layout GroupとContent Size Fitterはこのように設定する

Preferred Sizeはレイアウト要素のPreferred Heightに基づいて高さを制御します。
UnConstrainedは高さにレイアウト要素に基づく制御を行わない、とありました。

あとは、下記スクリプトを作成してヒエラルキーのオブジェクトにこのスクリプトをアタッチ（普通GameManagerなどのマネージャーオブジェクトにアタッチ）し、インスペクタから
contentRectTransformにContent
buttonCellに作成したボタンを

ヒエラルキーからアタッチすればできます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;


public class TestSpawnGridLayout : MonoBehaviour
{

    public RectTransform contentRectTransform;
    public Button buttonCell;
    public Sprite spriteCell;

    // Start is called before the first frame update
    void Start()
    {
        InstantiateGridLayoutCell();
    }

    // Update is called once per frame
    void Update()
    {
        /* ここはUpdateです */
    }

    //セルを生成する
    public void InstantiateGridLayoutCell()
    {
        for(int i = 0; i < 30; i++)
        {
            var obj = Instantiate(buttonCell, contentRectTransform);
            obj.GetComponent<Image>().sprite = spriteCell;
        }
    }
}

（このスクリプトもパク上記サイトのスクリプトを参考にさせていただいております。）

完成図