Health(Mana) bar in ball container (sphere) (ver 1.3.3)

The border mixing issue has now been resolved! 

解決了球缸邊界與水的顏色混合問題!

[Auto control] Health(Mana) bar in ball container

。Suggestion

The height value represents the percentage of health (or mana), ranging from 0 to 1.

height為血量(或魔力值)的百分比,範圍從 0 到 1。

wave_num suggest set as the 2(default) or 3 value.

wave_num 值建議設定2或3。

 

。Change Log

。ver1.3 add:

  1. A refraction effect has been added. The refraction_ratio_glass and refraction_ratio_water values control the degree of refraction for the background. | 增加折射效果。 refraction_ratio_glass 和 refraction_ratio_water 值控制背景的折射程度。

。ver1.2 add:

  1. A new option, border_exclusion_effect, has been added. When the border_exclusion_effect is set to true, it creates an ‘exclusion’ effect when the water covers the border, making it appear as though the realistic water is in a transparent container. When the value is set to false, the border will remain on top and will not mix with the color of the water. | 新增選項:border_exclusion_effect。當 border_exclusion_effect 設定為 true 時,水面覆蓋邊界時會產生「排除」效果,如真實的水在透明的容器中(主觀拉)。當值設定為 false 時,球缸邊界顏色不與水混合。
  2. In version 1.1, the source_color value of alpha had no effect, but in version 1.2, it now allows you to change the opacity. |在 1.1 版本中,source_color 的透明度不起作用,但現在可以了。

。ver1.1 add:

  1. When the wave_num value is greater than 2, the waves on the opposite side may appear unrealistic. To address this, a wave_fix_on_border boolean option has been added to control whether to fix it. However, leaving it unfixed will provide a more natural look when wave_num equals 2.|當 wave_num 值大於 2 時,半邊波浪的波動看起來非常詭異。現在加入了 wave_fix_on_border 布林值選項來設定是否修復其問題。但當 wave_num 等於 2 時,不設定上述選項反而會看起來更自然!
  2. When the height value is set to 1 or 0, the water will remain still, appearing either completely full or dry.|當height值設定為 1 或 0 時,水會保持靜止不動,看起來更合理直觀。
  3. Fixed an issue with the border color rendering, ensuring the correct color is applied. But only the situation when the water does not cover the surface will render the correct color.|修正了球缸邊界顏色的問題。但只有在水沒有覆蓋球缸表面的情況下,才會呈現正確的顏色。
  4. The water_back_lightness controls the color of the water’s far surface. It is calculated by multiplying the water_color by the water_back_lightness value. The default value is 0.8, which makes the distant water surface appear darker than the water in the foreground.|water_back_lightness 控制遠方水面的顏色。其值為 water_color 乘以 water_back_lightness 值。其值預設值是 0.8,讓遠方的水面看起來比前面的水面還要暗。
Shader code
shader_type canvas_item;

uniform sampler2D screen_texture : hint_screen_texture, repeat_disable, filter_nearest;

uniform bool light_effect = false;
uniform bool border_exclusion_effect = false;
uniform bool wave_fix_on_border = false;

uniform vec4 water_color: source_color = vec4(1, 0, 0, 1);
uniform float water_wave_speed : hint_range(-100, 100, 0.01) = 2;
uniform float water_wave_ci: hint_range(0, 2, 0.01) = 0.05;
uniform float water_back_lightness: hint_range(0, 1, 0.01) = 0.8;
uniform vec4 ball_color: source_color = vec4(vec3(1), 1);
uniform float ball_border_ci : hint_range(0, 50, 1) = 5;
uniform float ball_light_speed : hint_range(-100, 100, 0.01) = 2;
uniform float wave_num : hint_range(0, 8, 1) = 2;

uniform float ini_Time = 0.;

uniform float height : hint_range(0, 1, 0.01) = 0.5;

uniform bool vibration_effect = false;
uniform float vibration_effect_timelength: hint_range(0, 10, 0.01) = 4;
uniform float vibration_speed : hint_range(-100, 100, 0.01) = 4;
uniform float vibration_magnitude : hint_range(0, 10, 0.01) = 0.25;
uniform float vibration_wave_ci: hint_range(0, 2, 0.01) = 0.05;

uniform float refraction_ratio_glass: hint_range(0, 10, 0.01) = 0.2;
uniform float refraction_ratio_water: hint_range(0, 10, 0.01) = 0.6;

vec4 ontop(vec4 base, vec4 blend){
	return mix(base,blend,blend.a);
}

vec4 exclusion(vec4 base, vec4 blend){
	return base + blend - 2.0 * base * blend;
}

