Health circle

This shader can be filled by a configurable amount, which makes it useful for representing stats such as health.

Shader code
shader_type canvas_item;


uniform float width = 0.3;
uniform float gradient_ease = 5.0;
uniform float fill_ratio = 0.8;


void fragment() {
	float fill_angle = fill_ratio * 3.141592656 * 2.0;
	vec2 uv = UV * 2.0 - 1.0;
	if (atan(uv.x, uv.y) + 3.141592656 < fill_angle) {
		float inner_width = 1.0 - width;
		inner_width *= inner_width;
		float d = uv.x * uv.x + uv.y * uv.y;
		if (d >= inner_width && d <= 1.0) {
			float w = abs((1.0 + inner_width) / 2.0 - d) / (1.0 - inner_width);
			w = 1.0 - pow(w + 0.5, gradient_ease);
			COLOR = vec4(vec3(1.0), min(1.0, w));
		} else {
			COLOR.a = 0.0;
		}
	} else {
		COLOR.a = 0.0;
	}
}
Tags
circle, health, smooth, variable
The shader code and all code snippets in this post are under MIT license and can be used freely. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

Simple Health Bar

Crossfade Circle Shader

“Unit Selected” Oscillating Circle

Subscribe
Notify of
guest

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jeremy
Jeremy
3 years ago

I get an error when trying to use this…

error(16): Expected boolean expression

Jeremy
Jeremy
3 years ago
Reply to  Demindiro

Thanks for following up! I appreciate it!

romanticist_20
3 years ago

Man, this shader is underrated! I was just thinking about how to write a health circle in GDScript and I couldn’t think of a good way (I also suck at math…) when all of a sudden I stumbled across this. Very good stuff!

Last edited 3 years ago by romanticist_20