I'm wondering how people here on GameDev stack exchange would handle curved meter GUI elements for things such as life bars or energy bars.
My thought on the matter was that you could use a shader with a cutoff value and an image which has one channel dedicated to masking the image (alpha) and one that also has a gradient which I compare to a uniform float to determine whether or not the fragment should be fully transparent.
However, I've been running into some strange behavior when writing this shader. Specifically, the shader's output has a weird artifact where the cutoff begins that looks almost like ripped paper -- the line that indicates the end of the meter has a sloppy contour.
This image has some distortion effect going on with the pixels where the lifebar is supposed to end via the cutoff uniform. There's definitely got to be a better way of doing this same thing in a more tactful way. Shader code is below:
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
sampler2D _MainTex;
float4 _Color;
float _Cutoff;
struct Vert_IN {
float4 loc : POSITION;
float4 texcoords : TEXCOORD0;
};
struct Frag_IN
{
float4 pos : SV_POSITION;
float4 uv : TEXCOORD0;
};
Frag_IN vert( Vert_IN input )
{
Frag_IN output;
output.uv = input.texcoords;
output.pos = mul( UNITY_MATRIX_MVP, input.loc );
return output;
}
float4 frag( Frag_IN input ) : COLOR
{
float4 value = _Color;
float4 valueFromMask = tex2D( _MainTex, input.uv.xy );
value.w = valueFromMask.w;
float desiredTransparency = step( valueFromMask.x, _Cutoff );
value.w = min( value.w, desiredTransparency );
return value;
}
ENDCG
(Again, the red channel of this image is actually a gradient mask used to determine where the cutoff point should be. Other channels were going to be used for something else (like special scrolling patterns or what not) )
Example of the asset used in the shader:
I'm assuming there's probably something I'm missing when using the step function that could help ease the fade-dropoff in order to make a better looking end result?
What do you think is a good method for making curved meter GUI elements? Is there something wrong with the shader code presented above that causes this strange page tearing artifact?
