Adding a Thruster Bar visual

A while ago, we added the use of thrusters to our player. Let’s add a visual cue as to the use of it. Since it is; a ‘visual’ cue; we are going to need to add images to our scene. For simplicity I have decided to use rectangles, one white that is just a little bigger than the other, blue.

Rectangles children of Canvas

Now we need to add a slider component to the white rectangle (possibly called Thruster_Bar_img). Then we need to drag the blue rectangle (possibly called (Thruster_Bar_Inner) into the Fill Rect field of the slider.

Set the max value to say 5 and then if you click and hold the filled circle next to the 5 and drag left and right, the below will happen:

Awesome, now that we have the Thruster Bar working manually, we ‘just’ need to code it to work during the game.

In order to accomplish this we need to create and add a script; let’s say ThrusterBar ; to the Thruster_Bar_img object, and then opening it.

We need to add variables to this script, such as below:

Saving and jumping back into Unity we then need to drag the Thruster_Bar_img into the newly created _thrusterBarSlider field, and set the Max Thruster value to 5.

Jumping back into the ThrusterBar script, we need to add the following to the start method:

Then adding the following to the Update Method:

Saving and jumping back into Unity and pressing play, will, upon holding down the Left Shift key produce: