How do I mask in UMG?

Development Programming & Scripting UI
1

Hello,

I’m trying to spruce up my title and can’t figure out how to achieve the “Glint” effect in UMG. Any recomendations?

I’m trying to do something that looks like this effect:

Any help would be much appreciated :slight_smile:

2

Honestly, the easiest way would be to do it in an image editor and import the image. I worked out how to do it in UMG, but it’ll be finicky. More on that at the end.

So, in UMG we’re able to add material effects to a widget using the Retainer Box. Here I’ve just made a custom widget and set up a Text widget inside a Retainer Box.

Hierarchy.PNG

I then made a new material, set it to User Interface and Additive, and added it to the RetainerBox.

Material.PNG

I made an image to use as the glint and pulled it into my project as a texture. I used Inkscape to make it, but you can use anything. (It’s white, so you’ll have to open it in a new tab to see it. It’s just below this.)

GlintMask.png

In the material, I added a TextureSampleParameter2D with the same name as the Texture Parameter field (GlintTexture). I also dragged my new glint texture into the material.

Textures.PNG

I then played around with the math for a half hour until I figured it out. I’m multiplying the glint’s color by its opacity to only apply color where it actually exists in the texture, then I’m multiplying it by the widget’s opacity so that color only gets applied where the widget is drawing (thus using the widget as a mask). Finally I’m adding the color together, and it’s good to go. There’s probably some easy built-in way to do this, but I’m not very familiar with the material editor.

Blueprint.PNG
Blueprint.PNG754×403 74.5 KB

Result:

MaskedText.PNG

Now, I mentioned it being finicky. To get things to line up properly, you’ll need to tweak and re-tweak your texture until it looks right. This kinda defeats the purpose of having a procedural glint, since you would need to export separate textures for differently sized/shaped widgets.

You could probably make it smarter by figuring out how you want the glint to look and turning it into an algorithm instead of using a texture. Something like “if within certain range, add white”. Worth it if you’re trying to add procedural effects, but not worth it if you’re just trying to make a static text widget.

3 Likes
3

Thanks a lot for this breakdown, that was very helpful :wink: