Welcome back.
So now our spell globes know when a cooldown has started and when it's ended.
We also know the time remaining.
We haven't tested that, but on cooldown start, we should just print that.
Let's see what that time remaining is.
So if we press play and launch, we see three seconds and that is indeed my cooldown time.
If I go to cooldown Firebolt and change that from 3 seconds to 2 seconds and just quickly play test
that we see two seconds.
So we do have that time and that's really all we need to be able to update the time in the HUD.
So in this video, we are going to do that.
So first of all, what we'll do is when the cooldown starts, we're going to take our time remaining
and we're going to store that.
So we're going to promote it to a variable.
We can just let it be called time remaining and we'll set that here in cooldown Start.
So that's number one.
Now, as soon as the cooldown has started, we need to make it look like we're in cooldown mode here
in our spell globe.
Now remember, we created a function to make our background darker.
We have a set background tint and this is a function that can set our background to a tint.
We can remind ourselves what it does.
It makes a linear color that's gray.
It has an alpha of one and red, green blue values of all the same value that we pass in that gives
us a gray value.
And as we've seen before, that's going to make our globe much darker, especially with a really low
value like 0.1 or even lower.
So as soon as our cooldown starts, we can set that to a dark color and let's just test that.
There it goes.
It's darker now.
We never set it back, but you get the point.
We can set this to something like 0.1, 0.05 will be even darker.
And we can also make it black if we wanted to set it to zero.
That will make it black.
Right.
So pretty cool.
I'm going to set it to a low value 0.02, maybe 0.01 might even be cool.
So that's really dark.
Actually, that's too dark.
0.05 was good.
So we have the ability to make it dark.
We want to make it bright again, of course, too.
But that's one thing we want to do is make it dark right now.
Another thing I want to do is show or hide our cooldown text.
Remember, we have that.
We can't see it because our text is set to the empty string.
But if we give it a value, say 99.
Well now we have text in all of these and by default we shouldn't really see that.
So really, we want this to be hidden, but we want to show it when we're in cooldown mode so we can
take our text cooldown and we can show it.
We can do that with set render opacity.
Set render opacity is a good way to show or hide it.
And if we're in cooldown mode, we want to set that to one.
But if we're not in cooldown mode, we want to set it to zero.
And we also want to set our background tint all the way back to one so that way it's not dark anymore.
So to make this really easy, I'd like a function to set the state of our icon.
We can set it in the cooldown state or the not cooldown state, right?
The default state.
So that's all I'm going to do is I'm going to first of all, we can make this tint a variable if we
want.
We can make it the cooldown tint.
And then we can collapse this to a function.
So I'm going to right click Collapse two function and this will be set cooldown state.
And now we have a function that can do that.
Now I can also make a function that sets it back to default.
So if I copy these nodes and just come out to the event graph, paste them and then collapse these to
another function.
Except instead of cooldown tent, we set the tent back to one and instead of an opacity of one, we
set the render opacity to zero for the text.
This can be for the default state, so we'll collapse this to a function called set default state.
But I'm not going to call it right now.
I'm just going to delete it for now.
Okay.
So after we've stored the time remaining and we've set the cooldown state, we need to update our cooldown
text.
Now, a timer is a great way to do this.
This allows us to keep things out of tick.
We can just set a timer while the cooldown is going and we know the time remaining, so we just need
to update that timer.
And timers are cool because we can choose their update frequency.
They don't have to be every tick, so I'm going to call set timer by event.
And this allows me to have an event hooked up.
And the time here is where we can specify a frequency.
So I can promote this to a variable.
And we can call this the timer frequency and we can set that to update however often we want.
For example, 0.5, that would be every 0.5 seconds or 0.1 would be ten times a second, and so on.
Now we can take our return value from the timer.
This is a timer handle.
We can promote it to a variable called cooldown timer handle.
So that way we can have that handle and we can hook up an event to this timer.
So we're going to right click type custom event and add one and we'll call this update timer and we'll
hook that up.
So what are we going to do in update timer?
Well, our timer frequency is what we can use to update our time remaining.
So our time remaining starts off at some value when the cooldown starts and as the cooldown is running,
every timer frequency, right?
Every 0.1 seconds, we're going to be executing this event, at which point we can take time remaining
and set it equal to itself, minus the timer frequency.
So we're subtracting off that timer frequency each time.
So we're going to take time remaining and set it equal to time remaining minus.
So we'll have a subtract node and we'll use the timer frequency.
So that way we're updating time remaining each time we update the timer.
Now what we can do is our time remaining is what we want to set our cooldown text to.
So our text cooldown, we can get that and call, set, text for it.
So set text and we're going to use set text the function which takes in an F text and the F text is
going to be our time remaining.
Except the thing is, we may want it to be rounded to a specific number of decimals or we may wish to
have an integer, right?
So we want to use a to text to text float.
And here we can specify how many digits I would like one digit to the right of the decimal point only
and we can hook that in.
Now, I've found when doing these timers that we definitely want to make sure that we never get anything
that doesn't make sense.
So if for some reason time remaining is negative or something, well, we can prevent showing a negative
value by clamping the float between zero and itself.
And so that's what we're going to pass into our two text node.
Now, after setting the text, we need to know if our timer is up, if our time remaining has reached
zero, because then we can clear the timer handle and it doesn't have to keep firing off anymore.
So we're going to have a branch and we're going to check our time remaining.
We're just going to see if it's reached zero.
So I'm using a less or equal.
And if it has reached zero, we'll take our cooldown timer handle and use clear and invalidate.
Timer by handle.
Now, at this point, we know that our timer has elapsed.
The cooldown should be over, and at that point we can call that set default state for our icon set
icon default state.
We called it set default state.
So we can call that and it will no longer be dark and we'll hide that number.
So if we press play well, we do still see the number.
So the number itself should be set to zero, render opacity by default.
So we can do that in the designer.
We'll take our render opacity, set it to zero by default.
In fact, we can do that in event pre construct.
We'll take text cooldown and call set.
Render opacity.
And just set it to zero there that way, by default, we don't see it.
But when we have a cooldown, let's look at that icon.
Oh, look at that.
And okay, so we're not updating the text properly.
Let's go back and find out why.
And of course, we do want this looping, don't we?
Because it just happened once.
And as long as we haven't cleared and invalidated it yet, we want it to keep going.
So let's try that with looping.
And there we go.
So that is looking excellent and we can't fire.
And it makes sense that we can't fire because we can see down there that it's grayed out.
Excellent.
Now, one thing I don't like is when the number goes down to a single digit.
So I'm going to go back to my two text and have a minimum number of fractional digits and just say that
we always need a 0.0 there.
So I'm going to have a one as a minimum, and that way we'll always have at least one digit to the left
and one digit to the right.
And now we have a working timer.
This is great.
Now, all of this could be collapsed to a function.
So I'm going to collapse it to make this neat.
I'm going to call this update cooldown timer.
And now this doesn't look so out of control.
So really, our innocent looking little spell globe is actually kind of a more serious blueprint, right?
We might even want to consider commenting some of this so this can be set.
Widget controller.
This can be bind to ability info delegate.
Here we can say end cooldown, change task.
If it exists.
And then all this is just listening for the cooldown change.
Right?
So we'll go ahead and just put this part in a comment.
Listen for cooldown.
Wow.
I can't type today.
Cooldown, Change.
And then here we're handling the cooldown timer.
So we'll say handle cooldown, timer, something like that.
And since this little node looks lonely.
We're going to put this poor little guy in here.
There you go.
Now you have a home.
All right.
This is looking nice.
Now, actually, this part doesn't look so nice, so I'm going to collapse it to a function just because
we're going to, say set cooldown, text or hide cooldown, text collapse to function, hide cooldown,
text.
Just because I want this all looking nice and neat and now it is.
I'm going to just select them all and hit.
Q And now they're all lined up.
All right, Excellent job with this.
This is a great milestone because it really means a lot to your players of your game when they can see
your cooldown.
If you can't cast a spell and it looks like you should with Mana, right?
You're like, Hey, I have mana, why can't I cast my spell?
Well, if you see something like this with a cooldown, counting down like a little countdown timer,
the abilities spell icon is grayed out.
You know that You can't cast it until that reaches zero.
So it's just a really subtle but very important feature of an RPG game.
And now you have it.
Excellent.
So I'm very proud of you.
Awesome job.
We're now ready to start implementing our experience points and have Aura start leveling up and then
it's going to really start getting pretty interesting.
So excellent job and I'll see you in the next video.