效果：
思路：
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) =
_HeightRate ("Sprite.height/Atlas.height", float) =
_XOffset("offsetX/Atlas.width", float) =
_YOffset("offsetY/Atlas.height", float) = //_Factor("factor",range(0,1)) = 1
//--------------------------------------
} SubShader
{
LOD Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
} Cull Off
Lighting Off
ZWrite Off
Fog { Mode Off }
Offset -, -
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 *= ;
col.a = col.a * tex2D(_MaskTex, final_uv).a; if (curr >= i.color.g)
{
col.a = ;
} /*if (curr >= _Factor)
{
col.a = 0;
}*/
}
//-----------------------------------------------
return col;
}
ENDCG
}
} SubShader
{
LOD Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
} Pass
{
Cull Off
Lighting Off
ZWrite Off
Fog { Mode Off }
Offset -, -
ColorMask RGB
AlphaTest Greater .
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(, , , ), "加"))
{
curr += 0.1f;
sprite.color = new Color(,curr,);
} if (GUI.Button(new Rect(, , , ), "减"))
{
curr -= 0.1f;
sprite.color = new Color(, curr, );
}
}
}
===================================================================
补充：
上面的方法太复杂了，而且不精准。
后来发现了更好的方式。
效果：
还是使用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,,);
} 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 = ;
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(,,,),"最大血量加10"))
{
this.m_currMaxHp += ;
float scale = m_defaultMaxHp/this.m_currMaxHp;
this.m_hpBarScript.SetHpSpriteWidthAndScale(this.m_currMaxHp/this.m_rate,scale);
} if(GUI.RepeatButton(new Rect(,,,),"加"))
{
this.m_currHp+=;
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(,,,),"减"))
{
this.m_currHp-=;
this.m_currHp = this.m_currHp<?: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日 于 是幻觉 发表
