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!
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!
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.
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.
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.
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.
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.