下面来说下怎么使用ngui彩色血条制作，使用NGUI可以制做出彩色角色血条，加载进度条，制作血条时，可以根据血的多少显示不同的颜色，可以对UISider与UILabel进行简单的封装。



UISprite：NGUI精灵图片组件


Atlas：图片集

Sprite：选择的图片集中的图片

Sprite Type：Simple(对图片不进行处理，进行缩放到用户指定大小），Sliced(切成小片的图片来适应大小）

Tiled（以砖块的形式填充区域，进图片不进行缩放），Filled（填充区域），Advacced（高级的，可自定义边缘的像素）

如果是小块的图片，需要进精灵的类型进行修改，这样才能达到效果


ngui彩色血条制作彩色滑动条：

a.在Widget Tool里添加一个Progress Bar，默认的为我们添加了一个UISider(NGUI compent)


Value：百分比

Alpha：透明度

Steps：步阀阈值

Appearance：特性

a.Foreground（前景图片）

b.Background（背景图片）

c.Thumb（移动指标）

d.Direction（滑动方向）

On Value Change：当滑动时，进行事件分发

b.在Progress Bar上添加一个Script，用来改变进度不同的颜色


  1. public class UISliderColors : MonoBehaviour
  2. {
  3. public UISprite sprite;

  5. public Color[] colors = new Color[] { Color.red, Color.yellow, Color.green };

  7. UIProgressBar mBar;

  9. void Start () { mBar = GetComponent<UIProgressBar>(); Update(); }

  11. void Update ()
  12. {
  13. if (sprite == null || colors.Length == 0) return;

  15. float val = mBar.value;
  16. val *= (colors.Length - 1);
  17. int startIndex = Mathf.FloorToInt(val);

  19. Color c = colors[0];

  21. if (startIndex >= 0)
  22. {
  23. if (startIndex + 1 < colors.Length)
  24. {
  25. float factor = (val - startIndex);
  26. c = Color.Lerp(colors[startIndex], colors[startIndex + 1], factor);
  27. }
  28. else if (startIndex < colors.Length)
  29. {
  30. c = colors[startIndex];
  31. }
  32. else c = colors[colors.Length - 1];
  33. }

  35. c.a = sprite.color.a;
  36. sprite.color = c;
  37. }
  38. }


当Sprite指定为当前Progress Bar的前景图片
e.在当前的Prgoress Bar在创建一个UILabel，将事件分发指定到UILabel

测试代码：


  1. public class Tt : MonoBehaviour {

  3. private UISlider slider;
  4. // Use this for initialization
  5. void Start () {
  6. slider = GetComponent<UISlider>();
  7. slider.value = 0;
  8. }

  10. // Update is called once per frame
  11. void Update () {
  12. if(slider!=null) {
  13. Debug.Log(slider.value);
  14. slider.value += 0.0005f;
  15. }
  16. }
  17. }