Search Unity

Whether you’re working on an FPS, a puzzle game or a VR experience, one of the aspects you have to take care of is User Interface. Luckily enough, as of March 2017, TextMesh Pro has joined the Unity family. This means that making your UI in Unity look great has become much easier and faster!

For those of you who haven’t followed these developments, TextMesh Pro is a replacement for Unity’s default text components. It is just as performant (even more, in some cases) and it uses a completely different rendering technique called Signed Distance Field (SDF), originally used by Valve in Team Fortress 2. Together with having the power to make your text look great without much effort, TextMesh Pro also provides you with a much more advanced control over it, via inspector or scripting. In this post, we’re going to take a look at how to make the most out of this incredible tool!

There are two main reasons why it is a great idea to start your projects using TextMesh Pro. First, visual improvements. Thanks to SDF rendering, it’s easy to change the way your text looks without having to recreate its font. Every TextMesh Pro component has a material attached to it that you can tweak in order to modify the style of your text. Second, better control. The TextMesh Pro component includes all variables you can find in the ordinary text component, plus a lot more. And if this wasn’t enough, just know that TextMesh Pro is currently used by over a quarter of a million developers around the world!

TextMesh Pro vs default Text

Working with the default Unity text, you might have noticed that sometimes stretching or resizing the object causes it to look blurry. This is because the text doesn’t hold information of what it would look like when resized, and Unity therefore has to “improvise” and attempt to generate the missing pixels on the fly. Because of the different rendering technique that TextMesh Pro is using, this is no longer an issue. SDF is based on the principle of rendering a Font Atlas at a high resolution so that the font always has information about what a character would look like when resized.

With TextMesh Pro you can import any font file and create your own font asset (Window > TextMesh Pro > Font Asset Creator). This allows you to choose the resolution for its Font Atlas (which will determine how effective SDF rendering will be for your text). Obviously, the lower the resolution you choose, the faster the Font Atlas will be generated.

Since the Font has information about how it would look like at different sizes, it can also reconstruct its Outline and Dropped Shadow from the Font Atlas. Simply tweak the material properties and watch your text change its look entirely!

Better control

As we have seen, TextMesh Pro offers great looking text. But what’s the point of nice text if you have no control over it? The TextMesh Pro component has options that allow you to customize font size, spacing, alignment, kerning, or to enable Autosize and to fit your text into a Container. The last two, in particular, give you great control over working with different platforms or different languages, as they allow your text to autosize depending on a given text container without the need of any scripting. However, if you do wish to change these settings at runtime, you can access all variables in the TextMesh Pro components from the TextMeshPro API.

For an extra layer of customization, you can also add the Text Info Debug Tool component to your text object so that you can visually represent characters, words, links, lines etc.

If you want to save time reformatting your text every time you insert a header, a title, a quote etc., you can set up a Style Sheet for any specific purpose. One example could be to inject a decoration to a header. To create a Style Sheet, select Create > TextMesh Pro > Style Sheet. You can set this new asset as your default Style Sheet from Edit > Project Settings > TextMesh Pro Settings.

Rich Text

In addition to controlling the way the text looks from the inspector or a script, you can control it from the text field itself. If you are familiar with HTML or XML, you can customize the look of your text as you are typing. If you’re not, just read the guide on how to use Rich Text with TextMesh Pro) to get started! This is particularly useful in cases where you want to use multiple styles, sizes, materials in the same text object.

Customizing Materials

Another way of making TextMesh Pro look great is to apply a Surface Shader to your text. This will allow lighting in the scene to affect the text. In the example below, a few real-time point lights are moving around the scene and affecting the text.

The material properties give you the option to customize settings like Face, Outline, Bevel, Lighting, BumpMap, EnvMap, Glow, and Debug settings.

Once you’ve created a material that you’re happy with, you can create a Material Preset that we will be able to reuse at any point, specifically for the Font Asset we’re using. We can do so by right-clicking on the Material name and selecting ‘Create Material Preset’. This will create an asset that we can select from our TextMesh Pro component > Font Settings > Material Preset.

Fallback System

If you have generated a Font Atlas that is missing certain characters, TextMesh Pro will make the character fall back to a default glyph whenever typed. You can change this glyph by going on Edit > Project Settings > TextMesh Pro Settings. Alternatively, you can set up one or more Font Assets to which TextMesh Pro will fall back to if the character is not found in the primary Atlas. For optimization purposes, it makes sense to keep the main Font Atlas at a higher resolution, and all the fallback Atlases to a lower one.

