制作进度条(UISlider)
怎样判断是否应当使用进度条
用进度条的主要目的是为了用一根管子的充满程度来直观地表示某种数值的百分比,进度条分为可拖动和不可拖动两种。
可拖动进度条和不可拖动进度条的原理几乎是一模一样,唯一的区别是可拖动进度条上多了一个拖动快和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)的更多相关文章
- Unity3D NGUI制作进度条
利用GUI可以制作进度条,但是NGUI更加方便 我是用的NGUI3.5.3, 先找到NGUI Slider的预制体,利用自带的UISlider来制作. 主要是利用UISlider的Value来控制进 ...
- html5中的progress兼容ie,制作进度条样式
html5新增的progress标签用处很大,它可以制作进度条,不用像以前那样用css来制作进度条! 一.progress使用方法 progress标签很好使用,他有两个属性,value和max,va ...
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
- 纯CSS3制作进度条源代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- js - 预加载+监听图片资源加载制作进度条
这两天遇到一个新需求:一个一镜到底的h5动画.因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕.即处理预加载. 总结下来,下次这种需求需要提前注意以下几点: 一.图片而不是背景图 本 ...
- easyui制作进度条案例demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- NX二次开发-BlockUI对话框嵌套MFC对话框制作进度条
半年前在一些QQ群看到有大神NX二次开发做出了进度条,那个时候我还不会弄,也不知道怎么弄得,后来断断续续得研究了一下,直到今天我把它做出来了.内心还是很喜悦的!回想自己这两年当初从没公司肯给我做NX二 ...
- CSS3制作同心圆进度条
1.css代码 此处在制作进度条时,是旋转进度条的半圆(红色),背景使用灰白(如果使用红色作为背景,旋转灰白遮罩,在浏览器中可能会有渲染bug) .wrapper{ display:block;pos ...
- 使用 new XMLHttpRequest() 制作下载文件进度条
mui 进度控件使用方法: 检查当前容器(container控件)自身是否包含.mui-progressbar类: 当前容器包含.mui-progressbar类,则以当前容器为目标控件,直接显示进度 ...
随机推荐
- iOS 常见知识点(三):Lock
iOS 常见知识点(一):Runtime iOS 常见知识点(二):RunLoop 锁是最常用的同步工具.一段代码段在同一个时间只能允许被有限个线程访问,比如一个线程 A 进入需要保护代码之前添加简单 ...
- MySQL(2):SQL语言的分类
SQL:Structured Query Language (结构化查询语言) 分类: 1.数据操作(管理)语言:直接对数据进行操作:(DML:Data Management Language) ...
- RadioGroup&RadioButton
RadioGroup提供多选一机制:属性orientation:“vertlcal” or “horizontal” @Override public void onCheckedChanged(Ra ...
- JAVA_eclipse 保留Java文件时自动格式化代码和优化Import
Eclipse 保存Java文件时自动格式化代码和优化Import Eclipse中format代码的快捷方式是ctrl+shift+F,如果大家想保存 java文件的时候 自动就格式化代码+消除不必 ...
- 圆满完成Web安全测试培训课程广州公开班!
圆满完成Web安全测试培训课程广州公开班! http://gdtesting.com/news.php?id=187 下期<Web安全测试最佳实践>公开课通知:8月9.10日地点:广州 课 ...
- java基础常识
现在总结一些经常接触到的java名词 一:java技术分类 javase:java standard editor:java标准版,主要定义java经常使用的API(Application Progr ...
- JMS简介
任何一个系统从整体上来看,其实质就是由无数个小的服务或事件(我们可以称之为事务单元)有机地组合起来的.对于系统中任何一个比较复杂的功能,都是通过调用各个独立的事务单元以实现统一的协调运作而实现的.现在 ...
- 调用java的webservice返回null
When you try invoke a Java/Axis Web Service from a proxy class generated by Visual Studio 2005 or Vi ...
- JavaScript 一个等号 两个等号 三个等号的区别
一个等号 =:表示赋值 : 两个等号 ==:先转换类型再比较 : 三个等号 ===:先判断类型,如果不是同一类型直接false.
- 【原创】java 流星划过天空
import java.awt.Color; import java.awt.Graphics; import java.awt.image.BufferedImage; import javax.s ...