NGUIでよくありそうなスクロールするバナー

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

今回はNGUIでよくあるスクロールするバナー作ってみました。
こんなかんじのです

機能としては

  • 左右のボタンクリックでバナーが切り替わるです
  • ドラッグでバナーを切り替えられる
  • 一定時間でバナーが切り替わる

です。

シーンの構成

  • Lights:現在ページのどっとアイコン画像が入る空のGameObject
  • Scroll View:バナーが入るScrollView
  • Pager:次へ前へのボタン画像が入っている空GameObject
    • BtnNext:次のバナーへのボタン
    • BtnPrev:前のバナーへのボタン

Lightsの設定

UIGridをアタッチし、サイズなどを任意に指定

Scroll Viewの設定

メニューから作成したScroll ViewにUICenter On ChildUIGridを追加
さらに今回自分でロジックを書いたScrollBanner.csをアタッチ

BtnNextの設定

よくあるボタンのようにColliderをアタッチしUIButtonMessageをアタッチ
ターゲットを指定し、OnClickNextともう一個はOnClickPrevを指定

Texture

下記をNGUIでAtlas化したものを使用します。

ResourcesのPrefab

  • Banner:バナーのprefab
  • Light:下の部分のライトのprefab

Banner prefab

UISpriteにバナー画像のアトラスを指定し、UIDrag Scroll ViewとColliderをアタッチ

Light prefab

UISpriteにライト画像を指定

ソース

書いたソースはこれだけ
コメントを書いたので特に説明は割愛
ScrollBanner.cs

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
using UnityEngine;
using System.Collections;
using System.Collections.Generic;

public class ScrollBanner: MonoBehaviour {
  
  private int bannerCount = 4;  // バナーの数
  private int nowBanner = 0;        // 現在のバナーの番号
  private float changeBannerTime = 3.0f;    // バナーが切り替わる時間
  private float nowChangeBannerTime = 0f;       // バナーが切り替わる現在時間
  private List<Transform> bannerList;          // バナーのTransformのリスト
  private List<UISprite> lightList;            // ライトのUISpriteのリスト
  private UICenterOnChild center;              // ScrollViewにアタッチされたUICenterOnChild

  // バナーのspriteNameのリスト
  private string[] bannerNameList = new string[]
  {
      "Banner01",
      "Banner02",
      "Banner03",
      "Banner04",
  };

  // ライトのspriteNameのリスト
  private string[] lightNameList = new string[]
  {
      "IconDotActive",
      "IconDotInactive",
  };

  // ライトのOnOff
  private enum LightStatus
  {
      ON,
      OFF
  }

  void Awake () {
      nowChangeBannerTime = 0;
      bannerList = new List<Transform>();
      lightList = new List<UISprite>();
      center = GetComponent<UICenterOnChild>();

      // バナーとライトの作成
      for(int i = 0; i < bannerCount; i++)
      {
          GameObject banner = Instantiate(Resources.Load("Prefabs/Banner")) as GameObject;
          banner.transform.parent = transform;
          banner.transform.localScale = Vector3.one;
          banner.GetComponent<UISprite>().spriteName = bannerNameList[i];
          banner.name = "Banner" + i;
          bannerList.Add(banner.transform);

          GameObject light = Instantiate(Resources.Load("Prefabs/Light")) as GameObject;
          light.transform.parent = transform.parent.FindChild("Lights");
          light.transform.localScale = Vector3.one;
          UISprite lightSprite = light.GetComponent<UISprite>();
          if(i == 0)
              lightSprite.spriteName = lightNameList[(int)LightStatus.ON];
          else
              lightSprite.spriteName = lightNameList[(int)LightStatus.OFF];
          lightList.Add(lightSprite);
      }

      // ドラッグの際のデリゲート関数指定
      center.onCenter = DragBanner;
  }

  void Update () {
      // 一定時間でバナーが切り替わる処理
      nowChangeBannerTime += Time.deltaTime;
      if(nowChangeBannerTime > changeBannerTime)
      {
          nowChangeBannerTime = 0;
          SetPage(++nowBanner);
      }
  }

  // 次のバナーへのボタンクリックイベント
  public void OnClickNext()
  {
      nowChangeBannerTime = 0;
      SetPage(++nowBanner);
  }

  // 前のバナーへのボタンクリックイベント
  public void OnClickPrev()
  {
      nowChangeBannerTime = 0;
      SetPage(--nowBanner);
  }

  // バナーがドラッグされて切り替わった際に呼ばれるイベント
  public void DragBanner(GameObject obj)
  {
      int bannerNo = int.Parse(obj.name.Replace("Banner", ""));
      if(bannerNo == nowBanner) return;
      SetPage(bannerNo);
  }

  // バナーとライトを切り替える処理
  public void SetPage(int no)
  {
      if(no >= bannerCount) nowBanner = 0;
      else if(no < 0) nowBanner = bannerCount - 1;
      else nowBanner = no;
      // バナーの移動
      center.CenterOn(bannerList[nowBanner].transform);
      for(int i = 0; i < bannerCount; i++)
      {
          if(i == nowBanner)
              lightList[i].spriteName = lightNameList[(int)LightStatus.ON];
          else
              lightList[i].spriteName = lightNameList[(int)LightStatus.OFF];
      }
  }
}

今回の感想

なれると簡単なんだけど最初の一回使い方を覚えるまでが時間かかるよね・・・。
そんなこんなで今回はここまで