今天研究下了UGUI上面Image的扫光效果，我是参考了下面这篇文章做的，然后自己加了一些控制和判断，让扫光看起来更加合理
原文地址：
点击打开链接
我在他的基础上，加了一个倾斜度参数，可以控制扫光斜度，另外，有时候图片有阴影，我们不希望把阴影也加个扫光，所以在Shader里面做了一个透明度的判断，然后又半透明的不做处理，使用原来的颜色。
还有，我加了一个值控制扫光的进度，从0到1，这样就能在外部控制它显示的位置了，方便使用。
修改后的shader如下：
Shader "Custom/UI/Flowlight" {
Properties {
[PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
_Color("Tint", Color) = (1, 1, 1, 1)
[MaterialToggle] PixelSnap("Pixel snap", float) = 0
/* Flowlight */
_FlowlightColor("Flowlight Color", Color) = (1, 0, 0, 1)
_Lengthlitandlar("LangthofLittle and Large", range(0,0.5)) = 0.005
_MoveSpeed("MoveSpeed", float) = 5
_Power("Power", float) = 1
_LargeWidth("LargeWidth", range(0,0.005)) = 0.0035
_LittleWidth("LittleWidth", range(0,0.001)) = 0.002
_SkewRadio("SkewRadio", Range(0, 1)) = 0.2//倾斜度，0-1
_MoveTime("MoveTime", float) = 0//控制扫光显示的位置，0-1
/* --------- */
_WidthRate("WidthRate",float) = 0
_XOffset("XOffset",float) = 0
_HeightRate("HeightRate",float) = 0
_YOffset("YOffset",float) = 0
/* UI */
_StencilComp("Stencil Comparison", Float) = 8
_Stencil("Stencil ID", Float) = 0
_StencilOp("Stencil Operation", Float) = 0
_StencilWriteMask("Stencil Write Mask", Float) = 255
_StencilReadMask("Stencil Read Mask", Float) = 255
_ColorMask("Color Mask", Float) = 15
/* -- */
}
SubShader {
Tags {
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
"PreviewType" = "Plane"
"CanUseSpriteAtlas" = "True"
}
Cull Off
Lighting Off
ZWrite Off
Blend One OneMinusSrcAlpha
ColorMask[_ColorMask]
/* UI */
Stencil{
Ref[_Stencil]
Comp[_StencilComp]
Pass[_StencilOp]
ReadMask[_StencilReadMask]
WriteMask[_StencilWriteMask]
}
/* -- */
Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile _ PIXELSNAP_ON
#include "UnityCG.cginc"
struct appdata_t {
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
};
struct v2f {
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
half2 texcoord : TEXCOORD0;
float4 worldPosition: TEXCOORD1;
};
fixed4 _Color;
/* Flowlight */
float _Power;
float _LargeWidth;
float _LittleWidth;
float _Lengthlitandlar;
float _MoveSpeed;
float _SkewRadio;
float _MoveTime;
fixed4 _FlowlightColor;
/* --------- */
float _UVPosX;
v2f vert(appdata_t IN) {
v2f OUT;
OUT.worldPosition = IN.vertex;
OUT.vertex = UnityObjectToClipPos(IN.vertex);
OUT.texcoord = IN.texcoord;
OUT.color = IN.color * _Color;
#ifdef PIXELSNAP_ON
OUT.vertex = UnityPixelSnap(OUT.vertex);
#endif
return OUT;
}
sampler2D _MainTex;
float4 _MainTex_ST;
float _WidthRate;
float _XOffset;
float _HeightRate;
float _YOffset;
bool _UseClipRect;
float4 _ClipRect;
float _ClipSoftX;
float _ClipSoftY;
fixed4 frag(v2f IN) : SV_Target {
fixed4 c = tex2D(_MainTex, IN.texcoord);
//这里加了个判断，是否有半透明。当然可以根据自己的需要，通过半透明度去计算最终的结果达到目的
if (c.a == 1){
/*使用裁剪*/
if (_UseClipRect)
{
float2 factor = float2(0.0, 0.0);
float2 tempXY = (IN.worldPosition.xy - _ClipRect.xy) / float2(_ClipSoftX, _ClipSoftY)*step(_ClipRect.xy, IN.worldPosition.xy);
factor = max(factor, tempXY);
float2 tempZW = (_ClipRect.zw - IN.worldPosition.xy) / float2(_ClipSoftX, _ClipSoftY)*step(IN.worldPosition.xy, _ClipRect.zw);
factor = min(factor, tempZW);
c.a *= clamp(min(factor.x, factor.y), 0.0, 1.0);
}
/* --------- */
/* Flowlight */
//计算流动的标准uvX从-0.5到1.5范围
_UVPosX = _XOffset + (fmod(_MoveTime*_MoveSpeed, 1) * 2 - 0.5)* _WidthRate;
//标准uvX倾斜
_UVPosX += (IN.texcoord.y - _HeightRate*0.5- _YOffset)*_SkewRadio;
//以下是计算流光在区域内的强度，根据到标准点的距离的来确定强度，为了使变化更柔和非线性，使用距离平方或者sin函数也可以
float lar = pow(1 - _LargeWidth*_WidthRate, 2);
float lit = pow(1 - _LittleWidth*_WidthRate, 2);
//第一道流光，可以累加任意条，如下
fixed4 cadd = _FlowlightColor* saturate((1 - saturate(pow(_UVPosX - IN.texcoord.x,2))) - lar)*_Power /(1-lar);
cadd += _FlowlightColor* saturate((1 - saturate(pow(_UVPosX - _Lengthlitandlar*_WidthRate - IN.texcoord.x, 2))) - lit)*_Power/ (1-lit);
cadd.rgb *= cadd.a;
c.rgb += cadd.rgb;
/* --------- */
}
c.rgb *= c.a;
return c;
}
ENDCG
}
}
}
然后，可以写一个脚本去控制：
private float widthRate = 1;
private float heightRate = 1;
private float xOffsetRate = 0;
private float yOffsetRate = 0;
public Shader shader;
public Color color = Color.yellow;
public float power = 0.55f;
public float speed = 5;
public float largeWidth = 0.003f;
public float littleWidth = 0.0003f;
public float length = 0.1f;
public float skewRadio = 0.2f;//倾斜
public float moveTime = 0;
float endMoveTime = 0;
private MaskableGraphic maskableGraphic;
Image image;
Material imageMat = null;
void Awake()
{
maskableGraphic = GetComponent<MaskableGraphic>();
if (maskableGraphic){
image = maskableGraphic as Image;
if (image){
imageMat = new Material(shader);
widthRate = image.sprite.textureRect.width * 1.0f / image.sprite.texture.width;
heightRate = image.sprite.textureRect.height * 1.0f / image.sprite.texture.height;
xOffsetRate = (image.sprite.textureRect.xMin) * 1.0f / image.sprite.texture.width;
yOffsetRate = (image.sprite.textureRect.yMin) * 1.0f / image.sprite.texture.height;
}
}
// Debug.Log(string.Format(" widthRate{0}, heightRate{1}， xOffsetRate{2}， yOffsetRate{3}", widthRate, heightRate, xOffsetRate, yOffsetRate));
image.material = null;
}
public void OnWaitAnim(float time){
// Debug.Log(time);
StopCoroutine("SlowLight");
endMoveTime = time;
StartCoroutine("SlowLight");
}
IEnumerator SlowLight(){
if (image){
image.material = imageMat;
}
moveTime = 0;
while(moveTime < endMoveTime){
moveTime += Time.deltaTime;
SetShader();
// Debug.Log(moveTime + ":" + endMoveTime);
yield return null;
}
if (image){
image.material = null;
}
}
void OnDisable()
{
if (image){
image.material = null;
}
StopCoroutine("SlowLight");
}
void Start () {
SetShader();
}
void Update () {
// moveTime = Time.time;
// SetShader();
}
public void SetShader(){
skewRadio = Mathf.Clamp(skewRadio, 0, 1);
length = Mathf.Clamp(length, 0, 0.5f);
imageMat.SetColor("_FlowlightColor", color);
imageMat.SetFloat("_Power", power);
imageMat.SetFloat("_MoveSpeed", speed);
imageMat.SetFloat("_LargeWidth", largeWidth);
imageMat.SetFloat("_LittleWidth", littleWidth);
imageMat.SetFloat("_SkewRadio", skewRadio);
imageMat.SetFloat("_Lengthlitandlar", length);
imageMat.SetFloat("_MoveTime", moveTime);
imageMat.SetFloat("_WidthRate", widthRate);
imageMat.SetFloat("_HeightRate", heightRate);
imageMat.SetFloat("_XOffset", xOffsetRate);
imageMat.SetFloat("_YOffset", yOffsetRate);
}到此结束~
版权声明：本文为pz789as原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。