How can I add a cooldown bar in the HUD for jumping?

Hi!

Basically I’m new to the engine and have been trying to add a visual cooldown for jumping. Currently, the player can only jump once every 5 seconds. This is exactly what I wanted so that works fine, however I want to be able to visualise this on screen by having a progress bar to show when jump is available for the player to use again. So a bar that depletes and recharges in 5 seconds every time the jump is activated by pressing space bar. I’m having trouble understanding how I can do this, looked around for a while but no luck. I’ve attached screenshots to show the jump cooldown and the progress bar I’ve put in the HUD. If possible, an answer with screenshots would be much appreciated. Thanks in advance!

Jack.

Hi there. For visualising something in a progress bar in Unreal, to the best of my understanding you will need to use the [Set Percent][1] function of the progress bar. So for showing cooldown using a progress bar, I’ve done the following:

  1. As a basic premise, I’ve created an actor that inherits from the First Person Character (So it’s basically just the first person character that you get from the template) and I’ve added the do once and the delay as you’ve done. I’ve also added a call to my player controller which tells the player controller that we’ve just jumped, passing through how long the cooldown should last for. In this case, I’ve set it to the variable Jump Cooldown Duration (Whch is 5 seconds).

  1. In my player controller, I create the UI widget and store a reference to it so that it can be accessed later. I created a function in the player controller called Jump Has Occurred, which takes in the cooldown duration. All this does is pass that information up to the UI which has the progress bar in it:

216613-jump-has-occurred-event.png

  1. For the UI, I created a progress bar that goes from red to green (Red meaning you can’t jump, green meaning you can.). When the player has jumped, as per the previously explained functions, the UI receives the information that the player has jumped and then prepares a few things:

In this case, I set a float called Cooldown Duration. That’s how long we’re going to be waiting for the progress bar to fill up. I have another float called Timer, which will increase with every tick event by delta seconds. This is basically storing how long it’s been since the player has last jumped. I set a boolean called Is On Cooldown to true (I’ll explain this one in a minute) and I set the progress bar percent to 0 so that the bar is empty. I then set the colour of the bar by setting the variable Current Bar Colour. This is [bound][5] to the progress bar colour, so whenever Current Bar Colour changes, so does the colour of the progress bar. (I could have also done that for the progress bar percent as well, however for this example I just set the percent through the progress bar function.

  1. I perform the animation in my Tick event. Firstly, we have a branch that stops the event from continuing if we’re not on cooldown (Thus the On Cooldown boolean from before). We then add delta seconds (Time since last frame update) to timer and we check if it’s over our cool down timer. If it is, the animation is complete and we can set everything to how it was when the player is ready to jump (In my case, I set the percent of the progress bar to 1 (It goes from 0 to 1), I set the colour of the progress bar to green and I set a string to say “Jump”). If the time hasn’t elapsed yet, I [lerp][6] between two colours to get my progress bars’ current colour (I lerp between red and green, so over the duration of 5 seconds it goes from red to green). I set the percentage by taking the timer and dividing it by the cool down duration. This gives me a fraction that gives us how far along we are in terms of being able to jump again. (E.g if it’s been 2.5 seconds since I last jumped and the cool down timer is 5 seconds, we’ll get 0.5. The progress bar will be filled halfway and in my case it will be yellow (Going from red to green)).

I’ve thrown this example on [github][8] if you would like to take a look.