こんばんは。VyseArtのトナカイです。
今回は完全に私のための備忘録記事です。
「odekakeneko 図鑑 UI 」（またはプラス「スクロール セル」）の検索ワードで引っかかったら私個人として使いやすいなと思います。
目次
現在VyseArtは新しいゲームを作成するするため打ち合わせをしております。
本日VyseArtチームで ゲーム案出し→絞り込み→一つに決める の工程が完了しまして、作りたいゲームのアイディアが決まりました^^
その後ゲーム案を具体化させたり、ゲームルールを作ったり、仕様書を作る前段階まで来ました。
良くまとまったので、さっそく帰宅してゲームに使いそうなコードを探しました。
本日探したコードは、表題の通りになります。
こちらのサイトのパクほぼリライトになります。
このサイトでは、縦のスクロール図鑑を作っていますが、
私の方では、横スクロールを作ってみました。
図鑑のような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 を使用する場合、特定のセルの行数に合うようにグリッドの高さを大きくするかは、ニーズに合わせて判断してください。
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; } } }
（このスクリプトもパク上記サイトのスクリプトを参考にさせていただいております。）
