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

スポンサーリンク
PC創作
マイケル
マイケル
みなさんこんにちは!
マイケルです!
マイケル
マイケル
今回はゲームでよく使う、
このようなスクロールビューを作っていきます!
02 scroll bar
↑スクロールビュー
エレキベア
エレキベア
これはよくあるやつクマね〜〜
マイケル
マイケル
少し構成が複雑だけど、形を覚えていこう!
スポンサーリンク

参考書籍

マイケル
マイケル
画面構築するにあたり参考にした書籍はこちらです!

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

マイケル
マイケル
今回紹介するスクロールビューだけでなく
UI構築に必要な機能が幅広く盛り込まれているので、
一冊持っていて損はないと思います!
エレキベア
エレキベア
クマも所有しているクマ〜〜〜
スポンサーリンク

スクロールビューの実装

マイケル
マイケル
それでは早速作っていきましょう!
マイケル
マイケル
最終的には下記のような構成で作成します!
スクロールビューのオブジェクト構成
    ScrollWindow – ウィンドウの背景
     ScrollView – スクロールさせるエリア
      ScrollContent – スクロールさせる内容(親)
       Object – スクロールさせる内容(子)
    ScrollBar – スクロールバー
エレキベア
エレキベア
たくさんあるクマね〜〜〜
マイケル
マイケル
上から一つ一つ作っていこう!

ScrollWindow作成

マイケル
マイケル
まずはウィンドウのベースとなる背景画像を作成しましょう!
ScreenShot 2021 05 16 14 05 51
↑ScrollWindow(Image)の作成

ScrollViewの作成

マイケル
マイケル
そして次にスクロールするエリアを空のGameObjectで作成しましょう!
位置は上、大きさは背景画像よりも少し小さめにします。
ScreenShot 2021 05 16 14 07 02
↑ScrollWindow(空のGameObject)の作成
マイケル
マイケル
作成したらScroll Rectコンポーネントをアタッチして、
スクロールする方向を設定します!
ScreenShot 2021 05 16 14 07 13
↑ScrollRectのアタッチと方向の設定(Verticalチェックで縦方向)

ScrollContentの作成

マイケル
マイケル
そして次にスクロールする内容をまとめる親オブジェクトを
空のGameObjectで作成
します!
ScreenShot 2021 05 16 14 08 17
↑ScrollContent(空のGameObject)の作成
マイケル
マイケル
スクロールする内容の大きさでサイズが変動するよう、
Content Size Fitterをアタッチしておきましょう!
ScreenShot 2021 05 16 14 08 24
↑Content Size Fitterのアタッチと伸縮方向の設定
マイケル
マイケル
そしてその中にスクロールする内容を作成します!
今回は縦に長いテキストオブジェクトを作成しました。
ScreenShot 2021 05 16 14 11 13
↑スクロールさせる内容(ここではText)の作成
マイケル
マイケル
最後に、作成したScrollContentオブジェクトを
ScrollRectコンポーネントに設定
しましょう!
これでスクロールするようになるはずです!
ScreenShot 2021 05 16 14 13 03
↑Scroll RectにScrollContentを設定
マイケル
マイケル
追加で、ImageコンポーネントとMaskコンポーネントをアタッチしておくと、
子要素スクロール範囲外部分を非表示にすることができます!
ScreenShot 2021 05 16 14 12 17
↑スクロール範囲外の非表示設定
マイケル
マイケル
これまでの設定で、下記のように
スクロールするようになっているはずです!
01 scroll
↑スクロールビューの完成
エレキベア
エレキベア
できたクマ〜〜〜〜

ScrollBarの作成

マイケル
マイケル
これだけでもいいですが、見栄えをよくするため
スクロールバーを追加しましょう!
UI -> Scrollbarオブジェクトを作成します!
ScreenShot 2021 05 16 14 16 38
↑Scrollbar(Scrollbar)の作成
マイケル
マイケル
Directionにスクロールバーの方向を設定し、
大きさと位置は適宜調整しましょう!
ScreenShot 2021 05 16 14 16 52
↑スクロール方向の設定
マイケル
マイケル
最後に、ScrollRectコンポーネントにスクロールバーを設定すれば完了です!
ScreenShot 2021 05 16 14 17 08
↑Scroll RectにScrollbarを設定
02 scroll bar
↑スクロールビュー(スクロールバー有り)
エレキベア
エレキベア
それっぽくなったクマ〜〜〜〜
スポンサーリンク

あれこれな情報

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

Layout Groupの活用

マイケル
マイケル
まず一つ目がLayout Groupコンポーネントの活用です!
下記のようにScrollContentオブジェクトにコンポーネントを追加することで、
子要素のオブジェクトを整列することができます!
ScreenShot 2021 05 16 14 19 45
↑Grid Layout Groupの追加
03 scroll grid
↑スクロールビュー(グリッドビュー)
マイケル
マイケル
これを利用すればアイテム一覧などの画面を
簡単に作成することができます!
エレキベア
エレキベア
これは便利クマね〜〜〜
マイケル
マイケル
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の設定
マイケル
マイケル
するとこのように、画像の上だとスクロールが上手く反応しなくなってしまいます・・・。
04 scroll eventtrigger
↑EventTriggerを設定するとスクロールが反応しない
エレキベア
エレキベア
これは困ったクマ・・・
対処法1:クリックリスナーで設定する
マイケル
マイケル
この対処法を調べた結果、下記記事の内容で解決することができました!

参考文献;
【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;
        }
        
    }
}
↑自作クリックリスナーをアタッチ
エレキベア
エレキベア
なるほどクマ・・・!!
対処法2: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イベントの設定
マイケル
マイケル
こちらでも下記のように正常にスクロールすることができました!
05 scroll onclick
↑OnClickだとスクロールも正常に反応する
エレキベア
エレキベア
ImageコンポーネントもButtonの扱いにしてしまうクマね
スポンサーリンク

おわりに

マイケル
マイケル
というわけで今回はスクロールビューについてでした!
どうだったかな?
エレキベア
エレキベア
構成が少し複雑クマが一度覚えてしまえば
なんてことないクマね
マイケル
マイケル
スクロールビューはいろんな場面で使うと思うから
ガンガン作ってみようね!
マイケル
マイケル
それでは今日はこの辺で!
アデューー!!
エレキベア
エレキベア
クマ〜〜〜〜〜〜

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

コメント