Unity 使用UGUI制作简单的血条

效果图

在这里插入图片描述

首先

首先创建一个画布Canvas,右键Canvas选择UI,再选择Slider,打开Slider发现下面有三个控件。
在这里插入图片描述
Background不用说了,就是设置背景的。Fill Area就是填充整个Slider,在这里可以选择填充的颜色之类的。Handle Slide Area就是滑标。

第二步

我们将Handle Slide Area删除,因为血条不需要滑标这种东西。之后我们点击Slider,在他的Inspector里面,我们可以找到Min value,Max value,这两个当然代表Slider的最小值与最大值了,我们现在可以把它看为血量的值,那么我们将Max value设为10.继续看下去,我们发现有个Wholes Number选项,这个代表Silider的value值是否以整数的形式改变,我们可以把它打钩。再看下去又发现了一个有趣的东西Direction,这个应该是指填充的slider 的方向吧,我们选择Right To Left ,因为我希望血条消失的方向是从左到右的,也就是刚好与血条填充方向相反。最后设置成下面这个样子
在这里插入图片描述

第三步

之后我们点击 Fill Area,在他的Rec Transform里面点击左上角的框框
在这里插入图片描述
选择右下角的框框
在这里插入图片描述
最后将Left ,Right改为0
在这里插入图片描述
再点击Fill Area 里面的Fill控件
在这里插入图片描述
按照上面的方法将Left 和Right改为0
在这里插入图片描述

最后

最后,我们将Fill的color改为红色,再将他的Image Type 改为Tiled,也就是让他以平铺的形式填充Slider。让我们运行游戏,然后改变Slider的value,发现一个血条制作完成
在这里插入图片描述
至于要让血条在哪个位置显示,这个就要看个人需要了。

  • 5
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值