Sprite progress bar
Convert any sprite into a progress bar with the help of color overlay.
Shader code
// UPDATED VERSION FOR GODOT 4
shader_type canvas_item;
uniform vec4 overlay_color : hint_color = vec4(1.0, 1.0, 1.0, 1.0);
uniform float progress : hint_range(0.0,1.0) = 0.0;
uniform float strength : hint_range(0.0,1.0) = 0.0;
void fragment() {
vec4 custom_color = texture(TEXTURE, UV);
if (1.0 - UV.y <= progress && custom_color.a != 0.0) {
custom_color.rgb = mix(custom_color.rgb, overlay_color.rgb, strength);
custom_color.a = COLOR.a;
COLOR = custom_color;
}
}
// FOR GODOT 3.X
shader_type canvas_item;
uniform vec4 overlay_color : hint_color = vec4(1.0, 1.0, 1.0, 1.0);
uniform float progress : hint_range(0.0,1.0) = 0.0;
uniform float strength : hint_range(0.0,1.0) = 0.0;
void fragment() {
if (1f - UV.y <= progress) {
vec4 custom_color = texture(TEXTURE, UV);
custom_color.rgb = mix(custom_color.rgb, overlay_color.rgb, strength);
COLOR = custom_color;
} else {
COLOR = texture(TEXTURE, UV);
}
}
the shader affects the whole sprite as in not only the actual thing with color and shape but the png background as well
that issue is only for the godot 4.0 code :/
Yeah so the shader language have been updated for godot 4 so you need different code depending on which version.
But I havn’t tried the latest alpha yet, is it broken if you use the correct version?
Hi, I love the shader but the shader is accounting for each node including child nodes. So if I have a label node inside that sprite node that says it’s price tag or something, the progress overlay won’t be parallel. i.e. When the sprite is at 50% overlay, the label node inside that sprite will also be at 50% overlay. I used ChatGPT’s help to fix this and I’ve tested it thoroughly. I mean no disrespect and I just want to improve the shader.
Here’s the modified version for Godot 4:
shader_type canvas_item;
uniform vec4 overlay_color : source_color = vec4(1.0, 1.0, 1.0, 1.0);
uniform float progress : hint_range(0.0, 1.0) = 0.0;
uniform float overlay_strength : hint_range(0.0, 1.0) = 0.0;
void fragment() {
vec4 custom_color = texture(TEXTURE, UV);
if (1.0 – UV.y <= progress && custom_color.a != 0.0) {
// Mix the overlay color with the original color using overlay_strength
custom_color.rgb = mix(custom_color.rgb, overlay_color.rgb, overlay_strength);
custom_color.a = COLOR.a;
COLOR = custom_color;
}
}
Turns out I was dumb. The code still doesn’t work. Sorry.
godot 3.5 this change make the shader works perfectly in godot 3.5
shader_type canvas_item;
uniform vec4 overlay_color : hint_color = vec4(1.0, 1.0, 1.0, 1.0);
uniform float progress : hint_range(0.85,1.0) = 0.0;
uniform float strength : hint_range(0.0,1.0) = 0.0;
void fragment() {
vec4 custom_color = texture(TEXTURE, UV);
if (1.0 – UV.y <= progress && custom_color.a != 0.0) {
custom_color.rgb = mix(custom_color.rgb, overlay_color.rgb, strength);
custom_color.a = COLOR.a;
COLOR = custom_color;
}else{
COLOR = texture(TEXTURE, UV);
}
}