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

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

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

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

目次

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

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

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

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

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

f:id:odekakeneko:20200119011803p:plain:w300
図鑑のようなUIを作りたい。

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

qiita.com

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

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

図鑑のようなUIの作り方

f:id:odekakeneko:20200119012318p:plain:w300
初期画面

Create→UI→Canvas

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


f:id:odekakeneko:20200119012422p:plain:w300
キャンバスを作る


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

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

f:id:odekakeneko:20200119012518p:plain:w500

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 を使用する場合、特定のセルの行数に合うようにグリッドの高さを大きくするかは、ニーズに合わせて判断してください。

f:id:odekakeneko:20200119013016p:plain:w500
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;
        }
    }
}

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

f:id:odekakeneko:20200119012754p:plain:w500
完成図

銀河鉄道の夜 宮沢賢治 ~ もう一つのストーリー ~プライバシーポリシー

プライバシーポリシー

(個人情報保護方針)

私たちは、個人の重要性を認識し、その保護の徹底をはかるため、このプライバシーポリシーを公開し、ユーザーのプライバシー保護に最大限の注意を払うことをお約束いたします。

 

1.個人情報の取得

銀河鉄道の夜 宮沢賢治 ~ もう一つのストーリー ~(以下、当アプリ)は、広告表示のために通信を行いますが、個人の特定に使用するものではありません。

 また、ユーザーのニックネームとパスワードを取得し、ゲーム内でその名前を使用しますが、それ以外の目的のために使用することはございません。

 

2.個人情報の第三者提供について

私たちは、お客様が入力された情報(ニックネーム)をゲーム内に登場させることがあります。ただし、ゲーム外でお客様が入力された個人情報を意図的に流出させることは決してありません。また、意図せず流出しないよう細心の注意を払います。

登録されたニックネームを削除したい場合は、お手数ですが、グーグルプレイコンソールに設定されております連絡用メールアドレスまでご連絡をください。 

 

3.個人情報の管理について

当アプリは、ユーザー様の個人情報を特定することはありませんが、アプリのダウンロード、使用に関しましては自己責任でお願いいたします。

 

当アプリのユーザー管理は、「ニフクラ mobile backend」を利用しています。

 

4.広告の配信について

当アプリは第三者配信の広告サービス「Google AdMob グーグルアドモブ」を利用しています。

 

5.免責事項

当サイト、当アプリで掲載している画像の著作権は各権利所有者様に帰属いたします。

権利を侵害する目的はございません。アプリの内容や使用画像等に問題がございましたら、各権利所有者様本人が直接メールでご連絡下さい。確認後、ご対応させていただきます。

 

当サイト、当アプリからリンクやバナーなどによって他のサイトに移動された場合、異動先サイトで提供される情報、サービス等についての一切の責任を負いません。

 

当アプリの使用によって生じた損害等の一切の責任を負いかねますのでご了承ください。

 

以上。

ほたるひよこあつめプライバシーポリシー

プライバシーポリシー

(個人情報保護方針)

私たちは、個人の重要性を認識し、その保護の徹底をはかるため、このプライバシーポリシーを公開し、ユーザーのプライバシー保護に最大限の注意を払うことをお約束いたします。

 

1.個人情報の取得

ほたるひよこあつめ(以下、当アプリ)は、広告表示のために通信を行いますが、個人の特定に使用するものではありません。

 また、ユーザーのニックネームとパスワードを取得し、ゲーム内でニックネームを使用し、ランキングを取得するために通信を行います。こちらに関しましても、個人の特定に使用するものではありません。

 

2.個人情報の第三者提供について

私たちは、お客様が入力された情報(ニックネーム)をゲーム内に登場させることがあります。ただし、ゲーム外でお客様が入力された個人情報を意図的に流出させることは決してありません。また、意図せず流出しないよう細心の注意を払います。

登録されたニックネームを削除したい場合は、お手数ですが、グーグルプレイコンソールに設定されております連絡用メールアドレスまでご連絡をください。 

 

3.個人情報の管理について

当アプリは、ユーザー様の個人情報を特定することはありませんが、アプリのダウンロード、使用に関しましては自己責任でお願いいたします。

 

当アプリのユーザー管理は、「ニフクラ mobile backend」を利用しています。

 

4.広告の配信について

当アプリは第三者配信の広告サービス「Google AdMob グーグルアドモブ」を利用しています。

 

5.免責事項

当サイト、当アプリで掲載している画像の著作権は各権利所有者様に帰属いたします。

権利を侵害する目的はございません。アプリの内容や使用画像等に問題がございましたら、各権利所有者様本人が直接メールでご連絡下さい。確認後、ご対応させていただきます。

 

当サイト、当アプリからリンクやバナーなどによって他のサイトに移動された場合、異動先サイトで提供される情報、サービス等についての一切の責任を負いません。

 

当アプリの使用によって生じた損害等の一切の責任を負いかねますのでご了承ください。

 

以上。

御筆るいの都内某所しっそう記3 プライバシーポリシー

プライバシーポリシー

(個人情報保護方針)

私たちは、個人の重要性を認識し、その保護の徹底をはかるため、このプライバシーポリシーを公開し、ユーザーのプライバシー保護に最大限の注意を払うことをお約束いたします。

 

1.個人情報の取得

御筆るいの都内某所しっそう記3(以下、当アプリ)は、広告表示のために通信を行いますが、個人の特定に使用するものではありません。

 

2.個人情報の第三者提供について

私たちは、お客様の個人情報を、第三者に開示、提供いたしません。

 

3.個人情報の管理について

当アプリは、ユーザー様の個人情報を特定することはありませんが、アプリのダウンロード、使用に関しましては自己責任でお願いいたします。

 

4.広告の配信について

当アプリは第三者配信の広告サービス「Google AdMob グーグルアドモブ」を利用しています。

 

5.免責事項

当サイト、当アプリで掲載している画像の著作権は各権利所有者様に帰属いたします。

権利を侵害する目的はございません。アプリの内容や使用画像等に問題がございましたら、各権利所有者様本人が直接メールでご連絡下さい。確認後、ご対応させていただきます。

 

当サイト、当アプリからリンクやバナーなどによって他のサイトに移動された場合、異動先サイトで提供される情報、サービス等についての一切の責任を負いません。

 

当アプリの使用によって生じた損害等の一切の責任を負いかねますのでご了承ください。

 

以上。

 

御筆るいの都内某所しっそう記2 プライバシーポリシー

プライバシーポリシー

(個人情報保護方針)

私たちは、個人の重要性を認識し、その保護の徹底をはかるため、このプライバシーポリシーを公開し、ユーザーのプライバシー保護に最大限の注意を払うことをお約束いたします。

 

1.個人情報の取得

御筆るいの都内某所しっそう記2(以下、当アプリ)は、広告表示のために通信を行いますが、個人の特定に使用するものではありません。

 

2.個人情報の第三者提供について

私たちは、お客様の個人情報を、第三者に開示、提供いたしません。

 

3.個人情報の管理について

当アプリは、ユーザー様の個人情報を特定することはありませんが、アプリのダウンロード、使用に関しましては自己責任でお願いいたします。

 

4.広告の配信について

当アプリは第三者配信の広告サービス「Google AdMob グーグルアドモブ」を利用しています。

 

5.免責事項

当サイト、当アプリで掲載している画像の著作権は各権利所有者様に帰属いたします。

権利を侵害する目的はございません。アプリの内容や使用画像等に問題がございましたら、各権利所有者様本人が直接メールでご連絡下さい。確認後、ご対応させていただきます。

 

当サイト、当アプリからリンクやバナーなどによって他のサイトに移動された場合、異動先サイトで提供される情報、サービス等についての一切の責任を負いません。

 

当アプリの使用によって生じた損害等の一切の責任を負いかねますのでご了承ください。

 

以上。

御筆るいの都内某所しっそう記1 プライバシーポリシー

プライバシーポリシー

(個人情報保護方針)

私たちは、個人の重要性を認識し、その保護の徹底をはかるため、このプライバシーポリシーを公開し、ユーザーのプライバシー保護に最大限の注意を払うことをお約束いたします。

 

1.個人情報の取得

御筆るいの都内某所しっそう記1(以下、当アプリ)は、広告表示のために通信を行いますが、個人の特定に使用するものではありません。

 

2.個人情報の第三者提供について

私たちは、お客様の個人情報を、第三者に開示、提供いたしません。

 

3.個人情報の管理について

当アプリは、ユーザー様の個人情報を特定することはありませんが、アプリのダウンロード、使用に関しましては自己責任でお願いいたします。

 

4.広告の配信について

当アプリは第三者配信の広告サービス「Google AdMob グーグルアドモブ」を利用しています。

 

5.免責事項

当サイト、当アプリで掲載している画像の著作権は各権利所有者様に帰属いたします。

権利を侵害する目的はございません。アプリの内容や使用画像等に問題がございましたら、各権利所有者様本人が直接メールでご連絡下さい。確認後、ご対応させていただきます。

 

当サイト、当アプリからリンクやバナーなどによって他のサイトに移動された場合、異動先サイトで提供される情報、サービス等についての一切の責任を負いません。

 

当アプリの使用によって生じた損害等の一切の責任を負いかねますのでご了承ください。

 

以上。