通常,为了美化界面布局,进度条或者角色血条、经验条并不是长方形的,可能会是个圆形,看了下别人的制作过程都稍显复杂,为此整理了一份步骤非常简单的制作圆形进度条或者圆形血条、经验条的方法。
这儿我们使用了一个遮罩 Shader,原文链接地址如下:http://game.ceeger.com/forum/read.php?tid=3492;ds=1#tpc
先来看看最终效果图:
需要的美术素材如图所示:
导入 NGUI 以及布局经验条的步骤省略,最终的经验条树形结构如图:
这儿需要特别注意的是,附加到圆形经验条的 NGUI 组件类一定要是 UITexture,因为 UITexture 有 Material 选项,这样才可以使用我们的遮罩材质。
下面是遮罩 Shader 的代码:
01 |
Shader "Custom/CircleAlphaMask" |
02 |
{ |
03 |
Properties |
04 |
{ |
05 |
_Color
( "Main
Color" ,
Color) = (1,1,1,1) |
06 |
_MainTex
( "Base
(RGB) Trans (A)" ,
2D) = "white" {} |
07 |
_MaskTex
( "Mask
(A)" ,
2D) = "white" {} |
08 |
_Progress
( "Progress" ,
Range(0,1)) = 0.5 |
09 |
} |
10 |
Category |
11 |
{ |
12 |
Lighting
Off |
13 |
ZWrite
Off |
14 |
Cull
back |
15 |
Fog
{ Mode Off } |
16 |
Tags
{ "Queue" = "Transparent" "IgnoreProjector" = "True" } |
17 |
Blend
SrcAlpha OneMinusSrcAlpha |
18 |
SubShader |
19 |
{ |
20 |
Pass |
21 |
{ |
22 |
CGPROGRAM |
23 |
#pragma
vertex vert |
24 |
#pragma
fragment frag |
25 |
sampler2D
_MainTex; |
26 |
sampler2D
_MaskTex; |
27 |
fixed4
_Color; |
28 |
float _Progress; |
29 |
struct appdata |
30 |
{ |
31 |
float4
vertex : POSITION; |
32 |
float4
texcoord : TEXCOORD0; |
33 |
}; |
34 |
struct v2f |
35 |
{ |
36 |
float4
pos : SV_POSITION; |
37 |
float2
uv : TEXCOORD0; |
38 |
}; |
39 |
v2f
vert (appdata v) |
40 |
{ |
41 |
v2f
o; |
42 |
o.pos
= mul(UNITY_MATRIX_MVP, v.vertex); |
43 |
o.uv
= v.texcoord.xy; |
44 |
return o; |
45 |
} |
46 |
half4
frag(v2f i) : COLOR |
47 |
{ |
48 |
fixed4
c = _Color * tex2D(_MainTex, i.uv); |
49 |
fixed ca
= tex2D(_MaskTex, i.uv).a; |
50 |
c.a
*= ca >= _Progress ? 0 : 1; |
51 |
return c; |
52 |
} |
53 |
ENDCG |
54 |
} |
55 |
} |
56 |
SubShader |
57 |
{ |
58 |
AlphaTest
LEqual [_Progress] |
59 |
Pass |
60 |
{ |
61 |
SetTexture
[_MaskTex] {combine texture} |
62 |
SetTexture
[_MainTex] {combine texture, previous} |
63 |
} |
64 |
} |
65 |
} |
66 |
Fallback "Transparent/VertexLit" |
67 |
} |
新建一个材质,把 Shader 赋予这个新建立的材质,然后设置如下属性,如图所示:
最后通过代码来控制进度的显示:
01 |
using UnityEngine; |
02 |
using System.Collections; |
03 |
04 |
public class ExpBar
: MonoBehaviour |
05 |
{ |
06 |
public UITexture
uiTexture; |
07 |
08 |
void Awake() |
09 |
{ |
10 |
this .uiTexture.material.SetFloat
( "_Progress" ,
0.9f); |
11 |
} |
12 |
} |
把 ExpBar.cs 拖到 ExpBar 对象上,然后把 Bar 对象拖到 uiTexture 属性上,如图所示: