Unity自定义精致血条制作

先上效果图：

血条的本质还是由slider组件改造而成，利用的是slider中随这value改变而变化Fill Rect的效果。

首先需要两个Image，一个作为血条的背景框子，一个作为血量的填充。

当然如果没有这种边框中间黑色或者镂空的效果，也可以把作为背景的Image弄成渲染成全黑的复制一份，然后贴在原来的血条背景上形成镂空效果。

在Hierarchy面板中分别建立以下UI，图中的blood,head,Fill均为UI中的Image,name为text。

调整好各个部件之间的位置后，制作血条的功能。其中head,text不用特别设置，而blood需要添加一个组件slider。

首先，取消勾选Interactable。这相当于禁用了slider的鼠标拖动功能，使其value仅受脚本控制。

然后Transition设置为None,否则取消勾选Interactable后血条图片会变为半透明。

最后Fill Rect把Fill这个UI拖进去，也就是血量填充的UI图片，代表这个UI与value进行关联。别忘了把value的值调成1。

然后更改Fill血量填充UI图的属性：

Image Type选择Filled，代表图片展示方式为填充，意思是图片是一部分一部分被渲染出来的。

Fill Method选择Horizontal代表水平填充，Fill Origin选择Left代表从左到右填充。即图片从最左边往右方渲染出来。

期间可能发生UI错位，再摆放好即可。

到这里血条的设计就做完了，然后就是编写脚本实现掉血效果，这里我采用点击按钮实现掉血的效果，简单直观。

public class HPCut : MonoBehaviour
{
    public float HP=100.0f; //内置最大血量
    public Slider blood; //获取挂载slider组件的血条图片
    private float value;  //实时血量数值
   

    public void Damage() {
        HP -= 20;
        if(HP>=0){
            value = HP / 100; //转化百分比
        }
        blood.value = value; //展示血量减少效果
    }
}

新建C#脚本，设置最大血量，获取slider组件，实时血量数值，以及如何展示在血条上。

制作button,然后把掉血的脚本挂上去，在点击事件中执行掉血脚本的Damage函数，由于slider设定为public类型，把因此要把blood这个带slider组件的UI拖拽到脚本中slider变量上。本例仅供展示设计的比较简单，实际项目中根据需求进行设计。

运行，就是文首的效果：