For a simple solution i would use a node like Sprite
/ TextureRect
/ CanvasLayer
with an image of an overlay with blurry red borders and maybe some blood drops and whatnot, you can animate this with a shader but i'd advise on directly animating it graphically (maybe use a series of animations and then using a shader on the viewport rect itself) and using AnimatedSprite
s, after that lay all that on top of everything (You can easily do this setting the Z-index to a high number and disabling "Relative")
Then in whichever script the player's HP is, in _process
or _physics_process
i would change that node's alpha (modulate.a = X
) according to the player's HP.
You will tweak and figure out how you want it, but lets say it would be: invisible at full HP, fully visible at lowest HP, then it would be something like this:
First we will use rule of proportion to "translate" our HP to numbers between 0-255 (The alpha channel mix-max):
var hp_translated = currentHP * 255 / maxHP
and then
$Bloodyoverlay.modulate.a = 255 - hp_translated
Lets say maxHP is 100 and we're at full health:
100 * 255 / 100
is of course 255
255 - 255
is of course 0
Meaning the overlay would be invisible (Alpha channel = 0)
Now if we were at 0 HP, lets save the easy math: hp_translated
would be 0 and 255 - 0 = 255 so the overlay would be fully visible.
You could also tweak the math to make it start becoming visible at <50 HP or things like that.
Hope this helps!