Unity UGUI实现王者荣耀版多格血条

上篇讲述了Boss多层血条的实现方法，这篇就主要讲述一下类似于王者荣耀，LoL的分段式血条，
这样的血条在游戏的视觉层会带给玩家非常好的体验。就好比玩家买了一个狂徒铠甲。如过你用
的是分段血条的话，就立即会增加血格，这样用户直接从视觉上会他看到了这件装备的效果，
他就会觉得他这个装备买值了，这件装备很厉害，就会感觉自己非常肉，然后就感觉自己的人生达到了
巅峰。但如果是一管的血条，你买了，血条还是那样没又任何变化，甚至这时候你都在怀疑，我买了这
件装备，有用吗?效果在哪里？所以有些东西，用户买了，要从视觉上就能给人表达出来，让用户知道
你买了这件装备，而且还很牛X，才会让用户记住这款游戏。

所以，我们一起来学习多段血条的制作吧！

效果图：

效果二 等宽无拉伸：

多段血条实现的原理就是，通过继承RawImage 重写父类方法，控制Rect的w值来实现的，和NGUI
背包物品拖拽交换的原理是一样的，都是通过继承和重写来达到自己想要的目的。当然既然说到了背包
物品的拖拽和交换，那么博主就好人做到底，在下面的博客中博主会把背包物品拖拽交换做成类似于小
插件或小工具，然后发布到博客，供大家使用。所以，为了下次可以方便的找到博主，这里可以关注下
博主噢。

下面介绍下多段血条的组成：

1.血条是由一个Slider构成的，如下图：

2.Max Value 用来控制初始血格的最大数，Value的值为多少，血格的个数就为多少。

3.在血量减少时，血格也会减少，血格的减少时通过UV Rect 的 w 值来进行控制的，
W值越小，血格越少，血量越低。

注意血条的图片是通过Awake()的Resource读取赋值的，图片很简单，很容易制作，这里就不上传了。

下面贴出图片样式和源码：

最后图片格式很重要 否则无法正常显示血条：

源码：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class UguiSlider : RawImage {

    /// <summary>
    /// 血条的值
    /// </summary>
    private Slider _BloodSlider;
    /// <summary>
    /// 血量图片红色
    /// </summary>
    private Texture redTexture;
    /// <summary>
    /// 血量图片绿色
    /// </summary>
    private Texture greenTextre;

    protected override void Awake()
    {
        base.Awake();
        //找图片
        redTexture = Resources.Load("222") as Texture;
        greenTextre = Resources.Load("111") as Texture;
    }
    /// <summary>
    /// 重写父类方法
    /// </summary>
    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);

            //血量为0时，没有血量图片
            if (Value == 0)
            {
                texture = null;
            }
            //血量大于0，小于最大血量的20%时，血量为红色
            else  if(Value< _BloodSlider.maxValue*0.2f&&Value>0)
            {
             texture = redTexture;
            }
            //血量大于等于最大血量的20%时，血量为绿色
            else if (Value >= _BloodSlider.maxValue*0.2f)
            {
                texture = greenTextre;
            }

        }

    }

}

好了，多段血条就这样制作完成了！

上一篇：Dnf Boss版多层血条制作

努力积才能，壹叶便成名。