怎样判断是否应当使用进度条

  用进度条的主要目的是为了用一根管子的充满程度来直观地表示某种数值的百分比,进度条分为可拖动和不可拖动两种。

  可拖动进度条和不可拖动进度条的原理几乎是一模一样,唯一的区别是可拖动进度条上多了一个拖动快和BoxCollider来接收事件,而不可拖动的进度条只能显示一个数字的百分比,无法由玩家去操控。

  在判断是否应该使用进度条时,有以下的规律可以遵循:

  (1)如果某一种值,它有最大值,需要表达它当前的值的占比,这个时候用进度条会非常直观。此时应当用不可拖动的进度条。例如:角色的生命值、法力值、角色升级经验等。

  (2)如果某一种值,它有最大最小值,希望玩家去自由拖动设置,如音量调节、亮度调节等,就可以使用可拖动的进度条。

  可拖动进度条和不可拖动进度条,它们都有三大核心要素构成:底槽Sprite、进度条Sprite、滑动块。

  

创建进度条

  1.第一种方式:自己拼装出一个进度条

  (1)创建一个底槽Sprite。

  (2)为底槽Sprite附加一个UISlider组件。附加方法为AddComponent->NGUI->Interaction->NGUI Slider。

  (3)在底槽Sprite下创建一个进度条Sprite作为子物体,调整好尺寸用以和底槽相吻合。

  (4)在底槽Sprite下创建一个滑动块Sprite作为子物体,然后在底槽Sprite上Attach一个BoxColllider。

  (5)将底槽Sprite拖动到自身UISlider组件上的Background选项中,将进度条Sprite拖动到底槽的UISlider组件上的Foreground选项中,将滑动块Sprite拖动到底槽的UISlider组件上的Thumb选项中,这样三大要素就齐备了。

  (6)如果希望显示当前进度的百分比数字,则在滑动块下创建一个Label(如果不希望数字的位置跟着滑动块走,也可以在别的地方创建Label),然后将该Label物体拖动到底槽的UISlider组件的OnValue Change模块下的Notify中,然后在出现的Method选项中选择UILable->SetCurrentPercent方法。

  

  2.第二种方式:使用PrefabToolBar直接创建

  在新版本的NGUI中,它自身制作了一些常用的UI控件的预设,当需要使用时,直接拖动预设到场景中,就可以直接完成创建。

  在Unity顶部菜单中选择NGUI菜单,选择Open->PrefabTooBar,会弹出NGUI已经制作好的一些预设。

  拖动其中想要的预设到UI Root下(或者其他的UI节点下),就可以完成创建了。

  

核心组件UISlider设置

  1.Value

    进度值,这是为了显示当前数值在"总槽"里的百分比。

  2.Alpha

    透明度,默认为1。

  3.Steps

    每次变动的步伐大小。默认为0,0就是无限制,也就是Value值可以是任意一个值,如果设置了,那么Value就会"一段一段的"变化。

    它的填值效果为"关键点数量的概念",例如,填入5,则代表完整进度条只有5个点,相当于进度条的值将会只有:0、0.25、0.5、0.75、1共5个值。

  4.Appearance模块

    Foreground

      这是进度条上层表示进度的Sprite,将它拖动到这里就算完成了设置。Foreground的长度会随着Value的裱花而自动变化。

    Background

      这是进度条的底槽Sprite,将它拖动到这里就算完成了设置。底槽的长度是不会发生变化的。

    Thumb

      这是拖动块的设置,将任何一个物体拖动到这里来,它就将随着Value的变化而发生位置的变化。

    Direction

      进度条的正方向,默认为从左至右。里面提供了4中选择:从左至右、从右至左、从上到下、从下到上。

  5.On Value Change

      这是进度条发生变化时的一个回调函数,当Value值发生变化时,就会执行这里的函数。

    值得注意的是,如果希望在值发生变化时,自动改变一个百分比数字(Label)的显示,NGUI提供了一个简单的方法:将要显示该进度条百分比的Label物体拖入到Notify中,然后再Method栏中选择UILabel.SetCurrentPercent方法,这样,当进度条的Value值改变时,它就能自动地改变这个Label文本的显示。

