制作进度条(UISlider)

时间:2022-09-18 17:34:01

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

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

  可拖动进度条和不可拖动进度条的原理几乎是一模一样,唯一的区别是可拖动进度条上多了一个拖动快和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 - 预加载&plus;监听图片资源加载制作进度条

    这两天遇到一个新需求:一个一镜到底的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&lpar;&rpar; 制作下载文件进度条

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

随机推荐

  1. 最新JavaScript、Ajax典藏级学习资料下载分类汇总 &lpar;2011年12月21日更新&rpar;

    其他网站开发相关资料            超强HTML和xhtml,CSS精品学习资料下载汇总                                               最新htm ...

  2. Spring Integration - 自动轮询发送手机短信

    Spring Integration 配置 <?xml version="1.0" encoding="UTF-8"?> <beans xml ...

  3. 【BZOJ】2929&colon; &lbrack;Poi1999&rsqb;洞穴攀行(最大流)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2929 题意描述不清..搞得我wa了一发.. 应该是,有1和n的点的边容量都为1,其余随便... 然后 ...

  4. Operand forms

    Operand forms Computer Systems A Programmer's Perspective Second Edition

  5. javascript操作注册表

    try{                     var shell = new ActiveXObject("WScript.Shell"); //读注册表值var  key1  ...

  6. VBoxManage命令详解

    转自:http://zhang-ly520.iteye.com/blog/300606 由于最近工作对vbox有一定涉猎,发现这个写的比较好,先转来,稍有空时再根据自己的心得整理一下. VBoxMan ...

  7. &lbrack;转&rsqb;Axis2创建WebService实例

    以下文章来自http://clq9761.iteye.com/blog/976029,作者clq9761 一.Axis2的下载和安装 1.可从http://ws.apache.org/axis2/ 下 ...

  8. 手动es6编译es5(命令行)

    package.json:"devDependencies": { "babel-cli": "^6.18.0", "babel- ...

  9. Java笔记(day12)

    包: 对类文件进行分类管理:给类提供多层命名(名称)空间:写在程序文件的第一行:类名的全称是 包名.类名包也是一种封装形式: package protected必须是成为其子类,才能继承import导 ...

  10. javascript 常用的正则表达式验证表单

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