WEBVTT 00:07.070 --> 00:07.520 Okay. 00:07.520 --> 00:13.640 So I have my progress bar and I'd like a ghost bar and I'd like that to be a property of the parent 00:13.640 --> 00:14.390 class. 00:14.390 --> 00:16.820 So I'm going to add a new progress bar. 00:17.180 --> 00:24.380 We're going to drag that on to the route overlay and it's going to be just above. 00:24.380 --> 00:32.420 So it's behind our progress bar and I'm going to make it fill so we can see it there and we'll go ahead 00:32.420 --> 00:35.750 and make a function for updating it just like we have. 00:35.750 --> 00:41.240 Update front fill brush, we'll make an update Ghost fill brush. 00:41.450 --> 00:47.120 So that means I need this progress bar to have a good name progress bar. 00:47.120 --> 00:52.850 We'll call it ghost and check is variable and then bring it in. 00:54.380 --> 00:57.830 And we're going to call set style. 00:58.280 --> 01:04.100 We're just going to use the setter and make progress bar style. 01:04.700 --> 01:08.800 And make slate brush for the background image. 01:08.810 --> 01:15.260 I'd like the background to also be transparent, so we'll take our tint. 01:15.590 --> 01:17.510 We'll make a slate color. 01:17.720 --> 01:23.330 I'm just going to bring it down to Alpha of zero so it's transparent. 01:23.840 --> 01:28.790 And then for our fill image, we'll also make a slate brush. 01:29.680 --> 01:32.140 So make slate brush. 01:32.170 --> 01:38.560 Actually, this one will be promoted to a variable and this will be our ghost fill brush. 01:40.290 --> 01:42.120 Now, we could stick it into progress. 01:42.120 --> 01:43.520 Bar properties. 01:43.530 --> 01:45.360 I'm going to call it Ghost bar. 01:45.360 --> 01:50.220 Fill brush, though, and we'll go ahead and stick it in that progress. 01:50.220 --> 01:57.180 Bar Properties category and Ghost Bar Fill Brush will compile and set the brush. 01:57.450 --> 02:06.180 And for the tint here, I'm going to set the alpha to 0.5 and make it a little darker like so. 02:06.600 --> 02:14.940 And we can hook this up and see what it looks like if we compile and fill up that percent. 02:16.220 --> 02:19.360 And it looks like we still have fill color and opacity. 02:19.370 --> 02:20.570 It's blue. 02:20.600 --> 02:22.280 I'm going to change that. 02:22.280 --> 02:29.750 So it's desaturated and now we can see that ghost and I'd like it a little bit darker. 02:29.750 --> 02:38.830 So I'm going to take the ghost bar, fill brush and make it just a bit darker, like so let's compile. 02:38.840 --> 02:40.400 And that's what it looks like. 02:40.400 --> 02:45.230 So we'll have just kind of a faint ghost, clear brush. 02:45.230 --> 02:52.070 It could be a little bit higher on the alpha, so the tint can be probably 0.75. 02:52.960 --> 02:54.970 But we can always tweak that. 02:55.660 --> 02:58.900 And we can see what it looks like if we. 02:59.780 --> 03:03.830 Go ahead and knock this health bar down a bit. 03:03.830 --> 03:06.110 Yeah, we can see a little bit of a shadow there. 03:06.110 --> 03:07.250 That looks pretty good. 03:08.490 --> 03:15.870 So we have our health bar and I can go ahead and collapse these nodes to a function. 03:17.110 --> 03:20.050 So we're going to right click collapse the function. 03:20.050 --> 03:25.240 We'll call this update Ghost fill brush. 03:25.960 --> 03:26.650 Cool. 03:27.680 --> 03:34.760 Now, if we look at our enemy health bar, we have these events that we're binding and we're calling 03:34.760 --> 03:38.090 set percent on the progress bar for the front. 03:38.270 --> 03:43.400 But it'd be nice if we'd have one function that could take care of the progress bar and handle everything 03:43.400 --> 03:46.880 else as well related to the Ghost bar. 03:47.060 --> 03:55.010 So why don't we create a set percent function for the progress bar on the parent class? 03:55.010 --> 04:01.400 So I'm going to add a function and we'll call this set bar percent. 04:01.700 --> 04:08.000 And I'd like this to take in the input parameters for value and max value. 04:08.000 --> 04:16.880 So I'm going to add a float input and we'll call this one value and we'll add a new float input called 04:17.000 --> 04:18.530 Max value. 04:19.280 --> 04:26.480 And then what we can do is set percent on the progress bar, the main one, it's called Progress Bar 04:26.480 --> 04:27.360 front. 04:27.360 --> 04:33.330 We can get it and call set percent on it like so. 04:34.500 --> 04:36.750 And we can do the safe divide here. 04:36.750 --> 04:45.510 So let's go ahead and do Safe Divide right here with new value and max value and hook that in. 04:46.480 --> 04:50.570 So that we can use in enemy health bar. 04:50.590 --> 04:54.250 So right here we can call set bar percent. 04:55.390 --> 04:59.440 Like so and just pass in health and max health. 05:00.220 --> 05:02.980 So we'll go ahead and call that function here. 05:03.340 --> 05:07.090 And we know that the function itself takes care of the safe divide. 05:07.510 --> 05:09.660 We'll call that down here as well. 05:09.670 --> 05:13.450 So I'm just going to copy these nodes control D down here. 05:14.000 --> 05:18.290 And remove those and replace with this. 05:18.650 --> 05:21.470 Now, let's just make sure it's still working. 05:22.770 --> 05:24.210 So we'll go ahead and. 05:26.000 --> 05:27.020 Do some damage. 05:27.020 --> 05:29.450 It looks like it's working perfect. 05:29.570 --> 05:35.780 And now we're just calling one function and then our parent class can handle what happens. 05:35.780 --> 05:39.790 And in particular, we can handle what happens with the ghost bar. 05:39.800 --> 05:46.190 So the ghost bar should trail along behind right now for this progress bar. 05:46.190 --> 05:54.410 I'm never, ever going to want it to start out less than full, so I'd like our progress bars to both 05:54.410 --> 05:58.190 start off completely full with a percent of one. 05:58.190 --> 06:00.590 So I'm going to do that for both of them here. 06:01.670 --> 06:07.550 And that way if we press play and we start doing damage, we'll see that it's already full. 06:07.550 --> 06:11.180 We don't want to have to deal with any complex edge cases. 06:11.180 --> 06:16.250 We're just always going to start off full if we ever need it to start off half full or whatever. 06:16.250 --> 06:17.570 We'll take care of that then. 06:17.570 --> 06:23.060 But I just wanted to be able to start off full and we can deal with the ghost bar interpolation now. 06:23.180 --> 06:26.540 So in the event graph I'm going to use event tick. 06:28.490 --> 06:36.470 And we're going to interpolate a float value and that's going to be a target value that will follow 06:36.470 --> 06:39.650 the percent when we set our bar. 06:39.980 --> 06:46.130 So when we set our bar percent, we're going to want to be able to set a target value that our ghost 06:46.130 --> 06:50.030 can interpolate to, just like we did with our ghost globe. 06:50.060 --> 06:52.180 So I'm going to make a new variable. 06:52.190 --> 06:53.410 It's going to be a float. 06:53.420 --> 06:57.530 We're going to call this ghost percent target. 06:57.770 --> 06:59.240 We'll change it to float. 06:59.270 --> 07:00.410 We're going to compile. 07:00.410 --> 07:02.810 It's going to have a default value of one. 07:02.810 --> 07:07.760 So it starts off full and every frame we're going to interpolate to it. 07:07.760 --> 07:10.850 So we're going to use F interpolation to. 07:13.000 --> 07:16.390 And the current value is going to be the ghost bar percent. 07:16.390 --> 07:19.240 So we're going to get our progress bar Ghost. 07:19.270 --> 07:21.010 We're going to call get percent. 07:22.210 --> 07:27.040 We're going to hook that into the current and the target will be ghost percent target. 07:27.160 --> 07:31.960 Now we do need to plug in delta time and an interp speed. 07:32.020 --> 07:33.160 I'm just going to put. 07:33.190 --> 07:34.240 We'll use one for now. 07:34.240 --> 07:35.350 That's fine. 07:35.500 --> 07:41.380 And the return value we can use to set the percent on the Ghost Progress bar. 07:41.440 --> 07:47.170 So we'll get progress bar ghost call set percent on that. 07:48.820 --> 07:50.380 Passing in that percent. 07:51.540 --> 07:53.580 And this can happen every frame. 07:54.930 --> 07:57.750 And this can also be actually refactored. 07:58.440 --> 08:02.850 We can collapse it into a function to interpolate the ghost bar. 08:02.850 --> 08:04.740 So we're going to collapse this. 08:06.670 --> 08:08.770 And we'll call this Interp. 08:09.250 --> 08:11.170 Ghost Bar. 08:12.500 --> 08:18.020 Now, of course, if we're using event tech, that means we're going to go into our enemy health bar. 08:18.850 --> 08:21.010 And right click event. 08:21.040 --> 08:23.410 Tick add call to parent function. 08:23.440 --> 08:26.080 Make sure that these are all hooked up as well. 08:26.880 --> 08:35.310 Okay, So that just means we need to handle setting that interpolation target value and Interp ghost 08:35.310 --> 08:35.780 bar. 08:35.790 --> 08:39.570 Looks like it doesn't have a name for that input. 08:39.600 --> 08:41.310 That should be called Delta Time. 08:41.310 --> 08:45.480 So we're going to call this Delta time like so. 08:45.570 --> 08:46.830 Compile, save. 08:46.830 --> 08:48.660 I'll go ahead and save all at this point. 08:50.150 --> 08:54.680 Okay, so progress bar has a set bar percent, right? 08:54.680 --> 09:01.460 And we may wish to have a delay before we actually set that so we can do it. 09:01.460 --> 09:12.860 Just like with the Ghost globe, we can make a custom event and we can call this update Ghost Interp 09:12.890 --> 09:17.570 targets and this can receive an input of type float. 09:18.290 --> 09:23.750 We'll call this target and we'll call this event from set bar percent. 09:24.530 --> 09:27.980 So Update Ghost Interp Target. 09:28.010 --> 09:32.840 We'll pass in the percent, which is the result from the safe divide. 09:34.230 --> 09:34.530 Like. 09:34.530 --> 09:35.100 So. 09:35.100 --> 09:37.440 And we can also compile this. 09:37.470 --> 09:44.100 Oh, and because I changed the input name to Target and compiled, that's going to mean this needs to 09:44.100 --> 09:45.390 be refreshed here. 09:46.750 --> 09:50.210 So now it's called Target and we can pass that in. 09:50.230 --> 09:53.410 Now, when we call this, we can simply delay. 09:55.270 --> 10:02.650 I'll just delay for a second and then we'll set our ghost percent target. 10:04.730 --> 10:07.340 To the value passed in here. 10:08.150 --> 10:12.860 Like, so compile and we can test this out. 10:14.360 --> 10:15.710 So I'm going to press play. 10:16.370 --> 10:18.590 I'm going to do some damage. 10:21.450 --> 10:25.770 And we see a second delay before it interpolates down. 10:27.360 --> 10:29.330 And it's interpolating a little slow. 10:29.340 --> 10:33.150 We can adjust that, but we have that little bit of a delay. 10:38.630 --> 10:40.280 And it is a little hard to see. 10:40.280 --> 10:41.840 So we might zoom in a little bit. 10:42.680 --> 10:52.120 I'd like to go into Ghost bar and change my interp speed from one to a little faster, perhaps five. 10:52.130 --> 10:55.280 We can test that out and I'd like to zoom in a little. 10:55.280 --> 10:59.300 So I'm going to go to character or a or a character. 10:59.300 --> 11:01.790 Let's zoom in that spring arm a bit. 11:01.820 --> 11:05.000 We'll go from 800 ish to about 400. 11:05.890 --> 11:11.200 So we can see a little bit closer and let's do some damage. 11:21.840 --> 11:23.160 I think that looks great. 11:23.160 --> 11:27.510 And of course, zooming in isn't actually going to make that widget smaller. 11:27.510 --> 11:33.540 We're drawing it at a desired size, so I'm going to stick it back up to 800 for the target arm length 11:33.540 --> 11:38.790 and we can take our progress bar desired size and edit that if we want to. 11:38.820 --> 11:47.010 So I'm going to take my box width and I'll go up to 90 and box height can go up to eight or so. 11:49.620 --> 11:50.790 I think that looks good. 11:57.200 --> 11:58.220 Perfect. 11:58.250 --> 11:59.600 That's looking awesome. 12:03.530 --> 12:10.190 And obviously you can just adjust this to your heart's content and make this look however you want it 12:10.190 --> 12:10.910 to. 12:11.390 --> 12:13.730 I think it's looking pretty good so far. 12:14.570 --> 12:22.520 Now, there's one last thing I'd like to do, and that is I'd like to hide the bar until we set its 12:22.520 --> 12:23.480 value. 12:23.960 --> 12:25.940 So how are we going to do that? 12:26.630 --> 12:34.910 Well, every time we call our function set bar percent, we can start some kind of count or timer. 12:35.240 --> 12:39.690 And each time we set the percent, we can reset that timer. 12:39.710 --> 12:45.470 Now we're calling this custom event update, Ghost and Target every time we set the bar percent. 12:45.770 --> 12:50.240 So if we go to this, we can set a timer here. 12:52.320 --> 12:53.370 Now we have an option. 12:53.370 --> 12:57.000 If we type set timer, we can set timer by event. 12:57.030 --> 12:59.250 We can set timer by function name. 12:59.250 --> 13:04.350 If we choose set timer by event, we have the option to create an event here. 13:05.880 --> 13:14.430 So if I make a custom event, then we can have this event fired off after a certain amount of time that 13:14.430 --> 13:17.730 we specify here with set timer by event. 13:18.420 --> 13:25.260 Now each time we update the ghost interp target, or at least each time the custom event is called, 13:25.650 --> 13:33.630 we can reset this timer so that it starts over and at the end of that timer we can hide our progress 13:33.630 --> 13:34.260 bar. 13:34.410 --> 13:37.650 So at the end of the timer, we're going to call this custom event. 13:37.650 --> 13:40.620 I'm going to call it Hide Progress Bar. 13:41.190 --> 13:46.770 I'm going to hook that up so it's bound to the timer and we'll take the return value from set. 13:46.800 --> 13:52.020 Timer by event will promote it to a variable called hide timer. 13:52.050 --> 13:53.940 This is a timer handle. 13:54.240 --> 14:01.830 Now, as soon as we've set this right here, then we're going to start that delay just as we were doing 14:01.830 --> 14:04.020 before, like so. 14:04.020 --> 14:06.010 But now we have a timer handle. 14:06.160 --> 14:12.160 And if that timer is already running, I want to clear it before setting the timer again. 14:12.160 --> 14:17.920 And that way we'll clear it so it won't actually hit that end event. 14:17.950 --> 14:19.790 It'll actually restart. 14:19.810 --> 14:23.170 So I'm going to take this timer handle called hide timer. 14:23.290 --> 14:28.540 We're going to grab it and we can call clear and invalidate timer by handle. 14:28.540 --> 14:30.490 So we'll do that first. 14:32.320 --> 14:34.360 Before we set the timer again. 14:34.360 --> 14:36.340 And I'd like to just get this. 14:36.970 --> 14:39.490 Float value just up and out of the way. 14:40.030 --> 14:41.920 So we'll stick it up here for now. 14:42.250 --> 14:49.270 So now what we can do is we're first clearing the timer and then we're setting the timer and we can 14:49.270 --> 14:50.290 have a time. 14:50.290 --> 14:53.740 Now, let's just say I'd like this to last for two seconds. 14:54.190 --> 15:02.470 So two seconds after updating based on a change in our health, then this function will be called and 15:02.470 --> 15:05.320 we'll go ahead and hide our progress bar. 15:07.300 --> 15:09.430 So if we call set visibility. 15:10.100 --> 15:15.330 On self, then we can set the visibility to hidden. 15:15.380 --> 15:21.260 Now that means every time we actually set the progress bar, we have to show it again. 15:21.290 --> 15:28.070 So as we're setting the value of the progress bar, we're going to set visibility to visible. 15:28.070 --> 15:31.490 And then after two seconds, we'll set it to hidden. 15:31.520 --> 15:35.950 So what we'll do is in set bar percent, we'll set visibility here. 15:35.960 --> 15:38.660 We're going to say set visibility. 15:40.030 --> 15:41.620 And we'll set it to visible. 15:44.450 --> 15:48.670 And then, of course, we're setting our timer, which will set it to hidden. 15:48.680 --> 15:50.060 Let's see how this works. 15:51.900 --> 15:53.310 So we start off visible. 15:53.340 --> 15:54.930 Two seconds later, they're hidden. 15:54.930 --> 16:00.560 If we go ahead and hit the enemy, we see it and two seconds later it goes away. 16:00.570 --> 16:04.410 Now, if I keep hitting it, it's going to keep resetting that timer. 16:04.410 --> 16:10.830 So we're never actually going to hide it until two seconds after the last time that we updated it and 16:10.830 --> 16:11.890 then it goes away. 16:11.910 --> 16:18.900 Now, I chose two seconds, so it'd be easy to test, but we can set this to a larger value such as 16:18.900 --> 16:20.550 6 or 8 seconds. 16:20.640 --> 16:22.380 I think that would be nice. 16:22.380 --> 16:24.330 Maybe 5 or 6 is good. 16:24.510 --> 16:30.210 And so that's going to work just fine and I can go ahead and move this. 16:30.240 --> 16:31.710 We'll keep it down right there. 16:32.390 --> 16:32.870 Okay. 16:32.870 --> 16:36.890 So that's going to hide our progress bar. 16:36.920 --> 16:37.940 Now, here's the thing. 16:37.940 --> 16:39.170 We're using Tick, right? 16:39.170 --> 16:41.120 And we might have a lot of enemies. 16:41.120 --> 16:49.310 So a nice optimization we can do is to avoid doing our interp while our visibility is hidden. 16:49.430 --> 16:57.710 So what I'd like is a set visibility function that will also set a member variable, a boolean that 16:57.710 --> 16:59.640 we can check in tick. 16:59.660 --> 17:03.650 So here's what I'll do is I'll make a function. 17:04.310 --> 17:08.930 And we're going to call this set bar visibility. 17:09.590 --> 17:12.260 The function can take a Boolean. 17:12.710 --> 17:18.980 So we'll add an input, change it to Boolean and call it visible. 17:21.540 --> 17:22.920 Compile that. 17:22.950 --> 17:25.110 Let's just do a quick branch. 17:26.010 --> 17:28.620 And if true, we'll set visibility. 17:28.620 --> 17:30.720 So call set visibility. 17:31.760 --> 17:35.630 And we're going to set the visibility here to visible. 17:35.630 --> 17:39.380 But for false, we'll set the visibility to hidden. 17:39.890 --> 17:45.430 But another thing I want to do is have a member variable that we can always check. 17:45.440 --> 17:51.440 So I'm going to add a new variable called Progress Bar Visible. 17:52.040 --> 17:55.400 This will be a Boolean and we're going to set it here. 17:56.470 --> 17:59.620 And we're setting it based on whatever we pass in. 18:00.520 --> 18:01.270 Here. 18:01.980 --> 18:09.690 So when we call set bar visibility, we're also setting our boolean that we can use to know if the bar 18:09.690 --> 18:11.010 is visible or not. 18:11.040 --> 18:16.800 So now when we call set bar percent, instead of calling set visibility, I'd like to call our new function 18:16.800 --> 18:18.660 set bar visibility. 18:19.910 --> 18:23.810 Right here and we'll pass in true for visible. 18:25.030 --> 18:29.350 And then this will also set our boolean and then back in the event graph. 18:29.350 --> 18:34.210 Instead of calling set visibility with hidden, we're going to call set bar visibility. 18:34.300 --> 18:37.390 Passing in false for visible. 18:37.630 --> 18:44.140 And that way our boolean will be set and then we can avoid ticking if our boolean is false. 18:44.140 --> 18:50.020 So we can have a branch here and check progress bar visible. 18:51.190 --> 18:57.500 And only if progress bar visible is true do we interpret Ghost Bar. 18:57.520 --> 19:03.340 So we're kind of blocking that interpolation if progress bar is not visible. 19:06.560 --> 19:10.190 Okay, so now we've done a little bit of an optimization. 19:10.780 --> 19:12.040 That's looking good. 19:12.880 --> 19:18.640 And since we made changes, let's save all and just make sure everything works. 19:18.850 --> 19:21.160 We got about 5 or 6 seconds. 19:21.160 --> 19:25.000 I think it's six seconds before these go away, so we'll wait. 19:25.030 --> 19:26.110 There they go. 19:27.660 --> 19:28.810 Now we see them. 19:28.830 --> 19:30.960 Our interpreter, the ghost Bar works. 19:30.960 --> 19:32.500 And let's see if it goes away. 19:32.520 --> 19:33.810 There it goes. 19:33.900 --> 19:42.180 And if we keep on doing damage, we'll keep seeing those bars until we stop, at which point, we should 19:42.180 --> 19:43.320 see them go away. 19:43.650 --> 19:45.480 And there goes that one. 19:45.480 --> 19:46.660 There goes that one. 19:46.680 --> 19:47.820 Perfect. 19:48.420 --> 19:51.630 Okay, so now our progress bar is timer based. 19:51.630 --> 19:56.610 And really, we did all this on our parent class. 19:56.610 --> 20:03.110 So if we really, really don't want the bar to go away, we can have that be a setting. 20:03.120 --> 20:06.730 We could just avoid doing the timer altogether. 20:06.750 --> 20:07.980 I leave that up to you. 20:07.980 --> 20:09.720 I'm not going to do that now. 20:09.720 --> 20:16.410 If I find in the future I need a progress bar with a ghost bar that doesn't hide itself. 20:16.410 --> 20:18.030 I'll come back in here and change it. 20:18.030 --> 20:18.540 For now. 20:18.540 --> 20:19.770 I think this is great. 20:19.800 --> 20:20.760 Now, the last thing. 20:20.760 --> 20:28.720 If we'd like to start off not seeing the bar, then we can always go into progress bar and use event 20:28.720 --> 20:32.830 construct to simply hide the bar from the start. 20:32.830 --> 20:34.330 So this is like begin play. 20:34.330 --> 20:41.770 We can call set bar visibility passing in false for visible and then we shouldn't see it until we first 20:41.770 --> 20:47.680 cause damage and then we'll see it for a good five seconds, however long we set it. 20:48.240 --> 20:50.130 And there it goes. 20:51.100 --> 20:52.100 Perfect. 20:52.120 --> 20:53.680 So excellent job. 20:53.680 --> 20:55.930 And I'll see you in the next video.