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!

circularprogressbar_overview

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.

circularprogress_materialoverview

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.

circularprogress_umgoverview

Circular progress bar for UMG

Includes material & texture to setup your own UMG widget for a circular progress bar. Progress is controlled through the “Alpha” parameter in range of 0 to 1.

Engine Version 4.8

If you wish to see more about our UE4 game in development, then check out the Switch development blog! Follow me on Twitter @t_looman for Unreal Engine 4 & Switch updates, tutorials and samples!

20 Comments

    • 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

  1. 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 !

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

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

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

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

Comments are closed.