Circled-shaped HP bar with alpha mask

that’s a nice effect there jeremy :slight_smile:
doing stuff without textures is the most fun :smiley:

made a radial hud for our game without textures as well, but i’d have to ask my boss if i could share the setup…

That’s awesome…We need a Tip Jar Button on these forums…

**At the request of a user, I have quickly made another version of this shader which is meant for bright backgrounds. **
You may download the TransLu version here: Dropbox - UForumHelp_DynRadial_TransLu.rar - Simplify your life

Below is a demo of the HP System Colors on a bright background:


To simply reverse the progression type, you may do this:


Thanks man! Put your round bars in good use. They works perfectly. Do you happen to know the best way to make the bars so that the egdes are round-shaped? Do i need to draw some texture or sprite and add material to mask the rough corners?


The falloff of the bar is determined by the inner and outer settings within the shader. There are 2 parameters for each which can be tweaked in order to achieve different styles such as the one in my video above*

Edit: I think I misunderstood you. You are wanting rounded ends rather than harsh corners? “Not the bars falloff” but actual rounded edges? For something like this, you could add a dynamic texture mask yes.


Yeah. And i wasn’t referring to your circle-shaped HP-bar but rather the XP bar that is next to it :). It would be much better if it have a soft edges. I was just wondering what would be best way to approach doing it.

Thank you so much man. I have been looking all over forums for this and you did it with a unique style. My issue now is bringing interactive materials, like the health bar in your video, into the in-game HUD.

No problem DeMariez, I am glad it was helpful :slight_smile:


This is very awesome stuff. Now I have a question/request. Is there a way to reverse the order? Make it feel up and possibly change colors as it fills up? Say I have an energy bar that I refill with say holding down a key.
Same setup but I reverse it in what node?

Could you possibly explain how to apply materials inside the in-game HUD designer ?

I downloaded your stuff, but I was unable to use it. I put those files in my project and there are broken links in the blueprints. I’m somewhat of a noob, but it would be helpful if you posted them in a complete ready to use sample project or gave a bit of instructions. Also, I just want something super simple and mono colored. Thanks.

I was having the same problem. My solution was to copy every function and material in same folder. Then i needed to set the function again. It is very easy because it will give you dropdownlist where you just select the right function in right place. You do these in material editor. Check every material inlcluded with download provided and set the functions.

Thanks a lot Jeremy! Using this as a loading/selection indicator for a Leap Motion controlled UI. Only one problem though, I’m applying your material to a UMG Widget and it doesn’t seem to work in the published version of the project.
Running in the editor works fine but in the published project the circle doesn’t appear at all. Any ideas? Thanks!

Hey JBaldwin, this is awesome stuff, thank you very much for providing this stuff. I was searching for a way to show the health of my creeps in 3d space and this provided all i need ;).

Im hijacking this thread to show you that i have been working on the same thing, almost. Its a pure material based (no textures) circle menu, ‘fully dynamic’! :smiley:

It has a neat “pulsing” effect for hovering (would love to show a video but i got no internet)
When you create it you input an array of strings (any number) and it creates the menu automagically.

Well… it is almost fully material based, any idea how i can recreate this alpha image with pure nodes?

If anyone has time, could you explain (like you would to a 3 year old child) how to implement JBaldwins shader into HP widget.

The download doesn’t seem to work well with 4.8 :confused:

Did get the VectortoradialValue to work though with a bit of messing around.

You may have to play with the UV ranging depending on if you want your clock to start along the x-axis or go CW or CCW.

This clock goes from +X CCW around to +X again.

Hey Guys,
I found this thread couple of hours ago and managed to implement JBaldwins Dynamic Radial System successfully in UE 4.10.4
And I’m pretty happy with the result. Thanks so much for creating this and making it available to everyone.

What I’m trying to do now is a similar health bar like in Kingdom Hearts 2.


So basically a bar that starts as a radial bar and then switches into a horizontal bar.
I think there are two ways to get this to work, but I don’t even know if they are possible and that’s why i’m asking you guys for help.

The first solution I thought about, would be to create a similar shader like the one JBaldwin uses to create a radial progress bar.
Sadly I’m still a beginner in UE4 and don’t know that much about shader and dynamic material, yet. Thats why I think this might be a little bit too complicated for me, but with a little bit help, I might be able to pull it off.

The second solution would be to split the health bar into 2 bars, one radial bar and one horizontal bar and put them right next to each other. Then I would need to make sure both of them use similar dynamic materials so it looks like it’s actually only one health bar. So I would need two dynamic materials one for a horizontal bar and one for a radial bar, which both use the same “core” shading. For this I’ll need a little bit help figuring out which nodes I’ll need from Jbaldwins Dynamic Radial System in the new dynamic material to make the horizontal bar look similar to the radial bar.

So what do you think? Are those ideas even possible? Is there a better way to do this?