ngui彩色血条制作

本文将详细介绍如何使用NGUI制作彩色血条，包括加载进度条等。在制作血条时，可根据血量的多少显示不同颜色，同时会对UISlider与UILabel进行简单封装。

相关组件和概念

UISprite

NGUI精灵图片组件，用于显示图片。

Atlas

图片集，是一组图片的集合。

Sprite

从图片集中选择的具体图片。

Sprite Type

• Simple：对图片不进行处理，直接缩放到用户指定大小。
• Sliced：将图片切成小片来适应指定大小。
• Tiled：以砖块的形式填充区域，图片不进行缩放。
• Filled：填充指定区域。
• Advanced：高级模式，可自定义边缘的像素。

如果使用的是小块图片，需要修改精灵的类型，才能达到预期效果。

彩色滑动条制作步骤

步骤a：添加Progress Bar

在Widget Tool里添加一个Progress Bar，系统会默认添加一个UISlider（NGUI组件）。该组件有以下属性：

• Value：表示百分比。
• Alpha：透明度。
• Steps：步阀阈值。
• Appearance：特性，包含以下子属性：
• Foreground：前景图片。
• Background：背景图片。
• Thumb：移动指标。
• Direction：滑动方向。
• On Value Change：当滑动时，进行事件分发。

步骤b：添加脚本改变颜色

在Progress Bar上添加一个脚本，用于根据进度改变颜色。以下是具体的脚本代码：

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;
}
}

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

步骤c：创建UILabel并指定事件分发

在当前的Progress 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;
}
}
}

通过以上步骤，你就可以使用NGUI制作出彩色血条，并根据进度显示不同颜色。