Unityで図鑑のようなUIを作りたい ~ GridLayoutGroupを使ってスクロールさせて中にセルを生成 ~
こんばんは。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 を使用する場合、特定のセルの行数に合うようにグリッドの高さを大きくするかは、ニーズに合わせて判断してください。
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; } } }