Dev Day 56: Creating a UI Display Bar for Thrusters in Unity3D

Objective: Create a UI display bar for the thrusters that decreases over time when the Thrusters are engaged by holding down the assigned keyboard key. If the thrusters UI display bar is depleted, the thrusters will disengage, even if the keyboard key is still pressed down. When the keyboard key is released, the thrusters UI display bar will refill over time, and the thrusters can be engaged again.

Step 1: In Unity, right-click on the Sprites folder in the Project window and select 2D, then Sprite, and create a Square named Thruster_Bar. In the Hierarchy window, right-click on the Canvas GameObject, select UI, then Image, and rename the Image GameObject to Thruster_Bar.

Step 2: In the Hierarchy window, select the Thruster_Bar GameObject, and in the Inspector window, assign the Thruster_Bar Sprite as the Source Image in the Image component. Adjust the color of the Thruster_Bar to the desired color, resize the Image in the Scene view, and position it within the Canvas area. Then, in the Image component, change the Image Type option to Filled, set the Fill Method to Horizontal, and set the Fill Origin to Left.

The last item to take note of in the Image component is the Fill Amount, which is what will be utilized to reduce the image from right to left when the thrusters are engaged.

Step 3: In the Player script, create a private variable of type Image called _thrusterBar, use [SerializeField], and save the script.

Go back into Unity, select the Player GameObject in the Hierarchy window, and assign the Thruster_Bar GameObject to the Thruster Bar slot in the Player (Script) component in the Inspector window.

Step 4: In the Player script, create a private bool called _thrusterCoolDown and set it to false. Then create a private float called _thrusterWaitTime and assign it a value of 2.0f.

Step 5: In the CalculateMovement() method’s else if statement, add to the GetKey argument that the _thrusterBar.fillAmount must be greater than 0. Within the else if statement, add that _thrusterCoolDown is equal to true. Then create an if statement stating that if the _thrusterCoolDown is equal to true, then the _thrusterBar.fillAmount variable will equal the _thruster.fillAmount’s current value plus 1, divided by the _thrusterWaitTime value, then multiplied by Time.deltaTime. This will reduce the size of the thruster UI display bar when the assigned keyboard key is held down and the Thruster_Bar’s Fill Amount is greater than 0.

Step 6: Create a new else if statement stating that if the assigned keyboard key is held down and the _thrusterBar.fillAmount is equal to 0, the _thrusterBar.FillAmount will be assigned a value of 0, the _thrusterVisual.SetActive will be set to false, and the Player’s movement will be multiplied by the normal _speed variable. So, when the thrusters are depleted and the assigned key is still held down, the Player will resume the normal non-thruster speed value, the thruster visual will be inactive, and the thruster’s UI display bar will remain empty.

Step 7: Lastly, in the else statement, state that the _thrusterBar.fillAmount variable will be equal to the _thrusterBar.fillAmount’s current value, plus 1.0f, divided by the _thrusterWaitTime value, and multiplied by Time.deltaTime. This will refill the thruster UI display bar when the thruster’s assigned keyboard key is not held down.

Save the script, go back into Unity, and the thruster UI display will reduce when the thrusters are engaged, will stay reduced when engaged but depleted, and will refill when disengaged.

Unity Developer