WEBVTT 00:06.990 --> 00:14.220 Okay, so we have the left side of our spell tree and it's all inside of this one big wrap box called 00:14.220 --> 00:15.210 tree side. 00:15.390 --> 00:22.890 And we have one called description side and we need some things in it, namely boxes for descriptions. 00:22.890 --> 00:29.790 So when we click on an ability to select it, our description box will populate with a description about 00:29.790 --> 00:30.840 that ability. 00:31.170 --> 00:35.160 So in this wrap box, I'd like a few different things. 00:35.160 --> 00:40.260 I'm going to start with a spacer, so we'll stick a spacer right on in there. 00:40.470 --> 00:46.020 And beneath this spacer I'd like text that says description. 00:46.020 --> 00:49.560 So I'm going to drag text in right onto the wrap box. 00:49.560 --> 00:51.870 So it goes beneath that spacer. 00:51.990 --> 00:59.550 And then I'd like another spacer underneath that text so that we can have space between the text and 00:59.550 --> 01:01.290 the next thing that goes in. 01:01.290 --> 01:06.880 Now the next thing that I'd like is a size box so we can determine the size of that description. 01:06.880 --> 01:11.140 So I'm going to drag a size box in and below that size box. 01:11.140 --> 01:19.210 We'll go yet another spacer, so we'll drag that in and then another size box for a second description. 01:19.330 --> 01:26.260 And that's going to be for the description of the ability next level once you level up that ability. 01:26.260 --> 01:29.110 So we're going to add a second size box. 01:29.110 --> 01:32.290 And finally, another spacer. 01:34.000 --> 01:36.880 And whatever else we like beneath it. 01:36.880 --> 01:40.030 Such as a close button, for example. 01:40.360 --> 01:46.900 In fact, we can go ahead and put that close button on in by dragging in a button onto that wrap box. 01:46.900 --> 01:49.900 And I believe that's going to be everything. 01:49.900 --> 01:52.070 And actually, that's not the button I wanted. 01:52.090 --> 01:54.220 I want my button. 01:55.310 --> 01:56.660 That one looks better. 01:57.400 --> 01:58.660 So there's our button. 01:58.660 --> 02:04.270 So we have a whole bunch of things in our chat box all just right here bunched up together. 02:04.270 --> 02:06.670 So we're going to need to space them out, right? 02:06.880 --> 02:13.360 And the first thing I'm going to do is take all my spacers and make sure that they all have an appropriate 02:13.360 --> 02:14.920 size in the X. 02:15.430 --> 02:19.540 I'll just give them something like 50, maybe even 100. 02:20.540 --> 02:22.210 They don't have to be that wide. 02:22.220 --> 02:25.460 They just have to be wide enough to push the next thing over. 02:26.490 --> 02:28.320 Maybe 120 will do it. 02:28.350 --> 02:29.280 There we go. 02:29.670 --> 02:33.960 Now that we have that, we can increase their size in the Y. 02:34.020 --> 02:37.900 If I increase it to ten, we have spacing of ten. 02:37.920 --> 02:43.110 We can increase that even to 20, but then we can tweak things as we see fit. 02:43.170 --> 02:50.160 Now the text block needs to say description, so we'll change it to say description and we'll also change 02:50.160 --> 02:50.840 its font. 02:50.850 --> 02:55.750 I'd like Pirate of one and we'll also change its size. 02:55.770 --> 02:57.180 We'll make it 20. 02:57.210 --> 03:02.970 I'll give it a letter spacing of 150 and a outline size of one. 03:02.970 --> 03:04.710 And there's our description. 03:05.530 --> 03:10.240 Now the rat box can be a little finicky when you're messing around and zooming in. 03:10.270 --> 03:15.210 You'll see that it changes sometimes hitting compile changes it yet again. 03:15.220 --> 03:22.870 But we can get this behaving as long as we make sure that things wrap as they're supposed to wrap. 03:22.960 --> 03:26.470 Now, scrolling on up, we can click on our first spacer. 03:26.470 --> 03:33.640 In fact, we can click on actually everything in this rat box and click on Force New line that's going 03:33.640 --> 03:37.570 to make sure everything forces the next thing into a new line. 03:37.570 --> 03:39.340 That's exactly what we want. 03:39.370 --> 03:48.310 Now, the rat box itself that all of these widgets are in is actually not taking up much space. 03:48.310 --> 03:56.360 But that's okay because our size boxes can begin to take up space if we override their width and height. 03:56.380 --> 04:02.230 If I click on width override and drag that up, I can make it as wide as I like. 04:02.230 --> 04:04.480 And I'd like it to be about 220. 04:04.930 --> 04:13.040 In my case, because that almost fills up the empty space and I can drag on the height override too 04:13.040 --> 04:15.860 and make that a little bit larger there. 04:15.860 --> 04:19.310 So I have a width of 220, a height of two. 04:19.310 --> 04:24.320 Let's make it 250 and I can set that for the second size box. 04:24.350 --> 04:28.940 We have a width override of 220 and a height of 250. 04:29.480 --> 04:32.120 So that's going to space those out a little better. 04:32.300 --> 04:39.350 Now our spacers themselves could be a little bit larger, so I'm going to take their Y in their size 04:39.350 --> 04:41.480 and let's just increase it to 40. 04:42.080 --> 04:47.780 I think we can afford that much space and now things are looking a little bit better. 04:47.810 --> 04:53.240 Descriptions should be centered in this whole column, so I'm going to take description and click fill 04:53.240 --> 05:00.860 Empty space and set horizontal alignment to fill and make sure it's justification is centered. 05:01.280 --> 05:04.040 And now our description looks a bit better. 05:04.040 --> 05:10.940 And I think that actually descriptions spacer could be a little bit smaller in the Y so that that word 05:10.940 --> 05:12.920 is closer to its actual description. 05:12.920 --> 05:14.720 Let's set that back down to 20. 05:14.750 --> 05:16.100 That looks pretty good. 05:16.190 --> 05:17.210 Okay. 05:17.540 --> 05:20.660 Now our close button down here. 05:20.690 --> 05:27.200 I think this should be aligned to the right so we can actually take its spacer, the one just above 05:27.200 --> 05:29.690 it and push it on down. 05:29.840 --> 05:33.800 And we can also put another spacer to the left of it. 05:34.520 --> 05:39.110 So we'll drag in another spacer here just before it. 05:39.610 --> 05:46.690 And this spacer, I'm going to click Force New Line and select my button and uncheck force new line. 05:46.690 --> 05:50.410 And that way this spacer can push the button to the right. 05:51.360 --> 05:53.490 So a couple of spacers here. 05:54.050 --> 05:55.760 One pushing it down. 05:56.930 --> 05:59.390 And the other pushing it to the right. 06:00.230 --> 06:03.800 Now, if we zoom out, everything just blew up, right? 06:03.800 --> 06:07.400 So we're going to want to make sure that that doesn't happen. 06:07.400 --> 06:13.760 So if I uncheck fill empty space for the description that fixes the problem, but it goes back to the 06:13.760 --> 06:14.600 left. 06:14.810 --> 06:17.930 If I click it again, it goes back to the center. 06:17.930 --> 06:20.300 So the UMG can be a little bit finicky. 06:20.300 --> 06:23.930 Sometimes if we compile, then it goes back. 06:23.930 --> 06:27.080 So we're going to have to get around that problem. 06:27.080 --> 06:29.180 I'm going to uncheck fill empty space. 06:29.210 --> 06:33.980 We'll have to just push this description to the right just a little bit with a spacer. 06:33.980 --> 06:36.620 So I'm going to put in another spacer here. 06:36.980 --> 06:42.560 I'm going to click Force New line on it, uncheck force, new line on the text. 06:42.680 --> 06:48.470 That way it's to the right of the spacer and then we can push that spacer a little bit to the right, 06:48.890 --> 06:52.370 like so a little bit of a hack, but it'll work. 06:53.110 --> 06:55.600 Okay, so we have this all set up. 06:55.600 --> 06:57.520 We have two size boxes. 06:57.550 --> 07:04.540 The last thing is to make these size boxes, have scroll boxes inside of them, as well as perhaps their 07:04.540 --> 07:06.730 own backgrounds and borders. 07:06.820 --> 07:09.450 So that means they need overlays. 07:09.460 --> 07:12.100 So I'm going to put an overlay into each one. 07:12.130 --> 07:14.860 I'm just going to drag it on to the size box. 07:15.810 --> 07:17.550 Here in the overlay. 07:17.910 --> 07:20.010 We'll put our additional widgets. 07:20.010 --> 07:22.440 We'll put the overlay in both size boxes. 07:23.230 --> 07:26.410 Now, this first one is going to get an image. 07:27.960 --> 07:30.120 So I'll drag that into the overlay. 07:30.240 --> 07:34.650 I'll select the image and set horizontal and vertical alignment to fill. 07:34.830 --> 07:36.870 And I'll search for border. 07:39.620 --> 07:45.670 So selecting border large, we have that large border and it looks kind of skinny. 07:45.680 --> 07:47.330 It looks pretty cool, actually. 07:47.360 --> 07:50.540 Now, if you want, you can draw this as a border. 07:51.910 --> 07:56.650 By selecting the image and changing this to draw as border. 07:56.680 --> 07:59.620 If you do that, though, you need to change the margin. 08:00.640 --> 08:03.880 Changing it to 0.5 is going to make it look pretty good. 08:03.970 --> 08:07.900 But you can of course change that margin so that it's even larger. 08:08.200 --> 08:12.310 0.25 makes it a little bit thicker, if you like that. 08:12.340 --> 08:15.250 Now, in addition to the border, I'd like a background. 08:15.280 --> 08:18.580 So I'm going to drag in another image onto the overlay. 08:18.580 --> 08:23.860 And for this one, we're going to fill horizontal and vertical, but we're going to bring it behind 08:23.860 --> 08:25.120 that other image. 08:26.780 --> 08:32.840 So the background is behind the border and this image needs to have some padding. 08:34.310 --> 08:36.530 I'm going to try a value of two. 08:36.560 --> 08:37.730 I think that'll work. 08:37.970 --> 08:40.280 And this can be some flowing clouds. 08:40.280 --> 08:42.590 So I'm going to search for flowing. 08:42.950 --> 08:47.780 And here's an me flowing red that looks a little bit different. 08:47.810 --> 08:49.100 That looks kind of cool. 08:49.100 --> 08:54.170 We can also just browse to it and duplicate it and create a new one. 08:54.170 --> 09:00.350 Called me Flowing scroll for the scroll box and we can change it. 09:01.200 --> 09:04.230 For instance, we may not want it to be red. 09:04.260 --> 09:08.400 We might want it to be maybe a darker blue, for example. 09:08.790 --> 09:14.130 So now that we have my flowing scroll, our spell menu could use that. 09:14.460 --> 09:18.150 I'm just going to browse to it, go to the spell menu and replace it. 09:18.150 --> 09:21.430 So that's what the dark blue looks like. 09:21.450 --> 09:22.350 Kind of cool. 09:22.350 --> 09:25.620 We can also make it even darker by changing its tint here. 09:26.330 --> 09:28.310 So we have a couple of images here. 09:28.310 --> 09:34.250 I'm going to copy both of them, select the other overlay and paste them in there so we have them there 09:34.250 --> 09:34.790 to. 09:35.690 --> 09:38.540 Okay, so that looks pretty cool. 09:38.540 --> 09:41.150 But we also need a scroll box. 09:41.420 --> 09:48.920 A scroll box is going to allow us to have some text, so I'm going to search for scroll box and I'm 09:48.920 --> 09:50.750 going to drag one into the overlay. 09:51.400 --> 09:54.490 It's going to go beneath both images. 09:54.520 --> 09:57.910 In other words, in front of it on the widget. 09:57.910 --> 10:01.210 And I'm going to set horizontal and vertical alignment to fill. 10:01.240 --> 10:03.730 Now, I put that one in the bottom overlay. 10:03.730 --> 10:09.580 I'm going to drag one onto the top overlay here and set it to fill as well. 10:10.230 --> 10:14.490 Now our scroll box can have a number of things inside of it. 10:14.490 --> 10:17.460 We're going to put some text in there and we'll get to that. 10:17.460 --> 10:19.340 For now, I think that's enough. 10:19.350 --> 10:21.240 We've added quite a few things. 10:21.240 --> 10:24.510 We can take a look at our overlay and see what this menu looks like. 10:24.510 --> 10:30.000 We can even press play and see what it looks like here in the viewport and it's starting to look pretty 10:30.000 --> 10:30.600 good. 10:30.600 --> 10:36.870 I really don't like how much empty space is on the bottom and left, so that's something I'd like to 10:36.870 --> 10:37.740 change. 10:37.740 --> 10:44.430 And it's not that there is less padding on that side, it's just that these widgets fill up less space 10:44.430 --> 10:45.480 on that side. 10:45.510 --> 10:53.820 So a quick fix for that is to take our overall wrap box and just set its left padding to probably zero 10:54.210 --> 10:56.310 and its bottom as well. 11:02.390 --> 11:04.370 So we can see what that looks like. 11:04.400 --> 11:05.570 That looks better. 11:05.600 --> 11:09.170 The left padding could be maybe ten. 11:13.470 --> 11:14.010 Okay. 11:14.010 --> 11:15.540 I'm all right with that. 11:16.980 --> 11:20.700 Now I feel the right padding could be a little bit smaller as well. 11:20.730 --> 11:24.390 But, you know, we're falling down the tweaking rabbit hole. 11:25.300 --> 11:31.390 I'm going to bring that left padding up to about 20, maybe 25. 11:31.390 --> 11:33.050 And I think I'll leave it at that. 11:35.280 --> 11:40.230 Okay, so opening both we see what our menus look like pretty good. 11:40.440 --> 11:44.430 And now we need to make our spell menu functional. 11:44.580 --> 11:51.180 So we're going to end up removing it from the overlay and instead have a button on the overlay to create 11:51.180 --> 11:54.360 the widget and then we'll destroy it with the X button. 11:54.360 --> 11:57.570 So that's one of the next things that we'll be doing. 11:57.600 --> 11:58.530 So great job. 11:58.530 --> 12:01.470 We now have the widget in the videos to come. 12:01.470 --> 12:04.050 We'll be making our spell menu functional. 12:04.470 --> 12:05.310 I'll see you soon.