制作进度条(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类,则以当前容器为目标控件,直接显示进度 ...
随机推荐
- linux实例 批量修改图片文件名
1.如10.11一批这样的目录,10.11 10.12等等 然后里面的图片.jpg文件要修改成对应的日期.jpg,也就是说 编程1011.jpg这样的文件名 示例如下: #!/bin/bashfor ...
- Android(java)学习笔记120:Android中的Application类用法
1.简介 如果想在整个应用中使用全局变量,在java中一般是使用静态变量,public类型:而在android中如果使用这样的全局变量就不符合Android的框架架构,但是可以使用一种更优雅的方式就是 ...
- 会话状态Session解析以及原理分析
我们知道web网站在客户端存储数据有三种形式:1. Cookie 2. hidden(隐藏域) 3.QueryString 其中viewstate什么的都是通过第二种方式隐藏域存储滴. 客户端存储 ...
- [转]Unable to build: the file dx.jar was not loaded from the SDK folder!
本文转自:http://www.developerbits.com/tag/unable-to-build-the-file-dx-jar-was-not-loaded-from-the-sdk-fo ...
- HuffmanTree && HuffmanCode
如何构造HuffmanTree? Huffman算法: (1)根据给定的n个权值{w1, w2, ...,wn}构成n棵二叉树集合
- 如何在Xilinx ISE中使用TCL提高工作效率
http://wenku.baidu.com/link?url=jxtsPLGUlWwYuD8TtfWYYU_NhY5Qty3rx8ZDLCkINLe39JRGb90V5HoJhnkn9r_PQ6vZ ...
- (原创)openvswitch实验连载2-cisco模拟器IOU-Web安装及网络环境配置
IOU的使用可以选择自己到官网https://docs.google.com/file/d/0B2AgRhS2cfxCQ01tN2NrQ0pvNUk/edit下载iou-web 软件,然后部署在lin ...
- 《Pro Git》学习笔记
1.Git远程模型示意图 Remote:远程仓库 Repository:本地仓库 Index:暂存区 workspace:当前工作区 2.取得Git仓库 2.1 初始化新仓库 git init ...
- linux 文本编辑器 vim 基本操作
三种模式之间转换: 一般模式 可用于光标移动.复制粘贴.查找替换 "vim.txt"表示文件名 8L 表示8行 , 80C 表示80个字符 移动光标常用操作: h .j. k. l ...
- 使用for xml path 分组查询
SELECT OLevel, WorkOrgID, WorkOrgName, PlanNum, PlanFinishNum, PlanUnFinishNum, PlanCanceledNum, P ...