Thruster: Scaling Bar UI
Setting Limits to The Thruster with Visuals
In our game, we have set it up where while pressing down on the Left Shift key, we speed up our player. Right now, it is set up to work indefinitely until you stop pressing down on the Left Shift key.
Let’s set it up where there is a limit the thrusters can burn (extra speed) and then the player has to wait a certain amount of time before they can use them again. Also, lets set it up with a progress bar so the speed depletion can be seen as it goes down, and likewise, as it replenishes itself.
Lets take care of the visuals first. Lets add a Unity Slider to our canvas.
We should now see the Slider on our canvas.
First thing we should do is name the slider. I’ll call it Boost_Slider
Since this is not an interactive slider, we can get rid of the handle. To get to it, expand the slider.
If you select Fill Area, in the Rect Transform, notice that the Left and the Right have numbers in them. Lets set them to 0. Now, select Fill and set the Width to 0 also.
What this does is set the fill are and the fill itself to the full width of the slider.
Selecting Fill we can change the color of the fill inside the Slider.
Since we are going to use a fill color for the slider instead of a graphic, we need to select the Boost_Slider and change the Target Graphic to Fill.
We can check to see how it looks by moving the slider called Value in the Boost_Slider object.
By moving the slider, it will show you how the slider fill looks.
The default values of the slider are 0 and 1. This means it will move between these two values. I prefer to have the scale as 0 and 100. We can change this in the Min Value and the Max Value options of the Boost_Slider object.
The slider seems pretty large for our game, so lets scale it down a bit. I will set the X, Y and Z of the Boost_Slider object to 0.5 each.
No we need to position it on the screen where we want it to appear in our game. I will place mine under the Lives images and anchor it to the top left corner.
Now that we have the visuals set up, we need to control it with script. Since our slider will be controled by the UIManager, lets start there.
First we will need to create some variables. The first one will be of type Slider so we can attach it to the UIManager script. We will also create a float for the slider’s max value and a boolean that will let the script know if the slider is active or not.
We save the script and go to the Canvas on the Hierarchy. Search for the UIManager script and notice that a new empty slot has opened up. This is where we will add out Turbo_Boost_Slider that we created.
We have now linked the Slider Object to our UIManager script.
Notice how the default values for our Max value and our boolean variable are 100f (float) and true. This means the slider will always start out a 100% (full) and be active or accessible to the player from the start.
In void Start(), we will set the value of _turboBoostSlider.value to _turboBoostSliderMaxValue.
We will now need to create two coroutines; one that will deplete the slider as it is being used, and the other to replenish it when empty. Since these are done over a period of time, we will need to use IEnumerator.
I named the coroutine TurboBoostSliderDown(). What we are doing here is reducing the value of the slider by 0.15f. To access this value, we use the _turboBoostSlider.value.
So that the slider does not deplete quickly, we will add a yield return statement. yield return new WaitForSeconds(1.5f). This creates a pause in between each 0.15f reduction.
The if statement makes sure the slider can’t go below 0 and will automatically set the _isTurboActive to false thus deactivating it to the user.
Next I’ll make the coroutine to replenish the empty slider.
This croutine TurboBoostSliderUp() will run when the slider’s value is at 0 and the _isTurboBoostActive is false. The while loop will run until the _turboBoostSlider.value is equals to _turboBoostSliderMaxValue, which is 100, and _isTurboBoostActive is true.
The loop itself will increase the value of the slider by 0.15f with a pause in between in order to make the visual increase gradual.
Now we need to call these coroutines when the Left Shift key is depressed. Since this is part of the Player’s movement function, we need to call it from the Player script.
The first thing we need to do is create a variable of type Slider so we can connect the the Slider object to the script.
Save the Player script and just like we did in the UIManager script, drag the Turbo_Boost_slider into the new slot that appears in the Player script.
No we need to go down to our CalculateMovement function(). This is where we can check if the player has pressed the Left Shift key in order to activate the Turbo Boost, just that this time it will run for a limited time and it will visually show how it depletes over time.
We will use an if statement that will check if the LeftShift key is being pressed AND if the _isTurboBoostActive is true.
To gain access to the boolean value, we go through the _uiManager variable that has already been created.
The if statement would like like this:
Notice I am using Input.GetKey() and not GetKeyDown(). This is because the former will continuously check if the key is still being pressed.
If the LeftShift key is being pressed and _isTurboBoostActive is true, it will increase teh Player’s speed by multiplying the normal _speed with the _increasedSpeed variable on both the horizontal and vertical axis.
It is here where we call upon the coroutine in the UIManager to activate the slider animation.
When the slider value gets to 0 and the _isTurboBoostActive is set to false, we will call the coroutine that will replenish the slider setting it back to 100.
We do this with an if statement:
Now if we save our scripts and play our game, we should be able to see how the slider decreases and then replenishes itself.
We now have a functioning UI Slider for our Turbo Boost upon depressing the LeftShift key.
I hope you enjoyed this tutorial. See you in the next one.
