UGUI学习笔记（十二）自制血条控件

冷不防 2023-09-27 09:36 16阅读 0赞

## 一、效果展示 ##

![c7417137a836583378be92b2f21d2d67.gif][]

## 二、实现过程 ##

### 2.1 准备工作 ###

首先在场景中使用「Image」创建如下结构并命名为「LifeBar」。需要注意的是内部的「Image」都需要将锚点设置到最左侧，高度设置为自适应。在父元素上挂载同名脚本，将「LifeBar」制作为预制体。  
![2ec59141079daf716ecead570a2d499e.png][]  
之所以创建了「OuterBar」和「InnerBar」两个血条，是为了做出多层血条的效果。

然后在场景中随便创建一个敌人（需要有「MeshRenderer」），然后挂载一个控制脚本。我这里的脚本命名为「KeLiController」  
![fb99cc439ccd8bd0fbd2c2fb7a7ce4b8.png][]

### 2.2 动态创建血条 ###

接下来需要在游戏运行时，将血条动态创建出来。在「KeLiController」中添加如下代码

private LifeBar _lifeBar;
    void Start()
    {
        
    	Canvas canvas = FindObjectOfType<Canvas>();
    	if (canvas == null)
    	{
        
    		Debug.LogError("场景中没有Canvas控件");
    		return;
    	}
    	SpawnLifeBar(canvas);
    }
    
    private void SpawnLifeBar(Canvas canvas)
    {
        
    	GameObject lifeBar = Resources.Load<GameObject>("LifeBar");
    	_lifeBar = Instantiate(lifeBar, canvas.transform).AddComponent<LifeBar>();
    	// 初始化操作
    	_lifeBar.Init(transform);
    }

然后需要将创建出来的代码移动到敌人头顶上。我们知道模型的位置就是脚下中心点的位置，但是如何获取到模型的高度呢？其实模型上挂载的「Mesh Renderer」组件中就有相关的属性。我们可以在「LifeBar」进行初始化时获取到「Mesh Renderer」最高点的Y值作为偏移量，然后在Update中不断更新血条的位置（别忘了把世界坐标转换为屏幕坐标）

public class LifeBar : MonoBehaviour
    {
        
        private Transform _target;
        private float _offsetY;
        public void Init(Transform target)
        {
        
            _target = target;
            _offsetY = GetOffsetY(target);
        }
    
        /// <summary>
        /// 获取Renderer最高点的Y值
        /// </summary>
        /// <param name="target"></param>
        /// <returns></returns>
        private float GetOffsetY(Transform target)
        {
        
            Renderer ren = target.GetComponentInChildren<Renderer>();
            if (ren == null)
                return 0;
            return ren.bounds.max.y;
        }
    
        private void Update()
        {
        
            if(_target == null)
                return;
            transform.position = Camera.main.WorldToScreenPoint(_target.position + Vector3.up*_offsetY);
        }
    }

运行游戏可以看到，血条已经正确生成在了敌人头顶上。随便给敌人加点移动的控制逻辑，可以发现血条也会跟随角色移动。  
![9287cd1587365624132b67ac5b69a6a5.gif][]

### 2.3 初始化血条 ###

血条创建出来后还需要对其进行初始化，包括设置血条的颜色、图片等。新建一个「LifeBarData」类用来对血条的数据进行封装。

public class LifeBarData
    {
        
        public Sprite BarSprite;
        public Color BarColor;
    
        public LifeBarData(Sprite barSprite, Color barColor)
        {
        
            BarSprite = barSprite;
            BarColor = barColor;
        }
    }

再创建一个「LifeBarItem」类用来控制单个的血条。「InnerBar」、「OuterBar」和它们下面的「AdditionBar」都需要挂载这个脚本。在「LifeBarItem」类中定义出必要的字段并暴露出初始化API

