WEBVTT 00:06.830 --> 00:07.990 Welcome back. 00:08.000 --> 00:11.930 In this video, we're concerned with making our passive spell tree. 00:11.960 --> 00:14.030 We already made our offensive one. 00:14.060 --> 00:15.800 Now we need the passive one. 00:15.800 --> 00:20.480 So let's do it so we know what our offensive spell tree looks like and its dimensions. 00:20.510 --> 00:24.820 Our passive spell tree should have the same width, or at least approximately. 00:24.830 --> 00:27.170 So we're going to make one right now. 00:27.290 --> 00:28.850 Now here's our offensive spell tree. 00:28.850 --> 00:33.290 And if we browse to it, we can be really lazy and duplicate it. 00:33.290 --> 00:38.240 And we can call this WP passive spell tree. 00:40.560 --> 00:44.820 So I'm going to close my overlay and my spell glow button. 00:44.820 --> 00:47.010 And this is our offensive spell tree. 00:47.040 --> 00:52.860 I'm going to open the passive version and close the offensive one so I don't accidentally change that 00:52.860 --> 00:53.460 one. 00:53.850 --> 00:56.430 And we want a few things. 00:56.430 --> 01:02.370 We want to keep update box size and all that good stuff, but we really don't need all of these wrap 01:02.400 --> 01:03.200 boxes. 01:03.210 --> 01:06.000 I'm actually going to delete all three of them. 01:06.540 --> 01:12.240 We're going to just keep this one wrap box root, but it's going to be wrapped box horizontal and our 01:12.240 --> 01:14.780 size box root doesn't need to be as high. 01:14.790 --> 01:19.460 We can take that height and bring it on down to something like this. 01:19.470 --> 01:28.380 I'm going to set it to 100, but we do need to make sure to change the default value in spell tree properties 01:28.380 --> 01:29.730 for our box height. 01:29.760 --> 01:32.790 I'm going to give it a value of 100 and compile. 01:32.790 --> 01:35.520 And now we have this actual size. 01:35.730 --> 01:40.690 Now our box root is going to need three spell glow buttons. 01:40.690 --> 01:49.300 So again, I'm going to search for globe underscore button that's going to filter everything else out 01:49.300 --> 01:54.190 and I'll bring in one, two and three. 01:54.580 --> 02:01.150 Now, our passive spells are going to be smaller icons than the offensive spells pressing play. 02:01.150 --> 02:01.990 I can see that. 02:01.990 --> 02:04.120 Here's what our offensive spells look like. 02:04.120 --> 02:06.460 Our passive are going to be smaller. 02:06.460 --> 02:10.990 As you can see, they're smaller and our health mana spells in the overlay as well. 02:10.990 --> 02:14.020 So I'd like that smaller size for them. 02:14.020 --> 02:19.570 That means we're going to want to change the size of our spell globe buttons here. 02:19.720 --> 02:22.090 Now my spell glow button. 02:22.090 --> 02:27.310 If I search for properties, we have the box width and the box height. 02:28.050 --> 02:29.270 I'd like them smaller. 02:29.280 --> 02:31.560 I'm going to try 60 and 60. 02:31.590 --> 02:37.410 So we saw that the width went down, but our height did not. 02:37.590 --> 02:45.720 But if I take my spell globe button and change its vertical alignment to center, then it shows up as 02:45.720 --> 02:46.830 the correct size. 02:46.860 --> 02:51.900 I'll go ahead and set its horizontal alignment to center as well, and I'll do the same for both of 02:51.900 --> 02:52.860 these others. 02:53.970 --> 02:56.730 And then I can set their sizes also. 02:56.730 --> 03:00.790 So I'm going to change their box width and height to 60 as well. 03:00.810 --> 03:07.590 So with properties or part of properties in the search bar, I can select the next button, change its 03:07.590 --> 03:11.160 box width and height and do the same for the third. 03:13.860 --> 03:15.960 Now, of course, this makes a problem. 03:15.990 --> 03:17.850 Our padding needs to change. 03:17.850 --> 03:18.960 Well, no problem. 03:18.960 --> 03:22.680 Actually, we have glass padding here, so I'm going to take this first globe. 03:22.680 --> 03:26.310 We could have done this all before copying this globe, but that's fine. 03:26.310 --> 03:28.440 I'm going to change its glass padding. 03:28.440 --> 03:30.360 I'm going to first try six. 03:30.510 --> 03:31.500 Not low enough. 03:31.500 --> 03:32.970 I'm going to try five. 03:33.150 --> 03:35.550 Five seems to do the trick. 03:35.550 --> 03:43.140 4.5 might actually be better, so I'm going to use that for all three of the icons. 03:45.270 --> 03:52.740 Now I hate to do minor tweaks and derail the conversation, but I kind of would like this locked background 03:52.740 --> 03:57.840 material to have a little bit of some darkness on the edges. 03:58.140 --> 04:07.650 So really quick, I'm going to go to Assets UI and Globes where we have our locked BG and I'd like to 04:07.650 --> 04:09.990 increase the perimeter shadow a bit. 04:10.020 --> 04:14.820 Now I have to be careful doing this because this is going to change how these look. 04:14.850 --> 04:20.220 That's actually a little too much, but with a glass padding of five, it might look better. 04:20.250 --> 04:25.860 No, I'm going to leave it at 4.5 and not have the perimeter shadow quite so dark. 04:26.490 --> 04:33.000 In fact, I can take this material instance off screen and adjust it while I'm looking at this screen. 04:33.210 --> 04:36.330 So changing that perimeter shadow a bit. 04:37.490 --> 04:39.020 I don't want it too, too dark. 04:39.020 --> 04:40.880 But I do want some shadow there. 04:41.670 --> 04:49.110 Now, I also need to keep my eye on our other spell tree, the offensive spell tree, because this will 04:49.110 --> 04:51.000 affect how that one looks too. 04:51.240 --> 04:54.330 So I want to make sure that it looks good here as well. 04:54.420 --> 05:01.920 And if I had to, I could create two materials and use one for the offensive and one for the passive, 05:01.920 --> 05:05.180 since they're going to be slightly different sizes. 05:05.190 --> 05:07.980 But I'm okay with that shadow. 05:08.070 --> 05:14.100 My perimeter shadow is set to just to show you 1.87. 05:14.130 --> 05:21.390 Now I'll go ahead and make some adjustments here so that you can see what I'm adjusting as I'm adjusting 05:21.390 --> 05:24.120 them my cloud darkness here. 05:24.120 --> 05:26.130 I could adjust that as well. 05:26.730 --> 05:29.850 And it seems like it should really be called cloud brightness, right? 05:30.840 --> 05:35.010 But I'm just going to make a few minor adjustments while I'm here. 05:35.040 --> 05:37.560 I'm going to slow the speed down for X. 05:37.800 --> 05:39.240 I think that'll look better. 05:40.470 --> 05:43.500 0.02 for x and 0.02 for Y. 05:43.530 --> 05:48.180 The negative color can probably change a bit like so. 05:49.100 --> 05:50.930 And cloud darkness. 05:51.700 --> 05:52.660 We'll adjust it a bit. 05:52.660 --> 05:53.290 Okay. 05:53.380 --> 05:54.670 That's looking pretty good. 05:54.670 --> 05:55.750 I'm happy with it. 05:55.750 --> 05:57.250 Let's look at passive. 05:57.840 --> 05:59.400 Passive looks good too. 05:59.430 --> 06:04.140 I'm going to stop before I derail this lecture into just tweaking. 06:04.200 --> 06:07.290 So now we have these three icons, right? 06:07.320 --> 06:09.120 We need some spacers between them. 06:09.120 --> 06:15.900 So I'm going to search for a spacer and put one in between the first two and I'm going to change its 06:15.900 --> 06:16.590 size. 06:16.620 --> 06:21.390 Now, you may have noticed that when you have something in the search box and you clear it with something 06:21.390 --> 06:26.310 selected, all of these categories are collapsed, but you can just click on something else and come 06:26.310 --> 06:28.410 back and click on what you had before. 06:28.410 --> 06:32.280 And that's going to expand those categories. 06:32.460 --> 06:38.040 Now for X on the size, notice what happens if I start to make it wider? 06:38.070 --> 06:41.930 That's going to force things to go on the next line there. 06:41.940 --> 06:47.100 But actually, I think what I want is my wrap box orientation to be vertical. 06:47.100 --> 06:53.910 And that way if I increase my spacer, as long as it's tall enough, then I'll get that spacing that 06:53.910 --> 06:54.660 I want. 06:54.840 --> 07:02.830 So I'm going to set the height of the spacer to 50 and the size X to 100 and I'll go ahead and copy 07:02.830 --> 07:06.100 the spacer and paste one right beneath it. 07:06.100 --> 07:10.150 So we have two and that's basically it. 07:10.150 --> 07:12.080 That's our passive spell tree. 07:12.100 --> 07:14.980 We can add one to the overlay to see what it looks like. 07:18.030 --> 07:20.040 We can just put one right here. 07:21.920 --> 07:23.780 So I'm going to search for passive. 07:23.810 --> 07:26.160 Get that passive spell tree on there. 07:26.180 --> 07:32.900 I can even put it directly beneath our offensive spell tree by taking its position x and copying it 07:32.900 --> 07:35.360 and taking the position X of our passive. 07:35.390 --> 07:38.750 Pasting that position in there and we can see what it looks like. 07:38.750 --> 07:40.880 So we have three little ones. 07:40.910 --> 07:41.960 Looks pretty good. 07:41.990 --> 07:49.160 Now notice something about the buttons, right as we hover, we're kind of getting that hover capability, 07:49.160 --> 07:52.580 but it's a little strange, right? 07:52.580 --> 07:57.830 It should be hovering and staying on the hovered texture while we're hovering it. 07:57.860 --> 08:05.030 So we need to figure out why that is and that's going to bring us back to our button. 08:05.030 --> 08:07.220 And that's going to be in spell globes. 08:07.250 --> 08:13.850 Really, our spell globe button widget should probably be in our spell tree folder, but that's okay. 08:13.850 --> 08:21.200 Let's go into it and notice we have an image selection and our button ring is beneath it. 08:21.200 --> 08:23.790 If we put that button ring on top. 08:23.850 --> 08:25.920 Let's see if that fixes things. 08:26.520 --> 08:28.770 Yeah, that definitely fixes things. 08:29.900 --> 08:31.400 Okay, so that looks good. 08:31.400 --> 08:36.410 And it looks pretty nice when we hover over it and when we click on it and hold, we can see that it's 08:36.410 --> 08:37.550 a little bit darker. 08:39.600 --> 08:42.780 In fact, darker than the surrounding buttons. 08:43.170 --> 08:48.420 I think I'd like the press to be even darker than that so I can bring it down a little bit more. 08:49.430 --> 08:51.440 And just see what it looks like when we click. 08:51.470 --> 08:51.860 Yeah. 08:51.890 --> 08:52.850 Nice and dark. 08:53.990 --> 08:55.760 Okay, so that's looking nice. 08:55.760 --> 08:58.070 We now have our passive spell tree. 08:58.110 --> 09:04.130 Doesn't look like much of a tree because there's only three, but I'm just calling it that for naming 09:04.130 --> 09:04.790 conventions. 09:04.790 --> 09:05.900 Same with this. 09:05.980 --> 09:08.380 Doesn't really look like an actual tree. 09:08.390 --> 09:09.890 I'm just calling it a spell tree. 09:09.920 --> 09:10.220 Right. 09:10.220 --> 09:11.060 You get the point. 09:11.060 --> 09:15.980 So now that we have these, we can continue with the rest of our spell menu. 09:15.980 --> 09:17.420 So we'll do that next. 09:17.450 --> 09:18.170 Great job. 09:18.170 --> 09:19.070 I'll see you soon.