UGUI实现血条效果

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

在UGUI中新建一个slider是这样的：

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

于是我们需要改一改。

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

从上面的图可以看出

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

而Fill Area和Handle Slide Area的子物体分别是填充色（Image）和滑动条（Image）

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

 

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

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

 

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

   

（为了看清楚一些，我把fill改为了红色）

那么怎么该呢？

首先把Value的值改为1；

接着让Fill Area和Fill一样大小，再调节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的数值