In addition to that, you can use the TextMesh Pro Settings to set up Resources paths for Font & Materials or Sprite Assets. When using Rich Text, you can insert a Sprite depending on which are available in the primary Sprite Asset you have defined in the Settings. The easiest way of doing so is by importing a Sprite Sheet, then slicing it in the Sprite Editor, right-clicking on the asset and selecting Create > TextMesh Pro > Sprite Asset. From this new asset, you can customize settings such as offset or pivot. Likewise, you can set up a series of Fallback Sprite Assets to fall back to if a Sprite is not found in the primary Sprite Assets.

Summing up…

In terms of performance, as we have already mentioned, TextMesh Pro works similarly to the default text: it still renders on quads, so it is as efficient as using a bitmap font. There is also no runtime memory allocation: TextMesh Pro will only allocate space for the text objects when you press play. If you’re increasing the number of characters by a significant amount, only one reallocation is made; if you are decreasing the number of characters, no reallocation is made, unless it’s decreased of at least 256 characters. And in terms of improvements, you can obtain better results for styles like Outline and Drop Shadow simply because of the SDF rendering technique used by TextMesh Pro.

Most of what was mentioned in this blog is available as an example scene when you import TextMesh Pro into your project (from Window > Package Manager > TextMesh Pro > Install from Unity 2018.1 onwards). I strongly recommend you to take a look at them before you start using TextMesh Pro, as their content might answer most of the questions you have. However, if you want to provide your feedback or still have any questions, you are welcome to do so via the Forums.

22 replies on “Making the most of TextMesh Pro in Unity 2018”

you can use the TextMesh Pro Settings to set up Resources paths for Font & Materials or Sprite Assets. When using Rich Text, you can insert a Sprite depending on which are available in the primary Sprite Asset you have defined in the Settings.

We need better Asian language support. Nowadays a quarter of the PC market is Chinese. It cannot be ignored. Anything coming on this front in Unite 2018 LA?

TextMesh Pro is really bad for most asia languages. Think of convert all Japanese, Chinese and Korean characters to font asset. That take a lot of time and burn my CPU. Thai also has problem with vowel symbols and tone diacritics.

I also need character sets for each languages. Why you can’t make it dynamic?

This is why I don’t want TextMesh Pro replace the default one. Because it really bad for localization and most asia languages.

Hey Tim,
This does not sound like a good idea in general. There are just too many characters in Chinese or Japanese to create good sdf assets. I recommend not trying to create an asset with all characters out there, but with just the one’s your game really uses. TMP makes it really easy to define the characters for the asset with a text file. In order to create that text file I made a handy little tool:

Most games have dynamic text, such as user’s names, chats, information pulled from web services, etc. Trying to pre-bake all characters that might ever be used is not practical in these languages in this case. Never tried to implement this, but maybe interesting:

What, English? An insane, convoluted spaghetti tangle of languages and rules from across the globe? Trust me, you could do way better than making everyone speak this mess.

…I mean, given the state of today’s society, those problems may be exactly why it ends up as the Universal Language….

Is there an option to adjust sorting layers for TMP objects by now? When I used TMP last time, the assets could not be properly rendered along with sprites (cause sort layering was missing) making the plugin pretty much useless.

How do I simply, in the editor, animate a fade of a TextMeshPro object? Like an opacity or alpha slider. Is there such a thing for TMP?

You can simply use a canvas group in one of the parent objects to animate alpha values for all its children. Otherwise you could also animate the material of the TMP object (or an instance of it).

Isn’t this sentence a bit disingenious? “…it still renders on quads, so it is as efficient as using a bitmap font”. A quick look at the TextMesh Pro SDF shader reveals that the vertex and fragment shaders are quite a bit heavier than those used for bitmap font rendering.

True, there is some overhead in the shader. I guess what they tried to say is, that TMP does not create high poly characters in order to generate that vectorlike rendering.
For me the mobile shader does not create too much overhead, and you can always switch to the bitmap mobile shader, which does not really have any more overhead than the normal text shader. I guess if you’re targeting low level devices it does make quite a lot of sense to use TMP since dynamically generating the font atlases can create quite some spikes (especially when the atlas is too small and a new atlases with double resolution is created).

what if you have an asset that could use it ? is it possible to have it packaged with the asset itself ? or we have to deal with “hey i just imported and there is error, can you fix it ? ” so basically not an option

You should not try and include it with the asset, especially now that installation is controlled by the package manager I use it in my assets and simply state in setup instructions how the user can get and install it. I do not get questions about this so I guess the instructions are working.

Any new features or improvements coming… easier to do multi languages.. current setup process is a bit of learning curve

Is there any way to use HDR colors in TextMeshPro? So it will be tonemapped correctly by the post process.

Comments are closed.