I Want it to look like this. How could i make this
It’s a percentage that starts from 100 and goes down slowly. i would like to make something like that in UMG.
UMG does have a progress bar that is simple to setup initially but i don’t know much about getting your own art in there.
It would be really easy to render a material to the HUD without UMG and just do all the graphic changes in the material though.
Well how would i set up the progress bar?
Setting up the basic UMG progress bar isn’t too hard . Just create a new Widget Blueprint (New → Interface → Widget Blueprint) and inside it drag a progress bar from the pallet onto the designer view. Name it something that makes sense and verify the checkbox next to its name (“is Variable”) in the properties is checked.
In your blueprint you can now load this and get access to the progress bar:
Here is a screenshot of a quick setup where i load the UMG widget i made and get the progress bar then start a Timeline that animates the percent.
Fiddle around with the anchoring and such to get it to stick where you want.
I did assume you had UMG up and running already, just in case i will detail out how to make it run in your build:
Create a new shortcut to the UE4Editor.exe and at the end of the target line put -umg like this:
“F:\Program Files\Unreal Engine\4.4\Engine\Binaries\Win64\UE4Editor.exe” -umg
Run that and in the editor go to Edit → Editor Preferences and then the Experimental Tab. In there check the box next to Unreal Motion Graphics (UMG). Now restart the editor and you should be able to create Widgets
I recently figured out a way to make this happen, as I wanted to have a custom image myself. You’ll basically use the “Fill Image” to create custom progress bars.
Follow along with me.
Here’s my custom health bar in photoshop. It’s saved as a TGA with alphas so it can be used as an overlay. As it stands I could not take and skew a normal rectangular progress bar to fit into the areas that I need it too. So what we have to do is create our own “Fill Images.”
Here’s what these “fill Images” look like (just one of them as they’re all the same concept). In this instance I’ll be filling up the Hour Glass portion of my Status Bar. Notice that the image is white, this is important if you want to use the built in colors/materials from UMG (think of it as a white canvas that will accept all colors, black does not work.).
Next you’re going to want to bring them into UE4 and start creating your widgets. Here you can see the health bar in my UMG editor.
Next what I did was bring in the “Fill Images” and began setting it up. We’re going to bring in our progress bar from the Palette. Once the bar is in the editor we’re going to edit some settings.
First thing (after dropping a progress bar in) is to go to the Styles tab on the right. We’re going to change the “Draw As” in the “Background Image” section from “Box” to “None”. Next we’re going to go to the “Fill Image” section and select your Fill image from your Content Browser. Here you’ll also want to change the “Draw As” for the “Fill Image” from “Box” to “Image” or your Fill Image will be distorted.
Next its helpful if you fill the image up so you can see it in its full state by altering the Percentage in the Progress tab. (this will help with resizing it so the image isn’t distorted.) Here you can also choose how the bar is going to fill, in my case I am using the “Bottom to Top” style.
Here I’ve renamed the bar to “Special Bar” and moved the progress bar behind the Status Bar image. In order to have your custom fill image display behind the Status Bar, the Progress Bar (Fill Image Bar) must be above the Status Bar in the Hierarchy (on the bottom left) I will post again so I can show you the rest of the screens.
2 Likes
So after tweaking some colors this is what it looks like.
From there you can play around with your progress percentage to see your progress bar in action.
Here’s the Final Product.
I hope this helps you, now you’ll just need to create your own HUD components.
1 Like
This is a really great reply. Thanks for all the detail!
carlizawwsum 's awsome. Thanks for this great tutorial.
Great answer! So basically this method can work for pretty much everything? Does it work for segment style bar (by having white segments with transparent area in between)?
I think that depends on the functionality you would want with your segments. If you wanted to be able to add segments as you progress (like leveling up adds a health segment) you could probably figure out how to make that work, it would just take a little manipulation of a few values. Like using the health example, let’s say if the player were to everything out they’d get 4 heath segments, you’d use a Fill Image with 4 segments because 4 was the maximum number possible, then you’d have to figure out what the possible health could be (let’s say 100) but if the player just started out you’d maybe have to clamp your players health to a of 25 then level up to clamping at 50, etc…Thats at least one way I could think of doing it that way. I’m sure there are easier ways but it could work with this system.
One quick question: Are the custom art and the actual progress bar both TGA?
Only answer, that helped me 
I know this was ages ago, but this still works and you’re my hero.