[MUSIC]
Welcome again my friend, in this video, we are going to create three scenes and
each of those scenes is going to have a nice-ish looking button with some nice-ish
looking font.
I say nice-ish cuz I haven't spent a ton of time on this.
So when we mouse over we get our highlighted effect and when we click on
it, we get click effect and we have each of those in each of our three scenes.
The correct button for the correct scene,
set up with that nice text other in the following video.
And we're gonna ready to load our scenes when we click the button.
So let's jump in and make the buttons and the scenes.
We've been playing around with aspect ratio a bunch,
I'm just gonna leave mine at 10AD for now, I find that makes it look nice and crisp.
We're gonna turn our attention to buttons,
we have a button already with some pretty yucky text on it.
And we can't really even read, so let's do something about that.
First, I will rename my button to start button, so
I'm very clear this is what we'll start our game.
And change that, actually I'm gonna delete the text underneath cuz this is created
with a standard text.
We want to use our TextMesh Pro text which is much nicer looking text.
So I'm going to delete the text game object child that we had on the start
button and jump down to packages.
You can see that in the version of Unity I'm using,
we have packages folder underneath our project window.
And I have in there TextMeshPro which means TextMeshPro is already installed.
If you don't see it there you might need to go up to Window, and
open up your Package Manager.
Click on All, and find TextMeshPro from in here.
And go about the process through here, we're installing it,
we did that in the previous sections.
So I'm not gonna go through that again.
Hopefully, you can see TextMeshPro is packages because it's here.
That means that we can start using it's components and
it's elements straight away.
So I'm gonna click on Start Button in our hierarchy right-click.
Go to UI and add TextMeshPro-Text.
You can see we have TextMeshPro-Text, edit here,
change the name of that to Start Text.
And within the text input box and the inspector, I will change the wording
here from button to Start, that should be written on the button.
I will change the color, and color vertex to something that we can see for now.
Not putting too much time in to colors in this moment, just getting it in there, so
that we can see it.
And changing the font up to, I don't know up to size 80.
Okay, it's good enough for now.
Now we're using just whatever the standard preset font is.
I'm gonna go ahead and grab my own font and cuz we have a wizardry kind of theme,
I'm over dafont.com.
And I've searched for wizard,
I find a font called Wizardry which I'm going to install.
I'm not providing this font although it's a 100% free,
I don't necessarily have distribution rights for that.
So again, if you want to have some different font go ahead and
find some cool font that you think is pretty neat from the font.
Try to make sure you get something that's either 100% free or
if it's donation where chip ins the money to the person who has provided it.
So I do have that for me.
You can just use the font that is there at the moment and
everything will work just fine.
I have mine look a little bit prettier.
And just to note, I'll just gonna drag this in which is what we can do.
If dragging in is not working for you and I've seen a couple of questions in
the Q&A, how else can we do that if dragging in doesn't work?
We can go in Assets > Import New Asset, and then find the font file.
For me, it's called wizardry, double-click on that, and that will import our font.
Asset file that's a different way to import things into your game.
Okay, and so we have our font here.
I'm going to right-click Create folder, and call this font.
Nice to keep things tidy, at the moment.
We have small projects, but good habit to trust me when you have your
massive amazing killer games that's gonna earn you fame and fortune.
You wanna have your folders set up cuz you'll have a lot of content in there.
Drag out font into the font folders.
Now next step is frost within TextMeshPro, so it's going to find TextMeshPro Window
> TextMeshPro > Font Asset Creator, we've done this before.
Font Source, I'm gonna click the selecto, we've only got one font, Wizardry.
Double-click on that, Generate Font Atlas,
wait a moment for it to generate, generation progress.
[MUSIC]
Elevator music while we're doing that.
Okay, that was pretty quick.
SaveTextMeshPro font asset into our fonts folder.
We're in there already, Save that.
Beautiful, now, we can close the Asset creator, we don't need you anymore,
thanks very much.
And we have ourselves in here TextMeshPro.
In our Fonts folder, we have WIZARDRY.asset Bryant.
Okay, back over at our Start Text, we're going to change the Font Asset by
clicking the selector we find whatever font you've brought in.
Mine's called wizardry, and
we see a little bit of wizardry magic going on on our button here.
Cool that works just the way we want it to work.
Now while I'm here, I'm gonna change my text box,
so it fits nice and neatly within our button there and there.
Just to tidy it up, so that's snapping perfectly in the middle.
Now with the button itself, let's make it a slightly different color.
If we go over to our start button,
we can either change up here the color on the image.
So I can change that to say red, we change that color here, or
undo that, or I could click on the normal color.
Click on that, and change it to red as well, undo that.
I'm gonna make a yellowish kind of button.
Just so it pops nice and neatly.
There we go.
Yellow button for start.
There we are with yellow.
What color do we want for our text now over the top,
doesn't really matter so much.
I'll just leave it black for now, but
you can play around with the colors if you would like.
Now, the cool thing about buttons is that when we mouse over a button we want
to have it change.
We wanna have some sort of feedbacks, some affordance is the technical word for that.
And we have options in here under our button to change the highlight color and
then press colors.
So the Highlight Color, I'll make that kind of a darker yellow,
then we've got it ready something that maybe a little bit more orange to say,
yes, I've moused over that.
And then for the Pressed Color we'll give that more of a darker again, I think.
Then I can then say there clunk, you pressed on it.
See how it goes. Okay, so now I've got three colors,
the Normal Color, the Highlight Color and the Pressed Color.
If we click Play, we can see this in action.
Wait for the game to compile, and I've got maximize on play clicked on,
that's why my window went very large there.
And as we mouse over, I can see that it changes color and
when I click there is some feedback, cool.
Okay, I'm gonna turn off, maximize on play from now on just, so
we don't accidentally maximize on play.
And as I've mentioned before, if you go into your TextMeshPro settings you can do
a whole bunch of magic in here change a bunch of things.
I'm not gonna play around with that at the moment, but if you'd like to prohibit more
flare into your text on your button, you can absolutely do that.
What we're going to do now is a little bit of a challenge.
Your mission if you choose to accept it is, make three scenes and buttons.
Create a nice looking Start button as a starting point, and
then create the following scenes and the following buttons in the scene.
So you want a Start Menu Scene,
which is what we've just been doing with this Start button.
As well as two more scenes a Core Game Scene and a Win Screen Scene.
And on the Core Game Scene have a Success button that can be placed any where,
don't worry about the placement for now, just have a button there.
And on the Win Screen, we're looking to have a Play Again button.
So that's your challenge, create those scenes and those buttons.
You should have all the information that you need to do that.
When you come back, I'll go through my solution to that.
Good luck and see you in a moment.
Okay, welcome back.
I'm gonna start off by making sure I've saved my Start Menu Scene.
And then I'll duplicate these by doing Ctrl+D or Cmd+D,
that will duplicate the entire scene and everything within it.
I'll rename this to Core Game, I have a Core Game now, Core Game Scene.
And double-click on Core Game, and you can see that it's exactly the same.
That's really cool, just to demonstrate that I'm going to Start menu,
move the Start button up just a little bit.
I hit the W key to get my move tool, and
then save each time you're switching scene, you need to save to make sure
the changes you've made are saved from that previous scene.
We are now in Core Game, it's a little bit different to Start menu, which is cool.
In my Core Game, I don't need this handsome looking fellow in there,
[LAUGH] get rid of him.
What I do need is a button that is going to be,
what this needs to be our correct button.
So pretty easy, I need to rename from Start button,
rename this to Success button, just a side note on creating scenes.
We could've gone up to File > New Scene and then edit things manually.
But this way we get to keep out progress with that button, by duplicating it.
So we have our Core Game, and I shouldn't say start our Success button,
I should be saying, I'll change this up here.
Success Text that's going to be nice and clear.
In our naming, we'll call this SUCCESS.
It's not going to fit into my button, so I can either reduce the font size or
change the button.
For now, I will change the size of the button.
And you can see, when I click on the button itself,
click on our Rect Tool, as I change the size of the button.
It changes the scaling of the child underneath it,
cuz we've anchored that to these sides of our button, very cool.
Okay, we have SUCCESS, now save that and
I'm going to let's see I'll duplicate my Start menu Ctrl+D or
Cmd+D, we now have another Start menu.
We'll rename this one to Win Screen,
double-click on Win Screen, get rid of that fine fellow.
I've given you again one of the previous lectures, I gave you a Ben image.
Let's go to canvas, right-click, UI > Image.
We will drag the image to where we want it to be, down the side there.
They make it bigger with the Rect Tool.
Blank, blank, just as a starting point.
Click on the image itself,
change the source image from sprite none to Benny Porter, ha-ha, hilarious.
I can't wait for Ben to watch this, [LAUGH] and
say what he thinks about me putting some goggles on even a funny hat.
Set Native Size button, move into the corner and incur in the bottom
corner as we've done before, and holding down shift scale up.
There we go.
So Ben represents game over and finish, and work represents the start.
So we keep track of our different scenes there.
We still have the START button.
Switch the START button to the Play Again button, up on the inspector.
Now I click on open up the text, we have Start Text, just while I'm here, bad form.
Shouldn't leave that as image, should leave that as Ben image, just so
we're very clear when we have 100 images in there,
we don't wanna be trying to guess what it is.
Change the START text to what is this?
It's PLAY AGAIN text, and
then within the text box, PLAY AGAIN.
Now our button is not quite fitting, so
let's click on the PLAY AGAIN button itself.
On the Rect Tool, just drag it out, so it's a bit more space, drag it down, so
it fits okay.
We can see that our words are right touching each other.
Let's go and
figure out how to give a little bit more space between our text down here.
And we can see under Font Settings we have Spacing options.
I can see there is a Line, so we can do Characters,
which would space out our characters or words.
Oops, I click the autosize button there.
For Line, let's put that up to say 10.
Okay, that looks nicely spaced apart, little bit better.
Make my button box a bit larger.
Note, the actual button box a bit larger.
There we go.
I'd accidentally clicked on the text when I was changing.
So when you clicked on the text and you're changing that,
that will just change the text positioning.
But if we click on the button which is the parent, it will change the button size,
and the text underneath will be scaled, very cool.
Let's click Play and just check that our highlighting works,
that we've brought it in.
Okay, yeah, it seems to work.
Click on it and mouse over it, great.
Okay, so now we have three scenes and three buttons.
We have a Start menu, Core Game and Wins Screen.
I'm gonna save this.
Each of those has the button within it, so we're ready to hook up the functionality.
In the next video, we'll be doing that.
So clicking the button will load the next scene.
Okay, great work and see you in the next lecture.