UMG Text Postprocessing

✍ Last Updated : December 8, 2022

🚪 Prequisite Knowledge (Optional)

Describe Initial Knowledge that reader need to know before reading this article

❓ Key Question / Problem / Issue

The design requires that the text on UI have glow around them

✅ Expected Output/Definition of Done

Some text on UI have glow around them

🎁 Resulting Solution

Currently, the built in UI module in Unreal doesn’t have built in glow or blur support. There is a background blur module, but it serves different purpose.

Setting up the text to be glowed

To add glow into the text, wrap the texts with a retainer box. Retainer box will render the content into a texture which can be accessed by using the name specified in the Effect Texture Parameter.

Please ignore the skater logo used in the effect material, it’s only for testing purpose

⚠️ Note: The glow is limited by the size of the retainer box itself. So, to prevent the effect get clipped by the box size itself, add some padding or make the retainer box size bigger than its contents.

Green box is the retainer box

⚠️ Note: Every time text/images are changed, request update to the retainer box

Setting up the Glow material

Add/create a material and set the Domain into User Interface and Blend Mode to Translucent

Material nodes setup

Change Custom node output to CMOT Float 4, Also add Inputs into the Custom Node: Tex, GlowColor, and UV. Then add the following code into the code field

float4 original = Texture2DSample(Tex, TexSampler, UV);
float4 blur = original;
float radius = 5;
float distX   = 0.001;
float distY   = 0.005;
for (int i = -radius; i < radius; i++)
{
  for (int j = -radius; j < radius; j++)
  { 

    blur += Texture2DSample(Tex, TexSampler, UV + float2(i * distX, j * distY));
    blur += Texture2DSample(Tex, TexSampler, UV - float2(i * distX, j * distY));

  }
}

blur /= (radius * radius * 4)+1;
blur.rgb = lerp(GlowColor, original.rgb, original.a);
blur.a += original.a;
return blur;

Save the material, then assign it to the Retainer Box Effect Material field.

Final result