In last week’s Feature Friday, we discussed the basics of setting up UI in Unity.
This week we are going to take it a bit further. Last time we were only using Unity’s built in Text components to display some simple text to the screen.
With that, there were some basic configuration options, but it comes nowhere close to what you can do with Text Mesh Pro.
Despite the “Pro” moniker – Text Mesh Pro is a free package that gives you much better looking and more configurable text. In fact, Unity saw that this package was so good, that they built it right into the Unity editor.
So today, we’ll be going over:
- Setting up Text Mesh Pro
- Creating Your Own Text Mesh Pro Assets
- Customizing Text Mesh Pro Assets
By the end of this article, you’ll understand how you should be using Text Mesh Pro to get the best looking UI you’ve ever had!
And as always, at the end of each Feature Friday article, I feature something made with the Unity Game engine. This week I’m going to share with you how one developer brought the Pokémon Trading Card Game to life using Augmented Reality in Unity. Spoilers: it’s really freaking cool!
1. Setting up Text Mesh Pro
Alright, so like I mentioned before, Text Mesh Pro is built right in to the Unity Game Engine, so no need to go out and purchase anything or import some funky packages. So out of the box you can begin to create with Text Mesh Pro.
Although if this is your first foray with Text Mesh Pro, it’s advisable to import the Text Mesh Pro Essential Resources as this will have some default fonts and styles for you to use as you familiarize yourself with Text Mesh Pro.
To do that, just go to Window > TextMeshPro > Import TMP Essential Resources
You can also import the Examples and Extras in the same menu if you want to see some samples of what you can do with Text Mesh Pro.
There are two “types” of Text Mesh Pro: TextMeshPro and TextMeshProUGUI. Both have the same configuration options but the situations where you would use one over another are different.
The “TextMeshPro” is best used for displaying text in world space – text that you want to be a part of your game world rather than a HUD or a menu. It is a bit more efficient and easier to use than a world space canvas.
The “TextMeshProUGUI” is a replacement for Unity’s Text component on their canvas UI system. This is what you will be using for menus HUDs and other overlay type UI.
To create a TextMeshPro object, right click in the scene hierarchy, hover over 3D Object, then select “Text – TextMeshPro.” You’ll see a new TextMeshPro object appear in the scene hierarchy.
Notice how this object is standalone and is not a child of a canvas object. This gives you an idea of the intended use of the TextMeshPro object.
To create a TextMeshProUGUI object, just right click in the scene hierarcy, hover UI, then select “Text – TextMeshPro.” This time a new TextMeshPro object appears under a canvas and will be manipulated like a standard Unity UI object, like we talked about in the Feature Friday article from last week.
Other than how they are rendered in the game (world space or canvas space), the two types of Text Mesh Pro objects are exactly the same as far as configurations go.
At this point, feel free to play around with any of the settings in the TextMeshPro component. Most of what you will find here are standard options for formatting text in a text editor.
The one I will caution you to skip over for now is the “Font Asset.” With Text Mesh Pro, you can’t just load up any old font file and go, you have to create a text asset, luckily that isn’t too difficult and I’ll be showing you how to create one in the next section.
One of my favorite options is the “Auto Size” option. This changes the size of your font to fit the bounding box of the text asset (up to a defined minimum or maximum).
This is especially useful for variable text that could be longer or shorter, but you always want to display it as large as it can be to fill up a certain space.
And don’t forget to click on the “Extra Settings” tab where you can see some more advanced options for formatting your text.
As you can tell, formatting text with Text Mesh Pro is wonderful, but we are just scratching the surface. The power of Text Mesh Pro comes when we fully take control of how our text looks and we can get incredibly creative with it!
2. Creating Your Own Text Mesh Pro Assets
Now we are going to create our own Text Mesh Pro Assets. By doing this we can choose any font we want to use and make it compatible with Test Mesh Pro.
For starters just go up to Window > TextMeshPro > Font Asset Creator. Then the Font Asset Creator window will appear.
Here you can select a .ttf or .otf file for the “Source Font File” option – this is the font we’ll be creating a new text asset from. For now, I’ll use the Turbo Makes Games font, Telegrama Render.
Most of the default values are going to work well for you here, but there are a few things to pay attention to. The Atlas Resolution setting is going to be the size of the texture your font will be generated on.
Generally a 512 x 512 or 1024 x 1024 resolution will work well for you but you may need to go larger if you have a need for a very high resolution font or a really large set of characters. Just note that some older mobile devices only support up to textures sized 2048 x 2048.
The other value to pay attention to is the Padding value. Padding is the distance between characters on the texture file in pixels. You want to have good spacing between all of your characters, but the more padding you have, the smaller your characters will be and thus lead to lower resolution characters.
Now that you’ve set these values (don’t worry if they’re not perfect) we can generate the texture file for the font by clicking “Generate Font Atlas.”
You’ll now see a preview of the texture to the right, and some information about the texture, below the texture options.
A few things to pay attention to in the texture information section: the Point Size and SP/PD Ratio.
The Point Size is essentially an indicator of font quality – the higher the number, the better your font will appear in your game. Pretty much anything above a value of 50 is going to look good in your game. And you’ll probably be well off with a value in the 30s for mobile games.
The SP/PD ratio is the ratio between your Padding value and your Point Size value. Generally you want to have this value be below 10%.
If you find that your font asset isn’t quite in the right range, then you can modify your Atlas Resolution and Padding values, then regenerate the font, until these values fit the needs of your project.
When you are all set, save the asset with a descriptive name in a place that is easy to find in your project.
Now come back to the Text Mesh Pro object you’ve just created and drag in your newly created font asset into the “Font Asset” field of the Text Mesh Pro component.
Now you’ll see the text you have written change to match the new font you just created!
As you can see, you can do this with any font fairly easily to add some more style to your game. But we’re still just getting warmed up with Text Mesh Pro. In the next section, we are going to fully customize the look of our text in many awesome ways!
3. Customizing Text Mesh Pro Assets
Alright so now is the moment you’ve all been waiting for, now we get to customize the look of our Text Mesh Pro objects.
Just below the TextMeshPro component on your Text Mesh Pro object, is a Material component where we can change how the text looks on screen. We can customize many styles here and apply them to different Text Mesh Pro objects that use the same Font Asset.
By default, it’s a good idea to have a Material with plain white text and no further styling that we can build other Materials off of. Because we don’t need to do anything complex with it, we can set the Shader to TextMeshPro/Mobile/Distance Field – and our text will be displayed efficiently.
To create a new style, right click on the icon of the material and click “Create Preset.” Now a new asset will be created in the project files with the current settings. Now you can start to adjust the basic parameters for the text face color, outline, and underlay (drop shadow).
Don’t forget to find the material preset in the project file structure and give it a descriptive name so you know what it is.
If you want even more options, you can change the Shader to TextMeshPro/Distance Field (Surface). Now you can set a texture for the font face and apply more complex options like bevels, lighting, and bump maps.
So feel free to play around with these different options and see what kinds of cool text presets you can come up with.
Once you have a few of them, you can easily swap them out on the fly by changing the “Material Preset” property – right under the “Font Asset” property on the TextMeshPro component. Notice how all the Material Presets are shown associated with that Font Asset – cool huh?
Now this article was just a primer to get you started and learning how to understand the main things you need to know about Text Mesh Pro – but really it takes playing with it and experimenting with the options yourself to see all the cool things you can make with it.
I do also encourage you to look at some of the examples provided by Text Mesh Pro to see more of the cool things you can do with this powerful tool.
Featured Unity Project of the Week
This week I came across something really cool online and I just had to share it with you all. One developer recently created an Augmented Reality version of the Pokémon Trading Card Game.
In the video linked below, he shows how he created an AR project with Unity to spawn virtual Pokémon on top of the cards. So for example, he shows how he places a Pikachu card on the table and then a virtual Pikachu pops out of a Poké Ball and stands on top of the card.
Next he spawns a Machamp in the same way, and the two Pokémon stare each other down. One of the Pokémon get to go first and their moves pop up on the screen, the player then selects the desired move and attacks the opponent.
The Pokémon then attacks the other with a powerful animation – all happening on this guy’s table top!
Anyways it’s a really cool concept and he goes through the whole process he went through of creating it. And be sure to watch it all the way through so you can see a demonstration of a live battle!
Again I do hope that this article taught you a thing or two about Text Mesh Pro. As with many things in game development, it is helpful to play around with these features yourself so that you can really understand how they work.
Next week we are going to take UI one step further and talk about the various ways our players can interact with UI elements.
But until then, keep on creating!
Turbo Makes Games