WEBVTT 00:06.830 --> 00:08.570 Welcome back. 00:08.600 --> 00:12.980 Now, the next step in our spell menu is our equip button. 00:13.010 --> 00:18.150 Now, as soon as we have something selected that's eligible for the equip button to be enabled. 00:18.170 --> 00:25.910 When we click the equip button, we're now going to be expecting the user to click down here on one 00:25.910 --> 00:27.530 of these slots. 00:27.620 --> 00:37.160 So when one of these slots is clicked, we're going to take that spell globe, look at the ability tag 00:37.160 --> 00:42.020 and assign that ability to the slot we clicked on. 00:42.290 --> 00:44.900 And by slot I mean input tag. 00:44.900 --> 00:50.660 So if we click on right mouse button, then we're going to take that ability and assign it to the right 00:50.660 --> 00:51.590 mouse button. 00:51.740 --> 00:59.270 And that's why an equipped ability should be equippable still, because we could take this ability which 00:59.270 --> 01:05.450 is assigned to the left mouse button, press, equip, and then assign it to the right mouse button, 01:05.480 --> 01:09.110 thereby removing it from the left mouse slot. 01:10.420 --> 01:18.370 So I'm going to be using the term slot to mean basically input tag, but it's the input tag that we 01:18.370 --> 01:20.250 assign abilities to. 01:20.260 --> 01:27.550 So if I say the left mouse button slot, that means that's the slot dedicated to the left mouse button 01:27.550 --> 01:28.750 input, right? 01:28.750 --> 01:33.370 So we need to do several things to make this happen. 01:33.370 --> 01:39.160 This is one of the more complicated aspects of the spell menu, but we'll take it one step at a time 01:39.160 --> 01:47.050 and the first thing we need to do is as soon as we click equip, if we're selecting a valid ability 01:47.050 --> 01:51.640 spell globe, we need to show the user that they need to click down here. 01:51.670 --> 01:57.520 So if we're waiting for the user to click down here, we need to show something like an animation down 01:57.520 --> 02:00.880 here saying, Hey, click down here somewhere, right? 02:00.880 --> 02:06.700 So we need some animations down in our equip spells row widget. 02:06.700 --> 02:09.760 So we're going to open up our equipped row widget. 02:09.760 --> 02:18.290 Let's go to Blueprints UI and in our spell menu we have the Wbhp equipped spell row. 02:18.440 --> 02:20.390 We need some animations here. 02:20.420 --> 02:27.410 Now we have some assets that we can use for this If we go to content assets, UI, if we go to spell 02:27.440 --> 02:30.650 tree, we have some textures here. 02:30.950 --> 02:37.760 I'm interested in offensive selection box and it's just this texture here which is mostly transparent, 02:37.760 --> 02:40.220 but we have this rectangle in it. 02:40.460 --> 02:44.360 We also have passive selection box with this rectangle in it. 02:44.390 --> 02:50.180 Now these rectangles will make a lot more sense when we add them to the equipped spells row. 02:50.890 --> 02:52.600 So we're going to do that. 02:53.390 --> 02:58.460 Now I'd like to have an overlay so I can stick these textures right on top. 02:58.640 --> 03:08.120 So what I can do is take my rat box route, this big one here, and slap an overlay on top and wrap 03:08.120 --> 03:09.210 it in an overlay. 03:09.230 --> 03:13.520 So if I right click wrap width and choose overlay. 03:13.550 --> 03:18.650 Then my overlay now is going to contain it. 03:18.770 --> 03:26.090 Now I can make it horizontally and vertically centered and we shouldn't really see very much of a change 03:26.090 --> 03:26.690 here. 03:28.410 --> 03:32.760 Now because we have an overlay, we can add stuff on top. 03:33.030 --> 03:35.160 And I'm going to add an image. 03:36.950 --> 03:39.120 So we'll drag an image onto the overlay. 03:39.140 --> 03:43.400 We'll select that image and make it fill like this. 03:43.400 --> 03:49.190 And I'm just going to set the texture to this offensive selection box. 03:49.190 --> 03:54.860 So for the image, I'm going to set it there and I'm going to make sure and as soon as I zoom in, it 03:54.860 --> 03:58.580 goes all wonky, but I'm going to make sure that it looks good. 03:58.610 --> 04:01.370 So the image needs some padding. 04:01.760 --> 04:11.060 And what I think I'd like to do actually is make my overlay fill horizontally and vertically. 04:11.600 --> 04:13.940 I'm going to hide my image for a second. 04:14.270 --> 04:20.780 So if I make it fill, then my rap box route can be set to center and then it should be right there 04:20.780 --> 04:21.320 in the middle. 04:21.320 --> 04:27.710 And my image, if I show it now, should be a little bit more in the right location there. 04:28.760 --> 04:31.910 So let's see how that looks in the UI. 04:31.940 --> 04:33.030 It looks okay. 04:33.050 --> 04:36.770 I'm going to want some padding on the left and the right, though. 04:38.150 --> 04:39.980 So left and right. 04:40.550 --> 04:42.770 I'm going to give it about 12 and 12. 04:43.690 --> 04:51.400 Maybe less so it's kind of hard to see what it looks like without taking a look at our actual. 04:52.570 --> 04:53.800 Spell menu. 04:54.810 --> 04:57.930 So here's what it's going to look like in the spell menu. 04:58.770 --> 04:59.100 Here. 04:59.100 --> 05:00.990 You know what I'm going to do to make this easier? 05:00.990 --> 05:07.620 I'm going to take rap box route and I'm going to replace it with a horizontal box. 05:07.950 --> 05:14.220 That way we'll stop getting that weird behavior when we scroll in and I'm going to rename it to just 05:14.220 --> 05:15.270 box route. 05:15.480 --> 05:22.890 So now it's a horizontal box and I should be able to mess with the padding here and get it looking more 05:22.890 --> 05:24.300 like how I want it. 05:25.160 --> 05:27.590 And I'll go ahead and give it some padding. 05:28.160 --> 05:29.590 Let's do 20 on the left. 05:29.600 --> 05:30.520 20 on the right. 05:30.530 --> 05:33.470 It looks too small here, but in the game. 05:35.260 --> 05:37.840 So that looks pretty good in game. 05:39.000 --> 05:48.240 And I'm going to rename this image to image offensive selection outline. 05:49.020 --> 05:51.210 And we'll add another image. 05:52.250 --> 05:53.840 Right next to it here. 05:54.920 --> 06:00.410 And this will be image passive selection outline. 06:01.220 --> 06:06.050 And this one is going to be the passive selection box. 06:09.050 --> 06:17.000 In fact, we could just call it passive selection box, and we'll call this one offensive selection 06:17.000 --> 06:17.750 box. 06:21.180 --> 06:23.040 And let's see how those look together. 06:23.490 --> 06:23.820 All right. 06:23.820 --> 06:25.770 So this one is off to the right. 06:25.920 --> 06:27.630 We'll need to. 06:28.600 --> 06:30.220 Push it over a bit. 06:31.050 --> 06:33.450 So we'll give it some right padding. 06:35.440 --> 06:36.580 20 might do it. 06:36.580 --> 06:37.480 Let's see. 06:39.510 --> 06:39.900 Yeah. 06:39.900 --> 06:42.690 So that's about right Now, that's okay. 06:42.690 --> 06:48.420 If it's cutting into the text a little bit because we're going to animate this, we're going to make 06:48.420 --> 06:49.890 two animations. 06:51.980 --> 06:54.560 So we'll start with the offensive box. 06:54.560 --> 06:56.810 I'm going to hide the passive one. 06:57.050 --> 07:04.220 And for the offensive selection box and the passive actually we're going to be checking is variable 07:04.220 --> 07:05.090 for both. 07:05.090 --> 07:11.150 And we'll select the offensive selection box and add an animation. 07:11.150 --> 07:16.280 And this will be called offensive selection animation. 07:17.480 --> 07:25.400 With that selected, I'm going to add a track for Image Offensive Selection Box, and I'm going to add 07:25.400 --> 07:27.050 a track for the Transform. 07:27.440 --> 07:34.220 And for the Transform, I'm going to set the scale on X and Y to 1.05. 07:35.060 --> 07:37.670 So we'll make it a little bit bigger. 07:39.080 --> 07:44.270 And then at one second I'm going to set it back down to one. 07:44.870 --> 07:50.060 So this is a subtle animation, but if we play it on repeat. 07:53.410 --> 07:54.790 With looping on. 07:54.790 --> 07:56.410 We'll see what it looks like. 07:57.440 --> 08:01.700 And we can even start it on event construct. 08:03.890 --> 08:09.080 So we can just play this animation, offensive selection. 08:09.080 --> 08:10.010 Animation. 08:10.990 --> 08:13.210 We can play it and see what it looks like. 08:20.510 --> 08:24.530 And we can play it on repeat with a loop. 08:24.530 --> 08:26.040 So numb loops to play. 08:26.060 --> 08:27.620 We'll put that at zero. 08:29.410 --> 08:30.970 And that's going to make it loop. 08:31.090 --> 08:33.310 So this is what it looks like. 08:33.520 --> 08:37.810 Now we can scale it up and down more because it's stretched a little bit. 08:39.780 --> 08:44.310 So I'm going to scale it a little bit more in the Y. 08:44.820 --> 08:46.800 Oh, I'm not scaling it at all in the Y. 08:46.830 --> 08:48.150 That's probably why. 08:48.960 --> 08:50.940 That's probably why. 08:50.970 --> 08:52.920 So let's see. 08:52.920 --> 08:55.830 That looks pretty good. 08:59.090 --> 09:01.190 It doesn't look like our Y is changing. 09:01.190 --> 09:02.240 And that's because it's not. 09:02.270 --> 09:03.110 We have to put. 09:04.300 --> 09:07.930 The keyframe one at the end of that second. 09:08.110 --> 09:10.390 Now it looks like it should. 09:10.420 --> 09:12.220 Now that looks pretty decent. 09:12.250 --> 09:15.190 I'm going to pat it on the left just a little bit more. 09:15.280 --> 09:17.530 So left can get 25. 09:17.530 --> 09:25.600 And in addition to scaling it in our animation, I also want to fade it out. 09:25.810 --> 09:35.090 So as we're getting smaller, we're also going to fade its opacity out from 1 to 0. 09:35.110 --> 09:36.660 So we'll add a second track. 09:36.670 --> 09:38.380 We're going to click plus track. 09:38.410 --> 09:42.130 It's going to be for render opacity. 09:42.160 --> 09:46.630 We'll go from one all the way down to zero at one second. 09:48.700 --> 09:51.670 And that's going to look like this. 09:53.630 --> 09:54.170 Perfect. 09:54.170 --> 09:55.370 That looks great. 09:56.780 --> 10:00.230 Now we are going to make one for the passive selection box as well. 10:00.230 --> 10:06.950 But I also want to make an animation to hide the offensive selection box, so I'm going to have another 10:06.950 --> 10:07.820 animation. 10:08.510 --> 10:12.680 Called hide offensive box. 10:14.000 --> 10:20.060 We'll add a track for Image Offensive and we're going to do a render opacity again. 10:20.060 --> 10:26.300 And this one will be about 75.75 seconds and it'll go from 1 to 0. 10:26.300 --> 10:28.010 So it's just going to fade out. 10:29.480 --> 10:32.120 Okay, let's make one for the passive box. 10:32.120 --> 10:38.600 I'm going to hide the offensive, show the passive, and it's going to be very, very similar. 10:40.310 --> 10:42.950 So let's make a new animation. 10:43.370 --> 10:47.240 We'll call this passive selection animation. 10:47.900 --> 10:48.920 We'll select it. 10:48.920 --> 10:57.890 We'll add a track, choose Passive selection box, add a transform track, and at zero seconds, our 10:57.890 --> 11:00.650 scale is going to be 1.05 11:04.490 --> 11:05.900 for X and Y. 11:07.550 --> 11:10.310 And at one second it's going to be one. 11:11.260 --> 11:12.460 For X and Y. 11:16.030 --> 11:19.340 And we'll also add a track for render opacity. 11:19.360 --> 11:20.980 So plus track. 11:21.750 --> 11:23.190 Render opacity. 11:23.550 --> 11:27.160 I accidentally got a point right there, but that's okay. 11:27.180 --> 11:30.450 We're going to put render opacity at one here. 11:30.450 --> 11:32.910 I'm going to just add a key and. 11:33.590 --> 11:37.760 We'll go to about 0.75 and put it at zero. 11:38.030 --> 11:43.400 Actually, I need to delete this one and we'll put zero here. 11:47.980 --> 11:49.900 We could go all the way to one. 11:51.940 --> 11:55.300 We just need to see what it looks like on the HUD. 11:56.080 --> 11:59.740 Oh, and we're not playing it, so we'll go ahead and play it. 12:01.220 --> 12:02.810 In the beginning of the game. 12:03.470 --> 12:06.590 By the way, we can kill two birds with one stone. 12:07.980 --> 12:09.840 And play offensive. 12:11.340 --> 12:13.290 The Hyde Offensive. 12:13.320 --> 12:14.730 Box Animation. 12:17.340 --> 12:22.320 And we can also play passive selection animation. 12:24.290 --> 12:25.700 Play animation. 12:26.610 --> 12:30.030 Numb loops to play can be set to zero to get this to loop. 12:30.030 --> 12:32.370 And let's see how this looks. 12:34.750 --> 12:35.110 Okay. 12:35.110 --> 12:36.670 So it's kind of going inward. 12:36.670 --> 12:40.690 And that's because we're scaling the whole image and it's one big one, right? 12:44.040 --> 12:46.530 And didn't really want to loop this one. 12:47.910 --> 12:49.590 We just wanted to play it once. 12:49.980 --> 12:54.630 So, yeah, so we're going to want to fix this a little. 12:55.240 --> 12:58.810 Really want to pad it a little more on the right. 12:58.810 --> 12:59.590 So. 13:00.920 --> 13:03.260 I'll take that passive selection box. 13:04.060 --> 13:06.700 And we'll just add more to the padding on the right. 13:07.580 --> 13:11.330 And let's just tweak this a bit more. 13:11.690 --> 13:17.540 We'll start off with more thickness in the x 1.1. 13:18.260 --> 13:24.800 And for the transform, I'm going to make the translation go over to the right on the X. 13:24.800 --> 13:29.380 This just all has to do with the assets that we're dealing with here. 13:29.390 --> 13:34.910 I'm just really quickly going to set the render opacity to one so I can see where it is and we're just 13:34.910 --> 13:37.640 going to make sure that it's still pretty much centered. 13:38.270 --> 13:41.030 And then I'll put that render opacity back to one. 13:41.870 --> 13:43.370 And playtest. 13:44.870 --> 13:45.290 Okay. 13:45.290 --> 13:47.600 So we overcompensated a bit. 13:57.920 --> 13:59.360 We'll go to about there. 14:03.680 --> 14:05.000 And it's wobbling. 14:05.000 --> 14:09.380 So I'm going to take that X actually go to the graph. 14:21.340 --> 14:21.700 Okay. 14:21.700 --> 14:22.960 It's not wobbling. 14:23.710 --> 14:24.070 Okay. 14:24.070 --> 14:25.090 That looks pretty good. 14:33.570 --> 14:33.930 All right. 14:33.930 --> 14:36.870 I think that is going to look pretty nice. 14:37.260 --> 14:41.010 So we'll do about 45 padding on the right. 14:47.830 --> 14:48.790 And that looks good. 14:48.790 --> 14:59.170 And once we get that opacity fading out again, we can set it to zero at the end and fade it out. 14:59.170 --> 15:01.240 And that should look good. 15:06.350 --> 15:07.250 Excellent. 15:07.340 --> 15:11.390 I think I want the Y to scale down more, though. 15:11.840 --> 15:13.910 We'll scale it down to 0.8. 15:24.550 --> 15:25.630 We'll do point nine. 15:25.750 --> 15:27.050 Okay, so that looks good. 15:27.070 --> 15:34.360 Now I want to deselect an animation that's basically just the same thing, except. 15:35.120 --> 15:36.530 It'll just play once. 15:39.990 --> 15:45.120 So we'll add a new animation Hide passive box. 15:46.370 --> 15:50.510 And just like Hyde offensive box, it's just going to set the render opacity. 15:50.510 --> 15:56.660 We don't even really need to change the transform much, so we'll add a track. 15:57.400 --> 15:59.110 For render opacity. 15:59.870 --> 16:03.680 We'll go from 1 to 0 in a second. 16:04.220 --> 16:06.910 Actually, we're going to go to 0.75. 16:11.770 --> 16:13.210 That's all we're going to do. 16:14.110 --> 16:18.970 So I'm going to play that at the beginning of the game with only one loop. 16:19.730 --> 16:21.440 I'm not going to play the other one. 16:22.320 --> 16:25.770 So we're going to play hide Passive. 16:27.330 --> 16:28.500 Box. 16:32.410 --> 16:36.160 And of course we need to move it over, though, so. 16:39.020 --> 16:41.810 We will give it a transform track. 16:46.550 --> 16:48.590 And we'll just have one key at the beginning. 16:48.590 --> 16:50.900 We're not going to animate its translation at all. 16:50.900 --> 16:55.340 We're just going to move it over a bit, Just make sure that it's in the right spot. 16:56.260 --> 16:57.370 Yeah, perfect. 16:57.400 --> 16:58.510 All right, cool. 16:58.510 --> 17:00.040 So that's going to do it. 17:00.070 --> 17:09.070 We need these for animations, and as soon as we hit that equip button, we need to start playing an 17:09.070 --> 17:11.410 animation on one of these two. 17:11.440 --> 17:18.160 Depending on the type of ability we selected, if we selected one of the offensive abilities, we want 17:18.160 --> 17:24.070 to play that animation over here On the offensive side, if we selected a passive ability, we want 17:24.070 --> 17:26.200 to play the one on the passive side. 17:26.200 --> 17:30.790 And so that is what we'll handle in the next video. 17:30.790 --> 17:32.290 So excellent job. 17:32.290 --> 17:33.250 I'll see you soon.