How to make a progress bar in UMG?
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.
asked Aug 06 '14 at 05:49 AM in Blueprint Scripting
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.
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.
answered Aug 08 '14 at 01:36 AM
Follow this question
Once you sign in you will be able to subscribe for any updates here