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

Artsy Circle blur type thingy

Circle Shader

guest

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jeremy
Jeremy
1 year ago

I get an error when trying to use this…

error(16): Expected boolean expression

Jeremy
Jeremy
1 year ago
Reply to  Demindiro

Thanks for following up! I appreciate it!

romanticist_20
romanticist_20
1 year 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 1 year ago by romanticist_20