NGUIのScrollViewで左右両方にスクロールさせる

ayumegu(プログラマー)
よろしくお願いします。

はい、続きましてScrollViewネタ
たまに必要になる右と左のスクロールするやつ
これが以外と簡単に実装できたので記事にしてみる

こんなの

シンプルにScrollViewを作成すると中の要素が上下しか動かず親の左右がスクロールしない・・・。
それの対応

シーンの構成

シーンはこんな感じです

Bgは背景画像
ScrollViewはこんな感じ

普通のUIScrollViewにUICenter OnChild とUIGridを追加
あとはこの後作成するScroll.csというスクリプトをアタッチ

Prefab

中身としてContentsとScrollTipの2つのPrefabを作成
Contentsが左右にスクロールするコンテンツ
ScrollTipはContentsの中に入るチップです

こちらContentsのインスペクター
背景用画像と、BoxColliderそしてUIDragScrollView

こちらContentsの下のScroll Viewのインスペクタ こちらも普通のScrollViewにUIGridを追加しただけ

続きましてこちらがScrollTipのインスペクタ
あたり判定用のColliderとUIDragScrollViewです
これの子に画像を配置しています

スクリプト

スクリプトファイルは一つだけ。
通常通りの配置と、かわっているところはScrollTipにもう一つUIDragScrollViewを設定するところ
この二つ目のDragScrollViewのscrollViewに親の方のScrollViewを設定してあげれば上下だけでなく、左右も動く

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
using UnityEngine;
using System.Collections;

public class Scroll : MonoBehaviour {
  
  void Awake () {
      
      UIScrollView scrollView = GetComponent<UIScrollView>();
      
      for(int i = 0; i < 3; i++)
      {
          GameObject contents = Instantiate(Resources.Load ("Prefabs/Contents")) as GameObject;
          contents.transform.parent = transform;
          contents.transform.localScale = Vector3.one;
          contents.name = "Contents";
          
          Transform parent = contents.transform.FindChild("Scroll View");
          for(int j = 0; j < 30; j++)
          {
              GameObject tip = Instantiate(Resources.Load ("Prefabs/ScrollTip")) as GameObject;
              tip.transform.parent = parent;
              tip.transform.localScale = Vector3.one;
              tip.name = "Tip";
              
              // もう一つUIDragScrollViewを追加し、親を一番上のScrollViewに設定する 
              UIDragScrollView drag = tip.AddComponent<UIDragScrollView>();
              drag.scrollView = scrollView;
          }
          parent.GetComponent<UIGrid>().Reposition();
          
          // 位置がずれるのでTOPになるようにずらす
          parent.GetComponent<UIPanel>().clipOffset = new Vector2(0, 126);
          parent.localPosition = new Vector3(0, -126, parent.localPosition.z);
      }
      
      GetComponent<UIGrid>().Reposition();
  }
  
  void Start () {
  }
  
  void Update () {
      
  }
}

今回の感想

気づくと簡単にできるけど、気づかなかったらめんどくさいね・・。
はい、この記事はここまで〜