UMG Fill Radial Image by Percent

I have this set up, but the Percent Scalar Parameter is just setting brightness, not percent filled on a radial image…

How would I be able to set the percent fill of the texture sample for an image as such below? (In the radial direction, from 12 noon to 12 midnight)

Has anyone got this up and running?

Change your material domain to UI.

And you can change your angle orientation like so… (Note: the values in the ConstantBiasScale node)

My Material Domain is UI & Blend Space: Translucent
I have a PNG (With Texture Sample Alpha hooked up to Opacity) but am unable to replicate the radial fill that you seem to have with the clock at 70%

How is Percent working with the radial fill and/or the TextureCoordinate & ConstantBiasScale?

I don’t think your ‘Material → Material Domain’ is set to UI. It looks like it’s still set to ‘Surface’. I see you have ticked the usage tick box for UI, but that’s not what I mean.

The ConstantBiasScale just converts UV coordinates from to 0 to 1 space into -1 to 1 space. The settings I show in the screenshot are important because I adjusted them to make the radial values start from noon (not 3 o’clock) and to rotate clockwise (not counter clockwise).

The clock face image is just r,g,b. No special alpha channel.

When ‘Percent’ is 0, no image is shown. When ‘Percent’ is 1, the whole image is shown.

Sorry I should have posted a picture. Here is my current MAT as of right now…

W/ Translucent and the bottom module on the Texture Image node attached to the Opacity, the image comes out just right. But my percent 0 does not hide the image, even when constantBiasScale is set to 0.5 and 2 respectively

So close broseph :slight_smile:

Just multiply your image opacity, and the result of all the calcs together and plug them into Opacity.

You won’t need to plug anything into Opacity Mask.

Edit: If you want to post your image (with alpha) I’ll test it here, and post another screenshot.

1 Like

That worked perfect, thank you my friend! Might there be a simple way to have it move the other way?

Remove the subtract node, to reverse direction (I think).

p.s. How about hooking me up with some of that sweet sweet answer karma?