float easeOutExpo(float x){
	return x == 1. ? 1. : 1. - pow(2., -10. * x);
}//from https://easings.net/zh-cn#easeOutBounce

vec2 shiftuv(vec2 uv, float shiftratio) {

	vec2 suv = (uv - 0.5)*2.;

	return (suv + sign(suv)*suv*suv*-1.*shiftratio)*0.5 + 0.5;
}

vec2 UVtoSreenUV(vec2 uv, bool is_camera_center, vec2 texture_pixel_size, vec2 screen_pixel_size, vec4 fragcoord) {

	vec2 suv = (uv - 0.5)*2.;

	if (is_camera_center) {

		return (fragcoord.xy + suv/texture_pixel_size)*screen_pixel_size*0.5;
	} else {

		return (fragcoord.xy + suv/texture_pixel_size)*screen_pixel_size;
	}
}

void fragment() {

	float NTIME = vibration_effect ? TIME - ini_Time : TIME;

	vec2 uv = (UV - 0.5)*2.;
	vec2 suv = UV*0.5 - 0.5;

	float a = wave_fix_on_border ? 2. : 1.;
	float b = wave_fix_on_border ? 1. : 0.5;
	vec4 Cw = textureLod(screen_texture, UVtoSreenUV(shiftuv(UV, refraction_ratio_water), false, TEXTURE_PIXEL_SIZE, SCREEN_PIXEL_SIZE, FRAGCOORD), 0.0);//vec4(0.);
	vec4 Cg = textureLod(screen_texture, UVtoSreenUV(shiftuv(UV, refraction_ratio_glass), false, TEXTURE_PIXEL_SIZE, SCREEN_PIXEL_SIZE, FRAGCOORD), 0.0);//vec4(0.);

	if (distance(UV, vec2(0.5,0.5)) > 1.0/2.0) {

		COLOR = vec4(0.);
	} else {

		if (height == 1. || height == 0.) {

			COLOR = vec4(water_color.rgb,height);
			
			if (height == 0.) {

				COLOR.rgb += Cg.rgb;
			} else {

				COLOR.rgb += Cw.rgb;
			}
		} else {
	
			float plane_inclined_ratio = 0.1;
			float fix_x = sqrt(1.-pow(suv.y,2));
			float dH = sin(mod((UV.x*fix_x + TIME*water_wave_speed)*PI, TAU))*plane_inclined_ratio;
			float dHo = sin(mod((UV.x*fix_x + -TIME*water_wave_speed)*PI + PI, TAU))*plane_inclined_ratio;
	
			float t = easeOutExpo(min(NTIME, vibration_effect_timelength)/vibration_effect_timelength);
			float H = vibration_effect ? mix(height - uv.x*cos(NTIME*vibration_speed), height, t) : height;//*vibration_magnitude
			float CI = vibration_effect ? mix((water_wave_ci + vibration_wave_ci)*vibration_magnitude, water_wave_ci, t) : water_wave_ci;

			if (sin((cos(suv.x*PI*a) + NTIME*water_wave_speed)*wave_num)*CI + (1. - H) > UV.y + dHo) { 

				COLOR = vec4(0.);
				COLOR.rgb += Cg.rgb;
			} else {

				COLOR = vec4(water_color*water_back_lightness);
				COLOR.rgb += Cw.rgb;
			}
			
			if (sin((cos(suv.x*PI*a + PI*b) + NTIME*water_wave_speed)*wave_num)*CI + (1. - H) < UV.y + dH) { 

				COLOR = vec4(water_color);
				COLOR.rgb += Cw.rgb;
			}
		}

		float L = 0.;

		if (light_effect) {L = cos(distance(UV, sin(suv*suv) + NTIME*ball_light_speed))*0.25;}

		COLOR = border_exclusion_effect ? exclusion(COLOR, vec4(vec3(1.),pow(distance(UV, vec2(0.5,0.5))*2.,ball_border_ci) + L)*ball_color) : ontop(COLOR, vec4(vec3(1.),pow(distance(UV, vec2(0.5,0.5))*2.,ball_border_ci) + L)*ball_color);
	}
}
Live Preview
Tags
animation, Health Bar, liquid fill inside sphere
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.

More from xcv145336

[2D]Radial Shine 2

[Auto control] Health(Mana) bar in ball container (sphere) (ver 2.3.2)

[2D]Fireworks ver 2.1

Related shaders

[Auto control] Health(Mana) bar in ball container (sphere) (ver 2.3.2)

Actual Heart Health Bar

Simple Health Bar

guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments