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
    评论
故事简介丑小鸭生来就很丑,谁都不喜欢它,从小被其他鸭子欺负。它无奈离开了妈妈,拿上一把猎枪,独自流浪,风餐露宿。每当遇到各种怪物而子弹不够用时,丑小鸭只能通过自己的血肉之躯踩死怪物。路上只能靠水果和蔬菜维持体力,无聊时也能抬头数星星。翻山越岭,逢水架桥,勇闯空中栈道和独木桥,踩过蹦床,躲过电锯,钻过加农炮,坐过火箭,穿过枪林弹雨,在极度艰苦的条件下大战终极BOSS。最终,丑小鸭占领了一座豪华城堡,里面住着它心仪的白富美(其实也是个丑小鸭),它在夜色降临之前,轻轻关上门,打开灯,结束了流浪生涯,此时天空绽放绚烂的烟花,拉开幸福生活的序幕......这个故事告诉我们:只要你肯奋斗,我命由我不由天 时长课程分为上下两部,共64节课(21.1小时)其中,上部29节课(8.5小时),下部35节课(12.6小时)课程特色对初学者友好,初次遇到新技术会详细讲解全程直播,坚决不在直播外偷偷修改展示所有细节,手把手教学游戏元素完整丰富,共3张地18个关卡代码和文档开源,github托管地址 https://github.com/sailings/DuckAdventure完善的售后支持涵盖实战中常用的知识点Physics,刚体,碰撞,弹簧体Mecanim,动画状态机,动画融合,动画层Animation,动画编辑与录制单例模式协程Dotween粒子特效射线检测键盘和移动端输入Cinemachine相机跟随,Confiner扩展UGUI常见控件,HUD屏幕自适应地关卡解锁关卡滑动背景滚动子弹轨迹计算音效管理场景编辑数据及上下文存储大纲丑小鸭历险记——趣味玩转unity2d游戏开发(下)  1.背景设置原理解析2.背景设置以及云彩,山,树的滚动3.游戏状态菜单4.暂停、恢复、重新开始5.主菜单的状态切换,地选择6.地解锁7.关卡列表展示8.关卡列表左右滑动9.关卡进入,解锁,关卡的最佳成绩设置10.通关界面UI设计以及显示11.通关界面的数值更新、加载下一关12.通关界面动画效果13.移动端输入控制14.音效(上)15.音效(下)16.场景整理与规划,总分计算,地形编辑17.关卡W1-1(丛林)18.关卡W1-219.关卡W1-320.关卡W1-421.关卡W1-522.关卡W1-623.关卡W1-724.关卡W1-825.关卡W1-926.关卡W1-1027.关卡W1-1128.关卡W1-1229.关卡W2-1(荒漠)30.关卡W2-231.关卡W2-332.关卡W3-1(冰雪)33.关卡W3-234.关卡W3-335.游戏打包、课程总结
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值