+1 vote

I would like to use a different shaped progress bar from line or circle and found this unreal engine tutorial.
https://www.youtube.com/watch?v=0Q53V-KreDg
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

in Engine by (119 points)

2 Answers

+1 vote
Best answer

Thanks to the directions of exuin I looked at 2 transition shaders, one by Gratemate (https://godotshaders.com/shader/simple-2d-transition/) 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

by (119 points)
selected by
0 votes

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

by (8,546 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.