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。

 

插件鏈接：http://download.csdn.net/detail/qq992817263/9660453

 

 

 

頂