Unreal Engine 4 has a build in User Interface system called UMG. It is very easy to work with and contains some base components like a progress bar that a lot of games would use. But, how many times do you want your health bar to be a perfect rectangle?

While the UMG may not offer the solution on the surface it allows you to place images, and there’s no reason the image can’t be a dynamic material that accepts input.

Here’s a picture of the end result.

TODO#Pic Coming soon

 

 

As you can see, it’s a non-rectangular shape. It starts filled when at 100% health, and empties as health runs out. Simply from top to bottom 1 to 0.

I’ll show with pictures how I achieved this effect. This isn’t a from scratch tutorial and requires either previous knowledge of working with Blueprints and Materials in UE4, or for the information to be looked up along with it.

First you need your assets. I saved mine as flattened .png’s from Fireworks with a background set to transparent.

1. A mask of the shape you want to be filled / emptied.

2. An outline or border shape that will always be rendered.

3. A texture to be panned to be used for the fill and transparency.

The textures do not need to be square. The dimensions for my outline and fill mask shape where 424 wide and 512 height. For your fill texture, keep the same width but double the height.

A picture is worth a 1,000 words. This is what the fill texture should look like. The white portion will give a color, the black texture will be transparent.

First, in UE4 make a new Material. Here’s a screenshot of my completed material.

Here is a link to the documentation for Dynamic material from the best source: Instanced Materials

The 1st node is a Scaler Parameter that I named percent. This is fed a value between 1 and 0 as the game is playing.

The 2nd node is a Subtract, I subtract .5 from the Percent. It is because I needed an offset.

The 3rd node is the panning node. This takes in the y parameter from .5 to -.5 in my case, this pans the fill texture. From white while filled, to Black for transparent.

The 4th Node is a Texture Sample, set the fill texture in it.

Now, on it’s own this would be a rectangle, so the 5th node is a multipy, add another Texture sample and set it to your mask texture. The mask should be white where you want it to show, and black where you want it to be transparent.

You will notice that the Mask Texture is not panned at all, only the fill texture is panned.

Set the output of the material to be Masked for it’s blend mode.

From the Multiply Node, which has the Fill and Mask as input wire that to the Base Color and Opacity Mask of the Material Final inputs. For the actual color itself, I made a constant vector 3 and set it’s RGB values to a subdued yellow. Wire that color node to the Emissive Color. That’s it for the material, and that’s the hardest part to get right.

 

TODO#Pic Coming soon

Now, make a new UMG widget for your UI, or open your existing UI widget that this effect will be added to. The best documentation on this is here:

UMG UI Designer User Guide

I added 2 images and set their size to be the same as my textures. I renamed them so I could get there references easier. They will be on top of each other so you won’t actually be able to mouse select the fill material one, and you will need to be able to grab the reference to the image from the variables bar when on the event graph of the UMG widget.

Set the images to both textures. With the image widget highlighted, look in the Appearance section of the details panel and select your images.

On the outline set it’s ZOrder to 1, or a number higher than the fill image. This will keep the Outline on Top of the filled image in the UI.

Notice that I didn’t use the UMD progress bar widget. I tried that at first and had difficulty with getting it to use the dynamic texture correctly. I used a simple image widget instead.

There’s really only 1 more step, assuming your player has a GetHealth function that returns a percentage of it’s max health. The step is to update the Material with the health percentage to get it to pan the fill.

This is a function on the UMG blueprint. It get’s the PlayerController, cast’s it to my type, and then get’s the Health Percent from it which it returns. My PlayerController class updates the Health as a percentage each tick, so it’s always a current value.

 

 

This probably didn’t need to be it’s own function, but I’ve found it easier when working in Blueprints to keep everything broken down into small functons makes the whole thing a lot less confusing and easier to maintain and debug when something isn’t working right.

Here is a picture of the main EventGraph of the UMG Widget. Drag the fill image from the variable panel onto the grid to Get it’s reference. Make a Node, Get Dynamic Material, from the image reference, then from it make a node Set Scaler Parameter Value. In the name section write the same name that you named the Scalar Parameter in the Material, mine was Percent. Into the value, I drag off the function I showed above that get’s the PlayerController’s health as a percentage.

 

 

And, that’s it. Now you have a health bar shaped exactly as you like it! You can ask questions in the comments. I’ll either try to answer them there, or update the post itself for clarity.

 

TODO#Pic Coming soon