Multiple Texture Colours

I am trying to create a shader and material with two colours so i can use the same texture and easily change the colour scheme. I want to be able to change both the inner and outer colour.

What i would like the material shader to show:

51112-screen-shot-2015-07-27-at-200927.png

The end result would then look like the following example:

51114-idea-1.png

(Ignore the black border, thats just so the image can be seen on the page)

Adding properties to a shader isn’t too difficult, you just need to add them to the properties section at the top of the shader. You can add a color with the line formatted as such:

_PropertyName ("PropertyNameShownInInspector, Color) = (1,1,1,1)

This would create a property for the material that’s a color (defaulted to white), named “Property Name Shown In Inspector” in the inspector. To access the property in the shader, the variable name is “_PropertyName”.

Causing the colors to appear exactly as shown can be a little difficult, as shaders require you to define things in percentages or pixels, depending on what value you’re looking at. The easiest way to define exactly the pattern you have about would be for the shader to take in a texture mask (a black and white version of where you want the colors to be).

Here is the completed shader (a lightly edited version of the official built-in sprite shader), where anything black in the texture mask will be Color1, and anything else will be Color2:

Shader "CustomColorPattern"
{
	Properties
	{
		_MainTex ("Mask Texture", 2D) = "white" {}
		_Color1 ("Main Color 1", Color) = (1,1,1,1)
		_Color2 ("Main Color 2", 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;
				half2 texcoord  : TEXCOORD0;
			};
			
			fixed4 _Color1;
			fixed4 _Color2;

			v2f vert(appdata_t IN)
			{
				v2f OUT;
				OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);
				OUT.texcoord = IN.texcoord;
				OUT.color = IN.color;
				#ifdef PIXELSNAP_ON
				OUT.vertex = UnityPixelSnap (OUT.vertex);
				#endif

				return OUT;
			}

			sampler2D _MainTex;

			fixed4 frag(v2f IN) : SV_Target
			{
				fixed4 c = tex2D(_MainTex, IN.texcoord);
				//c.rgb *= c.a;
				if (c.r == 0 && c.g == 0 && c.b == 0) 
				{
					c = _Color1;
				}
				else
				{
					c = _Color2;
				}
				return c;
			}
		ENDCG
		}
	}
}

Pretty much all of the relevant stuff is in the “frag” function towards the bottom.

This would probably be better done by just using two sprites, or a sprite over the top of a colored plane.

You make the Sprite basically a white and transparent version of the overlay pattern, put it over the blue field, and you have control over the color of it through the .color attribute of the Sprite…