public class LifeBarItem : MonoBehaviour
    {
        
        private Image _img;
        private Image Img
        {
        
            get
            {
        
                if (_img == null)
                    _img = GetComponent<Image>();
                return _img;
            }
        }
        
        private RectTransform _rect;
        private RectTransform Rect
        {
        
            get
            {
        
                if (_rect == null)
                    _rect = GetComponent<RectTransform>();
                return _rect;
            }
        }
        
        private LifeBarItem _child;
        public void Init()
        {
        
            var additionBar = transform.Find("AdditionBar");
            if (additionBar != null)
                _child = additionBar.AddComponent<LifeBarItem>();
        }
        public void SetData(LifeBarData data)
        {
        
            Img.color = data.BarColor;
            if (data.BarSprite != null)
            {
        
                Img.sprite = data.BarSprite;
            }
    
            if (_child != null)
            {
        
                _child.SetData(data);
            }
        }
    }

这里「AdditionBar」之所以设置成与父元素相同，是为了制作扣血时的过渡特效。后面会进行说明。

接下来在「LifeBar」中持有「OuterBar」和「InnerBar」并对其进行初始化设置即可。另外，初始化所需的数据可以通过一个集合传入。集合有多少条数据，就代表有多少行血条。再传入一个整型参数表示总血量，就可以计算出单位血量占多少宽度。

// 血条数据
    private List<LifeBarData> _data;
    // 外层血条
    private LifeBarItem _outerBar;
    // 内层血条
    private LifeBarItem _innerBar;
    // 单位血量所占宽度
    private float _unitLifeScale;
    // 当前血条下标
    private int _index;
    
    /// <summary>
    /// 初始化
    /// </summary>
    /// <param name="target">目标物体</param>
    /// <param name="lifeMax">最大血量</param>
    /// <param name="data">血条数据</param>
    public void Init(Transform target,int lifeMax,List<LifeBarData> data)
    {
        
    	_target = target;
    	_offsetY = GetOffsetY(target);
    	_data = data;
    	_outerBar = transform.Find("OuterBar").AddComponent<LifeBarItem>();
    	_innerBar = transform.Find("InnerBar").AddComponent<LifeBarItem>();
    	_outerBar.Init();
    	_innerBar.Init();
    	_unitLifeScale = GetComponent<RectTransform>().rect.width * data.Count / lifeMax;
    	SetBarData(_index, data);
    }
    /// <summary>
    /// 设置内外血条数据
    /// </summary>
    /// <param name="index"></param>
    /// <param name="data"></param>
    private void SetBarData(int index, List<LifeBarData> data)
    {
        
    	if(index < 0 || index >= data.Count)
    		return;
    	_outerBar.SetData(data[index]);
    	if (index + 1 >= data.Count)
    	{
        
    		_innerBar.SetData(new LifeBarData(null,Color.white));
    	}
    	else
    	{
        
    		_innerBar.SetData(data[index+1]);
    	}
    }

最后在「KeLiController」中传入一组测试数据，运行看下效果

List<LifeBarData> data = new();
    data.Add(new LifeBarData(null,Color.blue));  
    data.Add(new LifeBarData(null,Color.green));  
    data.Add(new LifeBarData(null,Color.yellow));  
    _lifeBar.Init(transform,350,data);

![45d264f1c32f218842ece07f84986127.gif][]

### 2.4 扣血逻辑 ###

下面编写扣血逻辑。首先对于「AdditionBar」来说，可以直接使用DOTween做一个渐隐动画。对于外层血条，可以传入一个宽度的改变值。根据这个改变值调整血条的宽度。不过要考虑到如果加血/扣血超出了当前血条的范围，就需要把超出的值返回出去，以便处理后续血条的扣血逻辑。

