Shader实例:NGUI制作网格样式血条

效果：

思路：
1.算出正确的uv去采样过滤图，上一篇文章说的很明白了。Shader实例:NGUI图集中的UISprite正确使用Shader的方法

2.用当前血量占总血量的百分比来设置shader中的变量，来控制血条的裁剪。
实际操作中，在shader中声明一个uniform float _Factor
然后在C#脚本中，对这个变量进行设置，结果发现，界面上不能实时响应这个值，进行正确的裁剪。
那么我只好牺牲color的一个分量，比如设置g分量，shader中用g分量的值来对血条进行裁剪。最终勉强达到效果。

如果有的其他好的方式，请留言告诉我哦！

shader代码：改写自Unlit – Transparent Colored
//–add– 部分就是我添加的。

Shader "Custom/Unlit/Transparent Colored Hp Mask"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
 
        //---add---------------------------------
        _MaskTex ("Mask Alpha (A)", 2D) = "white" {}
 
        _WidthRate ("Sprite.width/Atlas.width", float) = 1
        _HeightRate ("Sprite.height/Atlas.height", float) = 1
        _XOffset("offsetX/Atlas.width", float) = 0
        _YOffset("offsetY/Atlas.height", float) = 0
 
        //_Factor("factor",range(0,1)) = 1
        //--------------------------------------
    }
 
    SubShader
    {
        LOD 100
 
        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
        }
 
        Cull Off
        Lighting Off
        ZWrite Off
        Fog { Mode Off }
        Offset -1, -1
        Blend SrcAlpha OneMinusSrcAlpha
 
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
 
            #include "UnityCG.cginc"
 
            struct appdata_t
            {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0;
                fixed4 color : COLOR;
            };
 
            struct v2f
            {
                float4 vertex : SV_POSITION;
                half2 texcoord : TEXCOORD0;
                fixed4 color : COLOR;
            };
 
            sampler2D _MainTex;
            float4 _MainTex_ST;
 
            //---add-------
            sampler2D _MaskTex;
 
            float _WidthRate;
            float _HeightRate;
            float _XOffset; 
            float _YOffset; 
 
            //float _Factor;
            //--------------
 
            v2f vert (appdata_t v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.texcoord = v.texcoord;
                o.color = v.color;
                return o;
            }
 
            fixed4 frag (v2f i) : COLOR
            {
                fixed4 col;
                col = tex2D(_MainTex, i.texcoord);
 
                //---------add---------------------------------
                //过滤
                if(i.color.r<=0.1)
                {
                    float2 final_uv = float2((i.texcoord.x - _XOffset) / _WidthRate, (i.texcoord.y - _YOffset) / _HeightRate);
 
                    float curr = final_uv.x;
                    final_uv.x *= 20;
                    col.a = col.a * tex2D(_MaskTex, final_uv).a;
 
                    if (curr >= i.color.g)
                    {
                        col.a = 0;
                    }
 
                  /*if (curr >= _Factor)
                    {
                        col.a = 0;
                    }*/
                }        
                //-----------------------------------------------
                return col;
            }
            ENDCG
        }
    }
 
    SubShader
    {
        LOD 100
 
        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
        }
 
        Pass
        {
            Cull Off
            Lighting Off
            ZWrite Off
            Fog { Mode Off }
            Offset -1, -1
            ColorMask RGB
            AlphaTest Greater .01
            Blend SrcAlpha OneMinusSrcAlpha
            ColorMaterial AmbientAndDiffuse
 
            SetTexture [_MainTex]
            {
                Combine Texture * Primary
            }
        }
    }
}

C#脚本：挂在UISprite上

using UnityEngine;
using System.Collections;
 
public class ScaleTexcoord : MonoBehaviour
{
    private float widthRate;
    private float heightRate;
    private float xOffsetRate;
    private float yOffsetRate;
    private UISprite sprite;
 
    float curr;
 
    void Awake()
    {
        sprite = GetComponent<UISprite>();
        widthRate = sprite.GetAtlasSprite().width * 1.0f / sprite.atlas.spriteMaterial.mainTexture.width;
    heightRate = sprite.GetAtlasSprite().height * 1.0f / sprite.atlas.spriteMaterial.mainTexture.height;
        xOffsetRate = sprite.GetAtlasSprite().x * 1.0f / sprite.atlas.spriteMaterial.mainTexture.width;
    yOffsetRate = (sprite.atlas.spriteMaterial.mainTexture.height-(sprite.GetAtlasSprite().y + sprite.GetAtlasSprite().height)) * 1.0f / sprite.atlas.spriteMaterial.mainTexture.height;
    }
 
