WEBVTT 00:06.960 --> 00:08.040 Welcome back. 00:08.070 --> 00:10.230 Now we have a spell glow button. 00:10.230 --> 00:14.100 We need to use this button in a spell tree. 00:14.310 --> 00:20.880 Now, in our spell menu, our offensive spell tree will be these nine glow buttons here. 00:21.120 --> 00:26.400 So we'll have three columns, and they'll each be separated by empty space. 00:26.400 --> 00:31.550 And each globe in one column will be attached with lines. 00:31.560 --> 00:36.240 So we need to make this particular offensive spell tree. 00:36.600 --> 00:38.490 That's what we'll do in this video. 00:38.520 --> 00:42.420 So the offensive spell tree will be a widget on its own. 00:42.420 --> 00:48.300 So I'm going to start organizing things in our Blueprints UI folder. 00:48.690 --> 00:50.880 We have an attribute menu folder. 00:50.880 --> 00:56.400 I'm now going to make a spell menu folder, so we'll call this spell menu. 00:58.310 --> 01:01.970 And in spell menu will make a new user widget. 01:02.000 --> 01:05.810 So this will be based on aura user widget. 01:06.110 --> 01:10.880 And I'm going to call this WP underscore offensive. 01:12.410 --> 01:13.580 Spell tree. 01:14.390 --> 01:19.900 So I'm going to open that up and our offensive spell tree is going to need a few things. 01:19.910 --> 01:22.730 For one, I'm going to give it a size box. 01:22.850 --> 01:29.660 I'd like to be able to set its size and I'm going to rename this right away to size box root. 01:31.830 --> 01:40.080 I'm going to check is variable and I'm going to add width and height overrides and set them in pre construct. 01:40.080 --> 01:49.920 So I'm going to grab size box root call set width override, and I'm also going to call set height override 01:51.600 --> 01:54.720 and I'll promote these values to variables. 01:55.710 --> 02:04.920 One called box width and then the other promote to variable and I'll call this one box height. 02:06.690 --> 02:14.790 Now I'm going to compile and give these default values and I'm going to start with about 500 for the 02:14.790 --> 02:18.630 width, maybe 525 actually. 02:18.900 --> 02:23.880 And for the height, we'll start off at about 350. 02:24.720 --> 02:26.220 Of course these can be adjusted. 02:26.220 --> 02:29.250 That's why we want them to be parameters here. 02:29.610 --> 02:32.430 I'm going to collapse these nodes to a function. 02:34.130 --> 02:36.830 We'll call it update box size. 02:37.340 --> 02:39.710 We'll call that an event pre construct. 02:40.040 --> 02:44.690 And we'll go ahead and put box width and box height into categories. 02:45.020 --> 02:48.980 I'll call it spell tree properties. 02:50.660 --> 02:54.680 So Boxwidth is there and we'll put box height as well. 02:55.840 --> 02:57.100 Spell tree properties. 02:57.100 --> 02:57.880 There we go. 02:58.680 --> 03:00.950 Okay, so we have a size box. 03:00.960 --> 03:03.840 We're now going to want some icons, right? 03:03.840 --> 03:06.090 Some glow buttons, actually. 03:06.120 --> 03:15.510 Now I want three columns of them and I want this to be relatively easy to put together and expand upon. 03:15.540 --> 03:22.530 Now we've seen how a rat box will wrap around based on the width of what's in each row. 03:22.830 --> 03:25.350 But a rat box can work the other way. 03:25.380 --> 03:27.930 It can work horizontally and vertically. 03:28.050 --> 03:32.250 So I'd like to see how that rat box works for our spell tree. 03:32.250 --> 03:33.480 I'm going to bring one in. 03:33.810 --> 03:35.340 I'm going to select it. 03:35.580 --> 03:38.220 I'm going to rename it to Rat Box Root. 03:40.880 --> 03:46.400 And my rap box can have its horizontal and vertical alignment to center. 03:46.580 --> 03:50.030 That way things won't be stuck to one side or another. 03:50.060 --> 03:55.820 Now, orientation by default is horizontal, and that's the behavior we've seen with wrap boxes thus 03:55.820 --> 03:56.380 far. 03:56.390 --> 04:02.180 But if we change this to vertical, we'll get things wrapping in the other dimension the other way. 04:02.270 --> 04:05.500 So to see that we need some stuff here, right? 04:05.510 --> 04:11.390 But I'm going to have three vertical columns and each of these vertical columns I'd like to have a wrap 04:11.390 --> 04:12.440 box for. 04:12.650 --> 04:14.990 So I'm going to drag three wrap boxes. 04:14.990 --> 04:17.540 One, two, three. 04:17.540 --> 04:20.000 Notice I'm dragging them onto the wrap box route. 04:20.000 --> 04:21.770 So they're all children of that. 04:21.800 --> 04:30.380 Now this one will be wrapped box underscore col for column underscore one wrap box column one. 04:31.100 --> 04:36.770 The second one can be wrapped box column two and the third can be wrapped box column three. 04:37.490 --> 04:43.220 And for these, I'm also going to set horizontal and vertical alignment to center. 04:46.910 --> 04:51.050 Now we need to see what happens when we start putting things in our box. 04:51.140 --> 04:55.220 The first thing I'm going to want to add are some spell glow buttons. 04:55.220 --> 04:59.090 So I'm going to search for globe underscore button. 04:59.660 --> 05:02.810 That should filter out everything but spell globe buttons. 05:02.840 --> 05:08.680 I'm going to drag one onto that box column one and here we see our spell globe button. 05:08.690 --> 05:12.160 Now how big is our spell Globe button? 05:12.170 --> 05:14.270 It's kind of hard to tell, right? 05:14.450 --> 05:18.440 We're really going to have to see what this looks like if we add it to the viewport. 05:18.470 --> 05:24.500 Now we can get a quick and dirty estimate by simply adding one of these to our overlay. 05:24.530 --> 05:27.920 It's going to look funny, but at least we'll see how big it is. 05:27.950 --> 05:37.010 Let's go to our blueprints UI overlay and open up overlay and we can put our offensive spell tree in 05:37.040 --> 05:37.670 there. 05:37.910 --> 05:42.980 So I'm going to search my overlay palette for offensive. 05:43.970 --> 05:45.410 And I'll drag one in. 05:45.770 --> 05:46.820 Here it is. 05:46.850 --> 05:49.490 Now we can see sort of what it looks like. 05:49.490 --> 05:53.540 And if I go to my dungeon and press play. 05:54.510 --> 05:56.280 Here's the size of it. 06:04.800 --> 06:07.610 So it looks like our size isn't too bad. 06:07.620 --> 06:09.630 So that gives us an idea. 06:09.960 --> 06:15.450 But of course, if we go back to our offensive spell tree, this doesn't look exactly what it looks 06:15.450 --> 06:17.190 like here in the overlay, does it? 06:17.220 --> 06:23.400 That's because my size box root is overwriting a size, but up at the top right, we have to change 06:23.400 --> 06:28.350 this from filled screen to desired and now we can really see the actual size. 06:28.500 --> 06:36.180 So those width and height override default values for box width and box height are actually this size, 06:36.180 --> 06:37.620 these dimensions here. 06:38.100 --> 06:40.190 Okay, so that's what it looks like. 06:40.200 --> 06:45.330 We'll remove that from overlay soon, but it's actually kind of handy to just be able to press play 06:45.330 --> 06:47.750 and see what it looks like there for now. 06:47.760 --> 06:50.880 But definitely this is destined for deletion. 06:51.030 --> 06:58.740 So we see what it looks like with a spell glow button here on our first root box column one, I'm going 06:58.740 --> 07:06.010 to select this spell glow button, copy it and click on Root Box column one and control V to paste. 07:06.040 --> 07:11.020 Now our next spell glow button is just plopped on to the right of it. 07:11.140 --> 07:13.210 Let's copy one of our buttons. 07:13.240 --> 07:16.210 Click on Root Box column one and control V again. 07:16.210 --> 07:18.490 Okay, so we have three next to each other. 07:18.670 --> 07:20.620 Not exactly what we want. 07:20.650 --> 07:21.880 We want them vertically. 07:21.880 --> 07:22.600 Right? 07:22.900 --> 07:28.750 If we take our root box column one and change it to vertical, now we get something more along the lines 07:28.750 --> 07:29.770 of what we want. 07:29.800 --> 07:34.210 So it's the opposite of what the default root box behavior looks like. 07:34.210 --> 07:40.300 By default, the root box lines things up left to right until they take up too much space and then they 07:40.300 --> 07:42.520 take up the next area, Right? 07:42.610 --> 07:49.000 So if our root box root is set to vertical, then each individual root box will wrap. 07:49.240 --> 07:51.970 That means we really don't even need three wrap boxes. 07:51.970 --> 07:54.550 We could just wrap a whole bunch of things, right? 07:54.550 --> 07:59.530 But I'm going to keep these columns organized in wrap boxes of their own. 07:59.540 --> 08:06.580 Now I'm going to take these three buttons, Ctrl C to copy them and select Wrap Box column two and control 08:06.580 --> 08:07.540 V to paste. 08:07.570 --> 08:11.020 Now wrap box Column two needs to be set to vertical as well. 08:11.020 --> 08:12.640 And there we have three. 08:12.760 --> 08:19.630 I'm going to copy these again and paste them into wrap box column three and change that to vertical. 08:19.750 --> 08:26.050 And now we have three root box columns and we have a bunch of spell glow buttons in them. 08:26.260 --> 08:30.150 Now in between each pair of buttons, I would like a line. 08:30.160 --> 08:31.330 This will be an image. 08:31.330 --> 08:38.020 So I'm going to search for image and drag it between the first and second spell glow buttons here. 08:38.020 --> 08:43.000 And I'm going to take this image and change its texture. 08:43.000 --> 08:46.570 I'm going to search for line and we have a texture called line. 08:46.720 --> 08:48.220 Here's what it looks like. 08:48.490 --> 08:53.230 I'm going to take this image and I think I'd like it to be a little bit shorter. 08:53.230 --> 08:56.680 So I'm going to set its Y value to a shorter value. 08:56.890 --> 08:58.570 Quite a bit shorter, actually. 08:58.570 --> 08:59.890 About 15. 09:00.010 --> 09:02.470 Now I can take this image and copy it. 09:02.500 --> 09:07.870 If I select the glow button beneath it and control V, I'll paste it underneath it. 09:07.990 --> 09:15.040 So I'll go ahead and select this glow button, Ctrl V, select this glow button, Ctrl V and do the 09:15.040 --> 09:16.660 same thing here and here. 09:16.750 --> 09:20.470 Now we have lines underneath each of our icons. 09:20.800 --> 09:27.130 Now another thing is they're a bit close together horizontally, so I'd like some spacers in between 09:27.130 --> 09:29.410 each of our three wrap box columns. 09:29.410 --> 09:35.560 I'm going to go ahead and get me a spacer and drag it in between the two wrap box columns, the left 09:35.560 --> 09:36.370 and right. 09:36.730 --> 09:41.860 And our spacer actually, if we select it, we see it's down here. 09:41.890 --> 09:48.430 That's because our wrap box doesn't consider it vertically tall enough to go on to the next column. 09:48.520 --> 09:53.650 So what we have to do is increase its vertical size to push it off to the next column. 09:53.650 --> 09:59.310 And then if we increase its horizontal size, we see that we're spacing apart these rows. 09:59.320 --> 10:01.710 So I'm going to give it an X of 50. 10:01.720 --> 10:05.350 I think that's about a pretty good size and a Y. 10:05.380 --> 10:08.080 It can just be however long I want it. 10:08.080 --> 10:13.900 But if it's longer than the height of our size box, you'll see that that changes the behavior here 10:13.900 --> 10:20.140 because we have our wrap box route set to center horizontally and vertically. 10:20.140 --> 10:25.420 So I don't want my spacer to get higher than my size box height. 10:25.420 --> 10:31.120 So as long as it's big enough to fill the space, I'm fine with it. 10:31.120 --> 10:36.770 I'm going to set it to maybe 100 and I'm going to bring another spacer in between the other two columns 10:36.770 --> 10:38.720 and give it the same size. 10:38.720 --> 10:45.500 So I'm going to take my first spacer copy that size, take my second spacer and paste that size, and 10:45.500 --> 10:48.770 now we have two spacers and if we don't select it, we don't see it. 10:48.770 --> 10:51.770 But if we click on it, we can see what it looks like there. 10:52.160 --> 10:54.200 Okay, so that wasn't too painful. 10:54.200 --> 11:01.700 We now have an offensive spell tree and it's really just three wrap boxes, and in each wrap box we 11:01.700 --> 11:06.590 have three buttons and two images separating our buttons. 11:06.740 --> 11:12.440 Now we can compile and if we go back to our overlay, we see what it looks like in the overlay. 11:12.590 --> 11:14.510 And that's a pretty decent size. 11:14.510 --> 11:18.800 We can take a look if we press play in the dungeon, what it looks like here. 11:18.890 --> 11:22.730 And that's basically what we were looking for. 11:22.850 --> 11:25.520 So that's going to work for our spell tree, I think. 11:25.760 --> 11:29.960 And of course it's not functional, but we'll get to that part. 11:29.990 --> 11:34.190 For now, the most important thing is just having something thrown together. 11:34.220 --> 11:41.570 Our next step is for our passive spell tree, which is going to be quite a great deal less complicated. 11:41.570 --> 11:43.040 And we'll do that next. 11:43.070 --> 11:44.870 Great job and I'll see you soon.