【Unity】スクロールビューの実装とあれこれ【uGUI】

マイケル

みなさんこんにちは！
マイケルです！

マイケル

今回はゲームでよく使う、
このようなスクロールビューを作っていきます！

エレキベア

これはよくあるやつクマね〜〜

マイケル

少し構成が複雑だけど、形を覚えていこう！

参考書籍
スクロールビューの実装
あれこれな情報
おわりに

参考書籍

マイケル

画面構築するにあたり参考にした書籍はこちらです！

uGUIではじめるUnity UIデザインの教科書

マイケル

今回紹介するスクロールビューだけでなく
UI構築に必要な機能が幅広く盛り込まれているので、
一冊持っていて損はないと思います！

エレキベア

クマも所有しているクマ〜〜〜

スクロールビューの実装

マイケル

それでは早速作っていきましょう！

マイケル

最終的には下記のような構成で作成します！

スクロールビューのオブジェクト構成

ScrollWindow	– ウィンドウの背景
ScrollView	– スクロールさせるエリア
ScrollContent	– スクロールさせる内容（親）
Object	– スクロールさせる内容（子）
ScrollBar	– スクロールバー

エレキベア

たくさんあるクマね〜〜〜

マイケル

上から一つ一つ作っていこう！

ScrollWindow作成

マイケル

まずはウィンドウのベースとなる背景画像を作成しましょう！

ScrollViewの作成

マイケル

そして次にスクロールするエリアを空のGameObjectで作成しましょう！
位置は上、大きさは背景画像よりも少し小さめにします。

マイケル

作成したらScroll Rectコンポーネントをアタッチして、
スクロールする方向を設定します！

ScrollContentの作成

マイケル

そして次にスクロールする内容をまとめる親オブジェクトを
空のGameObjectで作成します！

マイケル

スクロールする内容の大きさでサイズが変動するよう、
Content Size Fitterをアタッチしておきましょう！

マイケル

そしてその中にスクロールする内容を作成します！
今回は縦に長いテキストオブジェクトを作成しました。

マイケル

最後に、作成したScrollContentオブジェクトを
ScrollRectコンポーネントに設定しましょう！
これでスクロールするようになるはずです！

マイケル

追加で、ImageコンポーネントとMaskコンポーネントをアタッチしておくと、
子要素スクロール範囲外部分を非表示にすることができます！

マイケル

これまでの設定で、下記のように
スクロールするようになっているはずです！

エレキベア

できたクマ〜〜〜〜

ScrollBarの作成

マイケル

これだけでもいいですが、見栄えをよくするため
スクロールバーを追加しましょう！
UI -> Scrollbarオブジェクトを作成します！

マイケル

Directionにスクロールバーの方向を設定し、
大きさと位置は適宜調整しましょう！

マイケル

最後に、ScrollRectコンポーネントにスクロールバーを設定すれば完了です！

エレキベア

それっぽくなったクマ〜〜〜〜

あれこれな情報

マイケル

おまけになりますが、スクロールビューを作成する中で気付いた
あれこれについて共有します！

Layout Groupの活用

マイケル

まず一つ目がLayout Groupコンポーネントの活用です！
下記のようにScrollContentオブジェクトにコンポーネントを追加することで、
子要素のオブジェクトを整列することができます！

マイケル

これを利用すればアイテム一覧などの画面を
簡単に作成することができます！

エレキベア

これは便利クマね〜〜〜

マイケル

Grid Layout Groupの他にも、縦方向、横方向のみに整列させることができる
コンポーネントもあるから調べてみてね！

Event Triggerはスクロールに影響あり

マイケル

そして次にEvent Triggerコンポーネントをスクロールする内容にアタッチした際の影響についてです！

マイケル

例えば、スクロールするImageオブジェクトに、
下記のようにEvent Triggerを設定したとします。

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

/// <summary>
/// TestScrollScene管理クラス
/// </summary>
public class TestScrollSceneManager : MonoBehaviour
{
    [SerializeField]
    private List<GameObject> riceBallList;
    
    /// <summary>
    /// 開始処理
    /// </summary>
    void Start()
    {
        int startCount = 0;
        foreach (GameObject riceBall in riceBallList)
        {
            int riceCount = ++startCount;
            
            // イベントトリガーでの追加
            EventTrigger trigger = riceBall.AddComponent<EventTrigger>();
            EventTrigger.Entry entry = new EventTrigger.Entry();
            entry.eventID = EventTriggerType.PointerClick;
            entry.callback.AddListener((data) => { PushRiceBall(riceCount);});
            trigger.triggers.Add(entry);
        }
        
    }

    /// <summary>
    /// おにぎりを押した時
    /// </summary>
    public void PushRiceBall(int count)
    {
        Debug.LogFormat("おにぎり{0}「痛いッス」", count);
    }
}

↑Event Triggerの設定

マイケル

するとこのように、画像の上だとスクロールが上手く反応しなくなってしまいます・・・。

エレキベア

これは困ったクマ・・・

対処法１：クリックリスナーで設定する

マイケル

この対処法を調べた結果、下記記事の内容で解決することができました！

参考文献；
【Unity】EventTriggerを使ったらScrollViewが機能しなかった話

マイケル

IPointerClickHandlerを継承したクラス
をアタッチすることで解決する方法です！

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

/// <summary>
/// TestScrollScene管理クラス
/// </summary>
public class TestScrollSceneManager : MonoBehaviour
{
    [SerializeField]
    private List<GameObject> riceBallList;

    /// <summary>
    /// おにぎりクリックリスナー
    /// </summary>
    private class RiceBallClickListener : MonoBehaviour, IPointerClickHandler
    {
        public int riceCount { get; set; }

        public void OnPointerClick(PointerEventData eventdata)
        {
            Debug.LogFormat("おにぎり{0}「痛いッス」", riceCount);
        }
    }
    
    /// <summary>
    /// 開始処理
    /// </summary>
    void Start()
    {
        int startCount = 0;
        foreach (GameObject riceBall in riceBallList)
        {
            int riceCount = ++startCount;

            // ClickListenerクラスの追加
            RiceBallClickListener listener = riceBall.AddComponent<RiceBallClickListener>();
            listener.riceCount = riceCount;
        }
        
    }
}

↑自作クリックリスナーをアタッチ

エレキベア

なるほどクマ・・・！！

対処法２：OnClickを設定する

マイケル

そしてもう一つ思いついたのは、Buttonコンポーネントをアタッチして
OnClickイベントで呼ぶ方法です！

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

/// <summary>
/// TestScrollScene管理クラス
/// </summary>
public class TestScrollSceneManager : MonoBehaviour
{
    [SerializeField]
    private List<GameObject> riceBallList;
    
    /// <summary>
    /// 開始処理
    /// </summary>
    void Start()
    {
        int startCount = 0;
        foreach (GameObject riceBall in riceBallList)
        {
            int riceCount = ++startCount;
            
            // onClickでの追加
            riceBall.AddComponent<Button>();
            riceBall.GetComponent<Button>().onClick.AddListener(() => { PushRiceBall(riceCount); });
        }
        
    }

    /// <summary>
    /// おにぎりを押した時
    /// </summary>
    public void PushRiceBall(int count)
    {
        Debug.LogFormat("おにぎり{0}「痛いッス」", count);
    }
}

↑OnClickイベントの設定

マイケル

こちらでも下記のように正常にスクロールすることができました！