In this article, we’ll implement some UI and a charging system for our thrusters.
Thruster UI
To set up the UI, we’ll create a parent object with an Image component and make 2 child objects; a Panel and Text. The Image component of the parent object will be the background of our thrusters bar, and the Panel will be the foreground color.
The Panel Image component has a property known as the Fill Amount.
This is what we will access in our script to control the thruster gauge bar UI. If the Fill Amount is 1, the bar is full. If it’s 0, the bar will be empty.
Creating the Charging System
We’ll define a variable called thrusterDuration, how long the thrusters last before needing to recharge. We’ll define another variable called currentThrusterTime, the current remaining thruster amount.
The charging system limits how long the player can use the thrusters. While the player holds the Left Shift key, we want to burn through our thruster charge. When the player releases it, we want the gauge to refill. On each update, when one of these two events occurs, we then update our UI.
In code, it looks something akin to the following:
void Update()
{
if(Input.GetKey(KeyCode.LeftShift))
{
currentThrusterTime -= Time.deltatime;
} else if (Input.GetKeyUp(KeyCode.LeftShift))
{
currentThrusterTime += Time.deltatime;
}
//Update UI
_uiManagerScript.UpdateThrusters(currentThrusterTime, thrusterDuration);
}To update the UI, we need our UIManagerScript to have a reference to the Panel object. We’ll create a public method that will access the Panel object’s Image component. We’ll set its Fill Amount property equal to a fraction involving the currentThrusterTime and thrusterDuration variables.
private Image _thrusterBar;...public void UpdateThrusters(float currentThrusterTime, float thrusterDuration)
{
_thrusterBar.fillAmount = currentThrusterTime / thrusterDuration;
}
There are other edge cases to cover for the implementation to work as intended, but the pieces of code that I provided in this article cover the main idea of the implementation. Hopefully, it’s helpful!
