NGUI 圆形血条、进度条制作

最新推荐文章于 2024-08-01 11:33:58 发布

转载最新推荐文章于 2024-08-01 11:33:58 发布 · 3.3k 阅读

coder 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种简单方法，用于创建美观的圆形进度条，适用于游戏界面中的血条或经验条展示。通过使用特定的遮罩Shader，可以轻松实现圆形单元而非传统矩形，并提供了Shader代码及Unity示例。

通常，为了美化界面布局，进度条或者角色血条、经验条并不是长方形的，可能会是个圆形，看了下别人的制作过程都稍显复杂，为此整理了一份步骤非常简单的制作圆形进度条或者圆形血条、经验条的方法。

这儿我们使用了一个遮罩 Shader，原文链接地址如下：http://game.ceeger.com/forum/read.php?tid=3492;ds=1#tpc

先来看看最终效果图：

需要的美术素材如图所示：

导入 NGUI 以及布局经验条的步骤省略，最终的经验条树形结构如图：

这儿需要特别注意的是，附加到圆形经验条的 NGUI 组件类一定要是 UITexture，因为 UITexture 有 Material 选项，这样才可以使用我们的遮罩材质。

下面是遮罩 Shader 的代码：

 
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);
 
    }
 
}