2D Shooter: Thrust Visual

Objective: Create a visual element that will represent the fuel gauge for the thrusters so the player knows how long they will last.

First we’ll want to make a slider within our canvas. Right click canvas > UI > Slider. You’ll get this white stick-looking thing with a knob. We’ll want to delete the handle and make sure the box interactable is unchecked as we’ll want to change the slider value through code. Within the background and the fill area is where you can change the slider’s colors or even add an image.

Now also make sure that the max value is set to 100, and that we have it start there as well. Now let’s go to the UIManager script.

Create a variable to attach the slider to, and a method that will update its values when it is called.

Now let’s go to the player script where we made the thruster. I ended up changing the code quite a bit to better organize it and make the visual look better once its run. Here’s where my code to how it looks now (I also changed _chargingTime’s max value to 100):

Since GetKey continues to update while the button is held, we can decrease the fuel gauge without a coroutine. The same can’t be said for GetKeyUp.

And here are my coroutines:

At the moment the charging motion for the slider is a bit jerky, which is fine when it’s overheated, although when its regularly charging I’d prefer it to be a smoother motion. Perhaps I’ll go back to it and work on it more to perfection, but at the moment I’m happy with it so here it is: