unity ugui 怎样制作进度条

今天我们主要探讨在 Unity UGUI 中制作进度条的方法。通常，为了美化界面布局，进度条（如角色血条、经验条）不一定是长方形，也可能是圆形。在查看了一些他人的制作过程后，发现普遍较为复杂，因此，本文整理了一份步骤简单的圆形进度条制作方法。

前期准备

这里我们使用一个遮罩 Shader，导入 NGUI 以及布局经验条的步骤省略。最终的经验条树形结构如图（此处原文未给出图，可根据实际情况补充）。

需要特别注意的是，附加到圆形经验条的 NGUI 组件类必须是 UITexture。因为 UITexture 有 Material 选项，这样才能使用我们的遮罩材质。

遮罩 Shader 代码

以下是遮罩 Shader 的详细代码：

Shader "Custom/CircleAlphaMask"
{
Properties
{
_Color ("Main Color", Color) = (1,1,1,1)
_MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
_MaskTex ("Mask (A)", 2D) = "white" {}
_Progress ("Progress", Range(0,1)) = 0.5
}
Category
{
Lighting Off
ZWrite Off
Cull back
Fog { Mode Off }
Tags {"Queue"="Transparent" "IgnoreProjector"="True"}
Blend SrcAlpha OneMinusSrcAlpha
SubShader
{
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
sampler2D _MainTex;
sampler2D _MaskTex;
fixed4 _Color;
float _Progress;
struct appdata
{
float4 vertex : POSITION;
float4 texcoord : TEXCOORD0;
};
struct v2f
{
float4 pos : SV_POSITION;
float2 uv : TEXCOORD0;
};
v2f vert (appdata v)
{
v2f o;
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv = v.texcoord.xy;
return o;
}
half4 frag(v2f i) : COLOR
{
fixed4 c = _Color * tex2D(_MainTex, i.uv);
fixed ca = tex2D(_MaskTex, i.uv).a;
c.a *= ca >= _Progress ? 0 : 1;
return c;
}
ENDCG
}
}
SubShader
{
AlphaTest LEqual [_Progress]
Pass
{
SetTexture [_MaskTex] {combine texture}
SetTexture [_MainTex] {combine texture, previous}
}
}
}
Fallback "Transparent/VertexLit"
}

材质设置

新建一个材质，将上述 Shader 赋予这个新创建的材质，然后设置如下属性（此处原文未给出图，可根据实际情况补充）。

代码控制进度显示

通过以下代码来控制进度的显示：

using UnityEngine;
using System.Collections;

public class ExpBar : MonoBehaviour
{
public UITexture uiTexture;

void Awake()
{
this.uiTexture.material.SetFloat ("_Progress", 0.9f);
}
}

挂载脚本

把 ExpBar.cs 脚本拖到 ExpBar 对象上，然后把 Bar 对象拖到 uiTexture 属性上（此处原文未给出图，可根据实际情况补充）。

通过以上步骤，你就可以在 Unity UGUI 中制作出一个简单的圆形进度条了。