打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
【新提醒】【UI】UGUI实现血条效果

  好久都没写博客了,6月后一直忙于考试复习,之后又忙着找实习,最后也算找到了实习的地方

,目前主要任务是做UI,所以打算写写这方面的心得体会和一些例子


  一般用slider来设置一个进度条或血条的显示效果(其实是我喜欢用这种办法QAQ),比如Windows10调节声音时右边会有一个百分比显示调节的大小;主角生命值等

UGUI中新建一个slider是这样的:

默认的Slider有个拖动滑块,有些挡事。一般的血条,当生命值为0时,应该是空的才对。

于是我们需要改一改。

在改之前我先来说说Slider的组成

从上面的图可以看出

Slider(含有slider组件)= 背景(Image+ Fill Area(空物体)+ Handle Slide Area(空物体)

Fill AreaHandle Slide Area的子物体分别是填充色(Image)和滑动条(Image

看到这里你可能会有一个疑问,那就是为什么不在Fill Area上直接加一个Image组件,Fill Area直接充当填充色多省事。但你要知道子物体锚点的参考系是其父物体,而不是整个窗口。利用空父物体可以较好的控制锚点。第二个好处就是层次清楚,看名字就知道是什么了。当然这里如果你就是不想用空物体其实也没什么,调整好了就OK,具体情况具体对待吧。另外,你可以把Slider拆开来看,发现各个子物体所在的位置关系,像这样:

  •  

    Slider组件上有两个槽分别对应填充色和滑块对象。

    我们是做血条,所以滑块是不需要了,直接删掉

     

    可当我们去掉滑块后,依然不像一个血条,因为当主角的生命值为0时,血条应为空,但改变slidervalue值为0后却是这个样子的

       

    (为了看清楚一些,我把fill改为了红色)

    那么怎么该呢?

    首先把Value的值改为1

    接着让Fill AreaFill一样大小,再调节Fill Area使其和背景图片重合或者一个你比较满意的位置。此时再拖动Value的值试试,是不是Value的值为0的时候没有圆点了呢O(_)O~

     

    接下来我们做一个显示Slider的百分比,也就是数字显示剩余血量

    Slider中也提供了和Button一样的事件机制(其实没有也可以自己加)

    方法和Button一样。但这里并不是在点击的时候调用一次函数,而是Value的值每改动一次就调用一次。

    Slider中添加一个Text

    添加脚本到Text,然后把这个物体拖入槽中选择刚刚自己写的函数即可(注意这里传入的参数value,在选择函数的时候有两个同名的函数,选择不带参的函数)

    (别忘了using UnityEngine.UI;注意不要把获取组件的语句放在Start中,否则只在第一次获取了数值,这里需要每次改变都刷新一次

    选择Editor and Runtime可以在编辑模式下也实时改变数值。

    最后的显示结果。

    其实,这里最好还是用于调节声音大小,如果你要用作血条,可以用image.fillAmount来改变数值而不是改变slider的value的数值(这是gdzzzyyy 提醒的)

    希望这篇文章对你有帮助O(∩_∩)O~                                            

    本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
    打开APP,阅读全文并永久保存 查看更多类似文章
    猜你喜欢
    类似文章
    【热】打开小程序,算一算2024你的财运
    软件工程_基于Unity3d的多人合作游戏开发
    UGUI基础
    【UI系统学习】轻松学会 Unity 的 UGUI基础控件的使用(包括一个简易血条、蓝条设计)
    UGUI:多个按钮只能按一个
    unity4.6学习Ugui中文文档概要
    HTCVIVE开发日志
    更多类似文章 >>
    生活服务
    热点新闻
    分享 收藏 导长图 关注 下载文章
    绑定账号成功
    后续可登录账号畅享VIP特权!
    如果VIP功能使用有故障,
    可点击这里联系客服!

    联系客服