Okay.
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
class.
So I'm going to add a new progress bar.
We're going to drag that on to the route overlay and it's going to be just above.
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
and make a function for updating it just like we have.
Update front fill brush, we'll make an update Ghost fill brush.
So that means I need this progress bar to have a good name progress bar.
We'll call it ghost and check is variable and then bring it in.
And we're going to call set style.
We're just going to use the setter and make progress bar style.
And make slate brush for the background image.
I'd like the background to also be transparent, so we'll take our tint.
We'll make a slate color.
I'm just going to bring it down to Alpha of zero so it's transparent.
And then for our fill image, we'll also make a slate brush.
So make slate brush.
Actually, this one will be promoted to a variable and this will be our ghost fill brush.
Now, we could stick it into progress.
Bar properties.
I'm going to call it Ghost bar.
Fill brush, though, and we'll go ahead and stick it in that progress.
Bar Properties category and Ghost Bar Fill Brush will compile and set the brush.
And for the tint here, I'm going to set the alpha to 0.5 and make it a little darker like so.
And we can hook this up and see what it looks like if we compile and fill up that percent.
And it looks like we still have fill color and opacity.
It's blue.
I'm going to change that.
So it's desaturated and now we can see that ghost and I'd like it a little bit darker.
So I'm going to take the ghost bar, fill brush and make it just a bit darker, like so let's compile.
And that's what it looks like.
So we'll have just kind of a faint ghost, clear brush.
It could be a little bit higher on the alpha, so the tint can be probably 0.75.
But we can always tweak that.
And we can see what it looks like if we.
Go ahead and knock this health bar down a bit.
Yeah, we can see a little bit of a shadow there.
That looks pretty good.
So we have our health bar and I can go ahead and collapse these nodes to a function.
So we're going to right click collapse the function.
We'll call this update Ghost fill brush.
Cool.
Now, if we look at our enemy health bar, we have these events that we're binding and we're calling
set percent on the progress bar for the front.
But it'd be nice if we'd have one function that could take care of the progress bar and handle everything
else as well related to the Ghost bar.
So why don't we create a set percent function for the progress bar on the parent class?
So I'm going to add a function and we'll call this set bar percent.
And I'd like this to take in the input parameters for value and max value.
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
Max value.
And then what we can do is set percent on the progress bar, the main one, it's called Progress Bar
front.
We can get it and call set percent on it like so.
And we can do the safe divide here.
So let's go ahead and do Safe Divide right here with new value and max value and hook that in.
So that we can use in enemy health bar.
So right here we can call set bar percent.
Like so and just pass in health and max health.
So we'll go ahead and call that function here.
And we know that the function itself takes care of the safe divide.
We'll call that down here as well.
So I'm just going to copy these nodes control D down here.
And remove those and replace with this.
Now, let's just make sure it's still working.
So we'll go ahead and.
Do some damage.
It looks like it's working perfect.
And now we're just calling one function and then our parent class can handle what happens.
And in particular, we can handle what happens with the ghost bar.
So the ghost bar should trail along behind right now for this progress bar.
I'm never, ever going to want it to start out less than full, so I'd like our progress bars to both
start off completely full with a percent of one.
So I'm going to do that for both of them here.
And that way if we press play and we start doing damage, we'll see that it's already full.
We don't want to have to deal with any complex edge cases.
We're just always going to start off full if we ever need it to start off half full or whatever.
We'll take care of that then.
But I just wanted to be able to start off full and we can deal with the ghost bar interpolation now.
So in the event graph I'm going to use event tick.
And we're going to interpolate a float value and that's going to be a target value that will follow
the percent when we set our bar.
So when we set our bar percent, we're going to want to be able to set a target value that our ghost
can interpolate to, just like we did with our ghost globe.
So I'm going to make a new variable.
It's going to be a float.
We're going to call this ghost percent target.
We'll change it to float.
We're going to compile.
It's going to have a default value of one.
So it starts off full and every frame we're going to interpolate to it.
So we're going to use F interpolation to.
And the current value is going to be the ghost bar percent.
So we're going to get our progress bar Ghost.
We're going to call get percent.
We're going to hook that into the current and the target will be ghost percent target.
Now we do need to plug in delta time and an interp speed.
I'm just going to put.
We'll use one for now.
That's fine.
And the return value we can use to set the percent on the Ghost Progress bar.
So we'll get progress bar ghost call set percent on that.
Passing in that percent.
And this can happen every frame.
And this can also be actually refactored.
We can collapse it into a function to interpolate the ghost bar.
So we're going to collapse this.
And we'll call this Interp.
Ghost Bar.
Now, of course, if we're using event tech, that means we're going to go into our enemy health bar.
And right click event.
Tick add call to parent function.
Make sure that these are all hooked up as well.
Okay, So that just means we need to handle setting that interpolation target value and Interp ghost
bar.
Looks like it doesn't have a name for that input.
That should be called Delta Time.
So we're going to call this Delta time like so.
Compile, save.
I'll go ahead and save all at this point.
Okay, so progress bar has a set bar percent, right?
And we may wish to have a delay before we actually set that so we can do it.
Just like with the Ghost globe, we can make a custom event and we can call this update Ghost Interp
targets and this can receive an input of type float.
We'll call this target and we'll call this event from set bar percent.
So Update Ghost Interp Target.
We'll pass in the percent, which is the result from the safe divide.
Like.
So.
And we can also compile this.
Oh, and because I changed the input name to Target and compiled, that's going to mean this needs to
be refreshed here.
So now it's called Target and we can pass that in.
Now, when we call this, we can simply delay.
I'll just delay for a second and then we'll set our ghost percent target.
To the value passed in here.
Like, so compile and we can test this out.
So I'm going to press play.
I'm going to do some damage.
And we see a second delay before it interpolates down.
And it's interpolating a little slow.
We can adjust that, but we have that little bit of a delay.
And it is a little hard to see.
So we might zoom in a little bit.
I'd like to go into Ghost bar and change my interp speed from one to a little faster, perhaps five.
We can test that out and I'd like to zoom in a little.
So I'm going to go to character or a or a character.
Let's zoom in that spring arm a bit.
We'll go from 800 ish to about 400.
So we can see a little bit closer and let's do some damage.
I think that looks great.
And of course, zooming in isn't actually going to make that widget smaller.
We're drawing it at a desired size, so I'm going to stick it back up to 800 for the target arm length
and we can take our progress bar desired size and edit that if we want to.
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.
I think that looks good.
Perfect.
That's looking awesome.
And obviously you can just adjust this to your heart's content and make this look however you want it
to.
I think it's looking pretty good so far.
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
value.
So how are we going to do that?
Well, every time we call our function set bar percent, we can start some kind of count or timer.
And each time we set the percent, we can reset that timer.
Now we're calling this custom event update, Ghost and Target every time we set the bar percent.
So if we go to this, we can set a timer here.
Now we have an option.
If we type set timer, we can set timer by event.
We can set timer by function name.
If we choose set timer by event, we have the option to create an event here.
So if I make a custom event, then we can have this event fired off after a certain amount of time that
we specify here with set timer by event.
Now each time we update the ghost interp target, or at least each time the custom event is called,
we can reset this timer so that it starts over and at the end of that timer we can hide our progress
bar.
So at the end of the timer, we're going to call this custom event.
I'm going to call it Hide Progress Bar.
I'm going to hook that up so it's bound to the timer and we'll take the return value from set.
Timer by event will promote it to a variable called hide timer.
This is a timer handle.
Now, as soon as we've set this right here, then we're going to start that delay just as we were doing
before, like so.
But now we have a timer handle.
And if that timer is already running, I want to clear it before setting the timer again.
And that way we'll clear it so it won't actually hit that end event.
It'll actually restart.
So I'm going to take this timer handle called hide timer.
We're going to grab it and we can call clear and invalidate timer by handle.
So we'll do that first.
Before we set the timer again.
And I'd like to just get this.
Float value just up and out of the way.
So we'll stick it up here for now.
So now what we can do is we're first clearing the timer and then we're setting the timer and we can
have a time.
Now, let's just say I'd like this to last for two seconds.
So two seconds after updating based on a change in our health, then this function will be called and
we'll go ahead and hide our progress bar.
So if we call set visibility.
On self, then we can set the visibility to hidden.
Now that means every time we actually set the progress bar, we have to show it again.
So as we're setting the value of the progress bar, we're going to set visibility to visible.
And then after two seconds, we'll set it to hidden.
So what we'll do is in set bar percent, we'll set visibility here.
We're going to say set visibility.
And we'll set it to visible.
And then, of course, we're setting our timer, which will set it to hidden.
Let's see how this works.
So we start off visible.
Two seconds later, they're hidden.
If we go ahead and hit the enemy, we see it and two seconds later it goes away.
Now, if I keep hitting it, it's going to keep resetting that timer.
So we're never actually going to hide it until two seconds after the last time that we updated it and
then it goes away.
Now, I chose two seconds, so it'd be easy to test, but we can set this to a larger value such as
6 or 8 seconds.
I think that would be nice.
Maybe 5 or 6 is good.
And so that's going to work just fine and I can go ahead and move this.
We'll keep it down right there.
Okay.
So that's going to hide our progress bar.
Now, here's the thing.
We're using Tick, right?
And we might have a lot of enemies.
So a nice optimization we can do is to avoid doing our interp while our visibility is hidden.
So what I'd like is a set visibility function that will also set a member variable, a boolean that
we can check in tick.
So here's what I'll do is I'll make a function.
And we're going to call this set bar visibility.
The function can take a Boolean.
So we'll add an input, change it to Boolean and call it visible.
Compile that.
Let's just do a quick branch.
And if true, we'll set visibility.
So call set visibility.
And we're going to set the visibility here to visible.
But for false, we'll set the visibility to hidden.
But another thing I want to do is have a member variable that we can always check.
So I'm going to add a new variable called Progress Bar Visible.
This will be a Boolean and we're going to set it here.
And we're setting it based on whatever we pass in.
Here.
So when we call set bar visibility, we're also setting our boolean that we can use to know if the bar
is visible or not.
So now when we call set bar percent, instead of calling set visibility, I'd like to call our new function
set bar visibility.
Right here and we'll pass in true for visible.
And then this will also set our boolean and then back in the event graph.
Instead of calling set visibility with hidden, we're going to call set bar visibility.
Passing in false for visible.
And that way our boolean will be set and then we can avoid ticking if our boolean is false.
So we can have a branch here and check progress bar visible.
And only if progress bar visible is true do we interpret Ghost Bar.
So we're kind of blocking that interpolation if progress bar is not visible.
Okay, so now we've done a little bit of an optimization.
That's looking good.
And since we made changes, let's save all and just make sure everything works.
We got about 5 or 6 seconds.
I think it's six seconds before these go away, so we'll wait.
There they go.
Now we see them.
Our interpreter, the ghost Bar works.
And let's see if it goes away.
There it goes.
And if we keep on doing damage, we'll keep seeing those bars until we stop, at which point, we should
see them go away.
And there goes that one.
There goes that one.
Perfect.
Okay, so now our progress bar is timer based.
And really, we did all this on our parent class.
So if we really, really don't want the bar to go away, we can have that be a setting.
We could just avoid doing the timer altogether.
I leave that up to you.
I'm not going to do that now.
If I find in the future I need a progress bar with a ghost bar that doesn't hide itself.
I'll come back in here and change it.
For now.
I think this is great.
Now, the last thing.
If we'd like to start off not seeing the bar, then we can always go into progress bar and use event
construct to simply hide the bar from the start.
So this is like begin play.
We can call set bar visibility passing in false for visible and then we shouldn't see it until we first
cause damage and then we'll see it for a good five seconds, however long we set it.
And there it goes.
Perfect.
So excellent job.
And I'll see you in the next video.