Oh, actually, a similar Question has been posed on Discord, and several Answers were given. In the End, I offered a little Shader with which the Healthbar-Image would get shortened and also change its Color from Green to Red, with a nice yellow Color at Midpoint (a Feature you don't necessarily need). I will copy the Message I originally wrote to Adventure4Life into this Message, with some Adjustments --maybe you'll find it useful.(EDIT #1: Only works if you have the current Shader-Toolkit for V5 already in your Project: https://www.dropbox.com/s/jfu9zac31lbyfjo/shadertoolkit5.txt?dl=0 )(EDIT #2: I am sure sharing Part of a private Conversation is legally and morally fine, since I am only sharing my own Message, which is but a mere Instruction and includes nothing personal.)~~~You surely already have a Health-Value somewhere in your Game. I have named the Value in my Testfile "PlayerHealth" and set it to 100 initially, as full Health.
The next Step is adding an Interface-Object (technically it is categorized as a "Button", but you don't have to make it clickable, then it just is Interface-Decoration) and name it "PlayerHealthbar". My Test-Bar was a Texture with a Size of 512*24px, but any Size will automaticaly work.
Then you only have to add this as a Definition-Script:
eff = "PlayerHealth_Shader"
shader_effects[eff] = { shader = Shaders[eff].Compiled }
shaderAddEffect(eff)
shaderRemoveEffect(eff)
Buttons["PlayerHealthbar"].ShaderSet = shader_effects[eff].num.num
bind(eff, "Health", field("Values.PlayerHealth.Int * 0.01")) (The last Line in the Lua-Script, where it says "Values.PlayerHealth.Int * 0.01", that is where you can insert your Value-Name instead of "PlayerHealth" if you want.)And eventually add a new Shader under the "Shader"-Tab (I am assuming you are using Visionaire 5, you mentioned having started to try it out) named "PlayerHealth_Shader", and paste this Code into it:
#ifdef GL_ES
precision lowp float;
precision lowp int;
#endif
uniform sampler2D texel;
varying vec2 uvVarying;
uniform float Health;
void main ()
{
vec4 color = vec4(0.0);
if (uvVarying.x < Health) {
//color = vec4( mix( vec3(1.0,0.0,0.0), vec3(0.0,1.0,0.0), Health), 1.0);
color = vec4( (
vec3(pow(1.0-Health,0.33),0.0,0.0) +
vec3(0.0,pow(Health,0.67),0.0)
), 1.0);
}
gl_FragColor = (texture2D (texel, uvVarying) * color);
}
There is one Line (#12) I have commented out -- that Line basically mixes the Colors with a dark Ocre in the Middle. I don't suggest you use that, because frankly, it is just an ugly Color, but I inserted it anyway (albeit outcommented) for you to freely choose.
Instead, Lines #14 and #15 (could be one Line, but I thought I'd split it into several so you can look at it more easily) use a slightly more complex Way of Mixing where I initially used Powers of Values between 0.25 to 0.5 to give the red and green Values more rounded Falloffs and thusly have a brighter Yellow in the Middle; however, I noticed that, other than with a fully visible and fully green Healthbar, the deep red Color of low Health would never be visible because by that Point the Bar is effectively gone -- so instead, I used Powers of one and two Thirds (0.33 and 0.67) to have an intentionally uneven Color-Falloff: Now, the low Healthbar will still have quite a nice Red-Value, but the Mid-Color is more of an Orange. You can change that if you want, but I think that is the best Way to go.
