Creating An Energy Bar In Unity
Goal: Visualize the amount of energy you have in a Unity game
Health bars, hunger bars, energy bars — they’re a staple for UI! In our 2D SpaceShooter, we’ll be fixing up our left-sprint system by implementing an energy bar. This will give the player short bursts of speed and will have to wait 3 seconds for energy to refill.
Previously, our code looked like this:
We’re going have to revamp this entirely for our new system to work.
Let’s start easy: making the UI.
In the top left, I went ahead and made an image and added an energy icon to represent our bar. Then I made another image, just stretched, for the bar itself.
For the bar to change in size, we go to the Image component and go to “Image Type” and change this to “Filled.” The fill method is horizontal and scaling from the left, and we get this affect when changing the fill amount:
Now we go to our UIManager script and make a reference to our energy bar. In here, I made a method called “ChangeEnergyBar” which takes in 2 arguments: our current energy, and our max energy.
This way, we can calculate a normalized value for our fill amount. Our current energy divided by max energy will give us a decimal value.
Then, we change the color of the bar based on that value. Green means mostly full; yellow is about halfway full; red is low on energy.
Now let’s go to our Player script and implement our speed!
First, we have to start off with a lot of variables. Each of these will make sense down the line. But the most obvious is our maxEnergy and our energyAmount. We have maxEnergy to keep an unchangeable value we can always reference, and a designer can change it in the inspector. Our energyAmount will be our current value that’s always changing.
Then I create a method called “Thrusters” that’s updating every frame.
And this is where it gets complicated with logic:
We start off with our inputs. Now, instead of using GetKeyUp, we use GetKey to register the duration we hold down the left shift button every frame. We state that if we’re holding down the left shift key, as long as our energyAmount is greater than or equal to one, we subtract 1 each frame, classify that we’re speeding up, and that we’re NOT recharging any energy.
Then, if we RELEASE the left shift button, then we’re NOT speeding anymore. Then, we introduce a new bool called “noEnergy.” This will classify whether or not we reached 0 energy. We state that as long as we still have energy, we then check if our “RechargeEnergyRoutine” is still going. If it IS, (it’s not null), then we have to STOP it in its tracks to start a new one.
This is also another thing about coroutines. If you ever want to stop one, you have to create a variable that stores the routine. Then you have to assign that variable to the coroutine, and like I put here, pass it in the StartCoroutine method.
Then if our energyAmount reaches 0, we state that noEnergy is true. Why do we do this? This is to prevent the player from spamming the left shift button when we have 0 energy, and restarting the recharging coroutine over and over again.
We then include an extra check here: if our energyAmount is 0, then we have to decrease our speed by turning off the speedUp bool. This is outside of the inputs because this should happen regardless of any button press.
Then, here is where our SpeedUp bool comes into place. But now we have to include an extra check called “multiplySpeed.” Notice how once we check if multiplySpeed is true, we immediately turn it false, and vice versa. This is so that we multiply our speed only ONCE, because otherwise, we would be multiplying our speed EVERY FRAME.
Then we include our UI changing method from our UIManager script. We also incorporate ChangeThruster method from last tutorial, which just changes the visuals of the player’s thrusters. But now we introduce a method called “Recharge” will be explained furthur.
Now, our actual cooldown. Remember how we stored a coroutine and started it in the inputs? This is it. We state that after 3 seconds, we DO have energy now, so we set noEnergy to false (So the player can spam the left shift again.) And since this routine is going to keep running, we have to check if the player presses the left shift again. We check if they’re trying to speed up again, we stop recharging energy. Otherwise, continue recharging energy.
And our Recharge method is one that keeps running. Here, we state that if we ARE recharging energy, we’ll add one to the energy amount as long as it’s no more than our maxEnergy.
And this is what we get:
And that’s all! Thanks for reading, and hopefully this was helpful! Have a great game-dev day!