1 00:00:03,550 --> 00:00:08,320 In this lecture, we're going to start adding some buttons to our canvas so the player has a way of 2 00:00:08,320 --> 00:00:09,940 interacting with the game. 3 00:00:10,810 --> 00:00:11,290 Okay. 4 00:00:11,290 --> 00:00:15,330 So to add some buttons to our canvas, we're going to add them to our quiz canvas. 5 00:00:15,340 --> 00:00:19,210 So go ahead and right click on that and then go down to UI. 6 00:00:19,510 --> 00:00:22,990 And again, just like we had with text, we have two button options. 7 00:00:22,990 --> 00:00:26,600 We have a standard button and a button with text mesh pro. 8 00:00:26,860 --> 00:00:30,250 So let's go ahead and click on the text mesh pro option. 9 00:00:31,070 --> 00:00:33,620 And this will bring a button into our scene. 10 00:00:33,650 --> 00:00:37,880 Now, if we scroll in a bit, we'll notice that we can't really see the button. 11 00:00:37,880 --> 00:00:43,490 And the reason for this is because our quiz canvas is currently on the same layer as our background 12 00:00:43,490 --> 00:00:44,180 canvas. 13 00:00:44,420 --> 00:00:50,780 So to fix this, let's go and click on our quiz canvas, head over to the canvas component and in the 14 00:00:50,780 --> 00:00:53,930 sort order which is going to increase this to one. 15 00:00:54,680 --> 00:00:59,660 This will bring the button completely into view above the background, and we can now see what we're 16 00:00:59,660 --> 00:01:00,260 doing. 17 00:01:00,620 --> 00:01:04,730 Now, before we start worrying about the layout of these buttons and things like that, let's actually 18 00:01:04,730 --> 00:01:07,970 just investigate what this button is actually doing. 19 00:01:08,060 --> 00:01:14,750 So we'll notice that it came in with a child and that child is the text mesh pro element, which handles 20 00:01:14,750 --> 00:01:19,280 the text that appears on top of the button on the button itself. 21 00:01:19,310 --> 00:01:22,940 It sets up very similarly to a standard UI image. 22 00:01:22,940 --> 00:01:26,540 So we have the rec transform, canvas renderer and image component. 23 00:01:26,540 --> 00:01:30,400 But if we scroll down, we also have this button component. 24 00:01:30,410 --> 00:01:35,500 If we go through some of the options or on this component, we have an interactive toggle. 25 00:01:35,510 --> 00:01:39,640 So this just allows us to set with the button is clickable or not. 26 00:01:39,650 --> 00:01:45,380 If we deselect this, we'll notice the button gets grayed out and if we recheck that box, it'll come 27 00:01:45,380 --> 00:01:46,850 back to being full white. 28 00:01:47,810 --> 00:01:50,670 And that's controlled by these color options here. 29 00:01:50,690 --> 00:01:54,510 So we've got a normal color, which is the default color for our button. 30 00:01:54,530 --> 00:01:59,570 We've got things for when we've hovered over the button, when we've pressed it or disabled it. 31 00:01:59,810 --> 00:02:04,240 We've got some navigation options, which we're not really going to worry about for this section. 32 00:02:04,250 --> 00:02:06,680 We're just going to leave that on automatic for now. 33 00:02:06,830 --> 00:02:10,110 And we have an event box called on click at the bottom here. 34 00:02:10,130 --> 00:02:15,800 Now, this will be where we start adding scripts later on to control what happens when we actually click 35 00:02:15,800 --> 00:02:16,750 on those buttons. 36 00:02:16,760 --> 00:02:22,550 And because we're going to be controlling these buttons in code later on to say, highlight the answer 37 00:02:22,550 --> 00:02:23,960 to our quiz question. 38 00:02:23,960 --> 00:02:28,430 We're not actually going to worry about all of this color tinting options that we have available to 39 00:02:28,430 --> 00:02:28,820 us. 40 00:02:29,000 --> 00:02:34,310 Instead, what we're going to do is we're just going to go up to the transition dropdown box and changes 41 00:02:34,310 --> 00:02:35,720 from Color Tint. 42 00:02:35,930 --> 00:02:37,760 I'm going to click on None. 43 00:02:38,060 --> 00:02:44,060 This will drastically simplify our button component and also make it a lot easier to deal with in code. 44 00:02:44,630 --> 00:02:50,120 The next step to setting up our button is to give it a better background image because we're no longer 45 00:02:50,120 --> 00:02:53,170 going to be changing the colors via the button component. 46 00:02:53,180 --> 00:02:56,240 What we're instead going to do is just change the source image. 47 00:02:56,510 --> 00:02:58,850 So let's find an image for our button. 48 00:02:58,850 --> 00:03:03,290 And I'm going to use this neon square blue image that I've brought into my project. 49 00:03:04,450 --> 00:03:08,680 We noticed it doesn't look too bad as it's come in, but it does look a bit strange. 50 00:03:09,580 --> 00:03:11,880 And to fix this and make it look a little bit nicer. 51 00:03:11,890 --> 00:03:15,220 What we're actually going to do is we're going to use a sliced sprite. 52 00:03:15,490 --> 00:03:21,130 So down in the image type, we're going to go from simple and select sliced. 53 00:03:21,820 --> 00:03:26,170 And this isn't actually going to do anything at the moment because we've got a warning here saying that 54 00:03:26,170 --> 00:03:28,450 this image doesn't have a border. 55 00:03:29,150 --> 00:03:34,070 Well to fix this problem, let's head over to the Sprite itself in our sprites folder. 56 00:03:35,120 --> 00:03:37,220 And we're going to go and head into the Sprite. 57 00:03:37,220 --> 00:03:43,700 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 58 00:03:43,700 --> 00:03:45,620 it without warping it too much. 59 00:03:46,100 --> 00:03:49,790 So down in this box, in the bottom right corner, we're going to add a border. 60 00:03:49,790 --> 00:03:55,350 And for this image, I think maybe a border of 75 around all edges will do the trick. 61 00:03:55,370 --> 00:04:00,380 So we're just going to keep these corners nice and round, but it doesn't really matter if these straight 62 00:04:00,380 --> 00:04:02,390 edges get stretched or contracted. 63 00:04:02,840 --> 00:04:06,920 Go ahead and hit apply once you've done that and close the spray editor. 64 00:04:06,920 --> 00:04:11,300 And we can see now that the image around our button has changed quite substantially. 65 00:04:11,330 --> 00:04:16,550 Now, before we start resizing this and working any more on the button, let's bring up our pre visualization 66 00:04:16,550 --> 00:04:20,029 canvas so we can see where these buttons should go. 67 00:04:20,120 --> 00:04:25,010 And rather than resizing our button manually to fill the area that we want. 68 00:04:25,040 --> 00:04:28,700 What we're actually going to do is use something called a layout group. 69 00:04:28,820 --> 00:04:34,220 So on our quiz canvas lets right click and just create a normal empty game object. 70 00:04:34,250 --> 00:04:36,830 And we're going to call this the Answer Button Group. 71 00:04:38,830 --> 00:04:43,630 Let's drag our button into that group so that it's now a child. 72 00:04:43,630 --> 00:04:48,970 And then on this empty game objects, we're going to go over and add a new component and we're going 73 00:04:48,970 --> 00:04:55,090 to want a layout group and you can find this in the dropdown menu under layout, or you can just type 74 00:04:55,090 --> 00:04:59,290 layout into the search box and this will bring all the options up. 75 00:04:59,470 --> 00:05:00,970 Now we have three main options. 76 00:05:00,970 --> 00:05:07,210 We can have a grid layout, a horizontal layout or a vertical layout, and they all work fairly similarly 77 00:05:07,210 --> 00:05:08,080 to each other. 78 00:05:08,110 --> 00:05:13,750 Since my buttons are in a vertical list, I'm going to go with the vertical layout group and then I'm 79 00:05:13,750 --> 00:05:19,180 going to resize my empty game object to fill roughly the area that will cover these buttons. 80 00:05:19,840 --> 00:05:28,540 So let's give that a width of around, say, 1200, a height of around 450, an X position of zero and 81 00:05:28,540 --> 00:05:31,450 a wide position of -180. 82 00:05:31,990 --> 00:05:36,640 And before we go through all of the options with the vertical layer group, let's just add another couple 83 00:05:36,640 --> 00:05:38,410 of buttons to our canvas. 84 00:05:38,410 --> 00:05:44,110 So we'll click on our button and then if you just hit control D to duplicate, that will create a few 85 00:05:44,110 --> 00:05:49,810 more and we want around four in total and we'll see that they're automatically being put in a vertical 86 00:05:49,810 --> 00:05:50,290 list. 87 00:05:50,290 --> 00:05:55,060 And if you picked one of the other options, say the horizontal layout group would be organizing them 88 00:05:55,060 --> 00:05:59,530 horizontally and the grid layout would be organizing them into a set grid. 89 00:05:59,890 --> 00:06:02,230 So let's look at some of these other options. 90 00:06:02,230 --> 00:06:08,410 We have padding for left, right, top and bottom, and these are just the margins around the box. 91 00:06:08,410 --> 00:06:13,600 So if we increase the left padding, we'll get this nice margin down the left hand side. 92 00:06:13,630 --> 00:06:17,740 So you can kind of think of these as margins in a word, processing document. 93 00:06:17,770 --> 00:06:20,350 For now, I'm just going to leave the padding at zero. 94 00:06:20,590 --> 00:06:25,210 The spacing does a very similar thing, but it adds padding between the elements. 95 00:06:25,210 --> 00:06:30,550 So if we increase the spacing or decrease the spacing, you'll notice that the buttons get closer or 96 00:06:30,550 --> 00:06:32,020 further away from each other. 97 00:06:32,590 --> 00:06:37,510 And we have the child alignment options which work again, very similar to word processing. 98 00:06:37,510 --> 00:06:43,270 So we could say set this to middle center to center all of our buttons in the middle of the layout group. 99 00:06:43,970 --> 00:06:50,090 Now these other options underneath the padding and spacing options essentially allow us to control the 100 00:06:50,090 --> 00:06:55,280 size of our buttons, which is why we didn't worry about sizing our buttons before adding them to the 101 00:06:55,280 --> 00:06:56,060 layout group. 102 00:06:56,360 --> 00:07:02,330 What we're going to do in this case is tell a layout group to control the child size so we can set the 103 00:07:02,330 --> 00:07:08,120 width and notice that all the buttons are automatically stretched out to fill the layout group area. 104 00:07:08,210 --> 00:07:10,550 And we can also do the same for the height. 105 00:07:10,910 --> 00:07:16,190 And now we have the buttons filling the area we want now is going to be the best time to just adjust 106 00:07:16,190 --> 00:07:18,200 our padding and our spacing. 107 00:07:18,200 --> 00:07:21,410 And that is going to bring us on to your challenge. 108 00:07:21,890 --> 00:07:25,370 I want you to set up your buttons in the layout group. 109 00:07:25,370 --> 00:07:29,930 So if you haven't done so already, find an image and add it to your buttons. 110 00:07:29,930 --> 00:07:34,700 And rather than doing all of the buttons that you've added individually, it may be worth just focusing 111 00:07:34,700 --> 00:07:40,880 on the one and then copy pasting that or making a prefab so that you can reuse it for the others. 112 00:07:40,970 --> 00:07:47,260 And do remember to slice your sprites to keep them from stretching and warping when you resize them. 113 00:07:47,270 --> 00:07:53,000 Then once you've got one of your buttons set up, duplicate it and organize all of your buttons using 114 00:07:53,000 --> 00:07:54,130 a layout group. 115 00:07:54,140 --> 00:07:59,360 And finally just play around with the spacing, the padding and the alignment of your buttons to get 116 00:07:59,360 --> 00:08:01,250 them into the position that you want them. 117 00:08:01,250 --> 00:08:03,830 So pause the video now and give that a go. 118 00:08:09,070 --> 00:08:09,520 Okay. 119 00:08:09,520 --> 00:08:10,430 Welcome back. 120 00:08:10,450 --> 00:08:15,220 So hopefully you got on well with that challenge and your buttons are all now nicely laid out on your 121 00:08:15,220 --> 00:08:15,880 canvas. 122 00:08:15,910 --> 00:08:20,470 Now, before the challenge, I'd already sorted out the images for my buttons, but I haven't really 123 00:08:20,470 --> 00:08:22,510 fixed the padding and spacing yet. 124 00:08:22,750 --> 00:08:27,820 So let's add a little bit of spacing, and I'm just going to take this down to maybe around negative 125 00:08:27,820 --> 00:08:30,370 ten to bring them a little bit closer together. 126 00:08:30,490 --> 00:08:35,530 And rather than adjusting the padding, I'm actually just going to change the overall height of my layout 127 00:08:35,530 --> 00:08:36,039 box. 128 00:08:36,039 --> 00:08:39,429 So I'm going to bring this down to maybe 430. 129 00:08:39,850 --> 00:08:45,820 And then if we have a quick zoom out, we can see the full picture and hide our pre visualization canvas. 130 00:08:46,030 --> 00:08:48,490 I think that it's not looking too bad. 131 00:08:48,520 --> 00:08:54,810 However, one thing I do want to fix is the button text because it's both very small and very faint. 132 00:08:54,820 --> 00:08:59,800 So just on the first button in the list, I'm going to click on my text mesh pro element and head down 133 00:08:59,800 --> 00:09:00,790 to the options here. 134 00:09:00,910 --> 00:09:07,300 I'm going to increase the font size to maybe around 50 points and I'm going to change the vertex color 135 00:09:07,300 --> 00:09:09,070 to full black. 136 00:09:09,960 --> 00:09:12,180 And now I think that doesn't look too bad. 137 00:09:12,660 --> 00:09:17,790 So to copy this along to the others, I'm just going to get rid of the others and notice the button 138 00:09:17,790 --> 00:09:19,980 has suddenly become an absolute giant. 139 00:09:20,220 --> 00:09:25,350 I'm then going to go ahead and prefab this button by just clicking and dragging it into the project 140 00:09:25,350 --> 00:09:25,920 window. 141 00:09:26,190 --> 00:09:31,890 So if I make any other changes to the buttons in future, I don't have to keep copying and pasting or 142 00:09:31,890 --> 00:09:33,420 changing one at a time. 143 00:09:33,630 --> 00:09:37,290 And then I'm just going to duplicate this button again another three times. 144 00:09:37,830 --> 00:09:38,430 Hi, everyone. 145 00:09:38,430 --> 00:09:39,990 This is Gary from the Future. 146 00:09:39,990 --> 00:09:45,510 Just popping in to say that I've prefab a button here, but we haven't actually covered prefabs in the 147 00:09:45,510 --> 00:09:46,290 course yet. 148 00:09:46,290 --> 00:09:49,770 We're going to cover this in a lot more detail in the next section. 149 00:09:49,770 --> 00:09:54,780 So don't worry about prefab being the button for this particular project because it really doesn't matter 150 00:09:54,780 --> 00:09:55,560 too much. 151 00:09:55,590 --> 00:10:01,440 Feel free to just copy and paste your existing button into the hierarchy and do any manual changes that 152 00:10:01,440 --> 00:10:02,100 are needed. 153 00:10:02,860 --> 00:10:06,160 So that we have our quiz really starting to take shape now. 154 00:10:06,160 --> 00:10:07,750 We've got space for the question. 155 00:10:07,750 --> 00:10:09,850 We've got space for the answer buttons. 156 00:10:09,850 --> 00:10:14,380 And in the next lecture, we're going to start looking at how to create the questions that are going 157 00:10:14,380 --> 00:10:16,090 to populate these fields. 158 00:10:16,090 --> 00:10:17,470 So I'll see you there.