In this lecture, we're going to start adding some buttons to our canvas so the player has a way of
interacting with the game.
Okay.
So to add some buttons to our canvas, we're going to add them to our quiz canvas.
So go ahead and right click on that and then go down to UI.
And again, just like we had with text, we have two button options.
We have a standard button and a button with text mesh pro.
So let's go ahead and click on the text mesh pro option.
And this will bring a button into our scene.
Now, if we scroll in a bit, we'll notice that we can't really see the button.
And the reason for this is because our quiz canvas is currently on the same layer as our background
canvas.
So to fix this, let's go and click on our quiz canvas, head over to the canvas component and in the
sort order which is going to increase this to one.
This will bring the button completely into view above the background, and we can now see what we're
doing.
Now, before we start worrying about the layout of these buttons and things like that, let's actually
just investigate what this button is actually doing.
So we'll notice that it came in with a child and that child is the text mesh pro element, which handles
the text that appears on top of the button on the button itself.
It sets up very similarly to a standard UI image.
So we have the rec transform, canvas renderer and image component.
But if we scroll down, we also have this button component.
If we go through some of the options or on this component, we have an interactive toggle.
So this just allows us to set with the button is clickable or not.
If we deselect this, we'll notice the button gets grayed out and if we recheck that box, it'll come
back to being full white.
And that's controlled by these color options here.
So we've got a normal color, which is the default color for our button.
We've got things for when we've hovered over the button, when we've pressed it or disabled it.
We've got some navigation options, which we're not really going to worry about for this section.
We're just going to leave that on automatic for now.
And we have an event box called on click at the bottom here.
Now, this will be where we start adding scripts later on to control what happens when we actually click
on those buttons.
And because we're going to be controlling these buttons in code later on to say, highlight the answer
to our quiz question.
We're not actually going to worry about all of this color tinting options that we have available to
us.
Instead, what we're going to do is we're just going to go up to the transition dropdown box and changes
from Color Tint.
I'm going to click on None.
This will drastically simplify our button component and also make it a lot easier to deal with in code.
The next step to setting up our button is to give it a better background image because we're no longer
going to be changing the colors via the button component.
What we're instead going to do is just change the source image.
So let's find an image for our button.
And I'm going to use this neon square blue image that I've brought into my project.
We noticed it doesn't look too bad as it's come in, but it does look a bit strange.
And to fix this and make it look a little bit nicer.
What we're actually going to do is we're going to use a sliced sprite.
So down in the image type, we're going to go from simple and select sliced.
And this isn't actually going to do anything at the moment because we've got a warning here saying that
this image doesn't have a border.
Well to fix this problem, let's head over to the Sprite itself in our sprites folder.
And we're going to go and head into the Sprite.
Ed And all we're going to do in here is just add a border for our image so that we can stretch and scale
it without warping it too much.
So down in this box, in the bottom right corner, we're going to add a border.
And for this image, I think maybe a border of 75 around all edges will do the trick.
So we're just going to keep these corners nice and round, but it doesn't really matter if these straight
edges get stretched or contracted.
Go ahead and hit apply once you've done that and close the spray editor.
And we can see now that the image around our button has changed quite substantially.
Now, before we start resizing this and working any more on the button, let's bring up our pre visualization
canvas so we can see where these buttons should go.
And rather than resizing our button manually to fill the area that we want.
What we're actually going to do is use something called a layout group.
So on our quiz canvas lets right click and just create a normal empty game object.
And we're going to call this the Answer Button Group.
Let's drag our button into that group so that it's now a child.
And then on this empty game objects, we're going to go over and add a new component and we're going
to want a layout group and you can find this in the dropdown menu under layout, or you can just type
layout into the search box and this will bring all the options up.
Now we have three main options.
We can have a grid layout, a horizontal layout or a vertical layout, and they all work fairly similarly
to each other.
Since my buttons are in a vertical list, I'm going to go with the vertical layout group and then I'm
going to resize my empty game object to fill roughly the area that will cover these buttons.
So let's give that a width of around, say, 1200, a height of around 450, an X position of zero and
a wide position of -180.
And before we go through all of the options with the vertical layer group, let's just add another couple
of buttons to our canvas.
So we'll click on our button and then if you just hit control D to duplicate, that will create a few
more and we want around four in total and we'll see that they're automatically being put in a vertical
list.
And if you picked one of the other options, say the horizontal layout group would be organizing them
horizontally and the grid layout would be organizing them into a set grid.
So let's look at some of these other options.
We have padding for left, right, top and bottom, and these are just the margins around the box.
So if we increase the left padding, we'll get this nice margin down the left hand side.
So you can kind of think of these as margins in a word, processing document.
For now, I'm just going to leave the padding at zero.
The spacing does a very similar thing, but it adds padding between the elements.
So if we increase the spacing or decrease the spacing, you'll notice that the buttons get closer or
further away from each other.
And we have the child alignment options which work again, very similar to word processing.
So we could say set this to middle center to center all of our buttons in the middle of the layout group.
Now these other options underneath the padding and spacing options essentially allow us to control the
size of our buttons, which is why we didn't worry about sizing our buttons before adding them to the
layout group.
What we're going to do in this case is tell a layout group to control the child size so we can set the
width and notice that all the buttons are automatically stretched out to fill the layout group area.
And we can also do the same for the height.
And now we have the buttons filling the area we want now is going to be the best time to just adjust
our padding and our spacing.
And that is going to bring us on to your challenge.
I want you to set up your buttons in the layout group.
So if you haven't done so already, find an image and add it to your buttons.
And rather than doing all of the buttons that you've added individually, it may be worth just focusing
on the one and then copy pasting that or making a prefab so that you can reuse it for the others.
And do remember to slice your sprites to keep them from stretching and warping when you resize them.
Then once you've got one of your buttons set up, duplicate it and organize all of your buttons using
a layout group.
And finally just play around with the spacing, the padding and the alignment of your buttons to get
them into the position that you want them.
So pause the video now and give that a go.
Okay.
Welcome back.
So hopefully you got on well with that challenge and your buttons are all now nicely laid out on your
canvas.
Now, before the challenge, I'd already sorted out the images for my buttons, but I haven't really
fixed the padding and spacing yet.
So let's add a little bit of spacing, and I'm just going to take this down to maybe around negative
ten to bring them a little bit closer together.
And rather than adjusting the padding, I'm actually just going to change the overall height of my layout
box.
So I'm going to bring this down to maybe 430.
And then if we have a quick zoom out, we can see the full picture and hide our pre visualization canvas.
I think that it's not looking too bad.
However, one thing I do want to fix is the button text because it's both very small and very faint.
So just on the first button in the list, I'm going to click on my text mesh pro element and head down
to the options here.
I'm going to increase the font size to maybe around 50 points and I'm going to change the vertex color
to full black.
And now I think that doesn't look too bad.
So to copy this along to the others, I'm just going to get rid of the others and notice the button
has suddenly become an absolute giant.
I'm then going to go ahead and prefab this button by just clicking and dragging it into the project
window.
So if I make any other changes to the buttons in future, I don't have to keep copying and pasting or
changing one at a time.
And then I'm just going to duplicate this button again another three times.
Hi, everyone.
This is Gary from the Future.
Just popping in to say that I've prefab a button here, but we haven't actually covered prefabs in the
course yet.
We're going to cover this in a lot more detail in the next section.
So don't worry about prefab being the button for this particular project because it really doesn't matter
too much.
Feel free to just copy and paste your existing button into the hierarchy and do any manual changes that
are needed.
So that we have our quiz really starting to take shape now.
We've got space for the question.
We've got space for the answer buttons.
And in the next lecture, we're going to start looking at how to create the questions that are going
to populate these fields.
So I'll see you there.