Learn to code by making a 2D space shooter game.

9 min readMar 17, 2022

Objective: Implement Thruster Scaling Bar HUD.

The first step is to create a slider component and rename it ThrusterBar, anchor it to the left corner.

Note: Inside the ThrusterBar, deletes a handle gameObject we don't need that.

In the next step expand Thruster then expand fill area, fill, and background to fit the ThrusterBar.We do this by right click anchor hold alt selecting the position we want to anchor then right-click.

In the next step-change the background color and fill, to make the difference between them.

We need the thruster bar to be non-interactable select the thruster bar, uncheck interactable, and set the transition to non.

Select fill set width to zero to make it reach zero when we reduce the value to zero.

Create a new script named it ThrusterBar and attach it to the thruster bar.

Open the script and create a slider variable rename it ThrusterBar and serialize it.

make sure to use UnityEngine.UI namespace to able to use slider component.

Drag the ThrusterBar game Object to the field on the inspector.

Create two int variables for current value and max value set max value equal to 100, this will be responsible to set a value of our slider.

Then set the value of the slider, on the start method when the game start, set the current value equal to the max value then set thrusterBarSlider.maxValue equal to maxValue and ThrusterBarSlider.value equal to the maxValue.

Create a coroutine called DecreaseThrusterBarRoutine which pass the parameter then check using the while loop if the current value minus the parameter is greater than zero. We need to reduce the current value by parameter then set the thrusterBarSlider value equal to the current value we minus then wait for 0.1 to make the slider go smooth.

Then create another coroutine called IncreaseBarRoutine which pass the parameter then inside the first thing we need to wait for 2 seconds then check if the current value is less than the max value using while loop we need to add the current value with our parameter then set thruster bar slider value equal to the current value.

_currentValue += max value/100 this is like normalizing the max value so even you put 2000 max value if you do this it will turn it to 1

create two public methods name them increaseThrusterBar and DecreasethrusterBar.

This method will be used to call the coroutine

Then we need to create two coroutine variables rename them increase Routine and decrease Routine.

This used to access coroutine or stop coroutine when we assigned them to coroutine

In the next step create StartCoroutine from those two coroutines and assign it to each of these coroutine variables don't forget to pass its parameters if the coroutine has parameters.

In the next step, we need to increase thruster bar volume but we need to stop decrease routine since we need only increaseRoutine to work if we release shift key if we do not stop decreaseRoutine these coroutine will have conflict it will increase and increase the volume at the same time.

Likewise, we need to check if increaseRoutine is running if true we need to stop it, we do this because we need to decrease the volume only when we hold the Left shift key so to archive this we need to stop increaseRoutine to avoid conflict between this coroutine.

Note: we need to set the increasing routine to null at end of the decreaseRoutine to avoid NullReferenceException: routine is null.

To explain this more when you stop holding the left shift key Increase Routine will be called this is the logic you will implement later if you release it increase routine will be called but since you stop it when you decrease the ThrusterBar volume it will throw NullReferenceException: routine is null.

NullReferenceException: routine is null

To solve this set Increase routine to null at the end of decreaseRoutine, this will make increaseRoutine to null which will enable to run again when we release a leftShif key.

Likewise, we need to set the decrease routine to null at the end of increaseRoutine when we stop it during increasing of thruster bar.

In the following step, we need to create a public return method a bool to give the player to have nitro speed when the thruster bar is greater than 0.

Then create another public return type method to check if we are not IsEngineOverHeat when the thruster bar value is less than 1, this means the thruster bar is empty.

Now we need to create a coroutine named it ThrusterBarcooldownRoutine.

In the next step create 4 variables first slider component of cooldown,gameObject of cooldown, text component of cooldown, and coroutine variable.

Then create the currentvaluecooldown and maxvaluecooldown.

Now Initialize the value of Thruster Bar coolDown as following inside start method.

Go to the ThrusterBarcooldownRoutine then enable this we only need to enable the Thruster_Cool_Down_Bar and the other 3 components when we activate cool down.

In the next step, we need to fill the Thruster_Cool_Down_Bar just like we did in the thruster bar but this will start empty.

After we finish the loop we need to wait for a couple of seconds and deactivate the Thruster_Cool_Down_Bar and reset other components of it.

Now create a public method name it ActivateThrusterCoolDown, then set the value of its component like this.

I have stopped increase routine and decrease routine when we activate cool down.

But this is not enough if the engine is cooling down and play press left key and release the thruster bar will increase and thruster speed will be set, we don't want this to happen.

To solve this go to increase routine and check if activatecoolDownRoutine is running if it's running stop increasing the normal thruster bar and stop decreasing.

We don't want _activateCoolDownRoutine to be running forever we need to stop it when it's full and wait for a second and deactivate it, so first we need to set _activateCoolDownRoutine to null when the loop and reset the current amount to zero and deactivate all component.

if we leave like this normal thruster won't increase until we hold the left shift and release it since the value will be zero we won't able to decrease the normal thruster bar.

So after _activateCoolDownRoutine is finished we need to call increase routine so the thruster bar can increase automatically when _activateCool Down Routine is finished running.

this is how ThrusterBarcooldownRoutine is implement the logic.

In the next step go to the Hierarchy create a slider component named it Thruster_Cool_Down_Bar, and create text component Thruster_Cool_Down_Text and anchor them in the same position as the thruster bar with the same size choose your fill color and background color then deactivate it to make sure when the game start they are off.

Go the player script create a bool variable _isHighSpeed a public method called SetShipSpeed with bool Parameter isHighSpeed, then set like this.

this will set high speed to true when _moveSpeed times 2 and to false when _move speed equal to 5.

Then Return To DecreaseThrusterBarRoutine in the thruster bar script, we need to set speed to normal if thruster bar volume is less than 1 even if we hold LeftShid.

Note: because if we didn't set this if we do not release the left shift while the thruster volume is zero the speed will be time 2.

Then create a ThrusterBar component and cache it in the Start method.

Then create int variable called isEngineOverHeatCount.

Now go back to the Player script inside SetShipSpeed and check if SetShipSpeed is false and IsEngineOverHeat is true.

If the above condition is met we need to increment isEngineOverHeatCount then we need to check if isEngineOverHeatCount is equal to 3, if it's true we activate a ThrusterCoolDown and set to zero isEngineOverHeatCount to zero.

In the next step check if press left shift and IsThrusting equal to true we setshipSpeed to true and call decrease thrusterBar via thrusterBar script which is a public method used to call decrease routine.

Then we need to check if we release the left shift and inside we check if the engine is overheating we increase the thruster else we increase the thruster if we release the left shift while the thruster is not empty but in both, we make sure to set ship speed to false of just put move speed to 5.

Let's check the final result.

I will hold the left shift when the engine is cooling down to show you that speed is set to normal this means the thruster Nitro is not applied when we engine is cooling down.