NGUI - v3 教學 (五)（UISprite&UISlider制作彩色血条）

使用NGUI可以制做出彩色角色血条，加载进度条

制作血条时，可以根据血的多少显示不同的颜色，可以对UISider与UILabel进行简单的封装

UISprite：NGUI精灵图片组件

Atlas：图片集

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

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

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

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

制作彩色滑动条：

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，用来改变进度不同的颜色

[csharp] view plaincopy

1. <span style="font-size:14px;">public class UISliderColors : MonoBehaviour  
2. {  
3.     public UISprite sprite;  
4.   
5.     public Color[] colors = new Color[] { Color.red, Color.yellow, Color.green };  
6.   
7.     UIProgressBar mBar;  
8.   
9.     void Start () { mBar = GetComponent<UIProgressBar>(); Update(); }  
10.   
11.     void Update ()  
12.     {  
13.         if (sprite == null || colors.Length == 0) return;  
14.   
15.         float val = mBar.value;  
16.         val *= (colors.Length - 1);  
17.         int startIndex = Mathf.FloorToInt(val);  
18.   
19.         Color c = colors[0];  
20.   
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.         }  
34.   
35.         c.a = sprite.color.a;  
36.         sprite.color = c;  
37.     }  
38. }</span>  

当Sprite指定为当前Progress Bar的前景图片

e.在当前的Prgoress Bar在创建一个UILabel，将事件分发指定到UILabel

测试代码：

[csharp] view plaincopy

1. <span style="font-size:14px;">public class Tt : MonoBehaviour {  
2.   
3.     private UISlider slider;  
4.     // Use this for initialization  
5.     void Start () {  
6.         slider = GetComponent<UISlider>();  
7.         slider.value = 0;  
8.     }  
9.       
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. }</span>