Circular Progress Bar for UMG
We recently added a new locking feature to Switch for which we needed to have progress feedback. For this I built a circular progress bar in UMG. I’m giving away the material to use in your own projects. The download link is at the bottom. If you wish to learn more about the effect, keep reading – otherwise you can simply scroll down and download the material outright and explore it on your own. Enjoy!
In the example above you may notice the circle starts at around 25% instead of at 0, that’s because in UMG I only enable visibility if the key is held for > ~0.2 seconds, to prevent showing the circle when a user is simply clicking. How you deal with this in your own projects is up to you.
Material Breakdown
The material progress is controlled by a single scalar parameter (“Alpha”) moving from 0 to 1. This parameter determines the cut-off in the radial gradient. With two sphere gradient Material Functions (comes built-in with the engine) we can clip the radial gradient into a nice circular shape. You can tweak the thickness by changing the size of the two spheres.
Texture Setup
An important setting to know about when dealing with grey-scale textures is to uncheck the sRGB setting inside the texture settings. This will give you an uncorrected gamma version which is recommended when dealing with grey-scale textures. Keep in mind that any material node that samples the texture needs to be updated to Linear Color instead of the default Color (the material compiler will complain about it automatically)
UMG Example
You don’t have to implement the material exactly like I did for Switch, the only required component is converting any kind of progress value to a 0 to 1 range. In the character class of Switch (C++) we set the time the key was pressed (LockActorHoldKeyTime in the sample below). From this we derive our progress to set in our material (after converting any progress to the 0-1 range) Have a look at an example of how I used the material in UMG.
Get Free Access to this and the full Materials Bundle.
Follow me on Twitter @t_looman for Unreal Engine tutorials and samples!
I am new to this website, but could anyone tell me how to download the package or rar.? I subscribed after “naming a fair price”, but it didn’t send me an email. (I checked my spam.)
This would be very helpful,
Thanks
The mails for download are handled by Gumroad.com so you can login there and it should have this ‘product’ listed to re-download.
Thank you sir!
Thank you a lot :)
Thank you for this example!!
This tutorial was pretty handy, but using a texture for the radial seems to have a couple problems:
1) the texture provided doesn’t fill uniformly, if you enter 0.25 into it more than just a quarter of it will be filled.
2) there is some artifacting at the end of the meter.
I solved both by replacing the texture with a VectorToRadialValue node (use the Vector Converted to Angle output value.) It seems to solve those issues with no noticeable downside. So you may want to update the tutorial to include that.
Thanks for making this.
Hi, can you make a screenshot of that node? Thanks!
Interesting find! Thanks for sharing.
– Tom
I don’t mind sharing you can replace the texture with this. https://i.gyazo.com/ca87260fd13736d0ca0735d60166041e.png
Minor addition, in order to work.
For the Constant Bias Scale:
Bias -.5
Scale 2
This is what I want. Thank you!
Hi Tom, I have a problem with your material for the UMG circular progress bar. The borders of the image in gameplay are blurry and seems like the definition is pretty low. I didn’t change any of the values from the assets downloaded from your link; maybe there’s been a change inside the engine since this release?
Thank you for your help
hi,
thanks for your tutorial. how did you create that multi step progress energy bar? did you create material for this?
It was done using 4 simple Image controls lined up in a stack box. The color was specified in a material and updated when the health got lower. Doing it in a single material and Image control would be more efficient though.
– Tom
This would be epic if I knew exactly how to set it up in UMG instead an Image with variables and no info on how to set up UMG.
Hi Mike,
I did indeed miss those steps as I figured there is plenty of tutorials online covering the concepts of setting up (Image) controls in UMG and changing material parameters. Hope you managed to figure this out for your project! (This made it possible for me to put this online between work, a full tutorial may have delayed this sample indefinitely)
– Tom
Hi, thanks a lot for this nice mat. However how should I use this material as an animated cursor ?
Should I make a 3d widget from a mesh to apply the mat to ?
Thanks a lot !
Ok sorry for my last question, I didn’t know that a material can be used in an “image” HUD component. Thanks !
HI Clement,
Were you able to get the uasset files to load? I can not.
Hi,
yes it worked well with this link : https://www.tomlooman.com/?smd_process_download=1&download_id=1936
They are packed in a .rar compressed file.
HI Clement,
I got those but I can not get the uasset files to work with my project. How did you bring them into your project and are you using 4.11?
Thanks,
Arthur
As Tom said it just over here, you have to unpack the files in the content folder of your project. The way is similar for all versions of UE.
Hi Tom. I would love to try this but when I drag the uasset files in to unreal engine 4.1 it says it is an known file type.
You can’t drag them into the editor when they are .uasset files (Although this would be nice). Use Windows Explorer to drag them into the MyProject/Content/ where all your other content is too.
– Tom
Hi Tom,
Sorry it’s taken me so long to reply. I could not get the uasset files into my project via explorer either. There was another radial radial progress bar example out there and that would not load into my project. I loaded them both into another project just fine… ok… that’s confusing.
I copied and pasted the BP network from the other project to my main project and that got the BP’s in there. Then I watched a tutorial on how to use your radial dial that someone else had made and I was able to get it all working.
So thank you for your Radial Dial help! I’m looking forward to taking some of your other tutorials and working with some of your sample projects.
Regards,
Arthur
Thank you, it was very helpful.
Love it!! thanks.