WEBVTT 00:06.810 --> 00:07.710 Welcome back. 00:07.710 --> 00:12.620 So now our spell globes know when a cooldown has started and when it's ended. 00:12.630 --> 00:15.180 We also know the time remaining. 00:15.180 --> 00:19.260 We haven't tested that, but on cooldown start, we should just print that. 00:19.260 --> 00:21.630 Let's see what that time remaining is. 00:21.630 --> 00:27.060 So if we press play and launch, we see three seconds and that is indeed my cooldown time. 00:27.060 --> 00:34.560 If I go to cooldown Firebolt and change that from 3 seconds to 2 seconds and just quickly play test 00:34.560 --> 00:36.390 that we see two seconds. 00:36.390 --> 00:42.450 So we do have that time and that's really all we need to be able to update the time in the HUD. 00:42.450 --> 00:45.930 So in this video, we are going to do that. 00:45.960 --> 00:52.350 So first of all, what we'll do is when the cooldown starts, we're going to take our time remaining 00:52.350 --> 00:53.670 and we're going to store that. 00:53.670 --> 00:55.800 So we're going to promote it to a variable. 00:55.800 --> 01:01.260 We can just let it be called time remaining and we'll set that here in cooldown Start. 01:01.260 --> 01:02.760 So that's number one. 01:02.760 --> 01:10.450 Now, as soon as the cooldown has started, we need to make it look like we're in cooldown mode here 01:10.450 --> 01:11.650 in our spell globe. 01:11.650 --> 01:16.060 Now remember, we created a function to make our background darker. 01:16.150 --> 01:24.610 We have a set background tint and this is a function that can set our background to a tint. 01:24.640 --> 01:26.650 We can remind ourselves what it does. 01:26.680 --> 01:28.960 It makes a linear color that's gray. 01:28.960 --> 01:34.570 It has an alpha of one and red, green blue values of all the same value that we pass in that gives 01:34.570 --> 01:35.860 us a gray value. 01:35.860 --> 01:42.310 And as we've seen before, that's going to make our globe much darker, especially with a really low 01:42.310 --> 01:45.250 value like 0.1 or even lower. 01:45.370 --> 01:51.100 So as soon as our cooldown starts, we can set that to a dark color and let's just test that. 01:51.100 --> 01:51.730 There it goes. 01:51.730 --> 01:52.960 It's darker now. 01:52.960 --> 01:55.780 We never set it back, but you get the point. 01:55.780 --> 02:01.930 We can set this to something like 0.1, 0.05 will be even darker. 02:03.300 --> 02:07.290 And we can also make it black if we wanted to set it to zero. 02:07.320 --> 02:08.820 That will make it black. 02:09.150 --> 02:09.720 Right. 02:09.720 --> 02:11.490 So pretty cool. 02:12.070 --> 02:19.260 I'm going to set it to a low value 0.02, maybe 0.01 might even be cool. 02:19.270 --> 02:20.560 So that's really dark. 02:20.560 --> 02:21.670 Actually, that's too dark. 02:21.670 --> 02:23.140 0.05 was good. 02:23.320 --> 02:26.440 So we have the ability to make it dark. 02:26.440 --> 02:29.110 We want to make it bright again, of course, too. 02:29.110 --> 02:32.500 But that's one thing we want to do is make it dark right now. 02:32.500 --> 02:37.930 Another thing I want to do is show or hide our cooldown text. 02:37.930 --> 02:39.250 Remember, we have that. 02:39.280 --> 02:43.270 We can't see it because our text is set to the empty string. 02:43.270 --> 02:46.120 But if we give it a value, say 99. 02:46.120 --> 02:51.880 Well now we have text in all of these and by default we shouldn't really see that. 02:51.880 --> 02:59.170 So really, we want this to be hidden, but we want to show it when we're in cooldown mode so we can 02:59.170 --> 03:02.890 take our text cooldown and we can show it. 03:02.920 --> 03:05.530 We can do that with set render opacity. 03:06.160 --> 03:09.520 Set render opacity is a good way to show or hide it. 03:09.520 --> 03:13.190 And if we're in cooldown mode, we want to set that to one. 03:13.850 --> 03:17.750 But if we're not in cooldown mode, we want to set it to zero. 03:17.750 --> 03:25.130 And we also want to set our background tint all the way back to one so that way it's not dark anymore. 03:25.130 --> 03:31.550 So to make this really easy, I'd like a function to set the state of our icon. 03:31.550 --> 03:36.580 We can set it in the cooldown state or the not cooldown state, right? 03:36.590 --> 03:37.940 The default state. 03:38.180 --> 03:44.930 So that's all I'm going to do is I'm going to first of all, we can make this tint a variable if we 03:44.930 --> 03:45.380 want. 03:45.410 --> 03:47.870 We can make it the cooldown tint. 03:49.350 --> 03:51.850 And then we can collapse this to a function. 03:51.870 --> 03:57.630 So I'm going to right click Collapse two function and this will be set cooldown state. 03:58.520 --> 04:01.860 And now we have a function that can do that. 04:01.880 --> 04:05.720 Now I can also make a function that sets it back to default. 04:05.720 --> 04:13.280 So if I copy these nodes and just come out to the event graph, paste them and then collapse these to 04:13.280 --> 04:14.450 another function. 04:14.450 --> 04:20.420 Except instead of cooldown tent, we set the tent back to one and instead of an opacity of one, we 04:20.450 --> 04:23.420 set the render opacity to zero for the text. 04:23.450 --> 04:30.110 This can be for the default state, so we'll collapse this to a function called set default state. 04:30.930 --> 04:32.370 But I'm not going to call it right now. 04:32.370 --> 04:34.230 I'm just going to delete it for now. 04:35.010 --> 04:35.340 Okay. 04:35.340 --> 04:41.610 So after we've stored the time remaining and we've set the cooldown state, we need to update our cooldown 04:41.610 --> 04:42.360 text. 04:42.390 --> 04:44.880 Now, a timer is a great way to do this. 04:44.910 --> 04:47.490 This allows us to keep things out of tick. 04:47.520 --> 04:53.520 We can just set a timer while the cooldown is going and we know the time remaining, so we just need 04:53.520 --> 04:55.140 to update that timer. 04:55.140 --> 04:59.030 And timers are cool because we can choose their update frequency. 04:59.040 --> 05:04.320 They don't have to be every tick, so I'm going to call set timer by event. 05:05.230 --> 05:07.690 And this allows me to have an event hooked up. 05:07.810 --> 05:11.490 And the time here is where we can specify a frequency. 05:11.500 --> 05:13.900 So I can promote this to a variable. 05:14.570 --> 05:22.340 And we can call this the timer frequency and we can set that to update however often we want. 05:22.370 --> 05:29.660 For example, 0.5, that would be every 0.5 seconds or 0.1 would be ten times a second, and so on. 05:29.840 --> 05:32.900 Now we can take our return value from the timer. 05:32.930 --> 05:34.570 This is a timer handle. 05:34.580 --> 05:39.680 We can promote it to a variable called cooldown timer handle. 05:39.920 --> 05:46.520 So that way we can have that handle and we can hook up an event to this timer. 05:46.520 --> 05:54.050 So we're going to right click type custom event and add one and we'll call this update timer and we'll 05:54.050 --> 05:55.040 hook that up. 05:55.190 --> 05:58.040 So what are we going to do in update timer? 05:58.370 --> 06:04.130 Well, our timer frequency is what we can use to update our time remaining. 06:04.130 --> 06:10.820 So our time remaining starts off at some value when the cooldown starts and as the cooldown is running, 06:10.820 --> 06:12.740 every timer frequency, right? 06:12.840 --> 06:20.670 Every 0.1 seconds, we're going to be executing this event, at which point we can take time remaining 06:20.670 --> 06:24.810 and set it equal to itself, minus the timer frequency. 06:24.810 --> 06:29.280 So we're subtracting off that timer frequency each time. 06:29.280 --> 06:34.590 So we're going to take time remaining and set it equal to time remaining minus. 06:35.100 --> 06:38.970 So we'll have a subtract node and we'll use the timer frequency. 06:40.190 --> 06:46.040 So that way we're updating time remaining each time we update the timer. 06:46.280 --> 06:52.430 Now what we can do is our time remaining is what we want to set our cooldown text to. 06:52.430 --> 06:57.800 So our text cooldown, we can get that and call, set, text for it. 06:57.800 --> 07:08.180 So set text and we're going to use set text the function which takes in an F text and the F text is 07:08.180 --> 07:09.710 going to be our time remaining. 07:09.710 --> 07:17.900 Except the thing is, we may want it to be rounded to a specific number of decimals or we may wish to 07:17.900 --> 07:19.790 have an integer, right? 07:19.790 --> 07:25.760 So we want to use a to text to text float. 07:25.760 --> 07:35.540 And here we can specify how many digits I would like one digit to the right of the decimal point only 07:35.540 --> 07:37.070 and we can hook that in. 07:37.780 --> 07:45.700 Now, I've found when doing these timers that we definitely want to make sure that we never get anything 07:45.700 --> 07:47.140 that doesn't make sense. 07:47.140 --> 07:54.040 So if for some reason time remaining is negative or something, well, we can prevent showing a negative 07:54.040 --> 07:58.990 value by clamping the float between zero and itself. 08:01.610 --> 08:05.030 And so that's what we're going to pass into our two text node. 08:05.970 --> 08:13.170 Now, after setting the text, we need to know if our timer is up, if our time remaining has reached 08:13.170 --> 08:20.400 zero, because then we can clear the timer handle and it doesn't have to keep firing off anymore. 08:20.610 --> 08:25.350 So we're going to have a branch and we're going to check our time remaining. 08:26.410 --> 08:28.600 We're just going to see if it's reached zero. 08:28.600 --> 08:31.840 So I'm using a less or equal. 08:32.680 --> 08:39.910 And if it has reached zero, we'll take our cooldown timer handle and use clear and invalidate. 08:41.110 --> 08:42.430 Timer by handle. 08:43.490 --> 08:47.480 Now, at this point, we know that our timer has elapsed. 08:47.510 --> 08:54.980 The cooldown should be over, and at that point we can call that set default state for our icon set 08:55.010 --> 08:57.470 icon default state. 08:59.860 --> 09:02.200 We called it set default state. 09:02.200 --> 09:07.040 So we can call that and it will no longer be dark and we'll hide that number. 09:07.060 --> 09:10.450 So if we press play well, we do still see the number. 09:10.450 --> 09:16.480 So the number itself should be set to zero, render opacity by default. 09:16.480 --> 09:19.180 So we can do that in the designer. 09:21.620 --> 09:25.730 We'll take our render opacity, set it to zero by default. 09:25.730 --> 09:29.300 In fact, we can do that in event pre construct. 09:29.810 --> 09:33.140 We'll take text cooldown and call set. 09:33.140 --> 09:34.940 Render opacity. 09:35.840 --> 09:40.820 And just set it to zero there that way, by default, we don't see it. 09:40.820 --> 09:43.790 But when we have a cooldown, let's look at that icon. 09:44.090 --> 09:44.960 Oh, look at that. 09:44.960 --> 09:50.450 And okay, so we're not updating the text properly. 09:50.720 --> 09:53.210 Let's go back and find out why. 09:53.360 --> 09:56.480 And of course, we do want this looping, don't we? 09:56.510 --> 09:58.280 Because it just happened once. 09:58.280 --> 10:04.130 And as long as we haven't cleared and invalidated it yet, we want it to keep going. 10:04.130 --> 10:05.840 So let's try that with looping. 10:06.600 --> 10:07.620 And there we go. 10:07.620 --> 10:11.880 So that is looking excellent and we can't fire. 10:11.880 --> 10:16.110 And it makes sense that we can't fire because we can see down there that it's grayed out. 10:20.740 --> 10:21.790 Excellent. 10:21.820 --> 10:28.150 Now, one thing I don't like is when the number goes down to a single digit. 10:28.150 --> 10:36.490 So I'm going to go back to my two text and have a minimum number of fractional digits and just say that 10:36.490 --> 10:38.530 we always need a 0.0 there. 10:38.530 --> 10:46.120 So I'm going to have a one as a minimum, and that way we'll always have at least one digit to the left 10:46.120 --> 10:48.040 and one digit to the right. 10:48.670 --> 10:50.530 And now we have a working timer. 10:50.560 --> 10:51.580 This is great. 10:51.610 --> 10:54.340 Now, all of this could be collapsed to a function. 10:54.550 --> 10:57.940 So I'm going to collapse it to make this neat. 10:57.970 --> 11:02.230 I'm going to call this update cooldown timer. 11:02.560 --> 11:06.380 And now this doesn't look so out of control. 11:06.400 --> 11:14.080 So really, our innocent looking little spell globe is actually kind of a more serious blueprint, right? 11:14.110 --> 11:19.750 We might even want to consider commenting some of this so this can be set. 11:19.780 --> 11:21.280 Widget controller. 11:22.670 --> 11:28.700 This can be bind to ability info delegate. 11:30.230 --> 11:36.320 Here we can say end cooldown, change task. 11:36.350 --> 11:37.970 If it exists. 11:38.570 --> 11:43.100 And then all this is just listening for the cooldown change. 11:43.100 --> 11:43.730 Right? 11:44.810 --> 11:49.430 So we'll go ahead and just put this part in a comment. 11:49.670 --> 11:53.720 Listen for cooldown. 11:54.440 --> 11:54.950 Wow. 11:54.980 --> 11:55.950 I can't type today. 11:55.970 --> 11:57.740 Cooldown, Change. 11:58.510 --> 12:02.650 And then here we're handling the cooldown timer. 12:02.920 --> 12:08.980 So we'll say handle cooldown, timer, something like that. 12:08.980 --> 12:11.500 And since this little node looks lonely. 12:13.120 --> 12:15.400 We're going to put this poor little guy in here. 12:17.310 --> 12:17.880 There you go. 12:17.880 --> 12:18.990 Now you have a home. 12:20.220 --> 12:21.500 All right. 12:21.510 --> 12:23.230 This is looking nice. 12:23.250 --> 12:28.710 Now, actually, this part doesn't look so nice, so I'm going to collapse it to a function just because 12:28.710 --> 12:35.310 we're going to, say set cooldown, text or hide cooldown, text collapse to function, hide cooldown, 12:35.310 --> 12:36.120 text. 12:36.840 --> 12:40.670 Just because I want this all looking nice and neat and now it is. 12:40.680 --> 12:42.540 I'm going to just select them all and hit. 12:42.540 --> 12:44.580 Q And now they're all lined up. 12:44.880 --> 12:46.680 All right, Excellent job with this. 12:46.680 --> 12:53.640 This is a great milestone because it really means a lot to your players of your game when they can see 12:53.640 --> 12:54.780 your cooldown. 12:54.780 --> 12:59.730 If you can't cast a spell and it looks like you should with Mana, right? 12:59.730 --> 13:02.520 You're like, Hey, I have mana, why can't I cast my spell? 13:02.520 --> 13:08.070 Well, if you see something like this with a cooldown, counting down like a little countdown timer, 13:08.100 --> 13:12.600 the abilities spell icon is grayed out. 13:12.600 --> 13:15.990 You know that You can't cast it until that reaches zero. 13:15.990 --> 13:22.530 So it's just a really subtle but very important feature of an RPG game. 13:22.530 --> 13:24.320 And now you have it. 13:24.330 --> 13:25.260 Excellent. 13:25.260 --> 13:27.240 So I'm very proud of you. 13:27.270 --> 13:28.440 Awesome job. 13:28.440 --> 13:35.550 We're now ready to start implementing our experience points and have Aura start leveling up and then 13:35.550 --> 13:38.970 it's going to really start getting pretty interesting. 13:38.970 --> 13:42.960 So excellent job and I'll see you in the next video.