- Home /
Gradient over multiple tiled objects
Hello friends!
I've bit off more than I can chew. I am creating a tile-based 2D platformer, and am trying to create an effect where the ground tiles are smoothly gradiented as though the entire ground was one texture, rather than being constructed out of many textures/quads/objects.
Here is a simplified (and very ugly) example of what I mean.
I am bad at things and don't know what to do. Some words that are popping to mind are… uh… shaders… masks… uhhhhhh… other things? If this is impossible, I could probably achieve a hideous version of this using carefully placed lights and tiles with appropriate albedos, but that seems like a messy option.
Thanks for the help! :D
If you don't want to mess with shaders, this can also be done by using Vertex Colors. You need to use a shader that supports those, of course. Then you just have to find out which color each vertex of the mesh will have. For example, if you start at color 1,1,1 and move up to 0,0,0 (black, and you have 4 tiles with four vertices each, the first two on the y axis are 1,1,1, the next two are 0.25,0,25,0.25, and so on.
Answer by Wabrion · Aug 17, 2021 at 09:29 AM
I doubt the answer will be of any use to you, it's been a long time, but it will still be of use to someone in the future. @brendanmk That effect is only achieved with a shader, similar to this one:
Shader "MyShaders/Gradient"
{
Properties
{
_MainTex ("Tint Color (RGB)", 2D) = "white" {}
_Color0("First Color", Color) = (1,1,1,1)
_Color1("Second Color", Color) = (1,1,1,1)
}
Category
{
Tags
{
"Queue" = "Geometry"
"RenderType"="Opaque"
}
SubShader
{
// No culling or depth
Cull Off ZWrite Off ZTest Always
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma fragmentoption ARB_precision_hint_fastest
#include "UnityCG.cginc"
struct appdata_t {
float4 vertex : POSITION;
float2 texcoord: TEXCOORD0;
};
struct v2f {
float4 vertex : POSITION;
float4 uvgrab : TEXCOORD0;
float2 uvbump : TEXCOORD1;
float2 uvmain : TEXCOORD2;
};
#define SRGB_TO_LINEAR(c) pow((c), fixed3(2.2, 2.2, 2.2))
#define LINEAR_TO_SRGB(c) pow((c), fixed3(1.0 / 2.2, 1.0/2.2, 1.0/2.2))
#define SRGB(r, g, b) SRGB_TO_LINEAR(fixed3(float(r), float(g), float(b)) / 255.0)
float4 _MainTex_ST;
sampler2D _MainTex;
fixed4 _Color0;
fixed4 _Color1;
v2f vert (appdata_t v) {
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
#if UNITY_UV_STARTS_AT_TOP
float scale = -1.0;
#else
float scale = 1.0;
#endif
o.uvgrab.xy = (float2(o.vertex.x, o.vertex.y*scale) + o.vertex.w) * 0.5;
o.uvgrab.zw = o.vertex.zw;
o.uvmain = TRANSFORM_TEX( v.texcoord, _MainTex );
return o;
}
float gradientNoise(in fixed2 uv)
{
const fixed3 magic = fixed3(0.06711056, 0.00583715, 52.9829189);
return frac(magic.z * frac(dot(uv, magic.xy)));
}
half4 frag( v2f i ) : COLOR
{
fixed2 a = 0.1 * _ScreenParams.xy; // First gradient point.
fixed2 b = _ScreenParams.xy; // Second gradient point.
fixed2 ba = b - a;
float t = dot(i.vertex - a, ba) / dot(ba, ba);
t = smoothstep(0.0, 1.0, clamp(t, 0.0, 1.0));
fixed3 color = lerp(_Color0, _Color1, t);
color = LINEAR_TO_SRGB(color);
color += (1.0/255.0) * gradientNoise(i.vertex) - (0.5/255.0);
half4 fragColor = half4(color, 1.0);
return fragColor;
}
ENDCG
}
}
}
}
Once the shader is created, just create a material with it, right click and then select Create > Material. Applies the material on the tilemap renderer component.
The shader is not mine, this is the original source: Original Shader
Your answer
Follow this Question
Related Questions
Work with Gradient Alpha Mask UI 0 Answers
Horizontally gradient on image UI element 5 Answers
Implement texture masking into simple existing shader 1 Answer
How to apply refraction at marked texture pixels while the rest is being rendered normal? 1 Answer
Shader: Cutout behavior mixed with masking behavior 0 Answers