《unity3D游戏开发之NGUI 圆形血条、进度条制作实现详解.doc》由会员分享,可在线阅读,更多相关《unity3D游戏开发之NGUI 圆形血条、进度条制作实现详解.doc(6页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 通常,为了美化界面布局,进度条或者角色血条、经验条并不是长方形的,可能会是个圆形,看了下别人的制作过程都稍显复杂,为此整理了一份步骤非常简单的制作圆形进度条或者圆形血条、经验条的方法。 这儿我们使用了一个遮罩 Shader。 先来看看最终效果图: 需要的美术素材如图所示: 导入 NGUI 以及布局经验条的步骤省略,最终的经验条树形结构如图: 这儿需要特别注意的是,附加到圆形经验条的 NGUI 组件类一定要是 UITexture,因为 UITexture 有 Material 选项,这样才可以使用我们的遮罩材质。 下面是遮罩 Shader 的代码:12345678910111213141516
2、171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667Shader 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 Cate
3、gory 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 : PO
4、SITION; 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.
5、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 赋予这个新建立的材质,然后设置如下属性,如图所示: 最后通过代码来控制进度的显示:123456789101112using 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 属性上,如图所示: