Increasing the size of a custom made health bar

[UniformEcho]

Hi folks. So this is my custom health bar (which is the maximum health you can get in a game I’m working on)

and the player will start the game with a smaller health bar like this:

As the player’s max health increases, so does the size of the health bar in a clockwise motion. I’m wondering if anyone has an idea on how I can go about tackling this issue? I’m trying to figure out how I can attach one of the curved ends of this health bar at any point.

Things I’ve tried:

I’ve thought about segmenting the health and have this shown over the full, maximum health bar. They both would have a mask applied to show the appropriate sections but I only know how to show parts of a circular material in triangular sections using the VectorToRadialValue node and it doesn’t follow the contours of those segments in the picture.

[MostHost_LA]

a couple assumptions.

1. the bar is fixed size - it will never be wider or taller.
2. the bar is a custom widget with one or more images.
3. you need the increment to be dynamic - not a preset.

Since quite a few versions ago, UMG takes custom materials on images.

This makes it possible to create a materilal that works.

First, the underlaying image will be the full healthbar.
second, we make half of it or more fade out based on a scalar.

grab UVcoord, mask B so you have a vert gradient.
pass to a lerp. Set the 0 of the lerp to a scalar. Clamp. Ceil.
plug to opacity.
​​Done.
We have the health bar disappearing based on the scalar.

second, we need to adapt some math to place the end cap.
Lucky for you it seems you are using a regular circle.

First. In a drawing program, make a full circle that positions itself exactly in the center of the healthbar you have.
find its radius - in pixels.
With that, you need its origin in pixel space.
It will likely fall outside the image. Thats fine. Use a negative value when outside the image space.
for now, I’ll assume you are lucky and the point falls at 0,50%pixel.

Converting to UV space. We have the origin at 0,.5
a radius of approx .8
We can now try to solve where the end cap must be placed along with its rotation.

Rotation first. The scalar we used before is the vertical disappearance point.

circle
(X - h)^2 + (y - k)^2 = r^2
X^2 + (y-.5)^2 = .8^2

We also know that the point created by the right angle opposite is .7-.5 in length.
our hypotenuse is the radius, .8
Sine of .8/.2 = angle.
(Soh cha toa)

given that, we van solve for x.
Cos angle = x/.8
X = .8 cos angle

We can get y as well.
sin angle = y/.8
Y= .8 sin angle

Solve those points, and we have the center of where the end cap must be placed, along with the angle.

let’s formulae it up…
angle = Cos r/(centerY - scalar)
X = r cos angle
Y = r sin angle

We can add the encap on top at the UV coords we worked out using the angle we obtained as its rotation.
I think you rotate first using uv0 as base, then offset by the coords, then Add rgb to the original full texture.

This should produce the fully dynamic bar.
will actually test this tomorrow as well, so might have diffetent input.

[UniformEcho]

@MostHost_LA

a couple assumptions.

1. the bar is fixed size - it will never be wider or taller.
2. the bar is a custom widget with one or more images.
3. you need the increment to be dynamic - not a preset.

Since quite a few versions ago, UMG takes custom materials on images.

This makes it possible to create a materilal that works.

First, the underlaying image will be the full healthbar.
second, we make half of it or more fade out based on a scalar.

grab UVcoord, mask B so you have a vert gradient.
pass to a lerp. Set the 0 of the lerp to a scalar. Clamp. Ceil.
plug to opacity.
​​Done.
We have the health bar disappearing based on the scalar.

Up until this part on what you said, do you mean like this?
https://gfycat.com/deadlywhisperedamericanrobin
I do have a more faded out image underneath this material image in a widget BP so it looks like health being filled.

Material BP:

[MostHost_LA]

Actually working on it right now. Changed a few things to simplify the material.
for the opacity mask to work an IF statement works best.

working on the rest of the math…

[UniformEcho]

@MostHost_LA

First. In a drawing program, make a full circle that positions itself exactly in the center of the healthbar you have.
find its radius - in pixels.
With that, you need its origin in pixel space.
It will likely fall outside the image. Thats fine. Use a negative value when outside the image space.
for now, I’ll assume you are lucky and the point falls at 0,50%pixel.

