Shaders

Colour Cycle Effect Unity Shader

drmop

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:

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
		}
	}
}

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

drmop

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:

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
		}
	}
}

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

drmop

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:

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
		}
	}
}

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.