Four ways to work with text UI in Unity
In the process of converting old Unity code based on 2D Toolkit into pure Unity code, I ran into a problem: Unity has excellent support for standard font formats, but this is still not enough to match support for creating fonts from sprite sheets in tk2d.
Sprite font example
In fact, this is not a very serious problem - in the end, it is easier and more logical to insert a ready-made font, but I wanted to keep the style similar to handwritten inscriptions.
')
Therefore, I started cataloging the various options that Unity provides when working with UI text (including the recently acquired Unity and the TextMesh Pro version 2018.1). Although my typography knowledge is rather narrow (and this topic seems to be very complex), the article will allow you to understand what opportunities exist and how you can use them.
Standard support for Unity .ttf and .otf font files is the simplest and most popular way to implement text in a game.
It seems that inside it is a dynamically created sprite font. Unity creates a texture from a font with a given font size.
Source: Fonts are automatically created from .ttf or .otf files.
Application: for UI Text components only
Scaling options: 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 clearer.
Pros / cons: Easy to use, but only imported fonts are supported.
Read more: Unity Font Documentation
Unity has the ability to create arbitrary sprite fonts, but the ability to scale them is limited.
Source: Custom Fonts are created from Material (Material) (which refers to Texture) and symbol tables.
Character tables seem a bit complicated to me (but I think it’s easier than dealing with UV coordinates). Besides, it seems. there is no GUI tool for generating them from the sprite sheet itself. Each character has the following properties:
Zoom options: scaling seems to be a weak point of Custom Fonts. Judging by what I saw, these fonts ignore the Font Size property of 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 it is rather inconvenient if you want to align different elements.
Application: for UI Text components only
Pros / cons: is native support for sprite fonts in Unity, but the size can be changed only by scaling. No tool to generate symbol tables; they must be filled in manually.
Read more: Unity Font Documentation
Unlike Unity, TextMesh Pro has a uniform format for text files and sprite fonts, and its behavior for both types of fonts is about the same.
The disadvantage of TextMesh Pro fonts is that they can only be used with the TextMesh Pro UI components. If you think that there is a reason for using TextMesh Pro, then it is better to make this decision at the early stages of the project and constantly stick to it throughout the project. Redesigning a finished project written with standard UI Text components will be a painful task.
Source: TextMesh Pro font resources are created from Material (Material) and symbol tables, almost like Custom Fonts Unity.
Character tables are specified only in pixel coordinates, 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 rather slow.
Scaling options: you can scale the TextMesh Pro font in the TextMesh Pro UI component, changing the font size and without having 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.
Application: TextMesh Pro - Text UI components only
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 character 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 in 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 the components of TextMesh Pro - Text.
Sprite resources solve the problem of mixing standard text with in-game characters or icons (as an example, the characters of objects used in the Final Fantasy inventory).
Application: TextMesh Pro components - Text UI. For each component, you can assign one font resource TMP and one sprite resource TMP.
For the link to the icon of the sprite in the text, the tag <sprite index = #> is used (where # is the index of the sprite starting from 0).
Source: TextMesh Pro Sprite Assets are created from the Material (Material) and symbol tables. Conceptually, they are close to the TextMesh Pro font resources. The Sprite Importer tool is slightly better than the Font Asset Creator, because it can use FNT files to generate character tables of sprite sheets. (See notes on FNT files in the next section.)
Pros / cons: absent, because this method is in fact a side benefit of using TextMesh Pro. If you for some reason want to use this functionality in the project. It is best to start using TextMesh Pro as soon as possible.
Read more: TextMesh Pro Sprites Documentation
This in itself can be a topic for a separate post, this is definitely worth mentioning, because thanks to this, the creation of arbitrary fonts and font resources for 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 identifying characters from a sprite sheet. In fact, you have to manually enter a bunch of numbers, 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 myself wrote a 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 post-processor resources that can read raw files in a project and convert them to resources used in the code. Resource postprocessors are executed when importing and re-importing 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, it will allow you to transfer the task of creating a sprite font to a more efficient tool, which will save time.
Here is a table with a brief comparison:
Sprite font example
In fact, this is not a very serious problem - in the end, it is easier and more logical to insert a ready-made font, but I wanted to keep the style similar to handwritten inscriptions.
')
Therefore, I started cataloging the various options that Unity provides when working with UI text (including the recently acquired Unity and the TextMesh Pro version 2018.1). Although my typography knowledge is rather narrow (and this topic seems to be very complex), the article will allow you to understand what opportunities exist and how you can use them.
Standard Unity Font Asset
Standard support for Unity .ttf and .otf font files is the simplest and most popular way to implement text in a game.
It seems that inside it is a dynamically created sprite font. Unity creates a texture from a font with a given font size.
Source: Fonts are automatically created from .ttf or .otf files.
Application: for UI Text components only
Scaling options: 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 clearer.
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 arbitrary sprite fonts, but the ability to scale them is limited.
Source: Custom Fonts are created from Material (Material) (which refers to Texture) and symbol tables.
Character tables seem a bit complicated to me (but I think it’s easier than dealing with UV coordinates). Besides, it seems. 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 : is in the range from 0 to 1, denotes the percentage of the width and height of the texture
- Vert : pixel coordinates
- Advance : the pixel pitch before the next character is drawn, the larger the value, the greater the spaces between the characters.
Zoom options: scaling seems to be a weak point of Custom Fonts. Judging by what I saw, these fonts ignore the Font Size property of 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 it is rather inconvenient if you want to align different elements.
Application: for UI Text components only
Pros / cons: is native support for sprite fonts in Unity, but the size can be changed only by scaling. No tool to generate symbol tables; they must be filled in manually.
Read more: Unity Font Documentation
TextMesh Pro Font Asset
Unlike Unity, TextMesh Pro has a uniform format for text files and sprite fonts, and its behavior for both types of fonts is about the same.
The disadvantage of TextMesh Pro fonts is that they can only be used with the TextMesh Pro UI components. If you think that there is a reason for using TextMesh Pro, then it is better to make this decision at the early stages of the project and constantly stick to it throughout the project. Redesigning a finished project written with standard UI Text components will be a painful task.
Source: TextMesh Pro font resources are created from Material (Material) and symbol tables, almost like Custom Fonts Unity.
Character tables are specified only in pixel coordinates, 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 rather slow.
Scaling options: you can scale the TextMesh Pro font in the TextMesh Pro UI component, changing the font size and without having 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.
Application: TextMesh Pro - Text UI components only
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 character 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 in 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 the components of TextMesh Pro - Text.
Sprite resources solve the problem of mixing standard text with in-game characters or icons (as an example, the characters of objects used in the Final Fantasy inventory).
Application: TextMesh Pro components - Text UI. For each component, you can assign one font resource TMP and one sprite resource TMP.
For the link to the icon of the sprite in the text, the tag <sprite index = #> is used (where # is the index of the sprite starting from 0).
Source: TextMesh Pro Sprite Assets are created from the Material (Material) and symbol tables. Conceptually, they are close to the TextMesh Pro font resources. The Sprite Importer tool is slightly better than the Font Asset Creator, because it can use FNT files to generate character tables of sprite sheets. (See notes on FNT files in the next section.)
Pros / cons: absent, because this method is in fact a side benefit of using TextMesh Pro. If you for some reason want to use this functionality in the project. It is best to start using TextMesh Pro as soon as possible.
Read more: TextMesh Pro Sprites Documentation
Generating arbitrary fonts and TextMesh Pro font resources from FNT files
This in itself can be a topic for a separate post, this is definitely worth mentioning, because thanks to this, the creation of arbitrary fonts and font resources for 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 identifying characters from a sprite sheet. In fact, you have to manually enter a bunch of numbers, 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 myself wrote a 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 post-processor resources that can read raw files in a project and convert them to resources used in the code. Resource postprocessors are executed when importing and re-importing 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, it will allow you to transfer the task of creating a sprite font to a more efficient tool, which will save time.
Summarize
Here is a table with a brief comparison:
| 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 | It is necessary to set each symbol manually, specifying UV-coordinates. (Script creation of fonts from FNT files or other sources is possible using AssetPostprocessor.) | There is no way to change the font size, except to scale the GameObject. There is no built-in GUI tool for creating a symbol table of textures. |
| TextMesh Pro Font Asset | TextMesh Pro - Text | Material, Texture and symbol table | It is necessary to set each character manually, specifying pixel coordinates. (Script creation of fonts from FNT files or other sources is possible using AssetPostprocessor.) | There is no built-in GUI tool for creating a symbol table of textures. Cannot be used with standard Unity UI Text components. |
| TextMesh Pro Sprite Asset | TextMesh Pro - Text | Material, Texture and symbol table | You must set each character manually by specifying pixel coordinates or using a Sprite Importer. (Script creation of fonts from other sources is possible using AssetPostprocessor.) | Used in conjunction with TextMesh Pro Font Assets to add any icons that are not associated with a symbol. |
Source: https://habr.com/ru/post/358260/
All Articles