HOWTO: Create a custom font material
In this tutorial, you will learn how to create a font material that can be used to perform custom shading for text components in your game. Follow these steps to prepare a simple material that uses a texture as an overlay for the text characters.
1. Create a
Text Render or
2. Create a new material asset
Right click in the Content Window and select option New -> Material -> Material. Type a name and confirm with Enter. Double-click on created asset and start editing material.
3. Create a texture parameter named Font
Scroll down the material properties panel and select the new parameter type Texture, then press Add parameter. Next double-click on a label with created parameter name and rename it to Font (Flax uses a parameter named
Font to bind the font atlas texture during rendering).
4. Setting up the material graph
In this step you need to create a complete material node network based on the following screenshot. To learn more about creating materials and using material parameters see the related documentation here.
The created material uses an overlay texture and font character textures to render glyphs.
If your material will be used in 2D GUI (not Text Render) then set its domain to GUI and swap Emissive with Color (see the picture in the bottom of the page under section GUI Text).
5. Assigning the material
The last step is to assign the created material asset to the material property of the text render actor (or custom material if used for GUI control type).
6. See the results!
If you want to use the custom material for rendering text inside the GUI (eg. on Label or Button controls) then you should follow the tutorial and additionally set the material domain to GUI and use Emissive/Mask inputs.
See the following example: