本記事ではUnityのスクロール機能を用い、要素数が変更する場合にも対応したGameObjectの配置とスクリプトについて紹介します。

本記事の目標

Scroll ViewのContentの配下に要素を複数配置し、スクロールできる機能を作成していきます。

この際、要素数が任意の数になっても対応できるような仕組みになるようにしていきます。

パネルの作成

Hierarchy上で右クリックし「UI > Panel」の順に選択します。
PanelにLayout Elementをアタッチし、Preferred WidthとPreferred Heightを200にします。
できあがったらPrefab化をしておきます。

スクリプトの作り方

任意の数の要素を表示するスクリプトについて説明します。

Unity Editor上で指定された数だけGameObjectを生成しています。

using UnityEngine;
using UnityEngine.UI;

public class CreatePanel : MonoBehaviour
{
    [SerializeField] private GameObject _panelPrefab;
    [SerializeField] private int _numberOfPanels = 5;

    private void Start()
    {
        for (int i = 0; i < _numberOfPanels; i++)
        {
            var panel = Instantiate(_panelPrefab, transform);
            panel.GetComponent<Image>().color = new Color(Random.value, Random.value, Random.value);
        }
    }
}

Hierarchyの作り方

Hierarchy上へのGameObjectの配置方法を説明します。

Canvasの直下で右クリックし「UI > Scroll View」を選択します。
Scroll Viewが表示されます。
Scroll Viewの子要素の中にあるContentに対し、Horizontal Layout Group、Content Size Fitter、先ほど作成したスクリプトの3つをアタッチします。 SerializeFieldでは先ほど設定したPanelと生成したい要素の数を入力します。
見た目を整えます。
Scroll Viewの Rect Transformのwidthを調整し、Scroll RectのVertical のチェックを外し、縦のスクロールができないようにします。
また、Scrollbar Verticalという名前のGameObjectを削除します。