How to make progress bar follow custom path?

Development Programming & Scripting UI
1

Hi Unreal People!

I’m chipping away at learning unreal as a UI Designer / Artist.

However, how can I get a progress bar to follow a custom path like in Kingdom hearts? I know I need to make a texture/shader and/or material but have no idea how to hook it up so that it’s functional within the WBP via value/percentage.

I’ve made a greyscale texture that goes from white to black which I think is the right direction, but now I’m not sure what to do. any help appreciated.

Example of the progress bar NOT working as intended

Screenshot 2026-10-12 124121
Screenshot 2026-10-12 124121909×623 123 KB

Example of the grey scale texture going from value 1 to 0

Screenshot 2026-10-12 124129
Screenshot 2026-10-12 1241291222×752 52.3 KB

2

Try this:

HealthCurve
HealthCurve1305×595 98.3 KB

May need to remove the 1- node if you want to fill bar the other way.

In the widget, you’ll need to create a dynamic material instance, and set the HealhPercent param on it from current health/max heath or something, the same way one would do a regular progress bar.

3

A UMG Progress Bar can only fill a rectangle, so a Kingdom Hearts style curved bar is an Image with a UI material, not the Progress Bar widget. The greyscale texture is the right mask. illspiritx’s curve setup is the same idea when the bar is still a straight strip you only want to ease; for a bent path the bend has to live in the texture.

Material, domain User Interface, blend Translucent:

  • Texture Sample of that ramp. It needs to run along the path (white at the start, black at the end, or the reverse).
  • A scalar parameter, name it Percent, range 0 to 1.
  • Fill test: if the texture is black at the start and white at the end, Step or SmoothStep with the mask as the value and Percent as the edge. If it is white at the start, compare against One Minus Percent instead. Use the result as Opacity (or Opacity Mask) multiplied by the bar color. Step is a hard edge; a narrow SmoothStep is the soft leading edge.
  • A linear gradient on a straight quad will not follow a curve. The arc has to be painted into the texture in UV space, which is what your greyscale already is if it follows that shape.

Widget:

  • Use an Image, set its brush to that material.
  • On Construct, Create Dynamic Material Instance from the brush, keep the reference, and Set Scalar Parameter Value “Percent” from Current/Max. That is the same call you would make for a normal bar, just on the DMI instead of Set Percent.
  • If the fill runs backwards, invert the value (1 - x) rather than repainting the texture.

Moving a widget along a spline only moves the tip. It will not clip a fill along the curve. The mask does that.