我們可以看到像英雄聯盟等遊戲裡英雄頭頂的血條顯示並非是純色的，而是根據血量的多少而顯示一定量的格子，這種方式明顯是比較友好、比較美觀的，事實上我們的遊戲裡面也想實現這樣的效果，那該怎麼辦呢？根據血量的多少同時建立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);
        }
    }
}
 

效果圖如下：

當然如果你有更好的素材，這個血條會更加美觀。

三、我已經將BloodSlider發包成一個外掛，匯入該外掛，便可以直接在場景建立BloodSlider。