x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

How to make a progress bar in UMG?

I Want it to look like this. How could i make this

alt text

It's a percentage that starts from 100 and goes down slowly. i would like to make something like that in UMG.

Product Version: Not Selected
Tags:
more ▼

asked Aug 06 '14 at 05:49 AM in Blueprint Scripting

avatar image

gotgrassct
222 48 62 79

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

2 answers: sort voted first

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." alt text

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.). alt text

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. alt text

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. alt text

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. alt text

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.

more ▼

answered Aug 14 '15 at 01:55 AM

avatar image

carlizawwsum
111 1 90 18

avatar image carlizawwsum Aug 14 '15 at 02:04 AM

So after tweaking some colors this is what it looks like. alt text

From there you can play around with your progress percentage to see your progress bar in action. Here's the Final Product. alt text

I hope this helps you, now you'll just need to create your own HUD components.

avatar image Brackhar Aug 25 '15 at 11:15 PM

This is a really great reply. Thanks for all the detail!

avatar image MaxISoP Feb 25 '16 at 07:11 AM

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)?

avatar image carlizawwsum Feb 25 '16 at 10:06 PM

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 max 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 max 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 max 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.

avatar image AlienRadar Jul 01 '16 at 12:34 AM

One quick question: Are the custom art and the actual progress bar both TGA?

avatar image Maha Vajra Jan 16 '16 at 06:09 PM

carlizawwsum 's awsome. Thanks for this great tutorial.

avatar image Wasullda Sep 07 '17 at 07:39 PM

Only answer, that helped me :)

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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.

more ▼

answered Aug 08 '14 at 01:36 AM

avatar image

RimmyD
2.6k 98 16 97

avatar image gotgrassct Aug 08 '14 at 06:51 PM

Well how would i set up the progress bar?

avatar image RimmyD Aug 09 '14 at 01:44 AM

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.

alt text

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

capture.jpg (75.6 kB)
(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question