专栏首页韩东吉的Unity杂货铺零基础入门 18: UGUI Slider

零基础入门 18: UGUI Slider

现在教程的思路是按照UGUI的组件进行逐一的讲解,先是在Unity里的操作设置,以及代码段的操作控制。上一篇Toggle讲解之后,这篇就是UGUI里的Slider组件了。

进入正题


在游戏中,slider也是很容易看见的,比如说下面的效果最容易在Loading看到

以上图Loading为例,在游戏或者项目加载中,可以用这种进度条来告诉用户当前正在加载。图中的进度条就是用Slider制作的。

知道了效果以后,我们来看看Unity里的Slider如何使用。

首先,我们在Unity里创建一个Slider,然后来看看他的结构。

如上图,可以看出Slider的创建过程和父子级关系展示。这里有个小技巧,层级关系嵌套比较复杂的时候,如果想看到全部内容,可以按住alt然后打开父级即可展开看到全部子节点。收缩也是一样的,大家一试便知

然后再看一下Slider这个组件的内容。

可以看到,其实slider包括之前的toggle,和button这些组件都有共同之处,就是交互选项以及动画Trasition选项都是具备的。从Fill Rect开始才是Slider这个组件的独有之处。

下面我来解释下Slider这几个特殊属性的意思。

Fill Rect:是填充的区域。从上图的效果图可以看出来,黄色的进度条就是FilleRect。

Handle Rect:最前面的小兔子就是HandleRect显示

Direction:是进度条的方向

Min Value:最小值

Max Value:最大值

Whole Numbers:勾选后只能支持整数value

value:进度条数值。

知道上面这些以后,我们修饰下新创建的slider。将几张图片进行替换。

然后看下替换后的显示效果。

如上图,我们拖动value,可以看到进度条按照我们设置的方向从左到右移动。所以相信大家也知道,控制slider这个组件移动的关键点在于对value的控制。

这里有另外一个问题大家需要知道,如果大家在制作进度条的时候,要把交互选项勾选掉。不然用户就可以通过手托来控制我们的进度条进度了。

如下图。我不勾选掉交互选项。运行后可以手动控制进度。

很明显这不是我们要的效果。只要我们把交互选项去掉,就可以了。

知道了如何在编辑器下控制Slider以后,老套路,创建个脚本,公开一个slider,然后将我们创建的slider拖动上去。

然后在代码里创建一个slider,公开出去,将脚本挂到canvas上。slider拖动到脚本的公开slider上。套图如下。

完成上面的步骤以后,我们就把脚本创建的slider和在编辑器下创建的slider做了关联。

然后我们在脚本里去设置slider的进度条。

回到Unity来运行查看效果。

从脚本中可以看出,不光是value,其他的属性也是可以点出来的。

理论上来说,这节的分享课程就应该结束了,但是考虑到一些同学可能会有需要进度条功能的实现。所以这里稍微写个几行代码,实现进度条的自动移动。

文字描述我就不写了,我会在下面的Gif图里把注释标注上。

第一步

第二步

第三步

第四步

第五步,第五步实际是加注释,哈哈

好了,这样就ok了,然后我们回到Unity里来看下。默认speed值为0。

当speed为0的时候,我们运行项目。

可以看出,当speed值为0,进度条并没有开始运动,而只有Start函数里的重置起了作用,现在我们为speed赋值为1。重新运行。

好了,今天的slider分享也非常简单。

大家下期见。ヾ( ̄▽ ̄)Bye~Bye~

本文分享自微信公众号 - 韩东吉的Unity杂货铺(DeveloperJimin),作者:Jimin

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-03-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Unity杂货铺 2 《Align View To Selected Object》

    在Unity的GameObject菜单栏中,有针对于Align的快捷键,但是唯独少了Align View To Selected的快捷键,那如果想在Scene窗...

    韩东吉
  • Unity杂货铺 2 《Align View To Selected Object》

    在Unity的GameObject菜单栏中,有针对于Align的快捷键,但是唯独少了Align View To Selected的快捷键,那如果想在Scene窗...

    韩东吉
  • 零基础入门 45:使用图片字体第二步,关联Unity

    Hello,今天要给大家分享的是在Unity里使用图片字体的第二步,也是最后一步,就是关联Unity。

    韩东吉
  • 立等可取的 Vue + Typescript 函数式组件实战

    不同于面向对象编程(OOP)中通过抽象出各种对象并注重其间的解耦问题等,函数式编程(FP) 聚焦最小的单项操作,将复杂任务变成一次次 f(x) = y 式的函数...

    江米小枣
  • Java 应用使用 Docker 的入门指南:建立一个 CI/CD 流水线

    Docker 已经非常出名并且更多的组织正在转向基于 Docker 的应用开发和部署。这里有一个关于如何容器化现有 Java Web 应用以及使用 Jenkin...

    LinuxSuRen
  • JSTL的核心库简单使用

    其实看了前面的那篇文章 《JSTL的EL表达式简单使用》 <http://www.the5fire.com/JSTL的EL表达式简单使用.html>_ ,再结合...

    the5fire
  • python sleep

    Python 编程中使用 time 模块可以让程序休眠,具体方法是time.sleep(秒数),其中"秒数"以秒为单位,可以是小数,0.1秒则代表休眠100毫秒...

    用户7886150
  • Redis

    py3study
  • Windows下安装etcd集群及zRPC的简单使用

    etcd是CoreOS团队于2013年6月发起的开源项目,它的目标是构建一个高可用的分布式键值(key-value)数据库。etcd内部采用raft协议作为一致...

    独行猫A
  • ZooKeeper快速入门系列(4) | Zookeeper分布式安装部署

      此篇是在Hadoop分布式环境搭建(简单高效~)这篇博文的基础上进行搭建的,如果有不会的同学可自行查看操作。同时,如果缺少Zookeeper包的同学可上博主...

    不温卜火

扫码关注云+社区

领取腾讯云代金券