WEBVTT 00:00.470 --> 00:02.630 Welcome to your next quest. 00:03.520 --> 00:09.160 In this quest, I'd like you to create a select function on the spell globe widget blueprint. 00:09.160 --> 00:14.200 And for this select function, I'd like you to play the select animation, which means you're going 00:14.200 --> 00:16.840 to have to show that select texture. 00:16.870 --> 00:17.470 Right. 00:17.470 --> 00:22.840 So play that animation and while you're at it, why not play a sound when you click and select that 00:22.840 --> 00:23.720 spell globe? 00:23.740 --> 00:25.420 Now we're starting small. 00:25.420 --> 00:28.210 We just want to show the visual effects here. 00:28.210 --> 00:34.810 But as a bonus, deselect all the other globes in the offensive spell tree when selecting one. 00:34.810 --> 00:42.490 So as a bonus, see if you can figure out how to remove those selection circles for other globes that 00:42.490 --> 00:44.380 have previously been selected. 00:44.380 --> 00:49.990 So that way you can click all around the offensive spell tree on different globes and you'll only have 00:49.990 --> 00:51.970 one globe selected at a time. 00:52.120 --> 00:55.300 So pause the video and conquer your quest now. 00:58.600 --> 00:59.290 Okay. 00:59.290 --> 01:03.440 So we need to be able to click on an icon and select it. 01:03.460 --> 01:12.820 So for that reason, I'm going to go into UI spell menu, actually know my globes are in my Globes folder, 01:12.820 --> 01:19.690 spell globes and this is the spell globe button widget that I'm interested in. 01:19.960 --> 01:25.240 So this is what's being used in the spell menu for both the offensive and passive abilities. 01:25.420 --> 01:32.160 So we need a select function that we can call when clicking on a spell globe. 01:32.170 --> 01:38.800 So here in the event graph, I'm going to go ahead and click Add and function. 01:38.800 --> 01:45.160 I'll call this function select and the select function is going to take our selection circle. 01:45.160 --> 01:46.870 Now I'm going to go back and look at that. 01:46.870 --> 01:49.210 It's called image selection. 01:49.240 --> 01:52.000 I now need to check is variable for that. 01:52.000 --> 01:55.000 And I think it's the render opacity that's zero. 01:55.030 --> 01:55.750 Yes. 01:55.750 --> 01:58.580 So it starts off with a render opacity of zero. 01:58.640 --> 02:04.550 So the first thing I'm going to do is get that image selection and call set, render opacity so I can 02:04.550 --> 02:06.350 set it to. 02:07.160 --> 02:08.960 One so we can see it. 02:09.230 --> 02:14.710 Once we can see it, we can play its animation, which we have a select animation. 02:14.720 --> 02:20.330 Going back to the designer, I can see that it's called select animation, so I'm going to call that. 02:20.330 --> 02:21.950 So select animation. 02:22.250 --> 02:23.600 We'll get that. 02:23.630 --> 02:25.610 We'll play animation. 02:27.010 --> 02:28.000 Like so. 02:29.030 --> 02:31.370 And while we're at it, we can play a sound. 02:31.370 --> 02:33.800 So I'm going to play sound 2D. 02:38.100 --> 02:42.550 And we can simply look for a sound for when we click. 02:42.570 --> 02:45.820 Now our buttons are using a specific sound. 02:45.840 --> 02:49.630 It'd be kind of cool to play a different sound from our buttons. 02:49.650 --> 02:55.740 If I go to Warp button and take a look, we have an on clicked sound and we're using. 02:56.410 --> 02:57.880 Button Click zero one. 02:59.150 --> 03:06.600 And I think my wide button is using a different one for my wide button on clicked sound is button click 03:06.600 --> 03:11.690 zero two, so maybe we can use a different one for our spell globes. 03:19.240 --> 03:22.880 I kind of like button click zero four, so I'm going to try using that. 03:22.900 --> 03:24.730 So back to my spell globe button. 03:24.730 --> 03:25.720 I'm going to use that. 03:25.720 --> 03:32.500 So with that right there, we have a function that we can call when our spell globe button is clicked, 03:32.500 --> 03:35.890 and that's going to be the button ring here. 03:36.340 --> 03:38.590 So I can use on clicked. 03:38.590 --> 03:40.990 So I can check is variable for the button. 03:40.990 --> 03:47.560 And as soon as I do that, the events pop up and I can click plus for on clicked and we can call select 03:47.560 --> 03:48.220 right. 03:53.620 --> 03:59.560 So that's the first thing we'll do is we'll call the select function just to see this working. 04:00.070 --> 04:03.760 We'll drag it in, we'll call it, and let's see what happens. 04:03.760 --> 04:06.820 If we click on them, we'll open the spell menu. 04:06.910 --> 04:07.990 There we go. 04:07.990 --> 04:09.760 And it sounds and looks good. 04:09.790 --> 04:11.200 So that was the challenge. 04:11.200 --> 04:12.520 Just that, right? 04:13.030 --> 04:17.500 It even works on the small ones, but the bonus. 04:19.000 --> 04:22.840 Was to deselect all the other globes when clicking on one. 04:23.290 --> 04:26.800 So for that reason, I'm going to need a deselect. 04:27.790 --> 04:36.190 I'm going to add a new function called deselect and deselect will hide that image selection. 04:36.190 --> 04:37.720 So let's get that. 04:37.870 --> 04:39.880 We'll set its render opacity. 04:42.800 --> 04:48.320 The question is, how are we going to deselect all the others once we've selected one of them? 04:48.350 --> 04:49.760 That's the question. 04:49.760 --> 04:55.010 And that's why it was a bonus to this quest, because it's actually a little bit more difficult. 04:55.040 --> 04:56.300 So how are we going to do it? 04:56.300 --> 05:04.730 Well, one way is we can broadcast an event dispatcher that our offensive spell tree can listen for, 05:04.940 --> 05:09.260 so our spell globe can have an on icon selected event. 05:09.260 --> 05:11.660 Dispatcher I'm going to add one. 05:11.660 --> 05:14.930 I'm going to call it on icon selected. 05:15.380 --> 05:18.710 Actually, I'm going to call it on Spell Globe Selected. 05:19.650 --> 05:22.470 And we'll broadcast this when Onclicked. 05:23.530 --> 05:26.020 And in fact, I'm not even going to call select. 05:26.050 --> 05:28.420 I'm just going to broadcast the delegate. 05:29.350 --> 05:32.410 So we'll just hold off on calling select for now. 05:32.410 --> 05:40.090 All we'll do is call on Globe selected and then our offensive spell tree can listen for this. 05:41.400 --> 05:44.220 So I'm going to go ahead and close the buttons down. 05:44.220 --> 05:46.530 I'm going to close my overlay for now. 05:46.620 --> 05:49.890 My spell menu can remain open. 05:49.890 --> 05:52.890 That's fine, but I'm going to get my offensive spell tree. 05:53.590 --> 05:54.730 That's in blueprints. 05:55.300 --> 05:56.500 Spell menu. 05:56.680 --> 05:58.600 Offensive spell tree. 05:58.630 --> 06:01.240 This widget will listen for that event. 06:01.240 --> 06:02.260 Dispatcher. 06:04.070 --> 06:04.460 Now. 06:04.460 --> 06:06.530 It's going to need to listen to that event. 06:06.530 --> 06:11.090 Dispatcher on all of its globes, all nine of them. 06:11.780 --> 06:17.270 Now we can do this in event construct, not pre construct, but construct. 06:17.300 --> 06:23.870 So that's what I'll do here is I'm going to move widget controller set to the side pre construct can 06:23.870 --> 06:25.910 go here we don't need tick. 06:26.060 --> 06:35.120 So in pre construct I'd like to get all of my spell globes here and bind an event to their event dispatcher 06:35.150 --> 06:42.800 that they're broadcasting when they get selected which is the on spell globe selected event dispatcher 06:43.070 --> 06:44.660 so we'll get all of them. 06:44.660 --> 06:52.850 I'm going to start with my spell globe button, the first one, and we're going to type on spell globe 06:52.850 --> 06:53.360 selected. 06:53.360 --> 06:55.790 We're going to assign an event. 06:55.940 --> 06:58.340 We'll do that right here, just right away. 06:58.980 --> 07:04.020 And we're going to assign this same event for all of them. 07:04.020 --> 07:06.750 So I'm going to get all the rest of them. 07:06.750 --> 07:10.890 I'll go ahead and just time lapse, dragging them all in and hooking them up. 07:21.230 --> 07:27.350 Okay, so I have all nine of them and we're binding on spell globe selected event here. 07:27.530 --> 07:33.170 And what do we need to do when the icon has been selected? 07:33.170 --> 07:39.860 We need to deselect all of them except for one, which means this event dispatcher kind of needs to 07:39.860 --> 07:41.540 broadcast information. 07:41.540 --> 07:45.650 It needs to broadcast which of these icons was selected? 07:45.680 --> 07:48.800 So back to the spell globe to the event dispatcher. 07:48.800 --> 07:50.180 Let's select that event. 07:50.180 --> 07:55.610 Dispatcher on spell globe selected and let's add a input to it. 07:55.700 --> 07:59.390 Now, before we do that, I'm going to take this. 07:59.420 --> 08:00.380 We're going to change it. 08:00.380 --> 08:06.830 So I'm going to go ahead and just remove it and we're going to add a input parameter to it. 08:06.860 --> 08:12.260 Now, all the way up at the top of the details panel, we can click plus new parameter and we need to 08:12.260 --> 08:15.410 add an input of type spell globe button. 08:17.600 --> 08:21.720 So it's going to be a spell globe button object reference. 08:21.740 --> 08:26.630 We can compile this and let's see if we broke things in the offensive spell tree. 08:26.660 --> 08:33.380 No, it looks like it updated there, but I do want to make sure that that input has an appropriate 08:33.410 --> 08:33.770 name. 08:33.770 --> 08:36.740 So this will be selected globe. 08:38.030 --> 08:41.390 We'll compile that and it says Selected Globe. 08:41.390 --> 08:42.290 Perfect. 08:42.440 --> 08:49.280 So now in on clicked, we're going to broadcast on Globe Selected, we're going to call it and we're 08:49.280 --> 08:51.980 going to broadcast with a reference to self. 08:52.990 --> 08:53.500 Like. 08:53.500 --> 09:00.490 So now, as soon as a globe has been clicked, we're broadcasting this and the offensive spell tree 09:00.520 --> 09:06.960 now knows which one has been selected so we can literally deselect all of them except for one. 09:06.970 --> 09:13.210 Or we could just deselect them all and then select the one for the first time because we're no longer 09:13.210 --> 09:14.680 actually calling select here. 09:14.680 --> 09:16.240 I can just delete that. 09:16.510 --> 09:22.450 It's going to be the offensive spell tree that selects the one but deselects all the others. 09:22.450 --> 09:26.320 So we can take each of them and call deselect. 09:29.650 --> 09:33.400 And that means we're going to hook up all of these. 09:44.040 --> 09:44.550 All right. 09:44.550 --> 09:47.070 So making sure we got all nine of them. 09:47.070 --> 09:53.790 We're going to deselect all nine, and then we can just call select on the one that was passed through. 09:54.620 --> 09:55.580 Select. 09:56.240 --> 10:05.120 So in other words, deselect all but the one we're selecting and that should result in the effect we 10:05.120 --> 10:05.420 want. 10:05.450 --> 10:10.100 So I'm going to save all first press play and select one. 10:10.940 --> 10:16.220 And now it looks like we're selecting only one, but really we're just deselecting all the others. 10:16.250 --> 10:22.280 Now, that's not to say that if we click on the passive abilities that we're going to deselect any of 10:22.280 --> 10:23.810 those in the offensive abilities. 10:23.810 --> 10:26.810 So that's something else that we need to handle. 10:28.190 --> 10:31.040 And also we're not even selecting the passive ones. 10:31.040 --> 10:36.560 We need to make sure to do this same thing here that we're doing in the offensive spell tree. 10:36.590 --> 10:40.280 We have to do this in the passive spell tree too, and then it'll work. 10:40.280 --> 10:43.010 So let's go to the passive spell tree and it's simpler. 10:43.010 --> 10:44.350 It only has three. 10:44.360 --> 10:47.840 So in event construct, I'm going to delete event tech. 10:47.870 --> 10:49.340 We're going to do what we did here. 10:49.340 --> 10:56.030 We're going to take each of our three icons, which we have to make sure our variables so we'll check 10:56.060 --> 10:59.330 is variable and we'll grab those three icons. 10:59.330 --> 11:03.530 Those I keep calling them icons, they're the spell globes. 11:03.530 --> 11:05.390 We'll go ahead and get all three of them. 11:05.390 --> 11:08.870 They don't have any meaningful names, but that's okay. 11:08.990 --> 11:14.360 And we're going to assign on spell globe selected. 11:17.220 --> 11:19.560 Just like we did in offensive spell tree. 11:19.590 --> 11:21.210 That's number one. 11:22.110 --> 11:27.150 Take all three of them called deselect on all three. 11:27.390 --> 11:28.890 We'll hook this up to the event. 11:28.890 --> 11:29.850 Dispatcher. 11:30.830 --> 11:35.690 And after Deselecting all of them we'll call select on the selected one. 11:38.520 --> 11:39.700 And that's it. 11:39.720 --> 11:42.450 And if we go back and play test. 11:42.810 --> 11:45.240 Then it works for the passive ones. 11:45.240 --> 11:49.710 But again, it only works individually for each one. 11:49.710 --> 11:56.600 So we can select both an offensive and a passive spell, which is not exactly what we want. 11:56.610 --> 12:03.810 So our next task is when we select an offensive ability, we deselect the passive abilities, and when 12:03.810 --> 12:07.200 we select a passive ability, we deselect the offensive ones. 12:07.200 --> 12:11.070 So that will be our next task and we'll do that next. 12:11.190 --> 12:12.210 I'll see you soon.