Unity3d学习笔记-无限循环滚动背景（完整的商店广告牌组件）

在游戏项目中我们常常看到商城的广告牌，几张广告图片循环滚动，类似跑马灯，现在我将讨论一种实现方法，并提供一个管理类，大家可以直接使用。

实现原理：背景图片循环滚动的原理很简单：两张图片向一个方向移动，当达某张图片到临界区域时将图片放在后面，依次循环。

在实际项目中，广告牌显示的图片数量不确定，例如某个假期活动会上很多新品，此时我们需要动态的创建显示的图片（一般在配置表读取数据），如果需要显示分类标签还得动态生成分类标签。

综上所述，一个完整的广告牌组件应该具有以下功能：
- 无限循环的滚动背景图片
- 根据读取的数据动态生成图片
- 具有分类标签，根据显示图片动态生成
- *做成一个管理类，方便使用（一个项目中可能多处会用到）

下面谈谈我的方法：
第一步：创建滚动组件AdvertisementScroll，这个组件挂在GameObject上面，接受传递过来的数据，生成显示的图片和分类标签，在Update中实现无限循环滚动。

using System.Collections.Generic;
using UnityEngine;
namespace Assets.Scripts.Client
{ public class AdvertisementScroll : MonoBehaviour{   private float _timer;private bool _isStart;private Vector3 _toggleCenter;private int delDistance;private int _currentPage; //当前页面    private AdvertisementScrollManager.AdvertisementScrollData _itemData;       private List<ToggleData> _toggleList = new List<ToggleData>();        private Vector3 _toLeftPosition;//向左滑动到某个位置public class ToggleData{public string name;public GameObject go;}public AdvertisementScrollManager.AdvertisementScrollData ItemData{get { return _itemData; }set { _itemData = value; }}public void StartScroll(bool createToggle){if (!_isStart){CreateAdvertiseBg();CreateAdvertiseToggle(createToggle);if (createToggle){if (ItemData.ToggleItem != null){ItemData.ToggleItem.GetComponent<UIToggle>().value = true;}                  }               _currentPage = 1;_isStart = true;}        }/// <summary>/// 创建需要显示的图片（需要图片数量，图片精灵名称，图片的宽度，图片左边和右边的显示位置）/// </summary>private void CreateAdvertiseBg(){_toLeftPosition = new Vector3(ItemData.LeftPosition.x - ItemData.SpriteWidth, ItemData.LeftPosition.y, ItemData.LeftPosition.z);for (int i = 0; i < ItemData.MaxPage; i++){GameObject firstSpriteItem;GameObject secondSpriteItem;if (i == 0){firstSpriteItem = secondSpriteItem = ItemData.SpriteItem.gameObject;}else{firstSpriteItem = ItemData.FirstMoveGo.gameObject.AddChild(ItemData.SpriteItem.gameObject);firstSpriteItem.SetActive(false);secondSpriteItem = ItemData.SecondMoveGo.gameObject.AddChild(ItemData.SpriteItem.gameObject);secondSpriteItem.SetActive(false);}firstSpriteItem.transform.localPosition = secondSpriteItem.transform.localPosition = Vector3.zero;firstSpriteItem.name = secondSpriteItem.name = (i + 1).ToString();firstSpriteItem.GetComponent<UISprite>().spriteName = secondSpriteItem.GetComponent<UISprite>().spriteName = ItemData.SpriteName[i];}}/// <summary>/// 创建分页图片,默认不创建（需要分页图片，分页的中间位置，每个分页的间隔）/// </summary>/// <param name="create"></param>private void CreateAdvertiseToggle(bool create = false){if (create){_toggleCenter = ItemData.ToggleCenterPos;delDistance = ItemData.ToggleDistance;       Vector3 firstpoint = _toggleCenter - new Vector3((ItemData.MaxPage / 2f - 0.5f) * delDistance, 0f, 0f);for (int i = 0; i < ItemData.MaxPage; i++){GameObject item;ToggleData toggleData = new ToggleData();if (i == 0){item = ItemData.ToggleItem.gameObject;}else{item = ItemData.ToggleContainer.gameObject.AddChild(ItemData.ToggleItem.gameObject);}item.transform.localPosition = firstpoint + new Vector3(i*delDistance, 0f, 0f);item.name = "toggle" + i;toggleData.go = item;toggleData.name = item.name;_toggleList.Add(toggleData);}}}void Update(){if (!_isStart){return;              }if (Time.frameCount % (30 * ItemData.MoveTime) == 0 && ItemData.MaxPage > 1){if (ItemData.FirstMoveGo.localPosition.x < ItemData.LeftPosition.x - 0.5){ItemData.FirstMoveGo.localPosition = ItemData.RightPosition;}if (ItemData.SecondMoveGo.localPosition.x < ItemData.LeftPosition.x - 0.5){ItemData.SecondMoveGo.localPosition = ItemData.RightPosition;}Transform leftTran = ItemData.FirstMoveGo.localPosition.x < ItemData.SecondMoveGo.localPosition.x ? ItemData.FirstMoveGo : ItemData.SecondMoveGo;Transform rightTran = ItemData.FirstMoveGo.localPosition.x < ItemData.SecondMoveGo.localPosition.x ? ItemData.SecondMoveGo : ItemData.FirstMoveGo;TweenPosition.Begin(rightTran.gameObject, 0.5f, ItemData.LeftPosition, false);TweenPosition.Begin(leftTran.gameObject, 0.5f, _toLeftPosition, false);_currentPage = FixPage(_currentPage);SetPic(rightTran, _currentPage);//SetBtn(leftTran,false);//SetBtn(rightTran,true);               _toggleList[_currentPage - 1].go.GetComponent<UIToggle>().value = true;}}private void SetBtn(Transform tran, bool state){Transform tf = tran.Find("Icon");if (tf != null){tf.gameObject.SetActive(state);}           }private void SetPic(Transform tran, int _currentPage){foreach (Transform t in tran){if (t.name == _currentPage.ToString()){t.gameObject.SetActive(true);}else{t.gameObject.SetActive(false);}}}private int FixPage(int page){page++;if (page > ItemData.MaxPage){page = 1;}return page;}
}
}

