Different Shaped Progress Bars for Godot

Archive
1
:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By joeyq

I would like to use a different shaped progress bar from line or circle and found this unreal engine tutorial.

Unreal Concepts - Different Shaped Progress Bars ( UE4 )
It’s probably very easy to do in a canvasitem shader in stead of a visual shader but I’m very new to shaders.
Thanks in advance!
Edit: here’s an example progressbar.

test

2
:bust_in_silhouette: Reply From: exuin

Didn’t feel like watching the whole video but maybe this shader is what you’re looking for?

3
:bust_in_silhouette: Reply From: joeyq

Thanks to the directions of exuin I looked at 2 transition shaders, one by Gratemate (Simple 2d transition - Godot Shaders) and one by GDQuest (https://www.youtube.com/watch?v=K9FBpJ2Ypb4).
I modified both a little to work as a progress bar shader
Progress bar shader 1 (modified from GDQuest)

// modified from GDQuest's Transition Shader in Godot (tutorial)(Oct 17, 2018)(https://www.youtube.com/watch?v=K9FBpJ2Ypb4)
shader_type canvas_item;
render_mode unshaded;

uniform float value: hint_range(0.0, 1.0, 0.01);
uniform float smooth_size: hint_range(0.0, 1.0, 0.0001);
uniform sampler2D mask: hint_albedo;
uniform vec4 color : hint_color = vec4(1.0, 1.0, 1.0, 1.0);

void fragment() {
	vec4 mask_texture = texture(mask, UV);
	float alpha;
	alpha = 1.0 - smoothstep(value, value + smooth_size, mask_texture.r * (1.0 - smooth_size) + smooth_size);
	COLOR.rgb = color.rgb;
	COLOR = vec4(color.rgb, mask_texture.a * alpha);
}

Progress bar shader 2 (modified from Gratemate)

// modified from GrateMate https://godotshaders.com/shader/simple-2d-transition/
shader_type canvas_item;
render_mode unshaded;

uniform float value : hint_range(-0.1,1.0, 0.01) = -0.1;
uniform vec4 color : hint_color;
uniform sampler2D heightMap;

void fragment(){
	vec4 tex = texture(heightMap,UV);
	COLOR = vec4(color.rgb, tex.a * (1.0 - clamp(floor(tex.x + value),0.0,1.0)) );
}

The one by GDQuest is imho better because you have more control with the smooth step to limit harsh transitions and the one by Gratemate starts at -0.1 in stead of 0.0.
I’m trying to look for a way to resolve the artifacts or harsh transitions as GDQueast calls them in his tutorial.
enter image description here

I provided a sample project at https://godotforums.org/discussion/30065/different-shaped-progress-bars-for-godot