Welcome to your next quest.
Now for this one, we're going to make a ghost globe.
And I'd like this to be a challenge that you take on.
So your goal here is to make a globe that is a ghost of your actual globe and make sure this works for
all Globes and look into the asset folders for materials that you can use for these.
Now, what is a ghost globe?
A ghost globe is a progress globe, just like the Red Globe for Health or the Blue Globe for Mana.
But it's behind the regular globe and it trails behind in a smooth manner.
So as the health globe changes, goes up or down, the ghost globe trails behind it kind of interpolates
to it.
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
it on your own.
But if you're starting to get a little too frustrated, you can't get things to work, then go ahead
and watch the rest of this video and follow along with me and we'll do it together.
But try to stretch those brain muscles just a little and see if you can figure out a good way to do
it.
And if you end up doing it completely different from me, that's okay.
This is a learning exercise and it's designed to get you to try to implement mechanics on your own to
see if you can do this on your own and feel that discomfort of facing on a challenge that you don't
know how to do and grow in the process of trying to get it.
And of course, not succeeding 100% is totally okay.
It's normal and part of the learning process.
So I want you to really remember here not to be hard on yourself, not to think that you're not smart
enough.
Don't think that you're not cut out for this if you can't just, you know, ace the challenge.
No problem without trying.
These challenges, especially the ones that I'm pointing out like this, are designed to challenge you.
They're designed to be hard.
So really, I just want you to give it a try, give it your best shot, and don't spend all day on it.
Don't spend too long.
If you find yourself getting stuck to the point where you don't know what to do next, then go ahead
and watch the rest of the video and follow along with me.
So give this a try.
See if you can figure out a way to do it on your own.
If not unpause the video, we'll do it together.
So go ahead and pause now and conquer your quest.
Okay, so we know what we want to see.
Whenever our health globe or Mana globes change, we want to see a sort of ghost globe following or
trailing behind in a smooth manner as those changes occur.
So since I want this to work for both Health and Mana Globes, this means I should take advantage of
inheritance.
So I'm going to go into my blueprints UI Progressbar folder and go into the base class.
WP Globe Progressbar.
I'm going to get that open first and foremost.
Now I'm going to take a look at the assets folder and see what materials and material instances I have.
I'm going to go into UI, into Globes and see what we've got here.
Now, you might have taken the hint that my Ghost Health globe is meant to do exactly what we want.
We want this sort of ghost looking health globe.
Now there's a ghost mana globe as well.
And really it doesn't matter.
They're both pretty white.
One maybe looks a little bit red ish.
It's actually just gray.
But we can use this now.
You might have noticed a progress parameter and if you click and drag it, you'll see that there's this
glowing line.
Now, you might not have noticed it, but if you want that out of the way, just bring it up above one.
But as you can see, depending on the progress percentage or fraction passed in, that's where that
line is.
And that is kind of an extra feature that these material instances have.
You'll notice that the flowing globe, which is the parent to all of these, has that band.
So our Myhealth Globe also has a progress.
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.
If your knowledgeable enough and you know how to change material instances dynamically at runtime,
you can use that too.
So I just thought I'd point that out.
And if you notice that little bright spot at the top, all you have to do is drag that progress up a
little bit and get rid of it.
So anyways, we have this ghost health club, right?
And I'm going to take that progress.
And for now, just move it out of the way.
Make it higher than one.
And this is what I'd like to use for my ghost globe.
So back here in Globe Progress Bar, I want to add this globe.
Now it's going to be a progress bar, just like the Progress Bar globe widget is within this parent
base widget.
Now I'm going to add another progress bar.
So searching for progress bar.
I'm going to add it right here on overlay route and select that progress bar.
And right away I'm going to rename this to Progress bar underscore Ghost.
This is our Ghost Progress bar.
And if I set horizontal and vertical alignment to fill, then it fills the widget and you'll see that
it's in front, it's covering everything else.
And for now, that's fine.
I'm definitely going to put it behind everything else.
But for now, while I'm working with it, that's okay.
Now for the background image, I definitely want that to be transparent.
So I'm going to take that tint color and bring the alpha all the way down to zero.
And as I raise the percent, I see it's going from left to right and it's blue.
So I'm going to fix both of those problems.
Now I'm going to set fill color and opacity by dragging the saturation down to white.
So there's no tint there.
And I'm going to set the bar fill type to bottom to top.
So as we change the percent, we see that it's going from bottom to top.
Perfect.
Now we need that globe background image.
So let's give it a default.
I'm going to select and search for my underscore ghost and choose Ghost Health Globe or Ghost Manor
Globe.
It really doesn't matter.
And remember, we need to draw as image.
If we want this to look like it should.
We want it to look like that round material instance that it is.
And it looks like I used background image, so I'm going to actually reset that.
I don't need that.
I want the fill image, right?
So I'm going to set this to draw as image and change this to my ghost, one of those ghost globes.
And it looks good.
And by the way, the reason we can do this is because if we go back to my health globe, for example,
and browse to the parent material, which is not a material instance and we double click that, this
is just just by the way, you'll see that it's material domain is set to user interface.
So that's why we can use it in a widget.
And it looks like it looks here because this material was made with user interface in mind.
It was made specifically for being used in a material interface.
And perhaps at some point I'll show you how to make this material if I get enough requests, say in
The Discord.
Now back to our widget.
We have our ghost globe, right?
And so that's step one.
Now we are going to want it to be in the back.
And also, if you really want to experiment, you can drag the tent down if you want it to be darker
or something like that.
And of course, you can also go back into the material itself.
We have a lot of parameters here too.
Now I'm going to drag progress Bar Ghost all the way up so that it's behind everything else, and that
way it'll do its job as the ghost globe just trailing behind everything.
And one kind of cool thing you could do is if you wanted to see that ghost globe behind our blue or
red globe, whichever one it is, you could take that progress bar globe and open the tint and drag
its alpha down a bit so you can kind of see the ghost globe behind it.
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
should, I'm going to do that a little bit.
I'll put the Alpha at 0.9.
Now we have our progress bar ghost.
I'm going to of course, check is variable there and it looks like my progress bar globe did not take
that change.
I'm going to set that there.
Okay.
So Progress Bar Ghost is here in our base widget and we want to set this so that it follows our regular
globe whenever it changes, right?
So we need to think about how we're going to make that happen.
Well, I'd like to make use of interpolation and for interpolation we typically interp on a frame basis
every single frame where interpreting towards some value.
And because we don't have too many of these progress globes in our UI, we can do this for both our
health and mana and we won't experience any performance decrease.
So I'm okay with using tick functionality for our progress globe.
And what I'd basically like to do is constantly every frame be interpolating this ghost progress globes
percent down or up to our regular progress globes percent So.
Essentially we're going to want some kind of target to set.
So I'm going to go back to my graph tab.
And we know that we have our set progress bar percent every time we set that, we're setting the percent
value and the percent is what our ghost globe is going to want to interpolate to.
But I'd like a new variable, a new float that we can interpolate this to so it's designated for the
ghost globe.
In other words, a ghost percent target for interpolation.
So I'm going to make a new float.
I'm going to click add variable and I'm going to call this ghost percent target and I'm going to change
it to a float.
And every time we set our percent, I'm going to set our ghost percent target.
But I may want to have a sort of delay, right?
Maybe our regular globe changes and then we wait a second or two and then we have that percent target
set.
So if we want some kind of delay, then every time we call set progress bar percent, then we'll want
to use a delay node.
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
call every time set percent is called.
So here in the event graph, we can right click and make a custom event.
And call this globe percent set and every time globe percent is set, we can then set our ghost percent
target.
So that means that globe percent set should have an input.
Let's click plus input, make it a float and we'll call this percent.
And then here in set progress bar percent we can call our custom event globe percent set.
We can call this passing in the percent.
So I'll just reroute the node down here.
Like so.
There we go.
So every time we set the percent, we're going to call this custom event.
And then once we set the custom event, we can set ghost percent target, but we can use a delay node
here.
So that way we can have the delay.
And the delay can be a parameter or we can hardcode it.
I'm just going to promote it to a variable and call this ghost delay.
I'll compile and give it a default value of 0.5.
We'll give it a 0.5 second delay and I'm going to put these in a category of their own.
So for category, I'm going to call these Ghost Globe properties.
So my ghost delay is in it and I'm going to set my ghost percent target to Ghost Globe properties as
well.
And compiling here.
It looks like I get a compiler error, so I'm going to go ahead and refresh the node.
There we go.
We can get that sometimes.
And I'm going to take my percent and set Ghost globe percent to that.
So every time we set the percent.
Then Ghost Globe percent will also be set.
Let's actually organize this a little bit like.
So.
There we go.
That's looking better.
Okay, So really, all we're doing is every time we set the percent, we're setting the ghost percent
target, but we're waiting 0.5 seconds before we do that.
Now, another thing is what if we want our ghost globe material to be swapped out?
Well, we can swap that out just like we've created parameters for the other brushes.
We have an update globe image here, which really should be update Globe Brush, shouldn't it?
I'm going to go ahead and rename that while I'm noticing that because everything else is consistent,
so this should be update Globe brush, but we can have an update Ghost Globe brush as well.
Instead of having a progress bar fill image, we can have a ghost progress bar fill image.
So I'm going to add a new variable under globe properties here, a new slate brush and call this Ghost
progress bar.
Fill image and I'm just going to call it Ghost Progress Bar Brush.
And this is going to be a slate brush.
And our progress bar fill image is actually going to be progress bar fill brush I'm going to rename
that to and this can go into Ghost Globe Properties.
Let's give it that category.
And we'll compile and give it a default value.
For the brush image and I'm going to give it my ghost health globe.
Compile that and we'll make a function just like update Globe Brush.
We'll have an update Ghost Globe Brush.
So I'm going to make a new function.
Update Ghost Globe Brush.
And just like update globe brush.
We're going to make a slate brush with zero opacity.
That'll be for the background image.
We'll use the Ghost Progress bar, fill brush, and we'll use the Ghost Progress Bar globe and set style.
So what I'm going to do is just copy all this and go into the ghost version, paste them all in.
Hook it all up.
But instead of Progress Bar Globe, we're going to use the ghost version.
Progress Bar Ghost.
So we'll switch that out.
And instead of progress bar fill brush, we're going to use ghost progress bar brush.
And of course, this is called Ghost Progress Bar Brush.
And the other one is progress bar fill brush.
Just to be consistent, I'm going to call the other one progress bar brush just so we have consistent
names there.
And now we have update Ghost glow brush, which we should call right here with all our other update
functions, which by the way, we could collapse all these to a single function if we wanted to do that.
But anyway, we have ghost percent set and all this does is set ghost percent target.
But we're going to want to interpolate our ghost percent to this every frame with some kind of interp
speed.
So we have a function to set our progress bar percent right.
And what we should do is every frame set our ghost progress bar percent.
So let's look at set progress bar percent All it does is set percent right and also call our new custom
event Glow percent set.
But we're going to want a set ghost progress bar percent function.
Let's add that function.
And we're going to say set ghost progress bar percent and this will just call set percent on the Ghost
Progress bar.
Let's get our progress bar ghost out.
Call set percent.
And just like set progress bar percent which takes in a float, we can add a float input here.
So we'll add a new input of type float called percent.
I'm going to compile right away.
And then we'll use percent to set the percent for our Ghost progress bar.
Now we want to interpolate, so let's just use event tick.
And what we have is we have our ghost progress globe.
Let's get that out.
Progress Bar Ghost.
And what we're going to do is interpolate I'd like to use f interp to which interpolates floats.
So we need to know the current value of the ghost progress bar percent.
If we drag off of the ghost progress bar and type percent, we can get percent and we can hook that
in.
And that's the current value, every frame.
Now we know that we have a target and that's a float called If I Can Find My Ghost Properties.
It's called Ghost percent Target.
And that's going to be for the target there.
Now we have Delta Time because we're using event tick, so we're going to hook in Delta time.
And now we need an interp speed.
Now this can be experimented with.
I'm just going to try a value of one.
In fact, I'm going to make this a parameter promote to variable and call this ghost interp speed.
I can go ahead and put this into the category of Ghost Globe properties compile and set it to a default
value of one, which it is.
And so after we've interpolated here, what we can do is we can set our ghost globe percent.
So we can get that new function.
Set ghost progress bar percent.
We can hook in the return value from the f interp too.
And simply call this here.
Now, before we test this out, we're doing something in event Tick and the Globe Progress Bar.
And that means we need to make sure that this tick is being called in child classes.
That means our widget blueprint and health globe widget Blueprint and our mana globe.
So we need to right click on event Tick and Health globe and add a call to parent function.
So if you were sort of stuck on this part, this might have been something that you needed to do.
And we'll do the same thing for Mana.
We'll add a call to the parent function here, make sure to hook up all the nodes.
And that way the child classes will get their parent version of Tic.
And that's very important so that we get that interpolation going.
So let's go back and press play and we can see that even though the health globe and the Ghost Globe
don't start off at the same values that that ghost globe is interpolating down to those values.
And of course, our ghost delay determines how long it takes before that happens.
We can set that to a value of one.
So we can get a nice one second delay.
And I don't see any transparency with my globe.
And that's because we're actually setting the brush in.
Update Globe brush.
We're updating with progress Bar brush, and that has its own tint here.
So if we really wanted, say, 0.9 on the Alpha for that, we'd have to set that here for progress.
Bar brush.
So now we should be able to see a little bit of transparency.
And just behind the globe, we can see the trailing ghost globe.
It's really apparent if we set this alpha to something much smaller like 0.3, it's not a value that
I'd want, but you can really see that the Ghost globe is trailing behind.
In that case, I'm going to leave it at about 0.9, though.
So that's the alpha on the tent for the progress bar brush which we're setting here in update Glow brush.
And of course we're doing that in the event pre construct.
Okay, so it's looking good except for the fact that they don't start off at the same values, right?
Because they have different default values.
It's really apparent when we step into the fire and I'd like this fire to take a little bit more each
period so we can test this ghost globe a little better.
So I'm going to go to my fire area down to its modifier and change this to negative five.
So every second we're taking five away from the health and now we can really see that ghost globe trailing
behind.
So the problem is the initial values, right?
And the easiest thing to do is just set them both to full from the start.
Perhaps here in event pre-construct, we can just set the progress bars both to full.
We can get our progress bar ghost, we can get our progress bar globe.
We can call set percent.
And just pass in one and then just initialize both of these to have a value of one from the start.
And then they just start off.
But there's a problem.
We can see the ghost globe sort of interpolating down to what value?
Well, that value is the actual value of the attribute, right?
Because look at this.
We show debug health is 50, man is ten.
And you can see the ghost globe, you can barely see it, but it's down to halfway on the red and about
one fifth of the way on the blue.
So that would mean we'd need to set that target value also to one.
Under Ghost Globe Properties, we have the ghost percent target.
We'd have to set that also to one.
So we're setting everything to a full globe from the start.
But of course, the problem then becomes, well, we're setting them to the values that are not accurate.
Right.
We're not setting them to the values they should be.
And that becomes apparent when we step into the fire.
We go from a full globe to five less than what our real health was.
So just setting everything to a full progress bar from the start isn't really going to cut it.
What we need to do is we need to know if this is our first time setting our globe percent.
In other words, is this the initial set of our regular globe so we can go to set progress bar percent
and an easy way is to just have a boolean value that we can set.
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
initialized.
We can compile and make sure that its default value is false.
And then in set progress bar percent we can set it to true.
But we can check to see if it hasn't been set yet so we can make a branch.
We can say if Globe initialized and if it's false.
Well, this is the first time.
So in that case, we are setting.
Globe initialize to true.
And if it's true, well, we just do what we were already doing.
But in the false case, we want to not call globe percent set.
We want to set the progress bar globe percent.
So we do want to do this, but we also want to set the ghost percent to the same amount.
So we're going to take our Ghost Progress bar, progress Bar Ghost and set the percent for this as well.
And what's the percent?
Well, we're going to set it to this percent value here.
And the Interp target for the ghost.
Ghost percent Target must also be set to the same value so that it's not attempting to interp.
To any other value.
Now, this isn't going to work exactly, because there's one detail we have to remember.
Percent could be zero if we go into Health globe.
We'll see that when we bind to these callbacks here.
We're calling set Progress Bar percent the very first time our health changes and either the health
or max health, one of these two has not been set yet.
So either health is still zero when we set our max health or max health is still zero when we set our
health.
Either way, the result is going to be zero.
And the very first time we set our progress bar percent, it's going to be zero.
And that means that if our globe has not been initialized yet, we'll get this false case and then we'll
initialize both the Ghost and Progress bar at the same amount, but that's going to be zero.
And then immediately after, our progress bar will be set to the correct value as both health and max
health will have been set.
But our ghost progress bar will still be zero.
So what we can easily do to fix that is we can check percent to see if it's greater than zero.
If it's greater than zero and globe initialized is false.
Now we'll consider this the correct time to initialize the Ghost Progress bar to the regular progress
bar amount for its percent.
So in the false case here, we'll do another check.
And only if this percent is not zero anymore, then we'll go ahead and initialize these so we can test
this out.
And I'm going to take my progress bar brush and for its default value, set its tint way down so we
can really see what's going on.
And I can press play and I can see that these values are correct.
As I increase my mana there we have our ghost globe following behind.
So that's working.
I'll go ahead and set my tint back to 0.9.
And this is a function so I can promote this percent to a local variable.
I'm just going to call it progress percent.
We'll promote that, set it, and then we can use it in place of all this green spaghetti here.
So I'm going to take progress percent here.
Replace that, we'll replace it here.
I'm just going to use control D to duplicate.
And we'll go ahead and get rid of these.
Green wires.
So that's going to be a lot better looking.
And we can just clean this up a little bit.
All right.
And we'll go ahead.
And just tidy these up a little bit.
Okay, so not too bad of a blueprint function.
And now we know that our Globes are starting off at the correct amount.
And my ghost delay is quite short.
Actually, it's one.
I'm going to set that to two right now and see if we do get that delay.
We do.
It's set to one second.
It doesn't look like we're getting that delay unless we hardcode a value.
Yeah.
So it doesn't want to use this variable for the delay.
That's fine.
We can always just come in here and change it.
So I'm going to remove ghost delay.
Okay, so that was kind of a lot of work just to get a pretty simple effect, but the effect is pretty
nice.
You know, it does make a bit of a difference.
And we did make our ghost material here a parameter so we could go into our health globe and make sure
that the ghost globe brush here, it's called Ghost Progressbar Brush is set to the one we want and
it's Ghost Health globe for the health globe and for the Man Globe.
We can set that to the one we want here as well by going to Ghost Globe Properties.
Getting our ghost progress brush and making sure this one is Ghost Manor Globe.
And that way it's a little bit more dark, a little bluer.
Okay.
So that's going to do it.
Everything's looking pretty good and that's okay if you couldn't figure out the entire challenge because
this one was quite involved and probably took you a little bit of time to figure it out if you got it
and you might have come up with a different solution than I did.
By the way, this would be perfect to collapse to a function.
So I'm going to right click Collapse two function and call this Interp ghost globe.
That looks a lot better.
All right.
So congratulations.
If you got that challenge.
If not, that's totally fine.
As with all these challenges, if you get too stuck and you're spending too much time on it, go ahead
and just watch the video and follow along with me and we'll do it together.
So great job and I'll see you in the next video.