Making a UI Bar.

Now that we have made the thruster speed function, I noticed that I needed a UI bar to display thruster speed.

Objective: Make a meter for our thruster speed.

Second Objective: Make a cool down system.

I will extend my code from my past articles of increasing speed and a cool-down system.

RADIAL SLIDER

First, I will first make a radial bar for our thrusters. I will go to our canvas and make a new slider.

THRUSTER INDICATOR

I added some areas to the charge slider. This is the full list of game objects for my newly made slider, named, ‘ChargeSlider’.

Then, I created a circle on the project panel.

I set the width and the height to 160 of the slider before I changed the background it into the circle sprite

I cleared out the background values and made it stretch.

In the ‘Fill Area’, I made the values from the fill equal to 5. I made this area stretch as well.

In the ‘Fill’ Area, I cleared out the values and stretched it fully.

For the Image in the ‘ Fill’ sprite, I added the same circle sprite, changed the image type to filled, which I set the fill method to Radial 360. By default the fill origin will start from the bottom. I left the value there.

I duplicated the background and named it Inner Area. I put all the values at 20. I put the color at white, the same as the background. It will represent the spacing for the fill.

I did the same duplication and put all the values at 5. I colored this circle with grey.

I added a UI text to label the slider.

This is the result:

COUNTDOWN INDICATOR

I did the same for my count-slider.

The width and height is equal to 160.

The background values are cleared. I colored this circle with a lighter grey. Do not forget to add the circle sprite.

For the Fill color, I made the values equal to 5.

For the CountFill sprite, I zeroed the values and colored the circle a darker grey.

I made a text for the count-down and will use it in our UI Manager.

This is the result for the count-down slider.

THRUSTERS

I have duplicated the thrusters and put them as a child of a parent gameObject I named Thrusters. I scaled the thrusters and placed them without affecting the individual thrusters.

UI_MANAGER SCRIPT

I made new values for the script. For the Cool-Down section, I made a UI slider named cFiller, TMP_Text object named _timeText, a float named coolDown seconds, and a float named maxCoolDown. I made the default value of maxCoolDown 5 for now.

Note: the cFiller is the countdown slider.

For the Thruster section, I named a UI slider, _chargeBar, a bool named isCharging, and a float called _charge.

In the Start Function, I made the charge value equal to the maxValue of the _chargeBar slider.

I also made the cFiller slider inactive, the max value and value equal to the maxCoolDown float.

In the Update function, I put the timeText equal to the coolDownSeconds value printed in a string.

Next, I set some values. If the coolDownSeconds greater than zero, I decreased the coolDownSeconds by Time.deltaTime. I also set the cFiller(count-down slider) value equal to the CountDown method, made after the update. If the coolDownSeconds less than zero, then the value and the cFiller slider value will equal to 0.

The CountDown method is simply returning the value of subtracting the maxCoolDown float by the coolDownSeconds float.

I made a public value named Charge. If the isCharging bool is false, then make the bool true and start a coroutine named ChargeThrust. I made another public method named CancelCharge and it does exactly the name. If the bool isCharging is true, then the _charge value is equal to the _chargeBar value, which the default is zero.

In the ChargeThrust coroutine, while the charge bool is set to true, it will increase the chargeBar value. If the bool is false, it will decrease in value. I returned the value null.

I made a public value for the countdown. For the StartCountTimer method with a local float variable, I made the count value equal to coolDownSeconds. I made the countdown slider active and the chargeBar inactive. If the count value is less or greater than zero, then I have another public method called StopCountDown.

In the StopCountDown function, I set the cFiller slider inactive and the chargeBar slider active.

PLAYER SCRIPT

In the Player Script, I made an GameObject named _thrusters.

I also added these fields: an int named _chargeCount, a bool named _isThrustBoostOn, and a bool named _stopCharge.

Then, I set the scale of the thrusters to .18f for the default in the Start function and increased/decreased the size of the thrusters using localScale.

In the SpeedUp method that I created, I assigned the Right-Shift key and added some conditions: If the isSpeedboostActive, isThustBoostOn, stopCharge bools are false, then the _pSpeed value is increased by shiftspeed. The speedBoostOn bool is set to true and the Charge method from the _uiManager value. I also set the thrusters to a larger value.

The same applies here. The moment when the key is released and if the bool isSpeedBoostOn is true, and stopCharge bool equaled false, then the _pSpeed value is decreased by _shiftSpeed. I added the CancelCharge method from the _uiManager. I added 1 to the chargeCount. I added a smaller value to the thrusters.

For both of them, if the _chargeCount value is greater than 2, then we start the coroutine, named StopAllCharge.

In the coroutine, I made the stopCharge bool equal to true. I set the thrusters to the default, I used the StartCountTimer and made it equal to 5 seconds. I yielded the function, for a tenth of the second added to the countdown value. I utilized the StopCountDown method, the charge count resets to zero, and the stopCharge bool is equal to false.

Finally, In the Update function, I just added the SpeedUp function.

Result: