Simple Health Bar

Simple Shader to display health or progress using 1 unique color and one float (range 0 -> 1)

I have a tutorial on how to customize and go further with this concept and it will be linked here hopefully.

Can be used for health, stamina, fire rate, level loading, hunger… 

Can be used on sprites to follow things around the game or in GUI to display info on he HUD.

Could work with 3D, decals, icons…

The shader code is CC-0, go wild

Shader code
shader_type canvas_item;
uniform vec4 color : hint_color;
uniform float health;

void fragment() {
// ColorUniform:2
	vec3 n_out2p0 = color.rgb;
	float n_out2p1 = color.a;

// VectorOp:8
	vec3 n_in8p1 = vec3(0.50000, 0.50000, 0.50000);
	vec3 n_out8p0 = n_out2p0 * n_in8p1;

// Input:3
	vec3 n_out3p0 = vec3(UV, 0.0);

// VectorDecompose:4
	float n_out4p0 = n_out3p0.x;
	float n_out4p1 = n_out3p0.y;
	float n_out4p2 = n_out3p0.z;

// ScalarUniform:6
	float n_out6p0 = health;

// Compare:5
	bool n_out5p0 = n_out4p0>=n_out6p0;

// VectorMix:7
	vec3 n_out7p0 = mix(n_out2p0, n_out8p0, vec3(n_out5p0 ? 1.0 : 0.0));

// Output:0
	COLOR.rgb = n_out7p0;

bar, gui, health, progress, stamina
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

Simple Radial Progress Bar

Health circle

Circular Life Bar

Notify of

1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
10 months ago

Refactored version (Godot 4, CC-0):

shader_type canvas_item;

uniform vec4 color : source_color = vec4(vec3(1.0), 1.0);
uniform float health : hint_range(0.0, 1.0) = 0.5;

void fragment() {
    vec4 background_color = vec4(color.rgb * vec3(0.5), color.a);
    COLOR = UV.x < health ? color : background_color;