private float _defaultWidth;  
    public void Init()  
    {
          
        var additionBar = transform.Find("AdditionBar");  
        if (additionBar != null)  
            _child = additionBar.AddComponent<LifeBarItem>();  
        _defaultWidth = Rect.rect.width;  
    }
    /// <summary>  
    /// 血量改变事件  
    /// </summary>  
    /// <param name="changeValue">改变量(宽度)</param>  
    /// <returns></returns>
    public float ChangeLife(float changeValue)
    {
        
    	if (_child != null)
    	{
        
    		// 清除未播放完的动画  
    		_child.DOKill();  
    		_child.Img.color = Img.color;  
    		_child.Rect.sizeDelta = Rect.sizeDelta;  
    		_child.Img.DOFade(0, 0.5f);
    	}
    
    	Rect.sizeDelta += changeValue * Vector2.right;
    	return GetOutRange();
    }
    /// <summary>  
    /// 获取超出部分的宽度  
    /// </summary>  
    /// <returns></returns>
    private float GetOutRange()
    {
        
    	float offset = 0;
    	var rectWidth = Rect.rect.width;
    	if (rectWidth < 0)
    	{
        
    		offset = rectWidth;
    		ResetToZero();
    	}
    	else if (rectWidth > _defaultWidth)
    	{
        
    		offset = rectWidth - _defaultWidth;
    		ResetToDefault();
    	}
    	return offset;
    }
    
    public void ResetToZero()
    {
        
    	Rect.sizeDelta = Vector2.zero;
    }
    
    public void ResetToDefault()
    {
        
    	Rect.sizeDelta = _defaultWidth * Vector2.right;
    }

在「LifeBar」中接收到返回的超出值后，需要分情况对血条的层级、宽度等进行重新设置

public void ChangeLife(float changeValue)
    {
        
    	var extraWidth = _outerBar.ChangeLife(changeValue * _unitLifeScale);
    	// 当前血条不够扣
    	if (extraWidth < 0 && ChangeIndex(false))
    	{
        
    		// 交换前后血条的指针
    		ExChangeBar();
    		// 设置层级,使其显示在前面
    		_outerBar.transform.SetAsLastSibling();
    		// 内层血条恢复成默认大小
    		_innerBar.ResetToDefault();
    		SetBarData(_index,_data);
    		ChangeLife(extraWidth/_unitLifeScale);
    	}
    	// 当前血条不够加
    	else if (extraWidth > 0 && ChangeIndex(true))
    	{
        
    		// 交换前后血条的指针
    		ExChangeBar();
    		// 设置层级,使其显示在前面
    		_outerBar.transform.SetAsLastSibling();
    		// 外层血条设置为0
    		_outerBar.ResetToZero();
    		SetBarData(_index,_data);
    		ChangeLife(extraWidth/_unitLifeScale);
    	}
    }
    /// <summary>
    /// 更改下标
    /// </summary>
    /// <param name="isAdd">是否是加血</param>
    /// <returns></returns>
    private bool ChangeIndex(bool isAdd)
    {
        
    	// 加血往前移,扣血往后移
    	int newIndex = _index + (isAdd ? -1 : 1);
    	if (newIndex >= 0 && newIndex < _data.Count)
    	{
        
    		_index = newIndex;
    		return true;
    	}
    	return false;
    }
    
    private void ExChangeBar()
    {
        
    	(_outerBar, _innerBar) = (_innerBar, _outerBar);
    }

至此，血条加血/扣血的主要逻辑就算完成了。在敌人的脚本上添加两个点击事件，左键为扣血，右键为加血。运行游戏看下效果

if (Input.GetMouseButtonDown(0))  
    {
          
        _lifeBar.ChangeLife(-70);  
    }else if (Input.GetMouseButtonDown(1))  
    {
          
        _lifeBar.ChangeLife(70);  
    }

![c7417137a836583378be92b2f21d2d67.gif][]

--------------------

[源码下载][Link 1]

[c7417137a836583378be92b2f21d2d67.gif]: https://img-blog.csdnimg.cn/img_convert/c7417137a836583378be92b2f21d2d67.gif
[2ec59141079daf716ecead570a2d499e.png]: https://img-blog.csdnimg.cn/img_convert/2ec59141079daf716ecead570a2d499e.png
[fb99cc439ccd8bd0fbd2c2fb7a7ce4b8.png]: https://img-blog.csdnimg.cn/img_convert/fb99cc439ccd8bd0fbd2c2fb7a7ce4b8.png
[9287cd1587365624132b67ac5b69a6a5.gif]: https://img-blog.csdnimg.cn/img_convert/9287cd1587365624132b67ac5b69a6a5.gif
[45d264f1c32f218842ece07f84986127.gif]: https://img-blog.csdnimg.cn/img_convert/45d264f1c32f218842ece07f84986127.gif
[Link 1]: https://download.csdn.net/download/LWR_Shadow/86514697