ゲーム開発
Unity
UnrealEngine
C++
ゲーム数学
ゲームAI
サウンド
アニメーション
GBDK
制作日記
3DCG
Houdini
Blender
USD
グラフィックス
テクノロジ
ツール開発
フロントエンド関連
サーバサイド関連
ソフトウェア設計
ハードウェア関連
おすすめ技術書
音楽
DTM
楽器・機材
ピアノ
その他
都会のエレキベア
ラーメン日記
四コマ漫画
おすすめアイテム
おもしろコラム
  • ゲーム開発
    • Unity
    • UnrealEngine
    • C++
    • ゲーム数学
    • ゲームAI
    • サウンド
    • アニメーション
    • GBDK
    • 制作日記
  • 3DCG
    • Houdini
    • Blender
    • USD
    • グラフィックス
  • テクノロジ
    • ツール開発
    • フロントエンド関連
    • サーバサイド関連
    • ソフトウェア設計
    • ハードウェア関連
    • おすすめ技術書
  • 音楽
    • DTM
    • 楽器・機材
    • ピアノ
  • その他
    • 都会のエレキベア
    • ラーメン日記
    • 四コマ漫画
    • おすすめアイテム
    • おもしろコラム
  1. ホーム
  2. 20210516_02

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

UnityUI
2021-05-16

マイケル
マイケル
みなさんこんにちは!
マイケルです!
マイケル
マイケル
今回はゲームでよく使う、
このようなスクロールビューを作っていきます!

↑スクロールビュー
エレキベア
エレキベア
これはよくあるやつクマね〜〜
マイケル
マイケル
少し構成が複雑だけど、形を覚えていこう!

参考書籍

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

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

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

スクロールビューの実装

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

ScrollWindow作成

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

↑ScrollWindow(Image)の作成

ScrollViewの作成

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

↑ScrollWindow(空のGameObject)の作成
マイケル
マイケル
作成したらScroll Rectコンポーネントをアタッチして、
スクロールする方向を設定します!

↑ScrollRectのアタッチと方向の設定(Verticalチェックで縦方向)

ScrollContentの作成

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

↑ScrollContent(空のGameObject)の作成
マイケル
マイケル
スクロールする内容の大きさでサイズが変動するよう、
Content Size Fitterをアタッチしておきましょう!

↑Content Size Fitterのアタッチと伸縮方向の設定
マイケル
マイケル
そしてその中にスクロールする内容を作成します!
今回は縦に長いテキストオブジェクトを作成しました。

↑スクロールさせる内容(ここではText)の作成
マイケル
マイケル
最後に、作成したScrollContentオブジェクトを
ScrollRectコンポーネントに設定
しましょう!
これでスクロールするようになるはずです!

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

↑スクロール範囲外の非表示設定
マイケル
マイケル
これまでの設定で、下記のように
スクロールするようになっているはずです!

↑スクロールビューの完成
エレキベア
エレキベア
できたクマ〜〜〜〜

ScrollBarの作成

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

↑Scrollbar(Scrollbar)の作成
マイケル
マイケル
Directionにスクロールバーの方向を設定し、
大きさと位置は適宜調整しましょう!

↑スクロール方向の設定
マイケル
マイケル
最後に、ScrollRectコンポーネントにスクロールバーを設定すれば完了です!

↑Scroll RectにScrollbarを設定

↑スクロールビュー(スクロールバー有り)
エレキベア
エレキベア
それっぽくなったクマ〜〜〜〜

あれこれな情報

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

Layout Groupの活用

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

↑Grid Layout Groupの追加

↑スクロールビュー(グリッドビュー)
マイケル
マイケル
これを利用すればアイテム一覧などの画面を
簡単に作成することができます!
エレキベア
エレキベア
これは便利クマね〜〜〜
マイケル
マイケル
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の設定
マイケル
マイケル
するとこのように、画像の上だとスクロールが上手く反応しなくなってしまいます・・・。

↑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イベントの設定
マイケル
マイケル
こちらでも下記のように正常にスクロールすることができました!

↑OnClickだとスクロールも正常に反応する
エレキベア
エレキベア
ImageコンポーネントもButtonの扱いにしてしまうクマね

おわりに

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

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


UnityUI
2021-05-16
記事をSNSで共有する
X
Facebook
LINE
はてなブックマーク
Pocket
LinkedIn
Reddit

著者の各種アカウント
フォローいただけると大変励みになります!
X
GitHub

関連記事
【Unity】Timeline × Excelでスライドショーを効率よく制作する
2024-10-31
【Unity】Boidsアルゴリズムを用いて魚の群集シミュレーションを実装する
2024-05-28
【Unity】GoでのランキングAPI実装とVPSへのデプロイ方法についてまとめる【Go言語】
2024-04-14
【Unity】第二回 Wwiseを使用したサウンド制御 〜インタラクティブミュージック編〜
2024-03-30
【Unity】第一回 Wwiseを使用したサウンド制御 〜基本動作編〜
2024-03-30
【Unity】第二回 CRI ADXを使用したサウンド制御 〜インタラクティブミュージック編〜
2024-03-28
【Unity】第一回 CRI ADXを使用したサウンド制御 〜基本動作、周波数解析編〜
2024-03-28
【Unity】サウンドミドルウェアに依存しない設計を考える【CRI ADX・Wwise】
2024-03-27