I’m confused on finding the origin in pixel space. I have the radius of my circle in pixels and don’t know what you mean by falling outside the image and 0,50%pixel.
Here is how I did my circle. I put it in the middle of my health bar. Radius is 102px. If I hover over the origin in the circle, its coordinates is 902, 1131. I’m using Gimp by the way.

](filedata/fetch?id=1786998&d=1594507812)

[MostHost_LA]

I have to go, so I can’t finish this, but this should explain where and how to put things into the correct scape. The offset is not correct - appears to be inverse of what’s needed.

[UniformEcho]

Thanks for your help so far. I appreciate it.

[MostHost_LA]

I was thinking on it while driving and remebered that i had btpassed the sine.
also .5 needs to be added to the Y axis…
cant wait to get back to this.

[UniformEcho]

Would a CustomRotator node work after the add node into the texture sample UV input like in my material BP image? I feel like I’m almost getting there using it but I’m still trying to understand the full BP logic myself.

[MostHost_LA]

So, the custom rotator node is a good idea, AND you can get it to work IF you use a square image.

Start with a basic Angle.
1/360 = ratio.
Multiply by a scalar. this scalar can go from 11 to 350.
Multiply this by -1 to invert it so that the health-bar will grow clockwise.

From this angle you can start creating Custom Rotator nodes to generate the circular motion.

The idea is that you add/subtract different samples of the same texture mixed in with different custom rotators.
Sort of like your code had it, but with a lot less complexity since there is really only the need for the 1 scalar.

The first rotator will take in the angle and subtract -.02 to create the beginning end-cap. It will also need to clamp to a min of -0.5. The clamp is needed for going past 180.

Make a function that takes in UV and clips the value out in a solid black/white mask on a .5 value (shared code above witht he IF statement).

Pass the rotator to this function, plug into the final result and visualize.

You will have a rotating black and white texture line that matches the Angle you input (plus the offset).

Take a Texture Sample of the square file, and subtract from it’s RGBA (because we need the transparency too) the result of the invers (1-) of the rotator.

This will generate the starting point. With the file similar to what you have shown above you should be able to create the initial part that cuts into a solid line.

To this, you need to add in the endcap.

make another custom rotator, this time feed it the multiply-1 directly.
Get the 1- of the node and plug it into the UV of a new texture sample.
Subtract the NON -1 rotator from before. Clamp.

Add the 2 nodes together, and that’s your Hot Start.

To get the bar to grow past 180deg you need to introduce a 3rd sample, repeat the angle process, and clip the various angles based on the angle being above or below 180.
You subtract a “half texture” either the right side or the left side.

Additionally, this whole process has to be repeated to get the inner color to grow/animate as well.
I would create an entirely different texture to “fill” the circle with, and copy/paste the formula, then just overly all of it with an ADD node mask.

Additionally, my idea from before isn’t “trash”, if you just adopt a unit circle and the simple (yet ephemeral) notion that you already know the correct angle based on the value of the health bar size.
It’s literally 180 / the scalar - in the case of half a health bar.
Given that, you can actually calculate the X and the Y with just radius and
Soh cha toa.

I’m not positive which pathway is less complex material instruction wise, but I doubt either way that performance would be impacted by a health-bar…

[MostHost_LA]

Came up with the ATAN2 solution that was really needed to limit instructions. I have a much more performance conscientious end result.
IN screenshot format, this is the angle to use:

It is an Angular gradient, more so then a radial one. but hey…

The material function at the end is literally the IF statement I have been using al along - packed into a function that takes a 0-1 value to clip it. The angle is fed into it to generate the rotation.

You can see my full material on this vid:

UE4 UI shader - Growing Circular Healthbar

[UniformEcho]

Thanks a lot for doing this! This is very impressive work and very helpful. Working with materials is a weak area for me so I’m going to have to watch your video multiple times.

My final result:

anonymous