进度条的BoxCollider说明

  BoxCollider只有附加到底槽上才有用。

  如果没有BoxCollider,进度条无论如何都无法进行拖动设置。

  BoxCollider将会接收进度条上任何一个位置的消息来直接设置进度。例如,不去拖滑动块,直接在90%的位置点一下,那么进度会直接变为90%。

  BoxCollider和拖动块Thumb没有必然联系,如果没有BoxCollider,那么即使有拖动块,也无法通过拖动和单击等来设置进度。

  只要有BoxCollider,即使没有拖动快,也能直接拖动和单击来设置进度位置。

制作进度条(UISlider)的更多相关文章

  1. Unity3D NGUI制作进度条

    利用GUI可以制作进度条,但是NGUI更加方便 我是用的NGUI3.5.3, 先找到NGUI  Slider的预制体,利用自带的UISlider来制作. 主要是利用UISlider的Value来控制进 ...

  2. html5中的progress兼容ie,制作进度条样式

    html5新增的progress标签用处很大,它可以制作进度条,不用像以前那样用css来制作进度条! 一.progress使用方法 progress标签很好使用,他有两个属性,value和max,va ...

  3. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  4. 纯CSS3制作进度条源代码

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. js - 预加载+监听图片资源加载制作进度条

    这两天遇到一个新需求:一个一镜到底的h5动画.因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕.即处理预加载. 总结下来,下次这种需求需要提前注意以下几点: 一.图片而不是背景图 本 ...

  6. easyui制作进度条案例demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. NX二次开发-BlockUI对话框嵌套MFC对话框制作进度条

    半年前在一些QQ群看到有大神NX二次开发做出了进度条,那个时候我还不会弄,也不知道怎么弄得,后来断断续续得研究了一下,直到今天我把它做出来了.内心还是很喜悦的!回想自己这两年当初从没公司肯给我做NX二 ...

  8. CSS3制作同心圆进度条

    1.css代码 此处在制作进度条时,是旋转进度条的半圆(红色),背景使用灰白(如果使用红色作为背景,旋转灰白遮罩,在浏览器中可能会有渲染bug) .wrapper{ display:block;pos ...

  9. 使用 new XMLHttpRequest() 制作下载文件进度条

    mui 进度控件使用方法: 检查当前容器(container控件)自身是否包含.mui-progressbar类: 当前容器包含.mui-progressbar类,则以当前容器为目标控件,直接显示进度 ...

随机推荐

  1. android学习——popupWindow 在指定位置上的显示

    先看效果图,免得浪费大家时间,看是不是想要的效果 . 直接上代码 ,核心方法. [java] view plaincopy private void showPopupWindow(View pare ...

  2. Android Partitions Explained: boot, system, recovery, data, cache & misc

    from: http://www.addictivetips.com/mobile/android-partitions-explained-boot-system-recovery-data-cac ...

  3. mac mysql error You must reset your password using ALTER USER statement before executing this statement.

    安装完mysql 之后,登陆以后,不管运行任何命令,总是提示这个 step 1: SET PASSWORD = PASSWORD('your new password'); step 2: ALTER ...

  4. linux命令 --> cd命令

    关于linux的命令这里进行简单的说明一下(简单的说明哦!!) 对于linux和windows基本的操作就是切换目录,因为只有进入目录时,才能看到里面的内容(对于linux这说的不太准确必定还有ls呢 ...

  5. ASP申请单动态添加实现方法及代码

    一个申请单可以包含N个项目,添加申请单时就需要动态加入代码了. 动态Table表格 以下为引用的内容: <table border="0" width="98%&q ...

  6. Xamarin 安装体验

    1.先从官网下载https://www.xamarin.com/downloadXamarin for Visual Studio 2.MAC上下载https://store.xamarin.com/ ...

  7. apache ambari web页面无法访问解决办法

    ambari-server启动成功,但是页面无法访问 作者:Bo liang链接:http://www.zhihu.com/question/34405898/answer/115001510来源:知 ...

  8. C# string.Format格式化时间或货币

    1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) string.Format("{0:C}",0.2) 结果为:¥0.20 (英文操作系统结果:$0 ...

  9. asp.net 中使用JQuery Ajax 上传文件

    首先创建一个网页,网页中添加如下代码. <h3>Upload File using Jquery AJAX in Asp.net</h3> <table> < ...

  10. 使用asp.net上传图片并且裁剪的方法

    工欲善其事,必先利其器,坚持才能更好 这篇文章主要是强调怎么使用asp.net上传图片并且能够裁剪,这个功能主要使用在注册信息的时候需要上传头像并且图片格式很大的时候能够把图片裁剪成更小的图片.下面来 ...