|
| 1 | +# HOWTO: How to create an outline font material |
| 2 | + |
| 3 | +In this tutorial, you will learn how to create a font material that can be used to draw MSDF fonts with an outline effect. A similar approach can be used to implement shadow, glow, or procedural texturing using Sign Distant Field data stored for font character glyphs. |
| 4 | + |
| 5 | +## 1. Create a new material asset |
| 6 | + |
| 7 | +**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. |
| 8 | + |
| 9 | + |
| 10 | + |
| 11 | +## 2. Create a texture parameter named **Font** |
| 12 | + |
| 13 | + |
| 14 | + |
| 15 | +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). |
| 16 | + |
| 17 | +## 3. Change Domain to GUI |
| 18 | + |
| 19 | + |
| 20 | + |
| 21 | +Set Material Domain to **GUI** if you want to use this material inside UI Controls. If you want to use this material on Models or Text Render then leave it as default Surface (but use other plug than *Opacity* if material is opaque). |
| 22 | + |
| 23 | +## 4. Set up the material graph |
| 24 | + |
| 25 | + |
| 26 | + |
| 27 | +In this step you need to create a material using shader code blocks as shown on a picture above. |
| 28 | + |
| 29 | +Add a new **Custom Global Code** node and set it;s **Location** to **Includes**, then write the following code there: |
| 30 | + |
| 31 | +``` |
| 32 | +#include "./Flax/GUICommon.hlsl" |
| 33 | +``` |
| 34 | + |
| 35 | +This will ensure that various GUI and font sampling utilities will be included to use inside a shader file. |
| 36 | + |
| 37 | +Then add similar node **Custom Code** with the following code: |
| 38 | + |
| 39 | +``` |
| 40 | +// Get closest distance to the font glyph |
| 41 | +Output0 = GetFontMSDFMedian(Input0).xxxx; |
| 42 | +``` |
| 43 | + |
| 44 | +Finally, drag and drop `Font` parameter (from proprties panel on the right) to sample the font texture. Plug the font `Color` output into the first `Input0` of the Custom Code node, then connect `Output0` from that node to the output `Opacity` of the material. |
| 45 | + |
| 46 | +## 5. Assign the material |
| 47 | + |
| 48 | + |
| 49 | + |
| 50 | +Now, create a new `Label` control, set it's Font to asset that uses `MSDF` as `Raster Mode` and plug the created material into the `Material` property. Ensure that font size is not too small to ensure SDF data is correct. Values around 20 are usually a good starting point. |
| 51 | + |
| 52 | +Now, you should see a basic SDF font rendering that will look like a shadow-like gradient of the text: |
| 53 | + |
| 54 | + |
| 55 | + |
| 56 | +## 6. Make an outline |
| 57 | + |
| 58 | + |
| 59 | + |
| 60 | +Finally, let's pump up the shader to draw an outline of the text and use color from vertex, which will be passed by rendering system directly from the control rendering. |
| 61 | + |
| 62 | +Edit the *Custom Code* node: |
| 63 | + |
| 64 | +``` |
| 65 | +// Get closest distance to the font glyph |
| 66 | +float thickness = 4; // Can be exposed as a parameter |
| 67 | +Texture2D font = In1; // Hack to get Font texture parameter |
| 68 | +Output0 = SampleFontMSDFOutline(font, input.TexCoord, thickness); |
| 69 | +``` |
| 70 | + |
| 71 | +Final result: |
| 72 | + |
| 73 | + |
0 commit comments