Unity UGUI实现分段式血条

我们可以看到像英雄联盟等游戏里英雄头顶的血条显示并非是纯色的，而是根据血量的多少而显示一定量的格子，这种方式明显是比较友好、比较美观的，事实上我们的游戏里面也想实现这样的效果，那该怎么办呢？根据血量的多少同时创建N多个小格子图片？这明显不合理；根据血量多少同时创建N多个分割线来拆分图片？这也不合理。

所以我今天将以一种很简单的方式实现这种效果，当然没什么难度，只对UGUI的Slider做一些修改就可以了。

一、首先，我们创建一个Slider，删除他的Handle，勾选Whole Numbers（按整型数改变值），大概就是这样：

二、给Fill Rect目标添加我们的脚本BloodImage，并删除原本的Image组件，为BloodImage指定一个纹理，纹理必须是Texture类型：

BloodImage继承至RawImage，所以只能接收Texture类型的图片源，他主要负责的就是根据血条的长度对图片进行循环排版。

using UnityEngine;
using UnityEngine.UI;

public class BloodImage : RawImage {
    
    private Slider _BloodSlider;

    protected override void OnRectTransformDimensionsChange()
    {
        base.OnRectTransformDimensionsChange();

        //获取血条
        if (_BloodSlider == null)
            _BloodSlider = transform.parent.parent.GetComponent<Slider>();

        //获取血条的值
        if (_BloodSlider != null)
        {
            //刷新血条的显示
            float value = _BloodSlider.value;
            uvRect = new Rect(0,0,value,1);
        }
    }
}

到这里，基本上就OK了，你想要血条显示为多少个小格子，就更改slider的Max Value属性（最大值）就可以了。

效果图如下：

当然如果你有更好的素材，这个血条会更加美观。

三、我已经将BloodSlider发包成一个插件，导入该插件，便可以直接在场景创建BloodSlider。