Circular progress indicator wipe mechanics - help me understand

Basically I am after making this kind of loading indicator (Epic should probably add support for animated GIFs to this forums :wink: ):

I made gradient circle and stumbled upon this setup (creds to @aussieburger ):

Unfortunately this setup makes no sense to me, because how image and scalar parameter (both appended) plugged into UV socket. Tbh I don’t understand UE4’s material editor since it doesn’t really follow the same logic as 3D app’s Material editors (because in Blender for example UV map is geometry, so you can’t really get pixel image, plug it into geometry and have image change levels to appear to be animated).

Can someone please explain how this works and possibly maybe offer an alternative method that is more in line with how it would be done in GIMP/Photoshop/Blender ? (for example in GIMP I’d use Levels to “animate” the circle)

Thanks

Hey Motorsep,

It would be a good idea to learn scalar parameter use with dynamic material instances as it is a very powerful feature of UE4!

If you wanted to keep it simple though perhaps you’re better off just using the Circular Throbber in a widget and using that as a 3D widget?

I know how to use scalar parameters and dynamic material instances :slight_smile:

What I don’t get is the logic behind that setup (as I was saying the Material Editor makes no sense to me as I described above). It would be nice if you (or someone else) could explain why this setup works and how, or perhaps explain if it could be setup differently, where it makes more sense to a graphic artist.

Or perhaps I am indeed overthinking it and regular spinner will do :o

The ‘Append’ node essentially makes a Vector out of the elements you pass in. In this case, the ‘0.5’ is the ‘R’ channel, and the red channel of the texture becomes the ‘G’ channel. You can then use that 2D data as UV’s. It’s hard to explain UV’s with text and why that example up top works… hmm.

The above example is quite confusing though and you lack control, there are certainly better ways to do it. If you want a radial progress bar, I prefer this method myself. The radial texture is just a gradient made in Photoshop, but you could generate that in the material editor too.

dc7403997da0df12335a1eb50fe938fc3b202afe.jpeg

Also, Jan posted a more customize-able version not so long ago, which you can see here:

Thanks @TheJamsh. This one makes more sense now!

You can make mask texture with those masks in RGB channels:

  • black white mask to mask what is circle and what is outside. fo eg white ring on black background.
  • half of texture (horizontal or vertical), one side white other black, so you can rotate this and mask progress.
  • 1/4th part of texture (one quarter whit one black).

now to make circle dynamic mask: multiply ring texture by half or 1/4th (or some combination of 1/2 and 1/4th texture with circle.
Make rotator to rotate one of 1/2 or 1/4th masks to show progress. Then write down angle values for mimum state and max state of variable you want to show.
Plug this all into dynamic material. use map in range clamped to change your variable value from bluperints into values for material.

when you have b/w mask that makes more or less of circle visible you can plug in any texture (multiply it by b/w mask), then display it as result.

In case you do not know “masks” math in unreal:
one-minus node makes negative of mask
mask+mask (then clamp) 0-1 will make sum of white areas
mask*mask will make only common part white.
for rotator set its rotation to 1, then feed time as parameter. With a bit of calculations you could scale values here so it meets for eg range of variable you feed from blueprints. but doing material 0-1 then scaling values in blueprint is faster to change or tune later.

To make part (slice) of ring:
get 2 textures that are half of box. rotate one and get (multiply) common part of them. Then again multiply with ring texture. This will work for 0-180. You can do almost same way 180-360 part. For it make stationary 0-180 part of ring, then add same texture as you did 0-180 just flip horizontally (or negate) 1/2 box mask.