# Different Shaped Progress Bars for Godot

Attention Topic was automatically imported from the old Question2Answer platform.

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 )
Edit: here’s an example progressbar.

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

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)

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

void fragment() {
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/

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.

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