Download

Problem with implementing custom semicircular life/mana bar

I would like to implement life/mana bar behavior.

I know I should implement dynamic material instance and then handle this with UMG widget blueprint. I tried following https://forums.unrealengine.com/showthread.php?2470-Circled-shaped-HP-bar-with-alpha-mask** thread but with no success.

Here is what I achieved after implementing algorithm mentioned in thread above. Behavior is totally wrong. Bars decrease/increase strangely and quality is really bad:
446f9a2960c96358577e7e97928859b58b3cb80e.png

I would like my life/mana bar to work like this one (but I would like this to be semicircular instead of full circle and work for two bars (life/mana)):
611cf607a3978c1be3630964a3a278f3cca5858e.jpeg

Please provide some blueprint examples if possible.

Thank you in advance.

First you need mask for those bars, multiplying color texture by 60 does not turn it into mask.
Make proper mas for bars, put in into textures alpha or as separate texture.
Then use circular gradient from other thread to mask empty part of bars.

Thanks for immediate response. How should I make proper mask for these bars?

Black and white mask. You make area where you want changing bar white. Rest black. Make sure all is 1,1,1 (255,255,255 in photoshop) for white and zeros for black.
Also pay attention to edges of areas. Best way to make those masks is to use vector shapes in photoshop, then flattern it before saving or copy/paste.

To make “composite mask”:
Load your color texture, in new layers do separate black or white masks for blue and red bars, keep attention to detaails this will determine quality of bars.
Now copy those masks to separate chanells in new black image of same resolution as color texture.
Copy red bar to red channel and blue to blue channel of new mask texture.
You probably need some juggling with flattern and copy paste, but that is photoshop, i am not good at it.

Result should look like red and blue bars you have but filled with flat constant colors.

Then you use this mask instead of texture that you multiplied by 60. However connect read and blue pins instead of white dot, and instead of multiply by 60 connect there that rotating gradient from second pic.

Thank you very much. Thats all clear except one thing. How should I get rotating gradient you mentioned? The sample I provided in first post is example for UE4 docs.

It is all there in thread you linked at top, but cannot follow.

However you are making mask anyway and you have 1 channel empty (only R and B are used).
So for Green G you add one more mask. Split R mask in middle and do: left side white and right side black. (or opposite).
You may experiment here and maybe cover only quarter or 135 degrees is what you need.

Then you use texture rotator to rotate this mask. For speed set it to 1. As time plug your variable you pass from blueprints.
Rotator has also center values, because of shape of bars you probably need move center to middle on bottom edge.

Multiply this by left or right bar mask then connect this like i wrote in previous post.

Each node has live preview, you also can preview them in render window. Right click on node there are preview options.
Build this whole thing step by step:

Rotating R mask, when this works multiply by red or blue bars. See if this is what you need, find values for variable you plugged in time node of rotator. You need different values and directions for red and blue bars, write them down for later use in blueprint.

Then plug that resulting mask into color texture.

Ps if that color texture is not power of 2 and square, make new one that fits one of sizes: 512x512 1024x1024 2048x2048. I am not sure what you will get rotating non square mask.

Ok, I will experiment and return to you later on.