How do I make a curved Health Bar?

Hi, first thread. So I’ve been searching all over forums trying to figure out how to make a KH2 style health bar: it starts off round and continues on horizontal. …Funny enough, looks like I’m not the first to ask. Although I’ve been using Unreal for a several months now, I’d still consider myself quite new to it so please be understanding.

I’ve found a few threads and forums on radial and circular HP bars, but so far they’ve been too complex for a first attempt or it involved a lot of unnecessary steps. I’d rather not be that guy, but could someone do a simple walkthrough of sorts? -Explaining what system works best, showing all the work? I don’t mean to sound needy, but so far I haven’t found a solution in previous threads that match my dilemma. So if anyone could please replicate the desired effect, would it be too much to want a simple walkthrough? -Pictures, video, doesn’t matter what format.

I’ll include the current result, textures, and desired effect.

Current Result

Textures

curvedHUDpart1.png

Desired Effect

Honeycam 2016-07-11 23-53-11.gif

Red damage effect not necessary, but it’d be appreciated.

First split bar into 2 bars: circular part and flat part.
Then make one txture with 3 masks in RGB chanels, for eg:

  • in red: horizontal bar
  • in green: same as horizontal (same distance from center, same width et) but as circle, so they both fit together without seam
  • in blue: mask to cut out part of circular bar. This should be just one half white, other black, no blurring on edge, it should be sharp drop from 255 to 0

With that texture make material that can mask part of circle. Then another material that does masking for bar.
Some blueprint logic so those 2 health bars can work together. And you should have it.
There are multiple threads about circular hp bar, look there for material idea.

yeah how to make it??

I’m sorry, as I mentioned, I did go on and read those threads beforehand and attempted to duplicate their results, but their solutions included various nodes put there without explanation that I just couldn’t find. Could you clarify what you mean by 3 masks in RGB channels? How would I do that? I’m afraid I’d still need some screenshots for better understanding, I can only get so much from text.

You need an understanding of material editor and its functions to achieve this, it’s quite complicated;
An easier way is to use meshes instead; UE4.11+ has a custom widget which allows you to make UI meshes (they did it for Paragon game), but I don’t remember its component name, C++ stuff.

Your gif of desired effect I’m pretty sure it is achieved with a custom mesh using the Scaleform system instead of going nuts with complicated material shaders.

Late response, but still someone later might look this up in google.
I suggest using a gray scale gradient path to define your irregular shape:

  1. create a ‘path’ texture which will be the exact shape of you bar
  2. make it a gray scale gradient where black is 0HP side of path and white is full (the rest of the texture should be transparent)
  3. in unreal load the texture and connect it to ‘add’ nod with the threshold variable (i.e. current health)
  4. connect the output to ‘floor’ node
  5. use the output as an alpha channel

this will give you the output shape you need. from there do what ever you need, add color, effect etc.
(I’m writing this off of my head, might need a little adjustment, but the concept is there)

2 Likes