Unity圆环进度条制作
来源:互联网 发布:flac转wav软件 mac 编辑:程序博客网 时间:2024/04/19 07:21
0. 背景
最近有个在Unity中制作圆环进度条的需求,并在圆中显示进度数值,类似于图1:
图1. 圆环进度条
平时制作直线的进度条比较多,突然要求做个圆环的有些不适应。不过,这个需求google一下其实大量的解答就出来,关键字"unity circle progress bar"
,于是我采用了 Unity5 Radial Progress Bar Tutorial HD - YouTube 这个方法,有兴趣的同学可以去看看,接下来我简要叙述一下制作的方法。
1. 制作步骤
a). Unity版本
需求制作使用Unity5的UGUI的新GUI组建(UGUI自Unity4.6版本出现的)。
b). 新建Canvas
a). 在菜单栏GameObject/UI/Canvas
,新建Canvas
,如图2。
图2
c). 新建circleProcessBar
b). 同理,在Canvas中新建一个Create/UI/Image
中新建一个image,作为Canvas子物体,并命名为circleProcessBar
,如图3。
图3
d). 新建circleProcessBar/process
c). 在circleProcessBar
中创建一个image,作为circleProcessBar
第一个子物体,并命名为process
。这个Image主要的功能是以类似雷达扇形扫描形式,作为圆环进度条最核心的基础GameObject。
I) 在此物体process
的Image组件中,设置Source Image
为Unity自带的Knob
;
II) 在Color中随便选择一种颜色,本文中选择
{ "R" : 37, "G" : 237, "B" : 230, "Alpha" : 255}
III) 选择后会出现ImageType
属性,分别选
{ "ImageType" : "Filled", "FillMethod" : "Radial 360", "FillOrigin" : "Top", "Clockwise" : False}
如图4所示。
图4
这时候,修改FillAmout
属性,就可以做成类似雷达扇形扫描的进度,如图5。但是我们希望是圆环,并不是扇形。
图5
e). 新建circleProcessBar/innerCircle
d). 在circleProcessBar
中再创建一个image,作为circleProcessBar
第二个子物体,并命名为innerCircle
。该物体的作用是:覆盖前面的process
,将扇形进度变成圆环进度。将图3中的Assets中innerCircle.png
拖入Image组件的SourceImage
中,并将size设置为:
{"width" : 112, "height" : 112}
f). 新建circleProcessBar/indicator
e). 在circleProcessBar
中创建一个Text,作为circleProcessBar
第三个子物体,并命名为indicator
。
该物体的用作是:显示圆环进度值。为能够清楚显示,调整indicator的属性。
{ RectTransform.Size : {"width": 160, "height" : 160} RectTransform.Scale : {"x" : 0.5, "y" : 0.5}, Character.FontStyle : 55, Paragraph.Alignment : ("center", "middle"), Color : {"R" : 79, "G" : 227, "B" : 139}}
设置好后,整个hierarchy
如图6所示。
图6
g). 新建circleProcess.cs
f). 新建C#脚本-circleProcess.cs
,并拖至物体circleProcessBar
,作为其的一个脚本组件。
I) 声明在Unity设置的属性:
[SerializeField]float speed;[SerializeField]Transform processTrans;[SerializeField]Transform indicatorTrans;
II) 设置speed
为0.1,processTrans
为proces
物体的transform,indicatorTrans
为process
物体的transform。
III) 编写Update函数,是的环形进度在设置目标进度后SetTargetProcess
之后,能够有一段时间的动画。
// Update is called once per frame void Update () { if (currentAmout < targetProcess) { Debug.Log("currentAmount:" + currentAmout.ToString()); currentAmout += speed; if(currentAmout > targetProcess) currentAmout = targetProcess; indicatorTrans.GetComponent<Text>().text = ((int)currentAmout).ToString() + "%"; processTrans.GetComponent<Image>().fillAmount = currentAmout/100.0f; } }
h). Unity Play
最终的效果如图7所示。
图7
2. 总结
这样就达到了我们需求了,O(∩_∩)O哈哈~,.unity, cs, 资源文件,请移步csdz的gitbub下载。
- Unity圆环进度条制作
- 【Unity】制作圆形进度条
- 圆环进度条
- Unity制作异步加载进度条
- unity 进度条制作:Slider,Scrollbar
- css3带缺口圆环的步骤条进度条动画制作
- CAShapeLayer绘画圆环,圆环进度条
- 【Unity&NGUI】圆环血条制作&以及多层圆环血条的实现
- 【Unity】场景异步加载的进度条制作
- 【Unity】场景异步加载的进度条制作
- 【Unity】场景异步加载进度条的制作
- ios 画圆环进度条
- h5圆环进度条
- 圆环形进度条
- 自定义圆环进度条
- canvas绘制圆环进度条
- 自定义圆环进度条
- 自定义PointerProgressBar--圆环进度条
- Ubuntu 12.04 快捷命令整合
- Tomcat性能调优-让小猫飞奔
- long long 输入
- 关闭 leetcode_c++:哈希:Valid Sudoku(036)
- ReactJS学习系列课程(React 性能优化及immutable使用)
- Unity圆环进度条制作
- Java中子类和父类的实例化顺序
- 使用无监督聚类的关键帧提取算法
- HDOJ 1817 Necklace of Beads
- 47、JavaScript的运动----完美运动框架的应用----放大缩小图片的实现(布局转换的实现)
- 3秒后跳转到登录界面
- cmake用法和注意
- Java类中修饰符
- Qt学习七:控件四:表格控件、网格布局、