第二步：创建管理类AdvertisementScrollManager，将它做成一个单例，调用AdvertisementScroll的方法，开始滚动。

using UnityEngine;
using System.Collections.Generic;
namespace Assets.Scripts.Client
{
public class AdvertisementScrollManager : Singleton<AdvertisementScrollManager>
{  public struct AdvertisementScrollData{public bool IsCreateToggle;       //是否创建分页标签public Transform ToggleItem;      //分页标签public Transform ToggleContainer; //分页标签所在的Panelpublic Vector3 ToggleCenterPos;   //分页标签的中间位置public int ToggleDistance;        //分页标签之间的间隔public Transform FirstMoveGo;     //移动的物体public Transform SecondMoveGo;    //移动的物体public Vector3 LeftPosition;      //移动物体的左边位置public Vector3 RightPosition;     //移动物体的右边位置public Transform SpriteItem;      //显示的图片public int SpriteWidth;           //图片的宽度public string[] SpriteName;       //显示的所有图片在图集中的名称public int MaxPage;               //最大的页面public int MoveTime;              //每隔多少秒移动一次};public void StartAdvertisementScroll(Transform parentTf, AdvertisementScrollData data,bool createToggle = false){if (parentTf != null){UIPanel panel = parentTf.GetComponent<UIPanel>();if (panel == null){return;}AdvertisementScroll scroll = null;Transform tf = parentTf.Find("AdvertisementScroll");if (tf == null){GameObject go = new GameObject();go.name = "AdvertisementScroll";go.transform.parent = parentTf;go.transform.localPosition = Vector3.zero;go.transform.localScale = new Vector3(1, 1, 1);//go.layer = LayerModel.UILayer;tf = go.transform;scroll = tf.gameObject.AddComponent<AdvertisementScroll>();                  }else{scroll = tf.gameObject.GetComponent<AdvertisementScroll>();}scroll.ItemData = data;scroll.ItemData.FirstMoveGo.parent = tf;scroll.ItemData.SecondMoveGo.parent = tf;scroll.StartScroll(createToggle);}}
}
}

第三步：使用。预制体的制作方法就不说了，代码看懂了自然好弄，后面也会附上工程文件。你在任何一个界面需要使用广告牌组件时只需要先设置好数据，然后调用AdvertisementScrollManager中的StartAdvertisementScroll方法就可以了。

using Assets.Scripts.Client;
using UnityEngine;namespace Assets
{
public class AdvertiseScrollSample : MonoBehaviour
{private Transform _firstMoveGo;private Transform _secondMoveGo;private Transform _container;private Transform _toggleContainer;private Transform _spriteItem;private Transform _toggleItem;      void Start (){_firstMoveGo = transform.Find("Panel/Container/First");_secondMoveGo = transform.Find("Panel/Container/Second");_container = transform.Find("Panel/Container");_toggleContainer = transform.Find("Panel/ToggleContainer");_spriteItem = transform.Find("Panel/Container/First/Item");_toggleItem = transform.Find("Panel/ToggleContainer/ToggleItem");OnRefreshData();}void OnRefreshData(){AdvertisementScrollManager.AdvertisementScrollData data = CreateAdvertisementScrollData();AdvertisementScrollManager.Instance.StartAdvertisementScroll(_container,data,data.ToggleContainer);}private AdvertisementScrollManager.AdvertisementScrollData CreateAdvertisementScrollData(){AdvertisementScrollManager.AdvertisementScrollData data = new AdvertisementScrollManager.AdvertisementScrollData();//设置显示图片的数量和滑动的时间间隔data.MoveTime = 10;data.MaxPage = 3;//设置图片的位置信息data.FirstMoveGo = _firstMoveGo;data.SecondMoveGo = _secondMoveGo;data.SpriteItem = _spriteItem;data.SpriteWidth = 884;data.SpriteName = new string[] { "1", "2", "3" };data.LeftPosition = Vector3.zero;data.RightPosition = new Vector3(800, 0, 0);//设置分页标签信息（如果不需要分页标签，可以不用赋值）data.IsCreateToggle = true;data.ToggleItem = _toggleItem;data.ToggleContainer = _toggleContainer;  data.ToggleCenterPos = new Vector3(0,-200,0);data.ToggleDistance = 30;                              return data;}
}
}

Unity3d学习笔记-无限循环滚动背景（完整的商店广告牌组件）相关推荐

unity实现图片轮播效果_unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
Unity3D学习笔记（二、小球滚动吃金币）
源码:键盘方向键操作小球滚动吃金币Unity3D源码下篇:Unity3D学习笔记(三.小球跑酷) 一.颜色材质球创建二.Plane平板创建三.围墙同理二,新建Cube,并调整属性,设立围墙 ...
Unity的ScrollView无限循环滚动
前言此篇文章当作知识学习即可,需要使用循环复用的小伙伴可以尝试博主近期开发的ScrollCircleMaker v1.0,此插件功能比较完整,使用方便,如果遇到问题可以联系我进行修改. 当Scrol ...
Unity3D 学习笔记4 —— UGUI+uLua游戏框架
Unity3D 学习笔记4 -- UGUI+uLua游戏框架使用到的资料下载地址以及基础知识框架讲解拓展热更过程在这里我们使用的是uLua/cstolua技术空间所以提供的UGUI+uLua的 ...
ios之实现自动无限循环滚动视图(1)
ios之实现自动无限循环滚动视图(1) 前言效果展示功能分析全部代码前言 ios实现无限循环滚动主要有两种办法,都利用了UIScrollView,第一种是创建一个很大的UIScrollVie ...
Unity3D学习笔记：粒子特效参数
Unity3D学习笔记:粒子特效参数含义转载 https://blog.csdn.net/asd237241291/article/details/8433534 粒子特效粒子系统检视面板初始化 ...
【Android】ViewPager实现无限循环滚动
最近做的一个项目,客户要求在ViewPager实现的主页面中滑动到最后一页后继续滑动能返回到第一页,也就是实现无限循环滚动,效果如下: 看了下ViewPager没有滑到尽头的回调方法,因此想到的解决方 ...
JQuery图片无限循环滚动源码
平常项目中经常用到图片循环滚动,所以就写些必要的CSS定位,JS基本算法,最后就封装成JQuery图片无限循环滚动插件类,其实本质上是li块无限循环滚动,li块里面不管是图片还是其它内容,都OK的. ...
[jQuery基础] jQuery动效案例(二) -- 图标特效、无限循环滚动(简易轮播图)
图标特效实现效果展示实现步骤第一步(实现静态效果) CSS部分 *{margin: 0;padding: 0; } ul{list-style: none;width: 400px;height ...

Unity3d学习笔记-无限循环滚动背景（完整的商店广告牌组件）

Unity3d学习笔记-无限循环滚动背景（完整的商店广告牌组件）相关推荐

最新文章

热门文章