Health + Shield in one progress bar

How to create a health bar similar to this, which has both shield and health in the same progress bar. If the player does not have a shield, the whole progress bar is covered by health and if the player has a shield the x% of the progress bar is taken over by the shield and rest y% belongs to health.

258878-unknown.png

2x progress bars (or even borders, depends on what you need, really) wrapped with a horizontal box, with Size set to Fill:

The Size variable dictates how much of the parent space the widget occupies. In this case, the blue one has been set to take 25%, the green takes 75%.

When the player loses the shield, set the green to 1.0 and hide the blue. If you use a progress bar for the health, you’ll have an option for the player to have a bit of health and a full shield, too.

Instead of using two progress bars isn’t it possible to do it using the material.

258948-unknown-1.png

It also has a shield in health and I don’t think this uses two progress bars

I would just use the “overlay” option. Create 2 progress bars, health first then shield so shield is always drawn last and over the health bar. In the shield’s background style options, go to tint, set the alpha to 0. You now have 2 overlaid bars when the shield depletes it will reveal the health bar below. Each can be independently controlled with code/script to function however you like in your game.

It would end up looking like this no?

Shield would never be actually on top of the health bar

What you want is probably something like this: Health Bar + Shield Unreal Test - YouTube

Achieved by this function:

Zoom 1:

Zoom 2:

The bars are just two images inside a Horizontal box:

320637-widget-outline.png

Images are set to auto and align on left:

320638-slot-config.png

Is the same possible with Health + Shield + Absorb, so 3 different images?

Well it is, but I didn’t use this method as we created a material that does the thing I was looking for.