Creating a Thruster Gauge Feature for our 2D Galaxy Shooter Game in Unity-Part 01!
Objective: This is going to cover finalising our thruster boost feature by implementing a complimentary UI thruster gauge using Unity’s UI Slider.
Now that our thruster booster is setup and we are beaming around the screen, it is time to add the last visual element which is going to be a dynamic thruster gauge that increases/decreases and pauses when the player is using/not using and overloading the engine. We are going to be using a fill bar that will indicate blue when there is thruster power available and it is going to be flashing red and white when the thruster is overloaded and the player can’t use it. There is also going to be audio clips that are going to play depending on the thruster boost conditions. Plenty of visual and audio cues for the player to understand what is going on and most importantly to provide them with a greater experience…Lets get started!
Unity’s UI Slider
I think the best place to get started here is going to be Unity’s UI Slider feature. UI Sliders are commonly used for features such as volume control, screen brightness, setting distances, sizes, time or even angles. But we are going to use this a different way and use it as our thruster gauge.
Firstly we need to add a Slider to our game so on your Canvas game object within the Hierarchy window, right click → UI → Slider. Rename this to Thruster Bar.
Now with Thruster Bar still highlighted, we need to anchor it where we would like in the Inspector:
Don’t forget to adjust the PosX and Y if you need to, and also tweak the Width and Height to your liking. It will automatically be created as a horizontal slider bar, so if you would like this to be vertical just make sure to adjust the Rotation also. It should now resemble something like this:
Now I particularly didn’t like the oval shaped handle at the bottom, so I went ahead and deleted this from the Hierarchy as it isn’t needed:
We can now set the colour of the fill bar in the Inspector on the Fill game object, which I am happy to use a nice blue:
As you can see the fill bar is now sporting a shiny new blue colour. But I am also not particularly fond of the white space at the top. There is a very simple fix for this. On your Fill Area game object, open up the Rect Transform component in the Inspector and simply change the ‘Right’ setting to 5, the same as the ‘Left’ as shown below:
We have one last step to finalise our UI thruster gauge bar before we get to the coding and that is to make some changes to the Slider component on the Thruster Bar game object:
Firstly we need to untick the ‘Interactable’ option as we don’t want the player to be able to interact with this during gameplay. Next is to drag in the Fill game object into the ‘Fill Rect’ space. Next we need to set out minimum thruster gauge percent which will be 0 and our maximum 100. We are also going to start the thruster gauge at 100%, so make sure to change the value to this.
Next Up: Part 02 — Is going to cover the coding side of the Thruster Gauge!