WEBVTT 00:00.700 --> 00:03.250 Welcome to your next quest. 00:03.370 --> 00:07.420 Now for this one, we're going to make a ghost globe. 00:07.420 --> 00:11.310 And I'd like this to be a challenge that you take on. 00:11.320 --> 00:20.230 So your goal here is to make a globe that is a ghost of your actual globe and make sure this works for 00:20.230 --> 00:26.500 all Globes and look into the asset folders for materials that you can use for these. 00:26.530 --> 00:28.420 Now, what is a ghost globe? 00:28.450 --> 00:37.330 A ghost globe is a progress globe, just like the Red Globe for Health or the Blue Globe for Mana. 00:37.330 --> 00:43.240 But it's behind the regular globe and it trails behind in a smooth manner. 00:43.240 --> 00:50.830 So as the health globe changes, goes up or down, the ghost globe trails behind it kind of interpolates 00:50.830 --> 00:51.790 to it. 00:52.030 --> 01:01.370 So this is a more challenging quest for you, and I'd like you to give it a try and see if you can get 01:01.370 --> 01:02.420 it on your own. 01:02.420 --> 01:07.610 But if you're starting to get a little too frustrated, you can't get things to work, then go ahead 01:07.610 --> 01:12.740 and watch the rest of this video and follow along with me and we'll do it together. 01:12.740 --> 01:19.550 But try to stretch those brain muscles just a little and see if you can figure out a good way to do 01:19.550 --> 01:19.910 it. 01:19.910 --> 01:24.290 And if you end up doing it completely different from me, that's okay. 01:24.290 --> 01:30.830 This is a learning exercise and it's designed to get you to try to implement mechanics on your own to 01:30.830 --> 01:38.180 see if you can do this on your own and feel that discomfort of facing on a challenge that you don't 01:38.180 --> 01:43.310 know how to do and grow in the process of trying to get it. 01:43.310 --> 01:47.990 And of course, not succeeding 100% is totally okay. 01:47.990 --> 01:50.900 It's normal and part of the learning process. 01:50.900 --> 01:57.740 So I want you to really remember here not to be hard on yourself, not to think that you're not smart 01:57.740 --> 01:58.310 enough. 01:58.310 --> 02:04.730 Don't think that you're not cut out for this if you can't just, you know, ace the challenge. 02:04.730 --> 02:06.440 No problem without trying. 02:06.440 --> 02:12.380 These challenges, especially the ones that I'm pointing out like this, are designed to challenge you. 02:12.380 --> 02:13.910 They're designed to be hard. 02:13.910 --> 02:21.200 So really, I just want you to give it a try, give it your best shot, and don't spend all day on it. 02:21.200 --> 02:22.280 Don't spend too long. 02:22.280 --> 02:27.860 If you find yourself getting stuck to the point where you don't know what to do next, then go ahead 02:27.860 --> 02:31.340 and watch the rest of the video and follow along with me. 02:31.340 --> 02:33.020 So give this a try. 02:33.050 --> 02:36.560 See if you can figure out a way to do it on your own. 02:36.560 --> 02:39.200 If not unpause the video, we'll do it together. 02:39.200 --> 02:43.850 So go ahead and pause now and conquer your quest. 02:46.930 --> 02:49.480 Okay, so we know what we want to see. 02:49.510 --> 02:57.160 Whenever our health globe or Mana globes change, we want to see a sort of ghost globe following or 02:57.160 --> 03:01.360 trailing behind in a smooth manner as those changes occur. 03:01.660 --> 03:09.160 So since I want this to work for both Health and Mana Globes, this means I should take advantage of 03:09.160 --> 03:10.060 inheritance. 03:10.060 --> 03:16.420 So I'm going to go into my blueprints UI Progressbar folder and go into the base class. 03:16.450 --> 03:18.910 WP Globe Progressbar. 03:18.910 --> 03:21.760 I'm going to get that open first and foremost. 03:22.030 --> 03:29.430 Now I'm going to take a look at the assets folder and see what materials and material instances I have. 03:29.440 --> 03:33.580 I'm going to go into UI, into Globes and see what we've got here. 03:33.580 --> 03:41.290 Now, you might have taken the hint that my Ghost Health globe is meant to do exactly what we want. 03:41.320 --> 03:44.950 We want this sort of ghost looking health globe. 03:45.130 --> 03:48.170 Now there's a ghost mana globe as well. 03:48.170 --> 03:50.990 And really it doesn't matter. 03:50.990 --> 03:52.310 They're both pretty white. 03:52.340 --> 03:56.330 One maybe looks a little bit red ish. 03:56.330 --> 03:58.550 It's actually just gray. 03:58.550 --> 04:00.410 But we can use this now. 04:00.410 --> 04:06.710 You might have noticed a progress parameter and if you click and drag it, you'll see that there's this 04:06.710 --> 04:08.030 glowing line. 04:08.030 --> 04:13.820 Now, you might not have noticed it, but if you want that out of the way, just bring it up above one. 04:13.820 --> 04:20.480 But as you can see, depending on the progress percentage or fraction passed in, that's where that 04:20.480 --> 04:21.320 line is. 04:21.320 --> 04:26.600 And that is kind of an extra feature that these material instances have. 04:26.630 --> 04:32.450 You'll notice that the flowing globe, which is the parent to all of these, has that band. 04:32.780 --> 04:35.750 So our Myhealth Globe also has a progress. 04:35.750 --> 04:42.260 You'll see it's set to 1.2, but if we drag it down, we have that little band and we can use that. 04:42.260 --> 04:49.250 If your knowledgeable enough and you know how to change material instances dynamically at runtime, 04:49.250 --> 04:50.930 you can use that too. 04:51.320 --> 04:53.480 So I just thought I'd point that out. 04:53.480 --> 04:58.880 And if you notice that little bright spot at the top, all you have to do is drag that progress up a 04:58.880 --> 05:00.500 little bit and get rid of it. 05:00.950 --> 05:03.710 So anyways, we have this ghost health club, right? 05:03.710 --> 05:05.300 And I'm going to take that progress. 05:05.300 --> 05:07.430 And for now, just move it out of the way. 05:07.430 --> 05:09.170 Make it higher than one. 05:09.170 --> 05:12.690 And this is what I'd like to use for my ghost globe. 05:12.710 --> 05:16.910 So back here in Globe Progress Bar, I want to add this globe. 05:17.060 --> 05:25.220 Now it's going to be a progress bar, just like the Progress Bar globe widget is within this parent 05:25.220 --> 05:26.210 base widget. 05:26.240 --> 05:29.270 Now I'm going to add another progress bar. 05:30.840 --> 05:32.510 So searching for progress bar. 05:32.520 --> 05:37.770 I'm going to add it right here on overlay route and select that progress bar. 05:37.770 --> 05:42.870 And right away I'm going to rename this to Progress bar underscore Ghost. 05:42.900 --> 05:45.480 This is our Ghost Progress bar. 05:45.480 --> 05:52.140 And if I set horizontal and vertical alignment to fill, then it fills the widget and you'll see that 05:52.140 --> 05:54.930 it's in front, it's covering everything else. 05:54.930 --> 05:56.580 And for now, that's fine. 05:56.820 --> 06:00.210 I'm definitely going to put it behind everything else. 06:00.210 --> 06:03.420 But for now, while I'm working with it, that's okay. 06:03.540 --> 06:08.790 Now for the background image, I definitely want that to be transparent. 06:08.790 --> 06:13.500 So I'm going to take that tint color and bring the alpha all the way down to zero. 06:13.500 --> 06:18.420 And as I raise the percent, I see it's going from left to right and it's blue. 06:18.420 --> 06:20.340 So I'm going to fix both of those problems. 06:20.340 --> 06:26.730 Now I'm going to set fill color and opacity by dragging the saturation down to white. 06:26.730 --> 06:28.350 So there's no tint there. 06:28.350 --> 06:34.090 And I'm going to set the bar fill type to bottom to top. 06:34.180 --> 06:40.150 So as we change the percent, we see that it's going from bottom to top. 06:40.150 --> 06:41.050 Perfect. 06:41.080 --> 06:45.190 Now we need that globe background image. 06:45.280 --> 06:47.140 So let's give it a default. 06:47.140 --> 06:54.760 I'm going to select and search for my underscore ghost and choose Ghost Health Globe or Ghost Manor 06:54.790 --> 06:54.990 Globe. 06:54.990 --> 06:56.110 It really doesn't matter. 06:56.410 --> 06:59.290 And remember, we need to draw as image. 06:59.290 --> 07:02.230 If we want this to look like it should. 07:02.260 --> 07:07.540 We want it to look like that round material instance that it is. 07:07.570 --> 07:12.400 And it looks like I used background image, so I'm going to actually reset that. 07:12.400 --> 07:13.150 I don't need that. 07:13.150 --> 07:14.890 I want the fill image, right? 07:14.920 --> 07:24.340 So I'm going to set this to draw as image and change this to my ghost, one of those ghost globes. 07:24.340 --> 07:25.630 And it looks good. 07:25.630 --> 07:32.590 And by the way, the reason we can do this is because if we go back to my health globe, for example, 07:32.590 --> 07:38.650 and browse to the parent material, which is not a material instance and we double click that, this 07:38.650 --> 07:45.190 is just just by the way, you'll see that it's material domain is set to user interface. 07:45.190 --> 07:48.580 So that's why we can use it in a widget. 07:48.580 --> 07:55.030 And it looks like it looks here because this material was made with user interface in mind. 07:55.030 --> 07:59.380 It was made specifically for being used in a material interface. 07:59.380 --> 08:04.840 And perhaps at some point I'll show you how to make this material if I get enough requests, say in 08:04.840 --> 08:05.650 The Discord. 08:05.740 --> 08:07.930 Now back to our widget. 08:07.960 --> 08:10.720 We have our ghost globe, right? 08:10.720 --> 08:12.750 And so that's step one. 08:12.760 --> 08:16.420 Now we are going to want it to be in the back. 08:16.420 --> 08:22.090 And also, if you really want to experiment, you can drag the tent down if you want it to be darker 08:22.090 --> 08:23.050 or something like that. 08:23.050 --> 08:26.890 And of course, you can also go back into the material itself. 08:26.890 --> 08:29.290 We have a lot of parameters here too. 08:29.590 --> 08:37.960 Now I'm going to drag progress Bar Ghost all the way up so that it's behind everything else, and that 08:37.960 --> 08:43.960 way it'll do its job as the ghost globe just trailing behind everything. 08:43.960 --> 08:52.450 And one kind of cool thing you could do is if you wanted to see that ghost globe behind our blue or 08:52.450 --> 09:00.520 red globe, whichever one it is, you could take that progress bar globe and open the tint and drag 09:00.520 --> 09:05.440 its alpha down a bit so you can kind of see the ghost globe behind it. 09:05.470 --> 09:11.020 That's one thing you can do if you wanted to do that and just to kind of see that it's working as it 09:11.020 --> 09:13.240 should, I'm going to do that a little bit. 09:13.240 --> 09:15.280 I'll put the Alpha at 0.9. 09:15.790 --> 09:17.920 Now we have our progress bar ghost. 09:17.920 --> 09:24.850 I'm going to of course, check is variable there and it looks like my progress bar globe did not take 09:24.850 --> 09:25.750 that change. 09:25.750 --> 09:27.070 I'm going to set that there. 09:27.760 --> 09:28.300 Okay. 09:28.300 --> 09:38.460 So Progress Bar Ghost is here in our base widget and we want to set this so that it follows our regular 09:38.460 --> 09:40.710 globe whenever it changes, right? 09:40.710 --> 09:44.310 So we need to think about how we're going to make that happen. 09:44.670 --> 09:54.120 Well, I'd like to make use of interpolation and for interpolation we typically interp on a frame basis 09:54.120 --> 09:58.140 every single frame where interpreting towards some value. 09:58.740 --> 10:05.340 And because we don't have too many of these progress globes in our UI, we can do this for both our 10:05.340 --> 10:10.410 health and mana and we won't experience any performance decrease. 10:10.410 --> 10:14.910 So I'm okay with using tick functionality for our progress globe. 10:14.910 --> 10:21.900 And what I'd basically like to do is constantly every frame be interpolating this ghost progress globes 10:21.900 --> 10:29.580 percent down or up to our regular progress globes percent So. 10:29.780 --> 10:34.070 Essentially we're going to want some kind of target to set. 10:34.100 --> 10:36.380 So I'm going to go back to my graph tab. 10:36.380 --> 10:43.070 And we know that we have our set progress bar percent every time we set that, we're setting the percent 10:43.070 --> 10:48.680 value and the percent is what our ghost globe is going to want to interpolate to. 10:48.800 --> 10:55.940 But I'd like a new variable, a new float that we can interpolate this to so it's designated for the 10:55.970 --> 10:57.080 ghost globe. 10:57.110 --> 11:02.410 In other words, a ghost percent target for interpolation. 11:02.420 --> 11:03.920 So I'm going to make a new float. 11:03.920 --> 11:14.000 I'm going to click add variable and I'm going to call this ghost percent target and I'm going to change 11:14.000 --> 11:14.930 it to a float. 11:14.930 --> 11:20.780 And every time we set our percent, I'm going to set our ghost percent target. 11:20.780 --> 11:24.370 But I may want to have a sort of delay, right? 11:24.380 --> 11:33.110 Maybe our regular globe changes and then we wait a second or two and then we have that percent target 11:33.110 --> 11:34.040 set. 11:34.070 --> 11:41.540 So if we want some kind of delay, then every time we call set progress bar percent, then we'll want 11:41.540 --> 11:42.800 to use a delay node. 11:42.800 --> 11:49.460 Now we can't use a delay in a function, but what we can do is we can make a custom event that we can 11:49.460 --> 11:52.760 call every time set percent is called. 11:52.760 --> 11:56.810 So here in the event graph, we can right click and make a custom event. 11:57.650 --> 12:09.110 And call this globe percent set and every time globe percent is set, we can then set our ghost percent 12:09.110 --> 12:09.770 target. 12:09.770 --> 12:14.000 So that means that globe percent set should have an input. 12:14.000 --> 12:18.890 Let's click plus input, make it a float and we'll call this percent. 12:20.420 --> 12:28.130 And then here in set progress bar percent we can call our custom event globe percent set. 12:28.160 --> 12:32.390 We can call this passing in the percent. 12:33.870 --> 12:36.180 So I'll just reroute the node down here. 12:38.330 --> 12:39.320 Like so. 12:40.690 --> 12:41.580 There we go. 12:41.650 --> 12:45.390 So every time we set the percent, we're going to call this custom event. 12:45.400 --> 12:51.970 And then once we set the custom event, we can set ghost percent target, but we can use a delay node 12:51.970 --> 12:52.570 here. 12:56.890 --> 12:58.840 So that way we can have the delay. 12:59.020 --> 13:04.060 And the delay can be a parameter or we can hardcode it. 13:04.090 --> 13:09.520 I'm just going to promote it to a variable and call this ghost delay. 13:10.030 --> 13:14.320 I'll compile and give it a default value of 0.5. 13:14.350 --> 13:22.420 We'll give it a 0.5 second delay and I'm going to put these in a category of their own. 13:22.600 --> 13:28.570 So for category, I'm going to call these Ghost Globe properties. 13:28.780 --> 13:35.950 So my ghost delay is in it and I'm going to set my ghost percent target to Ghost Globe properties as 13:35.950 --> 13:36.520 well. 13:36.820 --> 13:38.860 And compiling here. 13:38.860 --> 13:43.390 It looks like I get a compiler error, so I'm going to go ahead and refresh the node. 13:45.390 --> 13:46.280 There we go. 13:46.290 --> 13:48.180 We can get that sometimes. 13:48.180 --> 13:54.060 And I'm going to take my percent and set Ghost globe percent to that. 13:54.060 --> 13:56.010 So every time we set the percent. 13:57.500 --> 14:00.170 Then Ghost Globe percent will also be set. 14:00.200 --> 14:02.810 Let's actually organize this a little bit like. 14:03.480 --> 14:04.380 So. 14:08.030 --> 14:08.690 There we go. 14:08.690 --> 14:10.040 That's looking better. 14:10.160 --> 14:16.790 Okay, So really, all we're doing is every time we set the percent, we're setting the ghost percent 14:16.790 --> 14:20.720 target, but we're waiting 0.5 seconds before we do that. 14:21.020 --> 14:28.130 Now, another thing is what if we want our ghost globe material to be swapped out? 14:28.160 --> 14:34.970 Well, we can swap that out just like we've created parameters for the other brushes. 14:34.970 --> 14:40.740 We have an update globe image here, which really should be update Globe Brush, shouldn't it? 14:40.760 --> 14:47.120 I'm going to go ahead and rename that while I'm noticing that because everything else is consistent, 14:47.120 --> 14:55.250 so this should be update Globe brush, but we can have an update Ghost Globe brush as well. 14:55.400 --> 15:02.330 Instead of having a progress bar fill image, we can have a ghost progress bar fill image. 15:03.950 --> 15:12.290 So I'm going to add a new variable under globe properties here, a new slate brush and call this Ghost 15:12.320 --> 15:15.050 progress bar. 15:15.950 --> 15:22.160 Fill image and I'm just going to call it Ghost Progress Bar Brush. 15:22.730 --> 15:26.090 And this is going to be a slate brush. 15:28.320 --> 15:34.710 And our progress bar fill image is actually going to be progress bar fill brush I'm going to rename 15:34.710 --> 15:39.750 that to and this can go into Ghost Globe Properties. 15:39.750 --> 15:42.030 Let's give it that category. 15:43.540 --> 15:47.410 And we'll compile and give it a default value. 15:48.670 --> 15:55.900 For the brush image and I'm going to give it my ghost health globe. 15:56.170 --> 16:01.330 Compile that and we'll make a function just like update Globe Brush. 16:01.330 --> 16:03.880 We'll have an update Ghost Globe Brush. 16:04.120 --> 16:06.370 So I'm going to make a new function. 16:08.240 --> 16:12.080 Update Ghost Globe Brush. 16:14.010 --> 16:17.100 And just like update globe brush. 16:17.670 --> 16:21.930 We're going to make a slate brush with zero opacity. 16:21.930 --> 16:23.830 That'll be for the background image. 16:23.850 --> 16:32.520 We'll use the Ghost Progress bar, fill brush, and we'll use the Ghost Progress Bar globe and set style. 16:32.520 --> 16:38.580 So what I'm going to do is just copy all this and go into the ghost version, paste them all in. 16:39.400 --> 16:40.390 Hook it all up. 16:40.510 --> 16:45.340 But instead of Progress Bar Globe, we're going to use the ghost version. 16:47.680 --> 16:49.450 Progress Bar Ghost. 16:51.800 --> 16:53.150 So we'll switch that out. 16:53.150 --> 16:58.910 And instead of progress bar fill brush, we're going to use ghost progress bar brush. 17:03.780 --> 17:07.170 And of course, this is called Ghost Progress Bar Brush. 17:07.170 --> 17:09.890 And the other one is progress bar fill brush. 17:09.900 --> 17:15.390 Just to be consistent, I'm going to call the other one progress bar brush just so we have consistent 17:15.420 --> 17:16.350 names there. 17:16.800 --> 17:25.740 And now we have update Ghost glow brush, which we should call right here with all our other update 17:25.740 --> 17:31.020 functions, which by the way, we could collapse all these to a single function if we wanted to do that. 17:31.020 --> 17:38.340 But anyway, we have ghost percent set and all this does is set ghost percent target. 17:38.340 --> 17:46.650 But we're going to want to interpolate our ghost percent to this every frame with some kind of interp 17:46.650 --> 17:47.580 speed. 17:47.580 --> 17:52.890 So we have a function to set our progress bar percent right. 17:52.890 --> 17:58.830 And what we should do is every frame set our ghost progress bar percent. 17:58.830 --> 18:06.730 So let's look at set progress bar percent All it does is set percent right and also call our new custom 18:06.730 --> 18:07.990 event Glow percent set. 18:07.990 --> 18:12.550 But we're going to want a set ghost progress bar percent function. 18:12.550 --> 18:13.930 Let's add that function. 18:14.730 --> 18:23.850 And we're going to say set ghost progress bar percent and this will just call set percent on the Ghost 18:23.850 --> 18:24.620 Progress bar. 18:24.630 --> 18:27.000 Let's get our progress bar ghost out. 18:27.090 --> 18:28.770 Call set percent. 18:35.210 --> 18:41.600 And just like set progress bar percent which takes in a float, we can add a float input here. 18:43.450 --> 18:47.240 So we'll add a new input of type float called percent. 18:47.260 --> 18:48.940 I'm going to compile right away. 18:49.800 --> 18:55.470 And then we'll use percent to set the percent for our Ghost progress bar. 18:56.420 --> 19:00.980 Now we want to interpolate, so let's just use event tick. 19:03.540 --> 19:07.950 And what we have is we have our ghost progress globe. 19:07.950 --> 19:08.910 Let's get that out. 19:08.910 --> 19:11.490 Progress Bar Ghost. 19:14.040 --> 19:21.300 And what we're going to do is interpolate I'd like to use f interp to which interpolates floats. 19:21.930 --> 19:27.060 So we need to know the current value of the ghost progress bar percent. 19:27.090 --> 19:33.300 If we drag off of the ghost progress bar and type percent, we can get percent and we can hook that 19:33.300 --> 19:33.430 in. 19:33.430 --> 19:35.490 And that's the current value, every frame. 19:35.580 --> 19:42.780 Now we know that we have a target and that's a float called If I Can Find My Ghost Properties. 19:42.780 --> 19:45.060 It's called Ghost percent Target. 19:46.150 --> 19:48.340 And that's going to be for the target there. 19:48.370 --> 19:53.980 Now we have Delta Time because we're using event tick, so we're going to hook in Delta time. 19:53.980 --> 19:56.170 And now we need an interp speed. 19:56.350 --> 19:58.990 Now this can be experimented with. 19:58.990 --> 20:01.540 I'm just going to try a value of one. 20:01.540 --> 20:08.470 In fact, I'm going to make this a parameter promote to variable and call this ghost interp speed. 20:08.500 --> 20:15.100 I can go ahead and put this into the category of Ghost Globe properties compile and set it to a default 20:15.100 --> 20:16.870 value of one, which it is. 20:17.050 --> 20:24.790 And so after we've interpolated here, what we can do is we can set our ghost globe percent. 20:27.660 --> 20:29.610 So we can get that new function. 20:31.560 --> 20:33.840 Set ghost progress bar percent. 20:35.540 --> 20:38.840 We can hook in the return value from the f interp too. 20:39.200 --> 20:41.240 And simply call this here. 20:41.750 --> 20:47.090 Now, before we test this out, we're doing something in event Tick and the Globe Progress Bar. 20:47.090 --> 20:53.240 And that means we need to make sure that this tick is being called in child classes. 20:53.240 --> 20:58.810 That means our widget blueprint and health globe widget Blueprint and our mana globe. 20:58.820 --> 21:05.750 So we need to right click on event Tick and Health globe and add a call to parent function. 21:05.750 --> 21:11.510 So if you were sort of stuck on this part, this might have been something that you needed to do. 21:11.990 --> 21:13.970 And we'll do the same thing for Mana. 21:13.970 --> 21:19.430 We'll add a call to the parent function here, make sure to hook up all the nodes. 21:21.250 --> 21:25.810 And that way the child classes will get their parent version of Tic. 21:25.810 --> 21:29.230 And that's very important so that we get that interpolation going. 21:29.380 --> 21:36.520 So let's go back and press play and we can see that even though the health globe and the Ghost Globe 21:36.520 --> 21:44.710 don't start off at the same values that that ghost globe is interpolating down to those values. 21:44.890 --> 21:49.870 And of course, our ghost delay determines how long it takes before that happens. 21:49.870 --> 21:52.060 We can set that to a value of one. 21:52.210 --> 21:55.900 So we can get a nice one second delay. 21:56.670 --> 22:00.540 And I don't see any transparency with my globe. 22:00.540 --> 22:05.480 And that's because we're actually setting the brush in. 22:05.490 --> 22:08.490 Update Globe brush. 22:08.490 --> 22:14.310 We're updating with progress Bar brush, and that has its own tint here. 22:14.310 --> 22:19.950 So if we really wanted, say, 0.9 on the Alpha for that, we'd have to set that here for progress. 22:19.950 --> 22:21.150 Bar brush. 22:22.100 --> 22:26.180 So now we should be able to see a little bit of transparency. 22:26.180 --> 22:31.780 And just behind the globe, we can see the trailing ghost globe. 22:31.790 --> 22:39.110 It's really apparent if we set this alpha to something much smaller like 0.3, it's not a value that 22:39.110 --> 22:45.530 I'd want, but you can really see that the Ghost globe is trailing behind. 22:45.530 --> 22:49.940 In that case, I'm going to leave it at about 0.9, though. 22:51.020 --> 23:00.650 So that's the alpha on the tent for the progress bar brush which we're setting here in update Glow brush. 23:00.650 --> 23:05.390 And of course we're doing that in the event pre construct. 23:06.350 --> 23:12.530 Okay, so it's looking good except for the fact that they don't start off at the same values, right? 23:12.530 --> 23:15.120 Because they have different default values. 23:15.140 --> 23:21.530 It's really apparent when we step into the fire and I'd like this fire to take a little bit more each 23:21.530 --> 23:25.700 period so we can test this ghost globe a little better. 23:25.700 --> 23:34.210 So I'm going to go to my fire area down to its modifier and change this to negative five. 23:34.220 --> 23:40.100 So every second we're taking five away from the health and now we can really see that ghost globe trailing 23:40.100 --> 23:40.880 behind. 23:42.410 --> 23:46.460 So the problem is the initial values, right? 23:46.460 --> 23:52.130 And the easiest thing to do is just set them both to full from the start. 23:52.130 --> 24:00.140 Perhaps here in event pre-construct, we can just set the progress bars both to full. 24:00.140 --> 24:05.150 We can get our progress bar ghost, we can get our progress bar globe. 24:05.150 --> 24:07.220 We can call set percent. 24:08.140 --> 24:18.550 And just pass in one and then just initialize both of these to have a value of one from the start. 24:19.850 --> 24:21.860 And then they just start off. 24:21.860 --> 24:23.630 But there's a problem. 24:23.630 --> 24:29.150 We can see the ghost globe sort of interpolating down to what value? 24:29.180 --> 24:34.940 Well, that value is the actual value of the attribute, right? 24:34.940 --> 24:36.260 Because look at this. 24:36.290 --> 24:39.920 We show debug health is 50, man is ten. 24:39.920 --> 24:46.700 And you can see the ghost globe, you can barely see it, but it's down to halfway on the red and about 24:46.700 --> 24:49.550 one fifth of the way on the blue. 24:49.580 --> 24:55.220 So that would mean we'd need to set that target value also to one. 24:55.310 --> 24:59.600 Under Ghost Globe Properties, we have the ghost percent target. 24:59.630 --> 25:02.750 We'd have to set that also to one. 25:03.790 --> 25:07.570 So we're setting everything to a full globe from the start. 25:07.810 --> 25:14.920 But of course, the problem then becomes, well, we're setting them to the values that are not accurate. 25:14.950 --> 25:15.400 Right. 25:15.400 --> 25:18.310 We're not setting them to the values they should be. 25:18.310 --> 25:20.890 And that becomes apparent when we step into the fire. 25:20.920 --> 25:26.980 We go from a full globe to five less than what our real health was. 25:27.730 --> 25:33.310 So just setting everything to a full progress bar from the start isn't really going to cut it. 25:33.550 --> 25:41.480 What we need to do is we need to know if this is our first time setting our globe percent. 25:41.500 --> 25:50.560 In other words, is this the initial set of our regular globe so we can go to set progress bar percent 25:50.560 --> 25:55.970 and an easy way is to just have a boolean value that we can set. 25:55.990 --> 26:06.560 Once we've set this for the first time so we can have a variable, it can be a bool and we can say globe 26:06.560 --> 26:07.910 initialized. 26:08.120 --> 26:12.860 We can compile and make sure that its default value is false. 26:12.860 --> 26:16.790 And then in set progress bar percent we can set it to true. 26:20.630 --> 26:25.560 But we can check to see if it hasn't been set yet so we can make a branch. 26:25.580 --> 26:30.230 We can say if Globe initialized and if it's false. 26:30.260 --> 26:32.780 Well, this is the first time. 26:33.140 --> 26:35.480 So in that case, we are setting. 26:36.680 --> 26:38.540 Globe initialize to true. 26:40.590 --> 26:43.920 And if it's true, well, we just do what we were already doing. 26:45.800 --> 26:51.860 But in the false case, we want to not call globe percent set. 26:51.890 --> 26:54.890 We want to set the progress bar globe percent. 26:55.510 --> 27:01.120 So we do want to do this, but we also want to set the ghost percent to the same amount. 27:01.120 --> 27:07.810 So we're going to take our Ghost Progress bar, progress Bar Ghost and set the percent for this as well. 27:08.110 --> 27:09.700 And what's the percent? 27:09.700 --> 27:13.900 Well, we're going to set it to this percent value here. 27:17.130 --> 27:20.430 And the Interp target for the ghost. 27:20.460 --> 27:27.300 Ghost percent Target must also be set to the same value so that it's not attempting to interp. 27:28.390 --> 27:30.070 To any other value. 27:30.940 --> 27:36.910 Now, this isn't going to work exactly, because there's one detail we have to remember. 27:36.910 --> 27:41.050 Percent could be zero if we go into Health globe. 27:41.050 --> 27:45.280 We'll see that when we bind to these callbacks here. 27:45.400 --> 27:55.180 We're calling set Progress Bar percent the very first time our health changes and either the health 27:55.180 --> 27:59.590 or max health, one of these two has not been set yet. 27:59.590 --> 28:05.920 So either health is still zero when we set our max health or max health is still zero when we set our 28:05.920 --> 28:06.250 health. 28:06.250 --> 28:09.070 Either way, the result is going to be zero. 28:09.070 --> 28:15.280 And the very first time we set our progress bar percent, it's going to be zero. 28:15.280 --> 28:22.750 And that means that if our globe has not been initialized yet, we'll get this false case and then we'll 28:22.750 --> 28:29.050 initialize both the Ghost and Progress bar at the same amount, but that's going to be zero. 28:29.050 --> 28:36.380 And then immediately after, our progress bar will be set to the correct value as both health and max 28:36.380 --> 28:38.120 health will have been set. 28:38.120 --> 28:41.660 But our ghost progress bar will still be zero. 28:41.660 --> 28:48.590 So what we can easily do to fix that is we can check percent to see if it's greater than zero. 28:48.590 --> 28:53.390 If it's greater than zero and globe initialized is false. 28:53.420 --> 29:01.010 Now we'll consider this the correct time to initialize the Ghost Progress bar to the regular progress 29:01.010 --> 29:03.320 bar amount for its percent. 29:03.320 --> 29:06.680 So in the false case here, we'll do another check. 29:06.680 --> 29:14.030 And only if this percent is not zero anymore, then we'll go ahead and initialize these so we can test 29:14.030 --> 29:14.840 this out. 29:14.840 --> 29:22.010 And I'm going to take my progress bar brush and for its default value, set its tint way down so we 29:22.010 --> 29:24.020 can really see what's going on. 29:24.020 --> 29:28.760 And I can press play and I can see that these values are correct. 29:30.590 --> 29:38.240 As I increase my mana there we have our ghost globe following behind. 29:41.320 --> 29:42.810 So that's working. 29:42.820 --> 29:46.150 I'll go ahead and set my tint back to 0.9. 29:46.510 --> 29:52.000 And this is a function so I can promote this percent to a local variable. 29:52.540 --> 29:55.450 I'm just going to call it progress percent. 29:55.810 --> 30:04.870 We'll promote that, set it, and then we can use it in place of all this green spaghetti here. 30:04.870 --> 30:07.780 So I'm going to take progress percent here. 30:07.810 --> 30:11.260 Replace that, we'll replace it here. 30:14.770 --> 30:17.140 I'm just going to use control D to duplicate. 30:20.930 --> 30:23.330 And we'll go ahead and get rid of these. 30:24.290 --> 30:26.060 Green wires. 30:30.590 --> 30:32.630 So that's going to be a lot better looking. 30:33.970 --> 30:36.160 And we can just clean this up a little bit. 30:41.490 --> 30:42.120 All right. 30:42.120 --> 30:43.290 And we'll go ahead. 30:43.990 --> 30:47.020 And just tidy these up a little bit. 30:52.390 --> 30:54.850 Okay, so not too bad of a blueprint function. 30:55.470 --> 31:00.960 And now we know that our Globes are starting off at the correct amount. 31:01.540 --> 31:04.360 And my ghost delay is quite short. 31:04.600 --> 31:06.400 Actually, it's one. 31:06.550 --> 31:12.680 I'm going to set that to two right now and see if we do get that delay. 31:12.700 --> 31:13.750 We do. 31:18.050 --> 31:19.940 It's set to one second. 31:28.680 --> 31:34.200 It doesn't look like we're getting that delay unless we hardcode a value. 31:44.110 --> 31:44.560 Yeah. 31:44.560 --> 31:47.200 So it doesn't want to use this variable for the delay. 31:47.230 --> 31:48.220 That's fine. 31:48.490 --> 31:50.530 We can always just come in here and change it. 31:50.530 --> 31:52.300 So I'm going to remove ghost delay. 31:53.020 --> 32:01.060 Okay, so that was kind of a lot of work just to get a pretty simple effect, but the effect is pretty 32:01.060 --> 32:01.820 nice. 32:01.840 --> 32:04.870 You know, it does make a bit of a difference. 32:04.870 --> 32:15.310 And we did make our ghost material here a parameter so we could go into our health globe and make sure 32:15.310 --> 32:24.520 that the ghost globe brush here, it's called Ghost Progressbar Brush is set to the one we want and 32:24.520 --> 32:29.290 it's Ghost Health globe for the health globe and for the Man Globe. 32:29.290 --> 32:34.810 We can set that to the one we want here as well by going to Ghost Globe Properties. 32:36.990 --> 32:42.420 Getting our ghost progress brush and making sure this one is Ghost Manor Globe. 32:42.420 --> 32:46.380 And that way it's a little bit more dark, a little bluer. 32:50.390 --> 32:50.870 Okay. 32:50.870 --> 32:52.040 So that's going to do it. 32:52.040 --> 32:58.220 Everything's looking pretty good and that's okay if you couldn't figure out the entire challenge because 32:58.220 --> 33:06.830 this one was quite involved and probably took you a little bit of time to figure it out if you got it 33:06.830 --> 33:10.420 and you might have come up with a different solution than I did. 33:10.430 --> 33:13.970 By the way, this would be perfect to collapse to a function. 33:13.970 --> 33:21.500 So I'm going to right click Collapse two function and call this Interp ghost globe. 33:23.150 --> 33:24.620 That looks a lot better. 33:25.460 --> 33:26.330 All right. 33:26.330 --> 33:27.590 So congratulations. 33:27.590 --> 33:28.730 If you got that challenge. 33:28.730 --> 33:30.850 If not, that's totally fine. 33:30.860 --> 33:35.870 As with all these challenges, if you get too stuck and you're spending too much time on it, go ahead 33:35.870 --> 33:40.280 and just watch the video and follow along with me and we'll do it together. 33:40.280 --> 33:43.370 So great job and I'll see you in the next video.