Hi and welcome 😊 If you're like most developers, you're probably
focused on the gameplay mechanics and visuals of your game. And those are super important!
But don't forget that your game's text can also make a big impact on the overall player
experience. That's why today, I'll be showing you how to get started with Text Mesh Pro - and
how to level up your text UI skills from there. Are you still using the old, blurry text in your
Unity games? That’s the legacy text system Unity had as its standard before Text Mesh Pro came
along. It is time to upgrade to Text Mesh Pro! Not only does Text Mesh Pro provide crisp and
clear text, but it also offers a plethora of amazing features that you may not have even
considered using in your game up to now. This tutorial comes with a few chapters:
We will first look at how to install and setup Text Mesh pro, then will go over the
core features it offers in the inspector, the settings you can customize to speed up your
workflows, followed by how to create a custom font and how to reference a Text Mesh Pro component
via script and set its contents with code. Once these bases are covered, I’ll show you
a few more advanced features - I have a big playlist on Text Mesh Pro and made videos on many
of TMP’s use cases and features you might enjoy like using sprites inside text boxes, styling
your text with materials or making text clickable. If you are working with a current version of
Unity, Text Mesh Pro comes with it by default. Just right-click in your hierarchy → UI →
Text - Text mesh Pro. Alternatively, if you need your text to appear inside the game instead
of in the UI, for example for damage indicators, you can create that by right clicking your
hierarchy → 3D Object → Text - Text Mesh Pro. If you are working with an older one, you can
find TMP at Window → Package Manager → Unity Registry → Text Mesh Pro. If you got it a
few years back when it had been an asset store plugin, do not use that anymore. It
has not been updated in quite some time. The first time you create a TMP Object, you
will get asked what to import. You need to click the upper button to get the core setup
for Text Mesh Pro created in your project. The second button will import a bunch of
examples on what to do with Text Mesh Pro. I recommend having a look at them, but you don’t
need to import them into every project you create. Alright, we have our first Text Mesh
Pro GameObject. In your hierarchy, it will be named “Text (TMP)”. In comparison,
legacy text is being named Text (Legacy). We find a basic text area at the top and many
useful styling features under “Main Settings”. We can set the font we want to use, style it in
bold, italic and many more typical font styles like Uppercase and lowercase. These options will
always apply to the whole text being displayed, but there are options to only, for example, bold
parts of your text. I’ll get to that in a moment. Obviously we need a font size and we are also
getting offered a checkbox for “Auto text”. This will change the text size based on the space
available and amount of text you want to display. I am generally not a fan of this and
would advise you to find a font size that works for all the text you
want to display in this text box. Of course, we get an option to pick
the Vertex Color - that’s the font color. Gradient is rather self explanatory.
You can use these inside animations, too! Text Mesh Pro offers super useful spacing
options - especially line and character can help you design your text to be much more
readable. If your text is long enough and contains paragraphs, I highly recommend using
the paragraph spacing, as well. Don’t overdo it, though - too much and your text will become
visual clutter most won’t bother to read. Wrapping is enabled by default and I haven’t
come across a use case for disabling that. Overflow on the other hand is super
useful depending on your use case. “Overflow” is set by default and you can see
the result in the Scene. The text box has a yellow outline and our text is being displayed
in full, event though the box itself is way too small for it. We will have a look at the other
options at a later point in the video. Usually, you would just resize your box to the desired size
and most likely shorten your text to be displayed. Under Extra settings, you can find the always
useful margins and a toggle for Raycast Target. If you do not need your text to be
clickable, you can toggle it off here. Text styles, Material Presets, Overflow Methods,
Sprite and Style sheet asset are things I will come to in the last part of this video - they
are amazingly useful features of Text Mesh Pro, but I would consider them to be things you might
enjoy most after understanding the basics first 😊 Creating a Font Asset To create a font asset you
can use with Text Mesh Pro, import a font into your project. It should be an
Open Type Font or a True type font. Right click on it → Create → Text Mesh Pro → Font Asset.
Alternatively, Shift+Control+F12 works as well. You can drop this new asset into your text
box component and style it any way you want. Please be aware that if you have a font and want
to bold it or have it being displayed in italic, you can click on the buttons, but if
you haven’t also imported and setup the corresponding font styles, Text
Mesh Pro will use some preset values to mimic the effect of those text styles. The
results can range from workable to downright ugly. Setting up the correct styles
is luckily done in a few minutes, have a look at this video if you want to utilize
font styles in your game and make it look good. Changing text via code is simple. In your script, reference the Text Mesh Pro component by using
TMP_Text. This way, you get access to all the settings you see in the inspector and a
lot more - but let’s stick to the basics. Change the text to be displayed by adding dot
text and setting it to a string like this. The color can be accessed by dot color, the
font size by dot size. Many of the other options can be accessed in a similar manner
corresponding to their names in the inspector. If you need to look up something, I highly
recommend having a look at the TMP documentation. You can find Text Mesh Pro’s settings under
Edit → Project Settings → Text Mesh Pro. Here, you can also import the TMP Essentials as well as the examples and extras
if you need the options once more. In settings, you can set the
default font asset which will be used for every TMP component
going forward inside this project. Changing this setting will not change anything
in text boxes you created up to this point. Inside the Text Container Default settings, you
can set how big you want your default text boxes to be created. I found 200 by 50 to be way to
small for most of my use cases and set those numbers to something that fit my project better.
Also, you can set the default font size here. The other settings are rather situational, but you might want to revisit them once you
got more practice with the basic features. These are the core basics 😊 But lets have
a look at what you might want to do next! For example, you might want to display some parts
of your text in bold - but clicking this button sets your whole text to bold instead. To get
your desired result, you need to know about tags. Tags are small things you add to your
string to mark certain parts in a way Text mesh Pro can understand. They won’t
be displayed to the player. In this case, we want to bold this part of the sentence. To do
so, we add a pointy opening bracket, the letter b for bold and close the bracket. As you can see,
the whole text after this tag will now be bolded. To only have it affect the word, we need to close
the tag by adding this. These tags are part of the so called “rich text” capabilities and there are
dozens of styles you can use. I have created a cheat sheet to look up which common tags there are
and what they correspond with - you can find the download site in the comments. Alternatively,
TMP’s documentation is a great resource. If your game has grown quite a bit and you
suddenly want to change the font assets you use, locating all your text boxes can be
a bit of a hassle - especially if you haven’t remembered to prefab all of them.
I certainly forget some in every project. If you want to prevent running into that
problem, I absolutely recommend using so called Text Styles. Text styles are one of
the mightiest features of Text Mesh Pro. You find them in the drop down right under your
text box - the preset ones are rather nonsensical, but in this 6 minute video I explain how to
create your own, set them up and utilize them inside your project. By using styles,
you can change how your texts are being displayed at any moment without having to touch
anything inside the components themselves. Plus, you can use styles to have your players change
how text is being displayed inside your game, too! That one’s a bit tricky, to be fair, but
you’ll learn how to utilize this in this video. That one I would only recommend to
more seasoned TMP users, though. There is a high chance you want to display
sprites inside your text boxes. I’ll explain how that works in this roughly five minute long
video. If you want to show button prompts based on your input method, you’ll learn how to do
so in this one and if you want your sprites to be animated, you’ll learn how that
works in this third one in the series. Colors and gradients are not
enough for what you have in mind? You’d like to have an outline or think
about something more… custom? For outlines, your first step might be to have a look at the
outline settings inside the Shader. You can dialte the font by a bit, then check the Outline box and
set its color and thickness to whatever you like. I would recommend setting the Thickness of
the Outline to the same number as the value you dilate it by, that way your font will keep its
initial look best. But working like this will have the side effect of all instances of your font
in your project suddenly using these settings. Depending on your project, this might not be a
problem at all, but if you want this effect only on some texts, or want even more customizability,
have a watch of this video about working with gradients, materials and shaders. You can get
awesome looking results with just a few clicks. And if you feel comfortable with writing
code and want your text to be able to be interacted with - for example to
display tooltips or descriptions, opening websites or triggering things inside
your game when hovering or clicking on certain parts of your text box’s contents: I have a couple
of videos that will teach you how to make it work. You can even have your characters react to your
text box’s contents by using this approach 😊 If you enjoy cool text effects
like shivering or jumping, maybe the paid asset called Text
Animator, created by Febucci, is something you might enjoy. I certainly
do - you can learn about it in this video. And when it comes to typical use cases for
text in games, I made a video on displaying text inside a scrollable box as well as
one teaching you how to create a book. Lastly, many games today come with a typewriter
effect. I made a video on how to create one yourself here - but this might be the most
advanced you can find on my channel for now. Welcome to Text Mesh Pro. I hope
you enjoyed not only this video but getting an idea about what
you can do with this mighty tool. If you enjoyed it, please consider subscribing
and giving it a like - you would make my day 😊 You will find a whole bunch of links
in the description and pinned comment. Have a great week!
