Hi there 🙂 In the last two videos, we had a look at how
we can use Text Styles and Font weights in Unity’s TextMeshPro. Amazing as they are, if you are not used to
writing tags, they can be a bit daunting to get correct and looking good. Let’s build a tiny tool that will automate
this process for us. At the end of this tutorial, we will have
build this here: a script you can throw on a Gameobject that has a TMP Text component
attached and it will generate the tags based on your choices. You’ll just have to copy-paste them, since
there’s currently no way to automate that particular part. The neat thing is, you only need this script
rarely - thus I’m fine with it living its life as a monobehaviour instead of building
a dedicated editor tool. Set your style up once, copy, paste and remove
the component afterwards. We start at creating a new script. I’ll call mine TMPStyleSheetCreatorPROTOTYPE,
because I like descriptive names. Once it works, I’ll rename it and remove
the prototype part. First, we’ll need to give it the TMP component
to work with, followed by a string for the opening and closing tags. Next is the main function: ReadValuesFromTMP. It gets two string builders: one for opening
and one for closing tags. In my opinion, working with a string builder
felt more intuitive than just a string. To start, let’s have this function read
if I bolded my text. It works like this: First, have it check if
I am using a font style and if that style is Bold. If I do, write the corresponding tags for
bold into the opening and closing string builder. I made a cheat sheet of which tags corresponds
to wich button, you’ll find it in the video description. Lastly, write the contents of the string builders
to the corresponding strings. To be able to use the script from the editor
via drop down menu, let’s write this line above your function. Done :) Back in Unity, let’s create a new TMP Text. I highly recommend starting with a clean new
component and not with one you might have already used styles on for this. My personal workflow always uses a new Text
for it to start from a blank canvas and style it like I want the end result to look like. Alright, done. Let’s bold the text, attach our script and
use our newly created function. Looks like expected. Back in the code, let’s add all the text
styles we usually need. No need to bloat this tool, I’ll limit myself
to the few options I use the most. As you can see, converting the completed string
builders to strings is now down below here. These two lines will always stay at the bottom
of our function. Once done, test your code. There shouldn’t be any troubles at this
point. Onwards to the text asset, which is a bit
tricky. As you can see, when you created a font asset
in TMP, this part gets added. But if we want to use it as a font name for
our font-tag, we need to get rid of it, since it doesn’t work if we keep it. Thus, we will replace it with emptyness. Font size is super easy, we can just read
the value. Color on the other hand is less intuitive. First, we need to read the value, then convert
it to an RGB color that works with TMP’s tags. finally, add it to our string builders like
this. Test your script if it works =) Next on the list is spacing - or more concrete,
character and line spacing. In my decade of being a print designer, I
never came across a font that wouldn’t have been improved by adding just a little bit
of extra character spacing (also called Kerning), or line spacing. It makes fonts more readable, if you don’t
overdo it. I’ve never come across a text that actually
needed more word spacing, though, and paragraph spacing really is more for very long texts,
I’d say. Not typically something I’d encounter in
games. I’m on a German system, so when I had the
code devide the spacing by 100 (which we need because of the way TMP uses these values),
I get a comma value. Trouble is: TMP doesn’t like comma values
in its tags. That’s why I need to add this part here:
Cultureinfo.Invariantculture turns the comma into a dot, while N3 tells the string to only
have three decimal values. That’s enough for us to give us all the
detail we need while keeping stuff readable. Those are all the values I typically need,
so I’ll stop here. One thing I want to add which is not a button
in TMP, though: Font weights. I made a video about them here, you might
want to check it out to understand the following bit. Since I want to use different weights, like
Bold, Heavy or Black, I add this at the top of the script. To make it work, I’ll add this enum below
my script, too. I won’t use it anywhere else in my project,
so this location is fine with me. Usually, I don’t choose anything below Regular
when working on texts for monitors, since readablility starts suffering quickly. Bold can already be achieved by pressing this
button on the UI, so I won’t bother with it, but I’ll need an option to pick either
Black or Thin. We also need an option for “none”, in
case we don’t actually want to use a different font weight. Back in our reading function, we’ll add
these lines here. They will check if we picked a different weight
and if we did, our choice will get added to the opening and closing tags. Alright, time to check our progress. I’ll style my text in a way I want it to
look like in my project…. yeah, that looks good enough. Call our function, and we’ll get all the
tags we need, yay! Copy and paste them either to a new style
or overwrite some other style with them. At this point, I’ll get rid of my Text prototype
as well as the “prototype” part of my script name. It works well enough for my needs. You could go nuts with this, of course. Create a dedicated Panel for it, add more
styles, alignments and all the bells and whistles you enjoy. But for me, I enjoy my tools simple and straight
to the point. I hope you enjoyed this and that creating
new styles will now be something you’ll actually be looking forward to 🙂 Please hug the subscribe button if you haven’t
done so already, but if you did: thank you very much :) It brings a smile to my face
seeing people enjoying my content. Hope to see you soon!
