- Home /
Help with the final step of an "Unmoving Plaid" UI shader
I have some UI which needs to have a simple repeating background, which doesn't transform when the UI image transforms. In other words I need to create an unmoving plaid effect. I can't use a mask because the transform of the child holding the pattern will inherit the mask's transform.
I've gotten pretty far already. (Gif) However, the image being used for the background there is the same size as the screen. I'd like to create a simple, tiny, single tile image such as this one and have it repeat properly, instead of what happens now, with the image being stretched to fill the screen.
Here's my shader - I realize this is probably quite a simple fix, at the end of the fragment shader, but I'm drawing a blank. If anyone could help me it would be much appreciated!
Edit - Oh, and an additional less important question. The effect doesn't work in the scene view. Is there a way to fix that?
Shader "Custom/UnmovingPlaid"
{
Properties
{
_MainTex("Main Texture", 2D) = "white" {}
_Detail("Detail", 2D) = "white" {}
}
SubShader
{
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
"PreviewType" = "Plane"
"CanUseSpriteAtlas" = "True"
}
Cull Off
Lighting Off
ZWrite Off
ZTest Always
Fog { Mode Off }
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
uniform sampler2D _MainTex;
uniform sampler2D _Detail;
struct appdata
{
float4 vertex : POSITION;
float4 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
float4 screenPos : TEXCOORD1;
};
v2f vert(appdata v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.screenPos = ComputeScreenPos(o.vertex);
o.uv = v.uv;
return o;
}
float4 frag(v2f i) : SV_Target
{
fixed4 col = tex2D(_Detail, i.screenPos);
return fixed4(col.r, col.g, col.b, tex2D(_MainTex, i.uv).a);
}
ENDCG
}
}
}