通常，爲了美化界面佈局，進度條或者角色血條、經驗條並不是長方形的，可能會是個圓形，看了下別人的製作過程都稍顯複雜，爲此整理了一份步驟非常簡單的製作圓形進度條或者圓形血條、經驗條的方法。
這兒我們使用了一個遮罩 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 屬性上，如圖所示：
