How to create a round HUD ? ( with health / energy )

Someone has an idea how to create a round / radial HUD with health, energy, buffs in UMG?
Creating a new UMG component with c++ would be nice.

Something like that:


I found this thread:

Its kind of related to my question, but i dont want a circle as a HP bar.

Every help is welcome :slight_smile:

I don’t think you need to do any custom C++ solutions, you just need to apply a texture and some sort of texture mask via a material, then apply the material to an image widget.

hmm, thanks for the answer, but i want to build a round / curved progression bar without the material workround.

The material approach isn’t a work around, it’s the simplest and most flexible way of getting the result you are after. Just draw your alpha mask in the shape you want and scale the alpha up and down. The material system then automatically does all the work.

Any other approach will involve a lot of programming + math for something that the engine already does for you. Why would you want to ignore one of the most unique and powerful things this engine provides?

GeekyPayback is correct, the material approach isn’t a workaround, it’s the intended workflow. My hope is we can make the workflow of materials easier in the future for very simple effects, but the material editor is so incredibly powerful that it permits far more amazing effects than we could ever hope to build into any stock widget.

Thank you all :slight_smile: I will try the material approach.

i created a curved bar, but i have problems with pixels at the edges. (stairs effect)

my circle mask in the material. i think my origin for this problem lies here.

how can i smooth the edges?

The stepping is aliasing, and it’s because your mask is completely solid, it’s either 1 or 0, because of the ‘Ceil’ nodes, what you’re effectively doing is telling the engine that this material is either there, or it isn’t. There’s no in-between, and therefore you get a hard line at the edge.

A better approach would be to make the mask as a texture, and import it. That way you get much finer control over the softness of the edges. If you’re not familiar with image-editing tools, I might be able to knock one up quickly for you :slight_smile:

thanks for the help :slight_smile:

okey ceil is my problem. is there something like an antialiasing node? or maybe i should create a custom node to replace the ceil node?

if i use a texture, i need to define the resolution and the width of the circle. With my current approach its all math and independent from resolution and i can change the width with a parameter.

Make the texture for the highest resolution you want to support and UnrealEngie will scale down to the other resolutions for you. Remember that using a texture means that you can blend the edges so the resolution becomes less of an issue.

Re - Adjusting the width, you just open your paint package, adjust it and click save. Unreal 4.7 and above will then spot you’ve changed the file, re-import it and apply it to your material, you can just click play and preview it in game then.

You really are trying to over complicate this :slight_smile: