Will it Scale?!
Adding a scaling bar UI for the players thrusters
Welcome back! I’ll be continuing to implement the requirements for the first phase of the 2D games certification in the GameDevHQ Professional Unity Developer Program! I’ve ben creating collectible items for various powerups and abilities in the last few requirements. Todays requirement is a bit different, it’s new UI! The requirement is to create a UI element that visualizes the players thruster amount as a bar that depletes and then refills. The requirement reads as follows:
Tasks:
- Create a UI element to visualize the charge element of your thrusters.
- Cool Down System required.
Setup the needed UI
With this requirement being largely based around a new UI element, it makes sense to me to start with the UI components! After a bit of research I decided to use an image tied to a slider component and controlled programmatically to represent the scaling thruster bar UI. To begin, I created both a border image and an image for the filler of the UI bar element and imported them into the project. I then setup an empty parent object that contained both images as children overlayed on each other so that they appeared to be a single element. After this I added the slider component that comes with Unity and assigned the filler image to the “Fill Rect” property on the slider. At this point manually adjusting the slider value gives the appearance of changing the fill in the progress bar component.
With this in place I needed a way to control the sliders value programmatically so that I can tie it to the amount of thruster charge later on. To do this I created a ThrusterDisplay script that takes in a slider component and has public methods for setting the current value and the maximum value of the slider. I then attached this script to the progress bar parent GameObject, alongside the Slider component, and assigned the slider via the editor. I now had a complete progress bar component that can be controlled programmatically and I realized that it could probably be used for more than just this thruster display in the future, so I prefabbed it.
To complete my new UI element I created a new empty parent object and added a text element and my progress bar prefab to it. I then aligned the elements and moved it into position below the lives UI.
Adding the UI calls to the Managers
With the UI elements in place it was now time to make them accessible to other components like the Player script. This means adding them to both the UI manager and the Game manager. In the UI manager I added a variable to allow me to set the ThrusterDisplay class from the UI elements in the editor and then added methods to allow updating of both the current and max thruster charges.
After that I added the corresponding update methods to the GameManager class.
Player Script Modifications
At this point I'm ready to have the thruster display controlled from the Player class. In the player class I add a set of properties used to control the players thrusters. I add properties exposed to the editor to set the maximum amount of thruster charge, the rate of thruster usage, the rate at which the thrusters will recharge and the length of time for the cooldown before the thrusters begin to recharge again. I also include some private variables for tracking thruster activation and recharge states.
With the properties in place, I make sure to initialize the current thruster charge to the max thruster charge in the start method and move on to adding the code that changes the movement speed based on thruster state. In this case, if the thrusters are active the code manages whether or not the recharge routine needs to be reset and then reduces the thruster charge amount. When thrusters are inactive it starts the recharge routine if its not already running and the thruster charge isn’t full.
Lastly, I add the ThrusterRechargeRoutine coroutine and the method that the coroutine calls for recharging the thruster charge and making calls to update the UI through the GameManager.
With everything in place, play testing and code check in cap this feature off!
Next Time!
In this article, we added a new UI element to show the player how much thruster charge they have and allow that thruster charge to deplete and recharge with a cooldown. If you enjoyed this article, or want to come along with me as I progress on my journey, follow me at gamedevchris.medium.com.
