NGUIでよくありそうなスクロールするバナー
今回はNGUIでよくあるスクロールするバナー作ってみました。
こんなかんじのです</a>
機能としては
- 左右のボタンクリックでバナーが切り替わるです
- ドラッグでバナーを切り替えられる
- 一定時間でバナーが切り替わる
です。
##シーンの構成
- Lights:現在ページのどっとアイコン画像が入る空のGameObject
- Scroll View:バナーが入るScrollView
- Pager:次へ前へのボタン画像が入っている空GameObject
- BtnNext:次のバナーへのボタン
- BtnPrev:前のバナーへのボタン
###Lightsの設定
UIGridをアタッチし、サイズなどを任意に指定
###Scroll Viewの設定
メニューから作成したScroll ViewにUICenter On ChildとUIGridを追加
さらに今回自分でロジックを書いた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
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];
}
}
}
##今回の感想
なれると簡単なんだけど最初の一回使い方を覚えるまでが時間かかるよね・・・。
そんなこんなで今回はここまで