Grayscale Shader

[shy wharf]

No need to reply, just made this thread to help @steady storm.

shader_type canvas_item;
// Set this from a script.
uniform float percent: hint_range(0, 100) = 50.;
uniform float line_scale: hint_range(0.000001, .5) = 50.;
uniform vec4 line_color: source_color;

void vertex() {}
void fragment() {
    float vertical =  1. - UV.y; // Black to white vertical gradient 
    float threshold = (.01 * percent); // Convert [0,100] percentage to [0,1] threshold
    float difference = abs(threshold - vertical);
    float line_amount = step(difference / line_scale, 1.);
        
    vec3 color = COLOR.rgb;    
    float grayscale = (color.r + color.g + color.b) / 3.0;
    vec3 gray_color = vec3(grayscale);
    float mix_amount = step(threshold, vertical);
    
    color = mix(color, gray_color, mix_amount);
    color = mix(color, line_color.rgb, line_amount);
    
    COLOR.rgb = color.rgb;
}```

The line width is defined as a percentage of the sprite's height, since it's based on UV.y

This shader will work best with big sprites, >100px tall. If you're using smaller sprites, you probably need a border thats a fixed pixel size.

This shader also assumes that your sprites are cropped closely - if the sprite has a lot of whitespace at the top or bottom, the percentage gradient will show up wrong

[steady storm]

luckily I did crop it properly, and I'm very thankful! I managed to mess around with the shader language and create a hit_tint/healing_tint too, and I'm very happy about it lol

[steady storm]

Thank you so much once again ❤️

[shy wharf]

You might also want to lighten or darken the grayed out areas - as you can see on the skeleton, it's pretty much invisible

You could do that by changing the gray_color before you mix it into the final color - either multiply it by a tint, or maybe use mix() to move it towards a target color. They have subtly different effects