unity ugui 怎样制作进度条呢?今天就主要来看这个。通常,为了美化界面布局,进度条或者角色血条、经验条并不是长方形的,可能会是个圆形,看了下别人的制作过程都稍显复杂,为此整理了一份步骤非常简单的制作圆形进度条方法。
下面是遮罩 Shader 的代码:
view sourceprint?
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"
using UnityEngine;
using System.Collections;
public class ExpBar : MonoBehaviour
{
public UITexture uiTexture;
void Awake()
{
this.uiTexture.material.SetFloat ("_Progress", 0.9f);
}
}
这儿我们使用了一个遮罩 Shader,导入 NGUI 以及布局经验条的步骤省略,最终的经验条树形结构如图:
下面是遮罩 Shader 的代码:
view sourceprint?
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 属性上,如图所示: