unity3D游戏发之NGUI 圆形血条、进度条制作实现详解.docVIP

通常，为了美化界面布局，进度条或者角色血条、经验条并不是长方形的，可能会是个圆形，看了下别人的制作过程都稍显复杂，为此整理了一份步骤非常简单的制作圆形进度条或者圆形血条、经验条的方法。? ?? ? 这儿我们使用了一个遮罩 Shader。? ?? ? 先来看看最终效果图：? ?? ? 需要的美术素材如图所示：? ?? ? 导入 NGUI 以及布局经验条的步骤省略，最终的经验条树形结构如图：? ?? ? 这儿需要特别注意的是，附加到圆形经验条的 NGUI 组件类一定要是 UITexture，因为 UITexture 有 Material 选项，这样才可以使用我们的遮罩材质。? ?? ? 下面是遮罩 Shader 的代码： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 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;? ?? ?? ?? ?? ?