Colour Cycle Effect Unity Shader

Just added a new colour cycle effect transparent Unity shader to the free shaders collection. This shader can be used to overlay a y-axis colour cycle effect over a texture

The code for the shader is shown below:

[sourcecode language=”js”]
Shader "Unlit/ColourCycleTexture"
{
Properties
{
_MainTex("Color (RGB) Alpha (A)", 2D) = "white" {}
_WaveSpeed ("WaveSpeed", Range(-1000, 1000)) = 20
_Frequency ("Frequency", Range(0, 100)) = 10
_Amplitude ("Amplitude", Range(0, 3)) = 0.02
_RedScale("Red Scale", Range(0, 3)) = 1
_GreenScale("Green Scale", Range(0, 3)) = 1
_BlueScale("Blue Scale", Range(0, 3)) = 1
}
SubShader
{
Tags{ "Queue" = "Transparent" "RenderType" = "Transparent" }
Blend SrcAlpha OneMinusSrcAlpha
LOD 100

Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag

#include "UnityCG.cginc"

struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};

struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};

sampler2D _MainTex;
float4 _MainTex_ST;
fixed _Frequency;
fixed _WaveSpeed;
fixed _Amplitude;
fixed _RedScale;
fixed _GreenScale;
fixed _BlueScale;

v2f vert (appdata v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}

fixed4 frag (v2f i) : SV_Target
{
fixed2 uvs = i.uv;
fixed4 col = tex2D(_MainTex, uvs);
fixed d = sin(uvs.y * _Frequency + _Time * _WaveSpeed) * _Amplitude;
col.r += d * _RedScale;
col.g += d * _GreenScale;
col.b += d * _BlueScale;
return col;
}
ENDCG
}
}
}
[/sourcecode]

The shader works by adjusting the colour of the texel pulled from the texture applying a wave effect which is then scaled by red, green and blue scaling factors which can be used to change the colour of the overlaid effect. Here are a few parameters to try:

Produce a nice upwards red scroll effect:
Wave Speed – -150
Frequency – -20
Amplitude – -1
Red Scale – 0
Green Scale – 0.4
Blue Scale – 0

Produce a slow flash:
Wave Speed – 150
Frequency – 1
Amplitude – 1
Red Scale – 0
Green Scale – 0.4
Blue Scale – 0

You may need to adjust the red, green and blue scaling factors to match the colour of your texture.

Wavy Text Unity Shader

Just added a new wavy transparent shader to the free shaders collection. This shade can be used to apply x and y axis waves to textures which looks nice on bitmapped based text, e.g.:

Wavy Transparent Unity Shader
Wavy Transparent Unity Shader

The code for the shader is shown below:

[sourcecode language=”js”]
Shader "Unlit/WaveTransTexture"
{
Properties
{
_MainTex("Color (RGB) Alpha (A)", 2D) = "white" {}
_WaveSpeedX ("X Axis WaveSpeed", Range(0, 100)) = 20
_FrequencyX ("X Axis Frequency", Range(0, 100)) = 10
_AmplitudeX ("X Axis Amplitude", Range(0, 100)) = 0.02
_WaveSpeedY ("Y Axis WaveSpeed", Range(0, 100)) = 20
_FrequencyY ("Y Axis Frequency", Range(0, 100)) = 10
_AmplitudeY ("Y Axis Amplitude", Range(0, 100)) = 0.02
}
SubShader
{
Tags{ "Queue" = "Transparent" "RenderType" = "Transparent" }
Blend SrcAlpha OneMinusSrcAlpha
LOD 100

Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag

#include "UnityCG.cginc"

struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};

struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};

sampler2D _MainTex;
float4 _MainTex_ST;
fixed _FrequencyX;
fixed _AmplitudeX;
fixed _WaveSpeedX;
fixed _FrequencyY;
fixed _AmplitudeY;
fixed _WaveSpeedY;

v2f vert (appdata v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}

fixed4 frag (v2f i) : SV_Target
{
fixed2 uvs = i.uv;
uvs.x += sin(uvs.y * _FrequencyX + _Time * _WaveSpeedX) * _AmplitudeX;
uvs.x = (uvs.x * 0.9) + 0.05;
uvs.y += cos(uvs.x * _FrequencyY + _Time * _WaveSpeedY) * _AmplitudeY;
uvs.y = (uvs.y * 0.9) + 0.05;
fixed4 col = tex2D(_MainTex, uvs);
return col;
}
ENDCG
}
}
}
[/sourcecode]

The code works by applying a sine wave to the y-axis source texture coordinate and pumping that into the x-axis texture coordinate, a similar thing is done with the x-axis source texture coordinate, except that a cosine wave is applied to it. Note that when using this shader you should leave a little space around the bitmap text (around 10% of the image size) to prevent borders from showing.

2D water shader in Unity 3D

I recently found the need to spruce up the water in a new 2D game that I am working on, so I decided to have a play around with Unity shaders again. Here’s the code to the shader:

[sourcecode language=”js”]
Shader "Unlit/WaterTexture"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_ScrollX ("X Scroll Speed", Range(-10, 10)) = 0
_WaveSpeed("WaveSpeed", Range(0, 100)) = 10
_FrequencyX("X Axis Frequency", Range(0, 100)) = 34
_AmplitudeX("X Axis Amplitude", Range(0, 100)) = 0.005
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100

Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag

#include "UnityCG.cginc"

struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};

struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};

sampler2D _MainTex;
float4 _MainTex_ST;
fixed _ScrollX;
fixed _FrequencyX;
fixed _AmplitudeX;
fixed _WaveSpeed;

v2f vert (appdata v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}

fixed4 frag(v2f i) : SV_Target
{
fixed time = _Time * _WaveSpeed;
fixed2 uvs = i.uv;
fixed offset = (_ScrollX * _Time);
uvs.x += offset;
uvs.x = fmod(uvs.x, 1);
uvs.x += sin(uvs.y * _FrequencyX + time) * _AmplitudeX;
fixed2 uvs2 = i.uv;
uvs2.x -= offset;
uvs2.x = fmod(uvs2.x, 1);
if (uvs2.x < 0)
uvs2.x += 1;
uvs2.y = 1 – i.uv.y;
uvs2.x += sin(uvs2.y * _FrequencyX + time) * _AmplitudeX;
fixed4 col = tex2D(_MainTex, uvs);
fixed4 col2 = tex2D(_MainTex, uvs2);
col = (col + col2) / 2;
return col;
}

ENDCG
}
}
}
[/sourcecode]

The main section of the code is the fragment shader, it plays with the textures U coordinates by applying a sine wave to them, it then does the same with the pixel on the opposite side of the V axis then merges them both together, it also scrolls the textures, this produces a nice running water effect.

You can grab all shaders that I make public from Github

Feel free to re-use the shader in your own creations.