In this lecture, we're going to learn all about text mesh and start adding some text to our canvas.
So we're going to start things off by adding a title to our canvas.
So on our background canvas lets right click head down to UI and then right at the top we should find
two options.
We should have a text and a text text mesh pro.
Now if you don't see text mesh pro, then we will have to do a little bit of setup before we can use
it.
So let's assume that it's not there for now and instead head up to window, head down to the package
manager and then under packages, unity registry.
We want to scroll down until we find the text mesh pro.
Now if you don't already have text mesh pro installed, you will have an install button here instead
of a remove button.
So go ahead and click on that and wait for it to import into your project.
And if you're using an older version of text mesh pro, then you may have an update button there as
well.
So again, go ahead and click that if you want to update for me.
I'm all up to date and ready to go, so I'm just going to go ahead and close package manager and the
next thing we need to do before we can actually use text mesh pro in our project, it's just an extra
piece of setup.
So again, head up to window, you should now find text mesh pro in this list and we want to go to import
temp essential resources.
If we click on that, we'll get this import package pop up window and we don't really have to worry
about all the stuff that's in there.
Just make sure that everything is selected and then go ahead and hit import.
And this will set things up in the background and you'll see we have a text mesh pro folder now in our
assets folder.
So with all that set up, let's again go ahead and right click on our background canvas, head down
to UI.
And now we should definitely see the text mesh pro option in this list.
Now you may be wondering why we went through all of that trouble when there's already a default text
option in here as well.
And really, it's because text mesh pro is a lot more flexible and a lot more usable than the old text
system.
So to add it to our canvas, let's go ahead and click on that and we can see that this is dropped in
our text element in the middle of our canvas.
Now, since this is going to be the total text for our game, let's also go ahead and open up our pre
visualization canvas and re-enable that.
And then if we re select our text and zoom in a bit so we can see where things are going to be placed.
What we're going to need to do is just click and drag that into place.
And then resize the text box by just grabbing one of these corner nodes and dragging that open.
If you're anything like me and like nice round numbers in your transform, then go ahead and just fix
these up.
So maybe 750 by around 150 and we're going to have an X position of zero and a Y position of around
450.
And if we then scroll down in the inspector, we'll find the text message element that we're actually
going to be playing with.
And there's a lot of stuff in here and it could be a little bit overwhelming when you first see it.
But if you've ever used a general text editing program, then a lot of these options should be fairly
familiar to you.
Let's start with the text field, which is currently saying new text, and let's put the name of our
game into that field.
So you may want to go with Quizmaster, which is the same as the section name, or you might have your
own name for your particular quiz.
I'm going to go with the name of Quizzical.
Now, since this is going to be the title for our game, having the default font is going to be a little
bit dull.
So the next thing we want to do is to change up the font.
But before we can do that, we need a font that we can change to.
And that brings us onto a bit of a mini challenge.
I want you to do some font shopping, so go online and find a free font that you can use and add it
to the assets folder of your project.
Now, if you've never looked for any free fonts online before, I've added a couple of links to the
resources for you to check out.
Now, just be aware that when you're looking up fonts always double check the usage rights.
So these might be free and open source or they may only be free for personal use.
So if you're planning to release your game into the wider world or using things for commercial purposes,
then do just make sure that you check the license of the font before including it in your game.
So pause the video now and find the perfect font for the title of your game.
Okay.
Welcome back.
So, while you've been away, I found a font called Prisma.
So if we go ahead and click on our text element and head down to the font asset section, if we try
and add this font to text mesh at the moment, then we'll notice it's currently missing from our list
of available fonts.
And that's because text mesh pro requires something called a font asset.
And what we've currently got at the moment is just a standard font file to turn this into a font asset
that text mesh pro can use.
Again, we're going to have to head up to window and then down to text mesh pro and then we want to
go to the font asset creator.
This will bring up this little pop up box and there's a whole bunch of settings in here.
But the only thing we really need to worry about is the source font file.
So let's drag our font into there and then go ahead and click on Generate Font Atlas.
Once this is finished packing, then we'll get a nice output to give us some basic information and then
we can go ahead and hit save as I'm just going to save mine as Prisma SDF as it comes in.
I will say that in our assets folder we now have the font asset file created for us.
So let's go ahead and close the asset creator.
And now we can go ahead and just drag that into the font asset on our text element.
The next step in getting our title Looking Good is to resize it and reposition it within our text box
so we can do that with all of the things that you come to expect from a text editor so we can increase
the font size.
And we can change the alignment options.
So I'm just going to go with Middle Center now that's roughly in position.
I'm going to go ahead and just hide my pre visualization canvas so I can get a better look at what I'm
doing.
Click back on my text object and then I'm going to look at changing the color of my text.
Now we can do that with the vertex color so we can open up our little color picker and choose a color
that we like the look of.
But this is actually where text mesh pro really does come into its own, because underneath this we
also have the color gradient.
And if we enable this, then we get a whole bunch of extra color options.
So for my game, I want to try and match kind of the look and feel of the neon bar that's running around
the edge.
And I'm going to do that with a vertical gradient.
And then we're going to change the top one to kind of a light blue.
Then I'm going to scroll all the way to the bottom of my inspector where we've got a whole bunch of
extra options for text mesh.
So we can do things like changing the face colour.
We can add an outline to our text.
If that's something you want, we can add a drop shadow with this underlay option and we can also add
some lighting and some glow.
I'm going to start off with some underlay.
And if we zoom right into our text so we can see what's happening with this option.
The first thing I want to do is change the color to a kind of bluish off white.
And then let's have a look at some of these other options that are available.
We can do things like change the X and Y offset, and this is great for lifting text off of the page
a little bit.
We have a dilate option which controls the thickness of that underlay and we have a softness which will
change it from a hard shadow to a soft shadow.
So to try and emulate the glow around our neon light, I'm going to leave the offset at zero zero.
I'm going to leave the softness at one.
And I'm just going to play around with the dilation options until I get something that I like the look
of.
If we zoom out to see how that's starting to look.
And I think that's not looking too bad.
But the other thing I want to add is a glow.
So I'm going to click on glow and it's got a weird green color.
But that's because if we open up this option, we have a very green color attached to it.
So again, I'm going to use a slightly bluish white color.
And then under here we have various options.
So we have an inner and outer glow.
So if we zoom in again so we can see what's going on.
An inner glow will do exactly what it says.
It will add a glow to the inside of our text.
But I'm going to go with an outer glow to bring that out a little bit.
The power controls, the strength of that glow.
So I'm going to turn that down quite a bit just to give it a nice, subtle glow.
So zoom out once more.
And I think that's not looking too bad.
And with my title all set up, I think it's now time for a challenge.
I want you to fine tune your title text and do feel free to play around with all of the text message
options to see what you can come up with.
I find the best way to get familiar with text message is really just to play around with it.
If you happen to get into such a state that you break it, you can always just delete it from the hierarchy
and try again.
Then I want you to go ahead and add another new canvas called Quiz Canvas to the hierarchy.
And then on this canvas, add a new text mesh element, which we're going to use to hold the question,
text for our quiz.
So pause the video and give that a go.
Okay.
Welcome back.
So hopefully you've now got a title to your game that's looking arguably a lot better than mine is currently.
And hopefully you've had a nice play around with Tex Mesh Pro to understand how all the different elements
work.
The second part of your challenge was to add a new canvas to your hierarchy.
So let's go ahead and do that by right clicking, going to UI and then canvas.
And we're going to call this one the quiz canvas.
On our quiz canvas we want a text mesh pro element.
So right click on the canvas, go down to UI and then up to text mesh pro.
And in order to position this, I'm going to re enable my pre visualization canvas and then select my
text element and drag that into position.
Let's tidy up some of these numbers so they don't drive me and possibly you.
Insane.
And then let's scroll down to our text mesh pro component.
Increase the font size a little bit somewhere, maybe around 48 should do.
And I'm going to align that to the middle center.
Finally, rather than having just new text in this box, I'm going to fill it up with something.
So you might want to say add a dummy question in there maybe, but I'm just going to go with some classic
Lorem ipsum text and this is a little bit long, so I'm going to cut that last sentence off.
So with that or set in place, let's close the pre visualization canvas and our gain is starting to
take shape.
So congratulations if you manage to complete that challenge successfully.
And in the next lecture we're going to start looking, adding some buttons to our game.
So I'll see you there.