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

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

  可拖动进度条和不可拖动进度条的原理几乎是一模一样,唯一的区别是可拖动进度条上多了一个拖动快和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. 《编写高质量代码—改善java程序的151个建议》知识整理一

    1.用偶判断,不用奇判断 案例:在代码i%2==1?"奇数":"偶数" (java中的求余算法相当于:divided-divided/divisor*divis ...

  2. Debian 7 安装Firefox

    Debian 7默认自带的浏览器叫做 iceweasel,据维基百科介绍是Mozilla Firefox浏览器的一个再发布版,从Debian 4 开始默认安装. 本文内容:安装Firefox.安装Fl ...

  3. Oracle恢复已删除数据

    Oracle恢复已删除的数据,主要有两种方法:SCN和时间戳. 一.通过SCN恢复删除且已提交的数据 1.获得当前数据库的scn号 select current_scn from v$database ...

  4. systemverilog interface

    普通的模块使用法:注意我们这里只实现了部分功能....不是完全的读写模块....     module mem_core(   input logic wen,  input logic ren,   ...

  5. always block內省略else所代表的電路

    真 OO无双 之 真乱舞书 寫程式是很快樂的一件事 Since Sep.15,2006 (筆記) always block內省略else所代表的電路 (SOC) (Verilog) Abstract在 ...

  6. Microsoft JScript 运行时错误: Sys.WebForms.PageRequestManagerParserErrorException无法分析从服务器收到的消息。之所以出现此错误,

    Microsoft JScript 运行时错误: Sys.WebForms.PageRequestManagerParserErrorException: 无法分析从服务器收到的消息.之所以出现此错误 ...

  7. 转:Unity3D的四种坐标系

    World Space(世界坐标):我们在场景中添加物体(如:Cube),他们都是以世界坐标显示在场景中的.transform.position可以获得该位置坐标. Screen Space(屏幕坐标 ...

  8. C#学习笔记7:多态是面向对象的三大特征(封装、继承、多态)之一

    多态: 多态是面向对象的三大特征(封装.继承.多态)之一. 什么是多态? 一个对象表现出多种状态. 多态的实现方法: 1.虚方法: 2.抽象方法: 3.接口. PS:New 关键词可以隐藏父类的方法. ...

  9. ### 学习《C++ Primer》- 8

    Part 8: 面向对象(第15章) // @author: gr // @date: 2015-01-09 // @email: forgerui@gmail.com 一.OOP 面向对象程序设计的 ...

  10. 客官,您的 Flask 全家桶请收好

    http://www.factj.com/archives/543.html Flask-AppBuilder          - Simple and rapid Application buil ...