Soft / falloff shadows for UMG or Common UI Text?

Development Asset Creation
, ,
1

I’m trying to create a soft drop shadow with falloff for UMG or Common UI Text. The built-in shadow only supports a flat offset, so I tried using an outline material instead.

My approach was to use a Font Material (User Interface domain, Translucent blend), sample the font alpha via a FontSample node, and apply a falloff like pow(1 - alpha, falloffPower) to fade the opacity the further the pixel is from the text. You can see my setup in the attached screenshot. However:

  • The FontSample node only works properly with RobotoDistanceField.
  • Even then, the alpha seems mapped incorrectly.

-> Potentially because the font in UMG is Roboto? I could not select RobotoDistanceField there.

  • With any other font, it doesn’t render correctly at all.

So I’d like to ask:

  • Why is the Font Sampler not working correctly?
  • How was RobotoDistanceField made?
  • Is there any way to make this work with any other font?
  • And more generally, what’s the recommended way to achieve soft, falloff-based shadows for UMG or Common UI Text?
2

Hi,

That Font Sample node and the RobotoDistanceField font are primarily intended for Text Render components, and will only work with Offline fonts. You can generate your own by importing an offline font and checking the appropriate boxes (and then reimporting), but that won’t be what you need for UMG/CommonUI.

Instead, I’d recommend taking a look at the SDF support we added in 5.5. This is a relatively new feature and may have some performance implications depending on settings, but the Font Signed Distance material node will give you what you need to do shadow/glow effects and such.

Best,

Cody