使用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，用來改變進度不同的顏色

public class UISliderColors : MonoBehaviour
{
	public UISprite sprite;

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

	UIProgressBar mBar;

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

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

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

		Color c = colors[0];

		if (startIndex >= 0)
		{
			if (startIndex + 1 < colors.Length)
			{
				float factor = (val - startIndex);
				c = Color.Lerp(colors[startIndex], colors[startIndex + 1], factor);
			}
			else if (startIndex < colors.Length)
			{
				c = colors[startIndex];
			}
			else c = colors[colors.Length - 1];
		}

		c.a = sprite.color.a;
		sprite.color = c;
	}
}
 

e.在當前的Prgoress Bar在建立一個UILabel，將事件分發指定到UILabel

測試程式碼：

public class Tt : MonoBehaviour {

	private UISlider slider;
	// Use this for initialization
	void Start () {
		slider = GetComponent<UISlider>();
		slider.value = 0;
	}
	
	// Update is called once per frame
	void Update () {
		if(slider!=null) {
			Debug.Log(slider.value);
			slider.value += 0.0005f;
		}
	}
}