Text

UX Tools contains assets, actors, and components which are optimized to render text correctly and efficiently on Mixed Reality devices. Text rendering within Mixed Reality can be challenging as opposed to traditional 2D text because text in Mixed Reality can be viewed from any angle or distance. Make sure text is large, high contrast, and accessible. More information about designing text for Mixed Reality can be found on this page.

Text Actors & Components

To provide automatic text configuration UX Tools contains an actor named UxtTextRenderActor and component named UxtTextRenderComponent. The UxtTextRenderActor and UxtTextRenderComponent automatically construct text with appropriate font, font material, and sizing defaults.

Note

Automatic text formatting is not supported by the UxtTextRender actor and component. To manually add a single line break in text use the <br> tag. If your application requires advanced text formatting then UMG Text has support for this. Note, UMG can cause decreased performance on HoloLens, so it's best to profile after adding UMG to your app.

The UxtTextRenderComponent derives from the TextRenderComponent and all properties can be accessed and altered via the top level UxtTextRenderActor component wrapper actor details panel:

TextActor

It is recommended when adding new text to your level, or blueprint, that you begin with the UxtTextRenderActor or UxtTextRenderComponent and make adjustments where required.

Note

If the text needs to be resized it is best to change the World Size property to avoid non-uniform scaling of text.

Fonts

A library of recommended fonts are included with UX Tools. The primary font used for text is Font_SegoeUI_Semibold_42 and Font_SegoeUI_Bold_42. Icons are normally rendered with a font (rather than a texture) and use the Font_SegoeHoloMDL_Regular_42 and Font_SegoeMDL2_Regular_42 fonts. The SegoeHoloMDL and SegoeMDL2 fonts provide symbol glyphs commonly used in Windows Mixed Reality applications. To easily browse the glyphs available in a font try utilizing the a UxtIconBrush struct and icon brush editor.

Most fonts within UX Tools are offline fonts, which are pre-computed font atlases. Offline fonts are less flexible than Unreal's runtime fonts but provided better performance results on HoloLens.

Note

UX Tools contains the runtime font Font_SegoeUI_Semibold_Dynamic for use with UMG because offline fonts cannot be used with UMG.

Normally fonts include Unreal's default character set but some fonts, such as SegoeHoloMDL and SegoeMDL2, only import a subset of the default character set. To import additional characters you can perform the following actions:

  1. Open the desired font. In this example Font_SegoeMDL2_Regular_42.
  2. Navigate to the "Import Options" in the details panel.
  3. Add any new characters needed to the "Chars" array property.

FontChars

  1. Select the font in the the content browser.
  2. Right click on the font and select "Reimport."

Importing a New Font

If you would like to use a custom font it is recommended that the font be imported following the below steps:

  1. In a content browser right click and select User Interface > Font.
  2. Name the font: Font_FontName_FontStyle_FontSize
  3. Open the new font asset.
  4. Change the "Font Cache Type" to "Offline" and select your font with the modal window that will appear.
  5. Change the "Texture Page Width" and "Texture Page Max Height" to 1024 and 1024 (or a size that will fit your font within as little pages as reasonable possible).
Note

Having multiple font pages can dramatically increases your application's draw call counts and hence rendering performance. 6) Check "Use Distance Field Alpha" to true. 7) Select your new font in the the content browser. 8) Right click on the font and select "Reimport." Depending on how many characters are in your font the reimport may take a few minutes.

Note

If the font import process takes an extremely long time you may want to constrain your font's character set using the "Character Set," "Chars," "Unicode Range," or "Chars File Path" properties under the font's "Import Options."

Once your font has reimported the font atlas should look similar to the below image. The characters should appear a little "blurred" because the font is stored as encoded signed distance field. You should now be able to use the font with the M_DefaultFont material.

FontAtlas

Materials

All text in UX Tools is rendered using the M_DefaultFont material. The M_DefaultFont material takes a font texture stored as a signed distance field and displays the font as a unlit masked surface. Masked surfaces display either fully opaque or fully translucent pixels. Masked surfaces are great for text rendering because, unlike some other blend modes, it does not require sorting. But, masked surfaces can result in aliasing. If your application displays aliasing on text verify aliasing is occurring on your target stereo headset(s) (and not only within the play-in-editor viewport). If aliasing still occurs on your target headset(s) try increasing the size of your text.

If increasing text size is not an option for reducing aliasing you can utilize full screen antialiasing techniques (such as MSAA or FXAA) on tethered Mixed Reality headsets. Full screen antialiasing is not recommend on HoloLens due to performance constraints. Local antialiasing can be an efficient way to reduce aliasing on text as well. To achieve local antialiasing duplicate the M_DefaultFont material and set the Material "Blend Mode" to "Translucent". Translucent materials can display pixel translucency values between opaque and transparent to provide a translucent gradient. Note, Translucent materials can provide reduced aliasing but may incur additional render cost due to fill rate concerns or renderer sorting requirements.

See also