This is the 17th day of my participation in the August More text Challenge. For details, see:August is more challenging

An overview of the

In the last two articles, we learned how to gradient Text Text in Unity. Today, let’s take a look at another way to gradient Text — the TextMeshPro component. We usually use the Text component of UGUI. However, the rendered Text font is not vector, so you will see jagged and blurry as you get closer. And Text has a lot of limitations, so we need to use TextMeshPro component. Let’s take a look at the TextMeshPro component.

Introduction to TextMeshPro components

TextMeshPro, which renders fonts that are vector, does not have jagged edges or blurring near them. In addition, there are rich performance effects, such as blur, expansion, stroke, glow and so on. In older versions of Unity, it was a free resource in the resource store that was later integrated into Unity’s Package Manager. In general, its functions are much better than Text. In my opinion, the only thing that is not very friendly is that it does not support Chinese, so you need to create your own Chinese font library, which feels a little inconvenient.

Installing a plug-in

First, open Package Manager, search TextMeshPro in the search bar, and click Install. Path: Untiy editor menu bar Windows->Package Manager.

After the import, a new TextMesh Pro folder is added to the Assets directory. This is where the generated font file is stored.

use

Make a font file

First of all, we need to make a font file, because we can not directly input Chinese, so we need to make a font file of the text we use.

  1. Import a font and place it under Fonts in the TextMesh Pro folder.
  2. Click the Unity menu Window->TextMesh Pro->Font Asset Creator to open the Font creation Window;
  3. Click Generate Font Atlas to Generate the Font. If the selected Font is not all included in the image, or the generated word is very small and the edge of the word is blurred after export, enlarge the Atlas Resolution and repackage it until the desired effect is achieved;
  4. After the font is generated, click Save as to generate the font file into the Fonts & Materials folder.

In the figure above,

  1. SourceFontFile puts font resources in.ttf format
  2. There are many formats in CharacterSet, and I usually use the last two:
    • CharactersFromFile: Put all the fonts in a TXT and then put them in CharacterFile
    • Custom Characters: Fill the box below with the text to be used

What it looks like when it’s generated

Click Save to generate the following file

Component parameters

The component is similar to normal Text, but with some new features:

  • Font Asset: The Font created by Font Asset Creator, the Font that has been created above
  • Material Preset: The Material of the created font
  • Color Gradient: Check this button to create the Color Gradient effect, which is much easier than in the previous article

Gradient takes three parameters:

  • ColorPreset: Created color material
    • In the Fonts & Materials folder, right click ->Create->TextMeshPro->Color Gradient, set the Color and drag the file to the Color Gradient of the text component
  • ColorModel: Gradient mode
    • monochromatic
    • Horizontal gradient (two colors)
    • Vertical gradient (two colors)
    • Four color gradient
  • Colors: Sets the color

Material of the ball

Most of TextMeshPro’s kinetic energy is still hit in the shader’s parameter adjustment, let’s take a look

Face: Font color Settings

This is the most basic font color setting, you can add pictures to texture the font.

Outline: Add stroke to font

Adjust the Thickness parameter to set the stroke width, and you can add an image to add texture to the stroke of the font.

Underlay: Shadow fonts

To add a shadow to a font, you can adjust OffsetX, OffsetY to set the shadow position, Dilate to set the shadow thickness, Softness to set the shadow blur.

Bevel, Lighting, BumpMap, EnvMap: Check one of them, the others will be checked, mainly to adjust the color of the text Bevel, Lighting, personally think suitable for emhead effect

Lighting: Lighting (need to set stroke first)

When the font has a stroke, add light and the font immediately feels 3D. Adjust the parameters to set the Angle, position, intensity of the light and so on.

Glow: light-emitting

Divided into internal luminescence and external luminescence, self-adjustment parameters can view the effect.

Results show

The following picture is a random adjustment effect. In the Inspector, you can see that the last two characters are two □□, but the last two characters are “ha ha”. This is because the two characters are not written in the font resources, so only two boxes are displayed

Write in the last

All the shared content are the author in the daily development process used a variety of small function points, share out also in a disguised review, if there is a bad place to write also please give advice. Welcome to learn from each other and make progress. This article is written here first, I hope it can be helpful to you