UGUI实现关卡选择的滚动图
首先创建如下的UI关系：
其中每个Tollgate都是Image，选一个背景图片。
其中Panel的宽高设置为2000*230，然后每张图(Image)设置为500*230，TopPanel设置为500*230，所以有四张图。
给TopPanel添加ScrollRect组件和Mask组件。
ScrollRect的Content拉进Panel作为显示的内容，把Vertical和Horizontal不勾选
新建一个ScrollBar，拖进Hotinzontal scrollbar
下一部运行一下，看能不能拖动Scrollbar 横向改变显示内容。
可以的话就可以把Scrollbar隐藏掉，然后用脚本控制scrollbar的Value值。
其中点击左右按钮，就动态改变Value值。
左右按钮记得绑定事件。
改变代码如下：
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class ScrollRectControl : MonoBehaviour {
public Scrollbar scrollbar;
private float scrollbar_TargetValue;
void Start ()
{
scrollbar_TargetValue = 0f;
}
void Update ()
{
if(scrollbar_TargetValue <= 0)
{
scrollbar_TargetValue = 0f;
}
if(scrollbar_TargetValue >= 0.99f)
{
scrollbar_TargetValue = 1f;
}
scrollbar.value = Mathf.MoveTowards(scrollbar.value,scrollbar_TargetValue,Time.deltaTime);
}
public void RightBtnPressed()
{
scrollbar_TargetValue += 0.33f;
}
public void LeftBtnPressed()
{
scrollbar_TargetValue -= 0.33f;
}
}
虽然这样做有个小Bug，就是图片不切合，有误差...本来算好是0.25不过误差较大，后面改为0.33也是还有无法消除的误差，这个应该是比例没算好。
结果是我把TopPanel的宽高修改为410*230后就OK，不过还是有点小问题咯，不能完全切合，不过将判断条件修改成0.99就可以了。
但是这样子看背景图就有点尴尬了，再稍微调整一下背景图和Tollgate按钮效果才可以比较好。
不过没关系，现在手机游戏一般都是通过计算手指拖动的距离来改变Value值，这就有思路实现手机上关卡滚动图拖动效果了吧。