WEBVTT 00:06.830 --> 00:07.840 Welcome. 00:07.850 --> 00:11.090 So we have our offensive and passive spell trees. 00:11.300 --> 00:15.470 Now we need this part down here, our equipped spell row. 00:15.500 --> 00:20.540 This will be a series of icons that will show our spells that we've equipped. 00:20.570 --> 00:22.310 So let's make that now. 00:23.200 --> 00:28.270 Now I'm going to take my passive spell tree and browse to it and simply duplicate it. 00:28.270 --> 00:32.420 And this one can be equipped. 00:32.560 --> 00:34.210 Spell row. 00:34.510 --> 00:39.760 Now, first thing I'm going to do though, is just delete the box root. 00:40.390 --> 00:42.220 We'll create this from scratch. 00:42.250 --> 00:46.510 Now, this is going to look similar to what's in our Health Mana Spells widget. 00:46.540 --> 00:54.310 We can take a look at that in UI Overlay Sub Widget Health Mana Spells Widget Blueprint. 00:54.340 --> 01:00.220 So I'd like six globes here for the offensive abilities and two for the passive. 01:00.490 --> 01:02.410 But we can do this a little bit differently. 01:02.410 --> 01:06.290 I think we can use wrap boxes to make our lives easier. 01:06.340 --> 01:12.100 So here in equip spells row, I'm first going to see what it looks like for a wrap box. 01:12.100 --> 01:13.980 So we do want a wrap box. 01:13.990 --> 01:15.640 I'll call it wrap box root. 01:17.590 --> 01:24.760 And I'm thinking I'm going to want my spell globes and their labels just above them like we have here. 01:25.030 --> 01:27.970 So a vertical box might make sense. 01:28.060 --> 01:31.180 I'm going to search for one and bring one in. 01:33.900 --> 01:36.090 And straight on to the vertical box. 01:36.090 --> 01:38.370 I'm going to get a text. 01:38.700 --> 01:44.580 Bring a text widget onto that and just under the text. 01:45.310 --> 01:46.840 We're going to get a glow button. 01:49.540 --> 01:54.580 So getting a spell glow button onto the vertical box and that will be beneath it. 01:54.820 --> 02:03.160 Now for the text, I'm going to set the text to LMB, and if I go back to health manage spells, I can 02:03.160 --> 02:05.140 see what the properties are here. 02:05.440 --> 02:07.480 We have Amaranth regular. 02:07.840 --> 02:09.820 I'm going to set that as the font. 02:11.610 --> 02:14.440 Going back the size is 14. 02:14.460 --> 02:16.200 Outline size is one. 02:17.070 --> 02:21.720 We can give this a size of 14 and an outline size of one. 02:22.200 --> 02:26.520 And if I set the justification to center, it'll be centered here. 02:26.790 --> 02:28.440 So that looks pretty good. 02:28.650 --> 02:34.080 Now, before going and adjusting the size, I'd like to see what this looks like in relation to our 02:34.080 --> 02:35.150 other widgets. 02:35.160 --> 02:39.080 So if I go to my overlay, I can bring one of these in. 02:39.090 --> 02:47.070 Now I'm going to go ahead and move these up and make some room and bring in my equip spell row. 02:48.890 --> 02:49.520 Here it is. 02:49.520 --> 02:56.600 I'm going to bring it in here and it looks a lot like my passive spell row because I haven't compiled 02:56.600 --> 02:59.200 my changes to my equip spell row. 02:59.210 --> 03:04.430 So if I compile and save, I can come back into my overlay and see what this looks like. 03:04.460 --> 03:12.830 Now, I'd like these icons to be pretty close to our passive icons as we need six of them across, plus 03:12.830 --> 03:15.890 two smaller ones for the passive equipped spells. 03:15.920 --> 03:23.930 So my passive icons, if I go into my passive spell tree, I can take a look at their size searching 03:23.930 --> 03:24.920 for properties. 03:24.950 --> 03:28.730 There's 60 so I can set the size. 03:29.840 --> 03:38.330 And my equip spell glow button to something a little bit bigger, but around that size, perhaps 70. 03:39.110 --> 03:42.560 And of course, that means we need to adjust the padding, don't we? 03:42.590 --> 03:46.970 So instead of seven, I'm going to try six, maybe five. 03:47.940 --> 03:49.920 5.5 seems pretty good. 03:50.310 --> 03:52.320 So that looks pretty decent. 03:52.650 --> 03:56.640 So keeping these two in a vertical box is pretty convenient. 03:56.670 --> 03:58.900 I'm going to call this first box. 03:58.920 --> 04:05.790 Box underscore lab, and then we can copy this box six times. 04:05.820 --> 04:13.080 I'm going to control C and click on the box root and control V, and that will put my next one right 04:13.080 --> 04:13.770 here. 04:13.770 --> 04:16.470 And I'm going to call this one box R&B. 04:16.980 --> 04:21.030 I'm going to take this text and change its text. 04:21.830 --> 04:23.090 To R&B. 04:23.900 --> 04:29.750 So I'm going to repeat the process four more times for the rest of the spells, and I can time lapse 04:29.750 --> 04:30.410 that. 04:46.140 --> 04:48.270 Okay, so we have the spells. 04:48.300 --> 04:49.860 They look pretty nice. 04:49.890 --> 04:51.960 We're going to want some space between them. 04:51.960 --> 04:53.610 Not much, but a little bit. 04:53.790 --> 04:57.330 And in addition to that, we need our passive spells, right? 04:57.360 --> 04:59.640 So I'm going to drag a spacer in. 05:01.890 --> 05:04.920 Right in between the first two boxes. 05:05.760 --> 05:09.180 I'm going to select that spacer, make it a little bit wider. 05:09.180 --> 05:16.470 I'll put it at about five and I'll drag in another spacer in between the next two boxes and I'll keep 05:16.470 --> 05:17.430 doing this. 05:18.570 --> 05:21.390 And then I'll set all of their sizes to the same size. 05:23.940 --> 05:26.430 So I can select all of them at once. 05:29.100 --> 05:33.360 And I can set all of their X values to the same value. 05:33.480 --> 05:39.700 And it looks like I tried to control V with something I didn't want to paste. 05:39.720 --> 05:41.790 I'm going to paste in five. 05:42.180 --> 05:43.590 Okay, that's looking pretty good. 05:43.590 --> 05:47.790 If I compile it, I can look at my overlay and see what it looks like here. 05:47.820 --> 05:53.640 Now I'm going to put its position X at this value. 05:55.660 --> 05:58.090 And bring its position y up. 05:59.500 --> 06:01.390 Just to see what it looks like here. 06:02.340 --> 06:08.280 So I think I might actually like these to be a little bit smaller as I don't want them filling up all 06:08.280 --> 06:09.000 of this space. 06:09.000 --> 06:14.010 I'm going to want them smaller so we can see some labels and give them some more padding. 06:14.010 --> 06:21.540 So what I'm going to do is I'm going to select each of these boxes holding shift and selecting them. 06:21.540 --> 06:29.160 I have them all selected and I'm going to search for properties and change their sizes to maybe even 06:29.160 --> 06:31.770 50 and 50 for height and width. 06:32.730 --> 06:34.500 And for the padding. 06:34.530 --> 06:36.270 This needs to be smaller. 06:39.150 --> 06:41.040 For seems like a good value. 06:41.190 --> 06:45.240 And in fact, I think these labels can be smaller as well. 06:45.240 --> 06:47.220 So I'm going to change their font size. 06:47.340 --> 06:53.910 I'm going to select them all and change the size from 14 to about ten. 06:53.940 --> 06:55.800 I think that looks pretty good. 06:55.800 --> 06:59.700 And that way we'll have some space for some labels. 07:00.090 --> 07:02.370 Okay, so this is looking good. 07:02.400 --> 07:07.350 My box root has a bunch of boxes inside of it. 07:07.380 --> 07:14.610 Now all of these are going to be kind of separate from what comes next, which is my passive abilities. 07:15.270 --> 07:19.260 So all of these could be wrapped in a box themselves. 07:19.620 --> 07:24.480 So I can select all these widgets, right click and wrap width. 07:24.480 --> 07:28.770 And if I choose a wrap box now they're all in their own box. 07:29.360 --> 07:32.630 And then I can add another box next to it. 07:34.490 --> 07:37.760 So if I do that, I'll put it on box root. 07:37.790 --> 07:41.480 This one can be called rap box underscore offensive. 07:43.780 --> 07:46.990 And this one can be wrapped box passive 07:49.390 --> 07:54.250 and wrap box Passive can have a couple of globe icons of its own. 07:54.280 --> 07:55.930 These are actually globe buttons. 07:55.930 --> 07:57.880 They're all going to be buttons here. 07:57.940 --> 08:02.020 So I'm going to search for button actually spell globe button. 08:02.020 --> 08:05.920 We'll get one in there and we'll change its size right away. 08:06.310 --> 08:09.400 So I'm going to see what 35 and 35 look like. 08:10.810 --> 08:13.260 I may actually want it to be smaller than that. 08:13.270 --> 08:15.310 So maybe 25, 25. 08:15.700 --> 08:18.790 And of course my padding is going to be much smaller. 08:20.340 --> 08:23.610 Two looks almost perfect. 08:24.330 --> 08:26.100 Three is too much. 08:27.270 --> 08:30.510 2.5 is too much, so two is good. 08:31.840 --> 08:37.980 So there's one of our passive spells we can compile and look at our overlay as we're working with this. 08:37.990 --> 08:40.660 So yeah, that looks a little bit too small. 08:41.140 --> 08:46.360 So rather than 25, 25, I'm going to try 3535. 08:46.390 --> 08:47.680 That looks better. 08:52.920 --> 08:54.870 And three padding looks good. 08:55.260 --> 09:00.900 So I'm kind of liking that and I'm going to go ahead and copy this globe. 09:01.320 --> 09:06.400 Click on my rat box passive and paste it and change my rat box passive. 09:06.420 --> 09:11.400 I think I'm going to need my orientation to be vertical like so. 09:12.150 --> 09:14.760 Okay, so things are looking pretty good here. 09:14.790 --> 09:18.150 We have a rat box offensive and a rat box passive. 09:18.180 --> 09:23.370 I would like a label above this that says offensive and passive here. 09:23.490 --> 09:29.580 And in addition, I think I'd like a bit of a spacer between these two rat boxes. 09:29.610 --> 09:31.210 Let's do that first. 09:31.230 --> 09:33.030 So we'll get a spacer here. 09:34.150 --> 09:36.220 We'll go ahead and increase its width. 09:36.830 --> 09:43.270 And now we need to think about how we're going to handle having a label above each of these. 09:43.290 --> 09:44.180 Right. 09:44.410 --> 09:53.210 Now, one way to handle this is to take our wrap box offensive and simply wrap it in a vertical box. 09:53.300 --> 09:56.420 So we can do wrap width, vertical box. 09:56.420 --> 09:59.900 And in this vertical box, we can drag in some text. 10:01.030 --> 10:03.670 So we'll put it right there in this vertical box. 10:05.420 --> 10:05.840 Now. 10:05.840 --> 10:07.280 It went below our rap box. 10:07.280 --> 10:09.380 I'm going to want it above the rap box. 10:09.380 --> 10:13.100 And I can call this vertical box underscore offensive. 10:17.280 --> 10:24.560 And I can change the text block to say offensive and we can change its font for the font. 10:24.570 --> 10:33.120 I'm going to try Pirata one regular with a font size of about 14, an outline size of one. 10:33.780 --> 10:36.180 I'm going to set its justification to center. 10:37.420 --> 10:39.100 And that's looking pretty nice. 10:39.130 --> 10:47.560 Scrolling up, I can set its vertical alignment to center and its horizontal alignment to center, and 10:47.560 --> 10:49.360 it's going to stay right there in the middle. 10:49.540 --> 10:54.490 And as I increase or decrease the size, it'll take up more or less room. 10:54.520 --> 10:57.780 Now I'm going to do the same thing for my passive ramp box. 10:57.790 --> 11:02.170 I'm going to right click wrap with vertical box. 11:02.170 --> 11:06.400 And this can be called vertical box underscore passive. 11:07.120 --> 11:14.230 And in the vertical box I'm going to drag in some text and it's going to go above not in the wrap box. 11:14.230 --> 11:16.300 I accidentally put it in the wrap box. 11:17.000 --> 11:23.360 I'm going to put it above the rat box and change its text to say passive and I'm going to take my offensive 11:23.360 --> 11:24.080 font. 11:24.690 --> 11:27.300 Copy its font family and paste it over. 11:28.190 --> 11:30.410 And copy its font size. 11:31.820 --> 11:33.830 And paste that over as well. 11:34.710 --> 11:37.230 And set its outline size to one. 11:38.100 --> 11:40.650 Set its justification to center. 11:40.830 --> 11:42.300 And come up to the top. 11:42.300 --> 11:45.240 Set its horizontal and vertical alignment to center. 11:45.390 --> 11:51.210 Now its offset and I believe my outline size wasn't set, that could be one. 11:51.240 --> 11:55.710 Now it appears that these two icons are off to the left. 11:55.740 --> 12:02.100 So what I can do is take my wrap box passive, and if I click horizontal alignment center, vertical 12:02.100 --> 12:06.510 alignment, fill vertically and horizontal alignment here to center. 12:06.540 --> 12:08.580 Now its centered nicely. 12:08.820 --> 12:10.620 Okay, so that's looking nice. 12:10.650 --> 12:13.110 Now the whole thing is off to the side, right? 12:13.140 --> 12:15.720 Let's compile and see what it looks like in the overlay. 12:15.750 --> 12:17.880 So yes, it's off to the side. 12:17.910 --> 12:20.800 It would be nice if it filled this space. 12:20.820 --> 12:22.530 So back to our widget. 12:22.560 --> 12:29.250 Let's take our wrap box route right here and we can change its horizontal alignment to center align 12:29.250 --> 12:30.190 horizontally. 12:30.210 --> 12:33.750 I'm just going to set vertical to center align as well. 12:33.750 --> 12:36.310 And that's going to fix it. 12:36.340 --> 12:41.800 Now zooming in on it, I see that it changed to wrap around. 12:41.890 --> 12:45.640 If I click on compile, that's going to fix it. 12:45.760 --> 12:49.120 So zooming in is going to give it some strange behavior. 12:49.120 --> 12:53.650 But if we look in our overlay, we'll see what it really will look like. 12:53.680 --> 12:58.450 Zooming in changes it there as well, but compiling fixes it and pressing play. 12:58.480 --> 12:59.890 We see what it really looks like. 12:59.890 --> 13:02.380 Now here's what it looks like in the viewport. 13:02.380 --> 13:06.670 So we definitely want to make sure that we don't get that wrap behavior here. 13:06.700 --> 13:13.330 Now, a way that we can avoid that wrap is by setting the wrap box route to have horizontal alignment 13:13.330 --> 13:14.260 fill. 13:14.290 --> 13:17.920 And that's going to make it off to the left again. 13:17.920 --> 13:24.310 But then our horizontal alignment in inner slot padding in content layout can be set to centered. 13:24.310 --> 13:28.480 And then no matter how much we zoom in, it stays where it is supposed to be. 13:28.510 --> 13:31.060 We can see that in the overlay as well. 13:31.060 --> 13:34.450 And if we play test, we'll see that in the viewport as well. 13:34.930 --> 13:35.440 All right. 13:35.440 --> 13:36.700 Things are looking better now. 13:36.700 --> 13:38.650 It's a little bit small, right? 13:38.680 --> 13:40.390 A little bit too small. 13:40.420 --> 13:44.020 And so that can be easily adjusted. 13:44.020 --> 13:48.400 So at this point, we're just making some last minute adjustments. 13:48.430 --> 13:56.200 For one, this spacer might actually be unnecessary now that these two icons are centered with the passive 13:56.230 --> 13:56.860 text. 13:56.860 --> 13:59.380 So I'm going to just remove that spacer there. 14:00.050 --> 14:03.890 I'm also going to put a spacer between these two icons. 14:05.630 --> 14:10.550 So let's bring one of those in and increase its vertical size. 14:12.170 --> 14:13.040 There we go. 14:13.040 --> 14:15.410 So it was behaving a little strangely. 14:15.410 --> 14:22.520 So I selected Rat Box Passive, changed its orientation to horizontal and then back to vertical and 14:22.520 --> 14:23.930 then it behaved itself. 14:24.470 --> 14:26.580 Okay, so we have some spacing there. 14:26.600 --> 14:33.230 Now these icons are quite small in the viewport, so we may indeed want them to be a bit bigger. 14:34.630 --> 14:37.060 So I think we'll go ahead and just make them bigger. 14:38.910 --> 14:44.460 If I select our larger ones, there are 50 and these are 35. 14:45.900 --> 14:48.630 Perhaps these ones can be larger too. 14:48.630 --> 14:50.760 Let's make them about 60. 14:54.650 --> 14:58.610 And we'll make these ones 50 or maybe 45. 15:00.230 --> 15:01.190 There we go. 15:01.610 --> 15:05.510 Now I'm going to hit compile and that's going to put them all back where they belong. 15:05.510 --> 15:14.240 And our overall route box route is filling up our size box route and our height override could be a 15:14.240 --> 15:15.260 little bit larger. 15:15.260 --> 15:19.910 I'm going to actually put it over the size that we need just by a little bit. 15:19.940 --> 15:27.290 We'll put it at 140 and I'm going to make sure that my height override and spell tree properties box 15:27.290 --> 15:29.990 height is set to 140 as well. 15:31.130 --> 15:32.300 So that's a little bigger. 15:32.300 --> 15:34.460 Let's see how that looks both in the overlay. 15:35.070 --> 15:40.550 And I'm actually going to delete it and bring in a new one at the right size. 15:40.560 --> 15:43.470 And let's just see what it looks like in the viewport. 15:46.010 --> 15:47.630 I think that's looking better. 15:48.750 --> 15:52.470 Still small, but better, and I think we can live with that. 15:52.470 --> 15:55.050 So I think that's going to do it. 15:57.170 --> 16:02.630 Again, we could tweak these all day long, but we really shouldn't be tweaking too much until we get 16:02.630 --> 16:05.400 this into our main spell menu widget. 16:05.420 --> 16:09.200 Until then, we're really just kind of being nitpicky. 16:09.380 --> 16:18.860 But one thing I will change is I'm going to make sure in my properties that my box width and my padding 16:18.860 --> 16:22.880 are compatible, so I'm going to make sure of that. 16:22.910 --> 16:29.150 So with the box width of 60 and a glass padding of four, I'm just going to make sure that I'm zeroing 16:29.150 --> 16:30.680 in on the correct value. 16:30.680 --> 16:31.760 That looks good. 16:31.760 --> 16:38.060 I think five is good for a box width and height of 60 and then here for 45. 16:41.510 --> 16:43.490 I think four is actually pretty good. 16:43.730 --> 16:44.420 All right. 16:44.420 --> 16:46.130 So that's looking good. 16:46.160 --> 16:53.090 We now have our equipped spell row and we're ready to throw all these together into our overall spell 16:53.090 --> 16:53.690 menu. 16:53.690 --> 16:55.040 And we'll do that next. 16:55.160 --> 16:56.030 Great job. 16:56.030 --> 16:57.020 I'll see you soon.