这阵子项目中需要用到一种特殊样式的血条。描述如下：
1. 正常颜色为红色。受到伤害后，即将扣除的血量变暗(暗红色)，并有下降动画效果；
2. 加护盾效果后，增加一部分血量值，该额外部分为白色，护盾效果消失后该部分血量瞬间消失；
3. 在护盾效果下受到伤害时，首先扣除白色血量。白色血量不足扣除时，余下部分从红色血量中扣除；
4. 白色血量的扣除效果为变为灰色并有下降动画效果；
4. 当加护盾效果时，若即将添加的白色血量将使总血条“溢出”，从新计算百分比并排满血条；
5. 中毒时，将相应的血量(按照伤害扣血优先级，即先扣除护盾，再扣除正常)变为紫色。该紫色血量有递减动画；
6. 中毒时若受到伤害，不扣除紫色部分血量(实际上该部分已扣除，但有个缓冲时间)，而是红色或白色部分；
7. 若中毒时受到护盾效果？
8. 血条会自动隐藏，血量产生变化时会自动显示；
制作普通血条时，我们一般会用UISlider。
但是这里涉及到护盾和中毒的效果，用UISlider显然是不够的。我首先想到的是用多个血条叠加在一起，分辨为正常血条、中毒血条、护盾血条。但是掉血效果要怎么解决？
如果只是有下降动画，那很好解决，可是会先变暗，这显然是一个slider做不到的。
于是我灵机一动想到了：一个血条，多个UISlider！我们可以写一个自定义血条，该血条包含正常血量、中毒值、护盾值，以及相应的状态属性。
经过实践，果然我的想法是对的。先来看下效果图：
1.掉血效果
2.加护盾
2.1 加护盾时掉血
3. 中毒
复杂的叠加效果我们稍后再讨论。第一步，先完成UI上的结构设计：
1. Heathbar为金色的边框(UISprite)
2. Blank为底色(灰)(UISprite)
3. ShieldedDmg为加护盾时的减血底色(深灰色)(UISprite, UISlider)
4. Shielded为护盾颜色(白色)(UISprite, UISlider)
5. Poisoned为中毒颜色(紫色)(UISprite, UISlider)
6. NormalDmg为正常情况下的减血底色(暗红色)(UISprite, UISlider)
7. Normal为正常血条的颜色(红色)(UISprite, UISlider)
8. thumb为血条末端的小刻度(白色)(UISprite),并设置Normal上Slider的Thumb为它
如此，我们就完成了初步的UI设计。数一下，一共有5个Slider。我们再添加一个名为UIHealthbar自定义脚本，用来管理这些UISlider的数值变化，以及处理相关逻辑。
将UIHealthbar绑到Heathbar上。初步脚本如下：
1 using System; 2 using UnityEngine; 3 4 public class UIHealthbar : MonoBehaviour 5 { 6 #region 7 8 private UISlider _normal; 9 private UISlider _normalDmg; 10 private UISlider _shielded; 11 private UISlider _shieldedDmg; 12 private UISlider _poisoned; 13 private UISprite _barSprite; 14 15 #endregion 16 17 18 /// <summary> 19 /// 全局动画时长 20 /// </summary> 21 private const float AnimDuration = 0.2f; 22 23 /// <summary> 24 /// 渐变类型 25 /// </summary> 26 private const iTween.EaseType EaseType = iTween.EaseType.linear; 27 28 /// <summary> 29 /// 是否正在隐藏或显示(但如或淡出) 30 /// </summary> 31 private bool _isFading; 32 33 /// <summary> 34 /// 用来判断自动隐藏的计时器 35 /// </summary> 36 private float _timer; 37 38 /// <summary> 39 /// 是否自动隐藏 40 /// </summary> 41 public bool autoHide = true; 42 43 /// <summary> 44 /// 是否受到正常伤害 45 /// </summary> 46 private bool IsNormalDamaging 47 { 48 get { return _normalDmg.gameObject.activeSelf; } 49 set { _normalDmg.gameObject.SetActive(value); } 50 } 51 52 /// <summary> 53 /// 是否在加护盾的情况下受到伤害 54 /// </summary> 55 private bool IsShieldedDamaging 56 { 57 get { return _shieldedDmg.gameObject.activeSelf; } 58 set { _shieldedDmg.gameObject.SetActive(value); } 59 } 60 61 /// <summary> 62 /// 是否正在掉血 63 /// </summary> 64 public bool IsDamaging 65 { 66 get { return IsShieldedDamaging || IsNormalDamaging; } 67 } 68 69 /// <summary> 70 /// 是否中毒 71 /// </summary> 72 public bool IsPoisoned 73 { 74 get { return _poisoned.gameObject.activeSelf; } 75 private set { _poisoned.gameObject.SetActive(value); } 76 } 77 78 /// <summary> 79 /// 是否受护盾 80 /// </summary> 81 public bool IsShielded 82 { 83 get { return _shielded.gameObject.activeSelf; } 84 private set { _shielded.gameObject.SetActive(value); } 85 } 86 87 /// <summary> 88 /// 是否可见(自动隐藏相关隐藏) 89 /// </summary> 90 private bool IsVisible 91 { 92 get 93 { 94 throw 95 new NotImplementedException(); 96 } 97 set 98 { 99 100 } 101 } 102 103 private void OnEnable() 104 { 105 IsPoisoned = false; 106 IsShielded = false; 107 IsShieldedDamaging = false; 108 IsNormalDamaging = false; 109 } 110 111 private void Awake() 112 { 113 _normal = transform.FindChild("Normal").GetComponent<UISlider>(); 114 _normalDmg = transform.FindChild("NormalDmg").GetComponent<UISlider>(); 115 _shielded = transform.FindChild("Shielded").GetComponent<UISlider>(); 116 _shieldedDmg = transform.FindChild("ShieldedDmg").GetComponent<UISlider>(); 117 _poisoned = transform.FindChild("Poisoned").GetComponent<UISlider>(); 118 _barSprite = transform.GetComponent<UISprite>(); 119 } 120 121 #region 逻辑处理 122 123 /// <summary> 124 /// 加伤害 125 /// </summary> 126 /// <param name="percent">将造成的伤害百分比(小于1)</param> 127 /// <returns>剩余血量百分比</returns> 128 public float AddDamage(float percent) 129 { 130 return 0; 131 } 132 133 /// <summary> 134 /// 加中毒值 135 /// </summary> 136 /// <param name="percent">百分比</param> 137 /// <param name="speed">下降速度(刻度/秒)</param> 138 public void AddPoison(float percent, float speed) 139 { 140 } 141 142 /// <summary> 143 /// 加护盾值 144 /// </summary> 145 /// <param name="percent">百分比</param> 146 /// <param name="time">持续时间(秒)</param> 147 public void AddShield(float percent, float time) 148 { 149 } 150 151 #endregion 152 }
接下来我们处理具体的逻辑。
1. 自动隐藏：
自动隐藏的需求是，在5秒内未产生任何形式的血量变化，则淡出隐藏。一旦产生血量变化，淡入显示。
淡入淡出是需要Alpha值来控制的。我们直接改变_barSprite这个字段(即最上层的Healthbar上的UISprite)的alpha值，则其子物体会一起产生Alpha值变化的效果。
修改IsVisible属性：
1 private bool IsVisible 2 { 3 get { return _barSprite.color.a >= 1; } 4 set 5 { 6 _timer = 0; 7 if (value != IsVisible && !_isFading) 8 { 9 _isFading = true; 10 if (value) 11 { 12 iTween.ValueTo(gameObject, 13 iTween.Hash("from", 0, "to", 1, "time", AnimDuration, "easetype", 14 EaseType, "onupdate", "OnFadeIn", 15 "onupdatetarget", gameObject, "oncomplete", "OnFadeInComplete", "oncompletetarget", gameObject)); 16 } 17 else 18 { 19 iTween.ValueTo(gameObject, 20 iTween.Hash("from", 1, "to", 0, "time", AnimDuration, "easetype", 21 EaseType, "onupdate", "OnFadeOut", 22 "onupdatetarget", gameObject, "oncomplete", "OnFadeOutComplete", "oncompletetarget", gameObject)); 23 } 24 } 25 } 26 }
再添加iTween中引用的四个方法：
1 private void OnFadeIn(float value) 2 { 3 _barSprite.color = new Color(1, 1, 1, value); 4 } 5 6 private void OnFadeInComplete() 7 { 8 _isFading = false; 9 _timer = 0; 10 } 11 12 private void OnFadeOut(float value) 13 { 14 _barSprite.color = new Color(1, 1, 1, value); 15 } 16 17 private void OnFadeOutComplete() 18 { 19 _isFading = false; 20 _timer = 0; 21 }
现在，直接改变IsVisible即可控制淡入淡出。我们还需要在Update里检查血量变化和设置隐藏，即修改IsVisible：
1 private void Update() 2 { 3 if (autoHide && !_isFading && IsVisible && !IsPoisoned) 4 { 5 _timer += Time.deltaTime; 6 if (_timer > 5f) 7 { 8 IsVisible = false; 9 } 10 } 11 }
上面设置的阀值为5秒。实际上这个5该提取出来做属性或字段。在收到伤害，护盾等情况时，我们需要手动改变IsVisible。
2. 减血：
1 /// <summary> 2 /// 加伤害 3 /// </summary> 4 /// <param name="percent">将造成的伤害百分比(小于1)</param> 5 /// <returns>剩余血量百分比</returns> 6 public float AddDamage(float percent) 7 { 8 if (!IsVisible) 9 { 10 IsVisible = true; 11 } 12 if (percent > 1f) 13 { 14 Debug.LogWarning(string.Format("Illegal damage percent: -{0}", percent)); 15 return _normal.value; 16 } 17 if (_normal.value <= 0f) 18 { 19 Debug.LogWarning(string.Format("Health is already below zero: -{0}", percent)); 20 return _normal.value; 21 } 22 if (IsShielded) 23 { 24 _shieldedDmg.value = _shielded.value; 25 _shielded.value -= percent; 26 _shieldedDmg.gameObject.SetActive(true); 27 iTween.ValueTo(gameObject, 28 iTween.Hash("from", _shieldedDmg.value, "to", _shielded.value, "time", AnimDuration, "easetype", 29 EaseType, "onupdate", "OnShieldedDamage", 30 "onupdatetarget", gameObject, "oncomplete", "ShieldedDamageDone", "oncompletetarget", gameObject)); 31 //if damage lows the shield value to zero, take health instead 32 //... 33 } 34 else 35 { 36 _normalDmg.value = _normal.value; 37 _normal.value -= percent; 38 _normalDmg.gameObject.SetActive(true); 39 iTween.ValueTo(gameObject, 40 iTween.Hash("from", _normalDmg.value, "to", _normal.value, "time", AnimDuration, "easetype", EaseType, 41 "onupdate", "OnNormalDamage", 42 "onupdatetarget", gameObject, "oncomplete", "NormalDamageDone", "oncompletetarget", gameObject)); 43 } 44 45 return _normal.value; 46 }
上面有判断护盾。当受到的伤害不大于护盾值时，只会减少护盾，若未大于护盾值，则会从正常血量里扣除剩余的值(此处我未处理这种情况。只标了注释，算是留给大家的一个题目...)。
注意，血量值得变化是按百分比来算的。所以各种参数应该在折算后传入。比如你满血为100，受到20点伤害，那么应该AddDamage(0.2f);
添加iTween里的引用：
1 private void OnNormalDamage(float value) 2 { 3 _normalDmg.value = value; 4 } 5 6 private void NormalDamageDone() 7 { 8 _normalDmg.gameObject.SetActive(false); 9 } 10 11 private void OnShieldedDamage(float value) 12 { 13 _shieldedDmg.value = value; 14 } 15 16 private void ShieldedDamageDone() 17 { 18 _shieldedDmg.gameObject.SetActive(false); 19 }
注意在变化完成，及时隐藏相关底色。
3. 护盾：
1 /// <summary> 2 /// 加护盾值 3 /// </summary> 4 /// <param name="percent">百分比</param> 5 /// <param name="time">持续时间(秒)</param> 6 public void AddShield(float percent, float time) 7 { 8 //若将增加的护盾值使总值超过100% 9 if (_normal.value + percent + _shieldMod > 1f) 10 { 11 percent = _normal.value + percent + _shieldMod - 1; 12 _normal.value -= percent; 13 _shieldMod += percent; 14 } 15 //若已中毒 16 if (IsPoisoned) 17 { 18 //若将要增加的护盾值大于中毒(剩余)值 19 if (percent > _poisoned.value) 20 { 21 percent -= _poisoned.value; 22 } 23 else //否则 24 { 25 percent = percent - _poisoned.value; 26 } 27 } 28 _shielded.value = _normal.value + percent; 29 IsShielded = true; 30 iTween.ValueTo(gameObject, 31 iTween.Hash("from", 0, "to", time, "time", time, "onupdate", "OnShield", "oncomplete", "ShieldTimeOut", 32 "oncompleteparams", _shieldMod, 33 "oncompletetarget", gameObject)); 34 }
上面出现里一个float型的_shieldMod之前并没有声明。事实上我后来了解到需求里护盾是不能叠加的，后加的护盾只会覆盖之前的护盾。所以这个用来存储多重护盾值得_shieldMod就没用了。移除即可。记得要从iTween.ValueTo里也将其移除并修改对应方法签名(ShieldTimeOut)。
1 private void OnShield(float value) 2 { 3 } 4 5 private void ShieldTimeOut(float modPercent) 6 { 7 _shieldMod = Mathf.Max(0, _shieldMod - modPercent); 8 _normal.value += modPercent; 9 IsShielded = false; 10 _shielded.value = _normal.value; 11 _shieldedDmg.value = _normal.value; 12 }
护盾到期是在ShieldTimeOut里处理的。此处并没有渐变消失，而是啪一下没了=。=
4.中毒：
1 /// <summary> 2 /// 加中毒值 3 /// </summary> 4 /// <param name="percent">百分比</param> 5 /// <param name="speed">下降速度(刻度/秒)</param> 6 public void AddPoison(float percent, float speed) 7 { 8 //若已加护盾 9 if (IsShielded) 10 { 11 //若将要增加的中毒值大于护盾值 12 if (percent > _shielded.value) 13 { 14 percent -= _shielded.value; 15 } 16 else //否则 17 { 18 percent = _shielded.value - percent; 19 } 20 } 21 if (percent < 0) 22 { 23 return; 24 } 25 _normal.value -= percent; 26 IsPoisoned = true; 27 iTween.ValueTo(gameObject, 28 iTween.Hash("from", percent, "to", 0, "speed", speed, "easetype", EaseType, "onupdate", "OnPoison", "onupdatetarget", 29 gameObject, 30 "oncomplete", 31 "PoisonTimeOut", 32 "oncompletetarget", gameObject)); 33 }
1 private void OnPoison(float value) 2 { 3 _poisoned.value = _normal.value + value; 4 } 5 6 private void PoisonTimeOut() 7 { 8 IsPoisoned = false; 9 _poisoned.value = _normal.value; 10 }
中毒的递减效果在OnPoison里实现。
最后添加测试代码：
1 /// <summary> 2 /// Debug Testing 3 /// </summary> 4 private void OnGUI() 5 { 6 if (GUI.Button(new Rect(10, 10, 200, 100), "Hit - 20%")) 7 { 8 AddDamage(0.2f); 9 } 10 if (GUI.Button(new Rect(10, 120, 200, 100), "Shield + 30%(3s)")) 11 { 12 AddShield(0.3f, 3); 13 } 14 if (GUI.Button(new Rect(10, 230, 200, 100), "Poison + 10%(5%/s)")) 15 { 16 AddPoison(0.1f, 0.05f); 17 } 18 }
到此就差不多完成了。拖出来当预置，就成了一个自定义控件。
事实上还存在许多bug。尤其是在面临【又加护盾又中毒又受伤害】这类情况下。我没有去处理这样的逻辑因为项目里不需要。这里只是提供一个思路给大家。如果能抛砖引玉当然最好了~
另外，里面的iTween这样用起来会很麻烦。我会另写一篇，介绍我的iTween自定义扩展。
源码请见我的github。
https://github.com/theoxuan/GeneralGame/blob/master/Assets/Resources/Healthbar.prefab
https://github.com/theoxuan/GeneralGame/blob/master/Assets/Script/UIHealthbar.cs