Use Text as Mask / Transparent Text in Opaque Background

image
I’m trying to recreate this effect for a UI widget. The text will be variable, so pre-made images will not work. Is this possible in UE4 with the default engine?

I dont think there is a straight way of doing it but I may be wrong.

If you really must achieve that I think on a possible workaround…tedious but would work.
You can make all the chars in bitmaps and create a charmap Struct that contains the char bitmap, the char symbol (string) and the space for each char ( integer (width) )

Then you can create a widget with a construct and a public string that you update and
some function creates the word as you want.

Interesting solution. Very tedious like you said. I’ve done a bit more research and I think there may be an easier method with a canvas render target inside a material. You can draw text to the render target and mask it from the background inside the material. I’ll give that a try and post back here if it works.

Here’s the solution.

In the widget BP:


Inverted Text is an image in the designer. It’s image size is 500x100 in the brush settings.

And the material:

The font that you use for DrawText affects the size of the text, you have to set the legacy size in the font.
image

3 Likes

Very Clever! :raised_hands:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.