How to make clean big text renderers with custom fonts?

dj-mindar
Sun, 16 Aug 2015 12:48:28 +0000
Rendering

This is not really a question but rather a detailed tutorial : I spent nearly 2 days to get exactly what I wanted, helped by several other partial answers here, so I think this will surely be useful for someone else.
My goal was to display the title of my game in a 3D main menu, using a huge text renderer with custom font, on a wall like this:

So here are the steps:

##1. Import Font

To a add custom font usable for a text renderer, you must create a new offline cached font. Indeed, there are 2 types of fonts used in UE4 : runtime cached fonts, for HUD/UMG texts (that’s what you get when you simply import a .tff file in the content browser) and offline cached fonts, for Text Renderers.

To make an offline cached font, find a .tff font anywhere on the internet and install it on Windows, then create a new font asset in the Unreal Editor and open it. Then, select “Offline” in the Font Cache Type section of the Details panel

This will open a Windows dialog box to select a font. Here select the custom font you previously installed, and choose the height you want for characters (between 20 and 24 is generaly good). When it’s done, your font will be imported with default options. You now need to modify some of the Import Options, in the Offline Font subpanel :

Check Create Printable Only to discard all useless characters (generally including all missing characters of your custom font)

Texture Page Width is 256 by default, set it to 512. (I’m not sure whether it’s THE best value, but it’s the one used in the default RobotoDistanceField font and it works very well)

Check Use Distance Field Alpha to improve rendering of big-sized Text Renderers. If you don’t, characters edge will be all “pixelated-wavy” and the result will be totally aweful.

Set Distance Field Scale Factor if you need : the higher the scale factor the better, but for an unknown reason, my editor systematically freezes when I leave the default value 16 or choose higher… but if I choose a value from 9 to 15, it works fine and the value 16 is then displayed… so I have to change the default value. (to 14 for example)

Set Distance Field Scan Radius Scale if you want. The value must be comprised between 0 and 4 and impact on the characters edges sharpness : near 0, edges will be very sharp but also wavy like if Distance Field Alpha were unchecked; when you tend to 4, the edges become totally blurry and the letters get really thin. The default value 1.0 is a rather good compromise but you can tweak it if needed.

When everything is done, reimport your font by clicking on Asset>Reimport MyNewFont. Note that you’ll have to reimport like that each time you want to change a font setting, such as characters Height, or weight (if you want to use bold or italic for example)
Your font texture should now look like the default RobotoDistanceField, with its blurry gray edges.

Note that if you choose a too important height for your letters, you’ill get multiple Font Texture Pages. This is not very harmful, but remember that only the characters in the first page will be displayed correctly when using this font.
So you can ignore it if some few unused characters are banished in a second texture page, but get sure you have at least all of your letters in upper and lower case. But if you choose bigger height, your letters will be less “pixelated-wavy” also, so try to set the biggest height possible that makes all your useful characters fit in the first page.

##2. Create a Text Material

To use this font in a Text Renderer, you’ll now have to create a new matching TextMaterial. (I personnaly copy-pasted the engine DefaultTextMaterialTranslucent because I needed to control the opacity of my text to create a fade in effect)

This should look like this finally :

The important points are :

Click on the Font Param node and select your newly created font as the Font parameter value

Branch its gray output pin to the opacity, and not the default red one

Note that each time you tweak your font asset, this Font parameter value in the Text Material will not be updated, so you’ll have to clear it and then select again your font.
You can also notice a parameter Font Texture Page just under Font. It corresponds to the page used as texture for this material and, for the moment, you can only use one of them. So if your font is really huge and you absolutely need to display characters from several Font Texture Pages, you’ll be forced to create 2 Text Materials I guess (For example 1 for lower case characters and 1 for upper case characters) but I don’t see how this could possibly be a good idea… That’s why you must really make all you need fit in a single texture page.

Additionally, if you want to create a fade in / fade out effect to display your text, you just need to create an opacity-controlling parameter in your material, and multiply the opacity by its value as I did. Also be sure the Blend Mode “Translucent” is selected in the Material Details Panel

##3. Use in a Text Renderer

Once this is done, just create/select a Text Renderer and set the Font parameter value AND the Text Material parameter value with assets you just created. If you don’t change both, your text will be displayed as giberrish.
(I really think this should be done automatically by the way… I hope it will be modified in the next engine updates because I don’t see the point of allowing the user to select a font which is not the one referenced in the Text Material)

Hurray! It’s finished! You now have a pretty Text Renderer with custom font \o/

38 posts - 29 participants