    private void Start()
    {
        sprite.atlas.spriteMaterial.SetFloat("_WidthRate", widthRate);
        sprite.atlas.spriteMaterial.SetFloat("_HeightRate", heightRate);
        sprite.atlas.spriteMaterial.SetFloat("_XOffset", xOffsetRate);
        sprite.atlas.spriteMaterial.SetFloat("_YOffset", yOffsetRate);
    }
 
    void OnGUI()
    {
        if (GUI.Button(new Rect(100, 100, 100, 50), "加"))
        {
            curr += 0.1f;
            sprite.color = new Color(0,curr,1);
        }
 
        if (GUI.Button(new Rect(220, 100, 100, 50), "减"))
        {
            curr -= 0.1f;
            sprite.color = new Color(0, curr, 1);
        }
    }
}

===================================================================
补充：
上面的方法太复杂了，而且不精准。
后来发现了更好的方式。
效果：

还是使用NGUI的UISlider,改值还是改value。
把血条的UISprite设置成如下，用来平铺。

然后根据比例是设置血条UIsprite的width，
然后再根据比例设置血条UISprite的Scale.x

测试代码：HpBarScript

using UnityEngine;
using System.Collections;
 
public class HpBarScript : MonoBehaviour 
{
    public UISprite m_hpSprite;
    public UISlider m_hpSlider;
    public UISprite m_bgSprite;
 
    public float m_bgWidth{get;set;}
    public float m_hpWidth{get;set;}
 
    void Start () 
    {
        this.m_bgWidth = this.m_bgSprite.width;
        this.m_hpWidth = this.m_hpSprite.width;
    }
 
    public void SetHpSpriteWidthAndScale(float _width,float _scale)
    {
        this.m_hpSprite.width = (int)_width;
        this.m_hpSprite.transform.localScale = new Vector3(_scale,1,1);
    }
 
    public void SetHpBarSliderValue(float _value)
    {
        this.m_hpSlider.value = _value;
    }
}

测试代码：TestHpBar

using UnityEngine;
using System.Collections;
 
public class TestHpBar : MonoBehaviour 
{
    public HpBarScript m_hpBarScript;
 
    public float  m_defaultMaxHp = 100;
    public float m_currMaxHp;
    private float m_rate;
 
    private float m_currHp;
 
    void Start () 
    {
        this.m_currMaxHp=m_defaultMaxHp;
        this.m_currHp = this.m_currMaxHp;
        this.m_rate = this.m_defaultMaxHp / m_hpBarScript.m_hpWidth;
    }
 
    void OnGUI()
    {
        if(GUI.Button(new Rect(100,100,100,50),"最大血量加10"))
        {    
            this.m_currMaxHp += 10;
            float scale = m_defaultMaxHp/this.m_currMaxHp;
            this.m_hpBarScript.SetHpSpriteWidthAndScale(this.m_currMaxHp/this.m_rate,scale);
        }
 
        if(GUI.RepeatButton(new Rect(100,200,100,50),"加"))
        {    
            this.m_currHp+=1;
            this.m_currHp = this.m_currHp>this.m_currMaxHp?this.m_currMaxHp:this.m_currHp;
            float progress = this.m_currHp/this.m_currMaxHp;
            this.m_hpBarScript.SetHpBarSliderValue(progress);
        }
 
        if(GUI.RepeatButton(new Rect(100,300,100,50),"减"))
        {    
            this.m_currHp-=1;
            this.m_currHp = this.m_currHp<0?0:this.m_currHp;
            this.m_currHp= Mathf.Min(this.m_currHp,this.m_currMaxHp);
            float progress = this.m_currHp/this.m_currMaxHp;
            this.m_hpBarScript.SetHpBarSliderValue(progress);
        }
    }
}

• 本文固定链接: http://www.shihuanjue.com/?p=315
• 转载请注明: 乔 2016年01月27日 于 是幻觉 发表