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

Related shaders

Simple Circle Transition

Simple circle transition

Focus circle / ring

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.
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jeremy
Jeremy
7 months ago

I get an error when trying to use this…

error(16): Expected boolean expression

Jeremy
Jeremy
7 months ago
Reply to  Demindiro

Thanks for following up! I appreciate it!

romanticist_20
romanticist_20
3 months 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 months ago by romanticist_20