图片渐变到自定义颜色
Shader "DanDan/Sprite/Gradient"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Color ("Tint", Color) = (1,1,1,1)
// 自定义颜色
_ToColor ("ToColor",Color) = (1,1,1,1)
[MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
}
SubShader
{
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
"PreviewType"="Plane"
"CanUseSpriteAtlas"="True"
}
Cull Off
Lighting Off
ZWrite Off
Blend One OneMinusSrcAlpha
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;
float2 texcoord : TEXCOORD0;
};
fixed4 _Color;
v2f vert(appdata_t IN)
{
v2f OUT;
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;
sampler2D _AlphaTex;
float _AlphaSplitEnabled;
// 获取同名颜色的值
float4 _ToColor;
fixed4 SampleSpriteTexture (float2 uv)
{
fixed4 color = tex2D (_MainTex, uv);
// _ToColor 就是 自定义颜色
color = lerp(color,_ToColor, uv.x);
#if UNITY_TEXTURE_ALPHASPLIT_ALLOWED
if (_AlphaSplitEnabled)
color.a = tex2D (_AlphaTex, uv).r;
#endif //UNITY_TEXTURE_ALPHASPLIT_ALLOWED
return color;
}
fixed4 frag(v2f IN) : SV_Target
{
fixed4 c = SampleSpriteTexture (IN.texcoord) * IN.color;
c.rgb *= c.a;
return c;
}
ENDCG
}
}
}
效果:
这里的 Lerp处理:
color = lerp(color,_ToColor, uv.x);
也可以把 uv.x 改成 uv.y
x:从左到右
y:从上到下
两个自定义颜色之间的渐变实现
大体上和上面一致,增加一个颜色输入
// 初始颜色
_FromColor("FromColor",Color) = (1,1,1,1)
float4 _FromColor;
修改 SampleSpriteTexture 函数
fixed4 SampleSpriteTexture (float2 uv)
{
fixed4 color = tex2D (_MainTex, uv);
color = lerp(_FromColor,_ToColor, uv.x) * color;
#if UNITY_TEXTURE_ALPHASPLIT_ALLOWED
if (_AlphaSplitEnabled)
color.a = tex2D (_AlphaTex, uv).r;
#endif //UNITY_TEXTURE_ALPHASPLIT_ALLOWED
return color;
}
不同光源的结果都是相加的,而光源作用在材质上就是相乘
效果:
四个自定义颜色之间的渐变实现
首先定义四个点的颜色,左上颜色、右上颜色、左下颜色、右下颜色
// 四个点的颜色设置
_LeftTopColor("LeftTopColor",Color) = (1,1,1,1)
_LeftBottomColor("LeftBottomColor",Color) = (1,1,1,1)
_RightTopColor("RightTopColor",Color) = (1,1,1,1)
_RightBottomColor("RightBottomColor",Color) = (1,1,1,1)
总体来说,要进行三次插值操作,分别是:
- 左上颜色到右上颜色基于 uv.x 的插值
- 左下颜色到右下颜色基于 uv.x 的插值
- 以上两个插值结果基于 uv.y 的插值(从下到上)
再次修改 SampleSpriteTexture 函数
float4 _LeftTopColor;
float4 _LeftBottomColor;
float4 _RightTopColor;
float4 _RightBottomColor;
fixed4 SampleSpriteTexture (float2 uv)
{
fixed4 color = tex2D (_MainTex, uv);
fixed4 topLeft2RightColor = lerp(_LeftTopColor,_RightTopColor,uv.x);
fixed4 bottomLeft2RightColor = lerp(_LeftBottomColor,_RightBottomColor,uv.x);
fixed4 bottom2TopColor = lerp(bottomLeft2RightColor,topLeft2RightColor,uv.y);
color = bottom2TopColor * color;
#if UNITY_TEXTURE_ALPHASPLIT_ALLOWED
if (_AlphaSplitEnabled)
color.a = tex2D (_AlphaTex, uv).r;
#endif //UNITY_TEXTURE_ALPHASPLIT_ALLOWED
return color;
}
效果: