May 11, 2018 at 14:50Four ways to work with UI text in Unity
- Transfer
In the process of converting old Unity code based on 2D Toolkit to pure Unity code, I encountered a problem: Unity has great support for standard font formats, but this is still not enough to compare with support for creating fonts from sprite sheets in tk2d.
An example of a sprite font
Actually, this is not a very serious problem - after all, it is easier and more logical to insert a ready-made font, but I wanted to keep the style similar to handwritten inscriptions.
So I started cataloging the various options that Unity provides when working with UI text (including the recently acquired Unity and the built-in TextMesh Pro version 2018.1 ). Although my typography knowledge is rather narrow (and this topic seems to be very complicated), the article will allow you to understand what possibilities exist and how they can be used.
Standard Unity support for .ttf and .otf font files is the simplest and most popular way to implement text in a game.
It looks like inside it is a dynamically generated sprite font. Unity creates a texture from a font with a given font size.
Source: Fonts are automatically generated from .ttf or .otf files.
Application: only for UI Text components
Scalability: text can be freely scaled in the UI Text component. Scaling the font itself increases the size of the texture generated from the font, which makes the result more clear.
Pros / Cons: Easy to use, but only imported fonts are supported.
Read more: Unity font documentation
Unity has the ability to create custom sprite fonts, but the ability to scale them is limited.
Source: Custom Fonts are created from Material (which refers to Texture) and character tables.
Character tables seem a little complicated to me (but I think it's easier than dealing with UV coordinates). It also seems to be. there is no GUI tool for generating them from the sprite sheet itself. Each character has the following properties:
Scaling Options: Scaling seems to be a Custom Fonts weakness. Judging by what I saw, these fonts ignore the Font Size property of the Text components and are limited by the size of the imported texture.
You can set the scale of the game object containing the Text component. However, this changes the borders of the element, so this is rather inconvenient if you want to align different elements.
Application: only for UI Text components
Pros / cons: it is native support for sprite fonts in Unity, but the size can only be changed using scaling. There is no tool for generating symbol tables; they must be filled in manually.
Read more: Unity font documentation
Unlike Unity, TextMesh Pro has a single format for text files and sprite fonts, and its behavior for both types of fonts is approximately the same.
The drawback of TextMesh Pro fonts is that they can only be used with TextMesh Pro UI components. If you think that there is a reason to use TextMesh Pro, then it is better to make this decision in the early stages of the project and constantly adhere to it throughout the project. Remaking a finished project written with standard UI Text components will be a painful task.
Source: TextMesh Pro font resources are created from Material and character tables, much like Custom Fonts Unity.
Character tables are specified only in pixel coordinates, and not in UV, so they are simpler and more accurate than arbitrary Unity fonts. In addition, there is a Font Asset Creator tool that creates a TextMesh Pro font resource from a font file. However, for sprite fonts, the process is still pretty slow.
Scaling options: you can scale the TextMesh Pro font in the TextMesh Pro UI component by changing the font size and without the need to scale the game object. For this reason, if I need to use a sprite font, then I prefer TextMesh Pro to native Unity Text.
Usage: TextMesh Pro - only Text UI components
Pros / cons: more flexible than font resources or Unity sprite fonts, but requires its own TextMesh Pro UI Text component. There is no tool for creating symbol tables from sprite sheets, they have to be done manually.
Read more: TextMesh Pro font documentation
TextMesh Pro sprite resources are a bit out of place on this list - in fact, they are not font resources in the same sense as the other three types. Rather, it is an additional feature provided to the user by TextMesh Pro - Text components.
Sprite resources solve the problem of mixing standard text with in-game characters or icons (as an example, you can use the item symbols used inside Final Fantasy inventory).
Application: TextMesh Pro components - Text UI. For each component, you can assign one TMP font resource and one TMP sprite resource.
The tag is used to refer to the sprite icon in the text.
Source: TextMesh Pro Sprite Assets are created from Material and character tables. Conceptually, they are close to the font resources of TextMesh Pro. Sprite Importer is slightly better than Font Asset Creator because it can use FNT files to generate sprite sheet symbol tables. (See notes on FNT files in the next section.)
Pros / Cons: None, because this method is actually a side benefit of using TextMesh Pro. If for some reason you want to use this functionality in a project. it’s best to start using TextMesh Pro as soon as possible.
Read more: TextMesh Pro sprite documentation
This in itself can become a topic for a separate post, it’s definitely worth saying about it, because thanks to this, creating custom fonts and font resources TextMesh Pro becomes much less monotonous.
The main disadvantage of creating sprite fonts (using Unity tools or TextMesh Pro font resources) is that there is no GUI tool for defining characters from a sprite sheet. In fact, you have to drive a bunch of numbers manually, test the font, then repeat it again, and this is a very monotonous process.
But there is good news - there is a more or less standard text format for such information , which is used in many GUI tools for creating sprite fonts. (Even I wrote it myselfa simplified utility with partial support for the FNT specification.) The
bad news is that Custom Fonts Unity and TextMesh Pro font resources do not support it by default.
However, Unity supports the concept of resource post-processors that can read raw files in a project and convert them into resources used in the code. Resource postprocessors are executed during the import and re-import of resources.
I wrote a very simple FNT-to-TextMesh Pro Font Asset converter . You can use it as an example. If you can write a converter that is good enough for your purposes, then it will allow you to transfer the task of creating a sprite font to a more effective tool, which will save time.
Here is a quick comparison table:
An example of a sprite font
Actually, this is not a very serious problem - after all, it is easier and more logical to insert a ready-made font, but I wanted to keep the style similar to handwritten inscriptions.
So I started cataloging the various options that Unity provides when working with UI text (including the recently acquired Unity and the built-in TextMesh Pro version 2018.1 ). Although my typography knowledge is rather narrow (and this topic seems to be very complicated), the article will allow you to understand what possibilities exist and how they can be used.
Standard Unity Font Asset
Standard Unity support for .ttf and .otf font files is the simplest and most popular way to implement text in a game.
It looks like inside it is a dynamically generated sprite font. Unity creates a texture from a font with a given font size.
Source: Fonts are automatically generated from .ttf or .otf files.
Application: only for UI Text components
Scalability: text can be freely scaled in the UI Text component. Scaling the font itself increases the size of the texture generated from the font, which makes the result more clear.
Pros / Cons: Easy to use, but only imported fonts are supported.
Read more: Unity font documentation
Unity Custom Font
Unity has the ability to create custom sprite fonts, but the ability to scale them is limited.
Source: Custom Fonts are created from Material (which refers to Texture) and character tables.
Character tables seem a little complicated to me (but I think it's easier than dealing with UV coordinates). It also seems to be. there is no GUI tool for generating them from the sprite sheet itself. Each character has the following properties:
- Index : ASCII character index
- UV texture coordinates : in the range from 0 to 1, indicates the percentage of width and height of the texture
- Vert : pixel coordinates
- Advance : the step in pixels before rendering the next character, the larger the value, the more spaces between characters.
Scaling Options: Scaling seems to be a Custom Fonts weakness. Judging by what I saw, these fonts ignore the Font Size property of the Text components and are limited by the size of the imported texture.
You can set the scale of the game object containing the Text component. However, this changes the borders of the element, so this is rather inconvenient if you want to align different elements.
Application: only for UI Text components
Pros / cons: it is native support for sprite fonts in Unity, but the size can only be changed using scaling. There is no tool for generating symbol tables; they must be filled in manually.
Read more: Unity font documentation
TextMesh Pro Font Asset
Unlike Unity, TextMesh Pro has a single format for text files and sprite fonts, and its behavior for both types of fonts is approximately the same.
The drawback of TextMesh Pro fonts is that they can only be used with TextMesh Pro UI components. If you think that there is a reason to use TextMesh Pro, then it is better to make this decision in the early stages of the project and constantly adhere to it throughout the project. Remaking a finished project written with standard UI Text components will be a painful task.
Source: TextMesh Pro font resources are created from Material and character tables, much like Custom Fonts Unity.
Character tables are specified only in pixel coordinates, and not in UV, so they are simpler and more accurate than arbitrary Unity fonts. In addition, there is a Font Asset Creator tool that creates a TextMesh Pro font resource from a font file. However, for sprite fonts, the process is still pretty slow.
Scaling options: you can scale the TextMesh Pro font in the TextMesh Pro UI component by changing the font size and without the need to scale the game object. For this reason, if I need to use a sprite font, then I prefer TextMesh Pro to native Unity Text.
Usage: TextMesh Pro - only Text UI components
Pros / cons: more flexible than font resources or Unity sprite fonts, but requires its own TextMesh Pro UI Text component. There is no tool for creating symbol tables from sprite sheets, they have to be done manually.
Read more: TextMesh Pro font documentation
TextMesh Pro Sprite Asset
TextMesh Pro sprite resources are a bit out of place on this list - in fact, they are not font resources in the same sense as the other three types. Rather, it is an additional feature provided to the user by TextMesh Pro - Text components.
Sprite resources solve the problem of mixing standard text with in-game characters or icons (as an example, you can use the item symbols used inside Final Fantasy inventory).
Application: TextMesh Pro components - Text UI. For each component, you can assign one TMP font resource and one TMP sprite resource.
The tag is used to refer to the sprite icon in the text.
Source: TextMesh Pro Sprite Assets are created from Material and character tables. Conceptually, they are close to the font resources of TextMesh Pro. Sprite Importer is slightly better than Font Asset Creator because it can use FNT files to generate sprite sheet symbol tables. (See notes on FNT files in the next section.)
Pros / Cons: None, because this method is actually a side benefit of using TextMesh Pro. If for some reason you want to use this functionality in a project. it’s best to start using TextMesh Pro as soon as possible.
Read more: TextMesh Pro sprite documentation
Generate custom fonts and TextMesh Pro font resources from FNT files
This in itself can become a topic for a separate post, it’s definitely worth saying about it, because thanks to this, creating custom fonts and font resources TextMesh Pro becomes much less monotonous.
The main disadvantage of creating sprite fonts (using Unity tools or TextMesh Pro font resources) is that there is no GUI tool for defining characters from a sprite sheet. In fact, you have to drive a bunch of numbers manually, test the font, then repeat it again, and this is a very monotonous process.
But there is good news - there is a more or less standard text format for such information , which is used in many GUI tools for creating sprite fonts. (Even I wrote it myselfa simplified utility with partial support for the FNT specification.) The
bad news is that Custom Fonts Unity and TextMesh Pro font resources do not support it by default.
However, Unity supports the concept of resource post-processors that can read raw files in a project and convert them into resources used in the code. Resource postprocessors are executed during the import and re-import of resources.
I wrote a very simple FNT-to-TextMesh Pro Font Asset converter . You can use it as an example. If you can write a converter that is good enough for your purposes, then it will allow you to transfer the task of creating a sprite font to a more effective tool, which will save time.
To summarize
Here is a quick comparison table:
| Font Resource | UI component | A source | Customization | Advantages disadvantages |
|---|---|---|---|---|
| Font (standard in Unity) | UI Text | .ttf or .otf | Mostly automatic | Ease of use, the inability to use sprites or textures |
| Custom font | UI Text | Material, Texture and Symbol Table | You must specify each character manually by specifying UV coordinates. (It is possible to script fonts from FNT files or other sources using AssetPostprocessor.) | There are no ways to change the font size other than scaling GameObject. There is no built-in GUI tool for creating texture symbol tables. |
| TextMesh Pro Font Asset | TextMesh Pro - Text | Material, Texture and Symbol Table | You must specify each character manually by specifying pixel coordinates. (It is possible to script fonts from FNT files or other sources using AssetPostprocessor.) | There is no built-in GUI tool for creating texture symbol tables. Cannot be used with standard Unity UI Text components. |
| TextMesh Pro Sprite Asset | TextMesh Pro - Text | Material, Texture and Symbol Table | You must specify each character manually by specifying pixel coordinates or using Sprite Importer. (It is possible to script fonts from other sources using AssetPostprocessor.) | Used in conjunction with TextMesh Pro Font Assets to add any non-symbol icons. |