Adding Thruster Bar to the HUD Part 2

In the second part of adding a Thruster Bar to my game, we will be add the function when the thruster bar is empty the player cannot use the thruster boost. Also, the thruster bar will have a color transition to show when you are approaching empty and full.

Before I started coding, I knew the Player script had to talk to the ThrusterBar script, but I had to take a moment to think about how the conversation was going to go. I started out with the Player script and creating a boolean (_canUseThruster) and check to see if it is true when we are holding down the Left Shift key to get the speed boost.

Now, I need a way to flip the _canUseThruster to set true and false and I decided to use two public methods to do this.

The ThrusterBar script is the one keeping track of the current value of the ThrusterBar, so these methods will need to be used in the script.

First thing in getting access to another script is making a handle variable.

Get the component and assign it to the handle variable in the Start.

With access to the player script I need to decide where I want to call the ActivateThruster and DeactivateThruster methods. The ActivateThruster in the UseThruster method in the IF when the current thruster value is greater than 0 and the DeactivateThruster in the ELSE (when the current thruster value is less than 0).

At the current state, when the player empties the ThrusterBar they can no longer use the Thrusters even when the ThrusterBar has regenerated, so I needed to add the ActivateThruster method in the RegenThrusters coroutine. This gives the ability to use the Thrusters again after the wait time and if the ThrusterBar value is greater than 0.

The ThrusterBar is working, but visually doesn’t let the player know when they are running low on Thrusters, so I want to add a transition color. In the ThrusterBar script we are going to add a Gradient and Image variables. Back in the Inspector, we will assign the Fill to the Fill Image in the script.

We will also notice since we add a Gradient, we have a Gradient Bar in the script. When the Gradient Bar you can set the transition colors and choose between Blend or Fixed Mode. Blend mode will blend the transition colors you pick and Fixed will have distinct sections for each color.

Heading back into the ThrusterBar script, we will not have to add some code to access this Gradient.

In the Start, we will set the Fill color to the current value of the Bar (which is 100 at the start). We can do that by using Evaluate and pass in 1f, since the Bar value range is 0 to 1.

When the ThrusterBar is being depleted, we will want to update the fill color of the bar, so we will set the fill color to the gradient and evaluate it to get the current value. What we will would normally pass is the Evaluate() would be the ThrusterBar.value, but since the Slider bar min to max if from 0 to 1 and the Thruster min to max is 0 to 100, those ranges do not match. We can use a normalizedValue, which will convert the Thruster values to the the Slider values. This part of the script takes care of when the ThrusterBar is being depleted, but when it starts to regenerated it reverts back to the old fill.

I will have to update the fill color with the gradient color using the same line of code in the coroutine that is handle the regeneration of the ThrusterBar. There you have it! Who knew one HUD element took so much work.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store