Health circle

Demindiro

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;
	}
}
Live Preview
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

Comments 4

  1. Jeremy

    I get an error when trying to use this...

     

    error(16): Expected boolean expression

    1

    1. Ah, there is an '=' instead of a '==' there. I'm not sure how that snuck in...

       

      EDIT: it actually needs to be if (d <= 1.0 && d >= inner_width) instead of if (d = inner_width). I guess that for some reason the things between the angle brackets got interpreted as HTML and got removed? :thinking:

       

      EDIT 2: Indeed, the site is removing it automatically.

       

      Thanks for letting me know!

      2
      1. Jeremy

        Thanks for following up! I appreciate it!

        1

  2. 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!

    0