UGUI实现关卡选择的滚动图

首先创建如下的UI关系:

其中每个Tollgate都是Image,选一个背景图片。

其中Panel的宽高设置为2000*230,然后每张图(Image)设置为500*230TopPanel设置为500*230,所以有四张图。


 

TopPanel添加ScrollRect组件和Mask组件。

ScrollRectContent拉进Panel作为显示的内容,把VerticalHorizontal不勾选

新建一个ScrollBar,拖进Hotinzontal scrollbar

 

下一部运行一下,看能不能拖动Scrollbar 横向改变显示内容。

可以的话就可以把Scrollbar隐藏掉,然后用脚本控制scrollbarValue值。

其中点击左右按钮,就动态改变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值,这就有思路实现手机上关卡滚动图拖动效果了吧。

 

 

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值