ゲーム開発
Unity
UnrealEngine
C++
Blender
Houdini
ゲーム数学
ゲームAI
グラフィックス
サウンド
アニメーション
GBDK
制作日記
IT関連
ツール開発
フロントエンド関連
サーバサイド関連
WordPress関連
ソフトウェア設計
おすすめ技術書
音楽
DTM
楽器・機材
ピアノ
ラーメン日記
四コマ漫画
その他
おすすめアイテム
おもしろコラム
  • ゲーム開発
    • Unity
    • UnrealEngine
    • C++
    • Blender
    • Houdini
    • ゲーム数学
    • ゲームAI
    • グラフィックス
    • サウンド
    • アニメーション
    • GBDK
    • 制作日記
  • IT関連
    • ツール開発
    • フロントエンド関連
    • サーバサイド関連
    • WordPress関連
    • ソフトウェア設計
    • おすすめ技術書
  • 音楽
    • 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

      関連記事
      【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