Thruster Overheating and UI

Lets improve on the thruster system even more by adding a heat gauge that prevents the player from using the thrusters too much. If the gauge fills up, it will display “Overheating!” and prevent the player from using thrusters until it is empty. We can use a basic UI element to represent this: the slider.

After attaching the to the canvas, we can make some modifications:

• Anchor it to the bottom left of the canvas
• Remove or turn off the Handle object
• Turn the Fill color to red
• Make sure the Fill can cover the entire bar by modifying the fill area

After a few more size adjustments and adding some text, this is the end result.

Time to code. The Player class is going to keep track of its heat level and whether or not it can use the thrusters.

We can create a new method called CheckThrusters that takes in a boolean value that tells it if we are actually moving, according to the other input. If we aren’t actually moving around, the thrusters needs to know so it doesn’t increase heat for no reason. It also uses _overheating as one of its conditions to ensure the player can only use thrusters if they are not overheating.

CheckThrusters adds or subtracts from the heat based on whether the thrusters are in use. It controls some functionality that we created last time, like how large the thruster image is. Finally, it calls the UI Manager and tells it to update the heat gauge slider that we made for the UI, then returns a speed value so the rest of CalculateMovement knows how fast the player should move.

Now for the UIManager class. We add many variable to keep track of the new UI elements that will be edited, like the Slider’s number value, the Image’s color, and the Text.

Here’s the UpdateHeatGauge method that is required by the player script. This will set the value of the slider so it will show the amount of heat properly. If the gauge reaches maximum, it changes the text and starts a coroutine that causes the color to flash. If the gauge is empty, it will reset the text back to normal and set a boolean that stops the coroutine loop.

All done! Now we have a heat system affecting the thrusters, and a nice UI element that shows it as well.