Unity UI: Slider Basics & Status Bar

Intro

In this article I will cover Unity’s UI Slider basics and how to incorporate a Slider in a Cool Down and Over Heat system.

Slider Basics

When a Slider component is create it holds several children components. The main component allows you to set the direction the Slider moves in, min & max value and a slider to set the current Slider Value.

The Backgound component has a Image that allows you to set the backgroud color of the Slider.

The Image has a Pixels Per Unit Multiplier will determine the roundness of the image.

The Fill has an Image, just like the Background, that lets you select the color and roundness of the fill.

The Handle component has an Image and is the component the user can click and drag to move the Slider.

Status Bar Setup

We are going to change the Slider, so it becomes a Status Bar that will measure the temperature of the turret gun.

Since this is a Status Bar, we turn of the Handle Image.

You will notice when the Slider Value changes, the fill doesn’t reach the min and max of the Slider.

To fix this, you will need to set the Fill Area’s and Fill’s Left & Right to 0.

Now, you can see the fill reaches the min and max of the Slider.

We are going to set the Slider Max value to 100.

We are going to add a Text element and make it a child of the Handle of the Slider. This will allow the Text to move with Slider as it changes. Makre sure to set the Handle Slide Area Left & Right to 0, so the text stays center with the current value of the Slider.

Script

This script will increase the slider value while firing a turret. The text will display the slider value. After not firing for an amount of time the slider value will decrease (cool down system). If the slider value reaches the max value, it will prevent the turret from firing until the slider value decreases to the min value (overheat system). The color of the slider fill will blend between two colors as it increases and decreases.

On the turret script or the script that is firing, we will need to access to following components.

Slider — this will allow us to get the values of the slider component.

Slider Text — this will allow us to update the text when the value of the slider changes.

Slider Fill Image — this will allow us to change the color of the slider fill.

Lastly, we will create two Color type variables to pick the two colors of the slider we want to blend between.

Assign these slider components to the firing script and pick the two colors.

In Start, we set the slider value to 0, set the slider text to the slider value (you will need to convert the number to a string using ToString()), and set the slider color to the first color.

In Update, we set the slider fill color to Color Lerp. This will require the two colors we will be blending between, and a float value that will combine the two colors.

This value needs to be between 0 and 1. So, we use the current slider value divided by the max slider value.

We will need declare a few variables for the cool down and overheat system.

Overheat — this is a bool that will track if the slider has reached the max value.

Last Time Fire — this is a float that will hold the time the turret last fired.

Cool Down Delay — this is a float that will determine the amount of time since the last time the turret before the slider will start to decrease and “cool down”.

Firing — this is a bool that will track if the turret gun is currently firing.

I created a Shoot method that has some other features, but I am only highlighting the cool down and overheat system elements.

If the space key is pressed and overheat is false, set

• Firing = true
• Last Time Fire = Time.time (which is the amount of time that has passed since the scene started).
• Slider Value increases by 1
• Update the Slider Text to the current Slider Value.

We want to check if the Slider Value gets to or goes above the Max Slider Value, when this is true that means the turret Over Heated and we will start the Over Heat routine.

This is an IEnumerator that will allow us to use a pause (WaitForSeconds).

• Overheat = true (this prevents the turrent from firing).
• Using a While Loop, the loop will continue as long as the Slider Value is greater than 0.
• Each iteration of the loop, decrease the Slider Value, update the Slider Text and pause.
• Once the Slider Value is back to 0, set Overheat = false. This will break from the Coroutine and allow the turret to fire.

The Cool Down System will be in Update. You can see the Shoot method being called which sets the Firing to True, but if it is NOT being called Firing is False.

For the Cool Down System to start, we need to know the last time the turret fired. We check if the current Time (Time.time holds the amount of time since the Scene started) is greater than the Last Time Fire (this store the current Time.time when the turret was fired) plus the amount of the Cool Down Delay (this value determines how long the player waits after firing for the Cool Down to start).

We also want to check if the turret is not currently overheating (Overheat = false). This will make sure the Cool Down System runs along with the Overheat System.

The Cool Down Routine will…

• Decrease Slider Value
• Update the Slider Text to current Slider Value
• Pause
• Check to see if the turret started to fire (Firing = true) and break from the coroutine using yield break.

There is how you can use a Slider UI component as a Status Bar for your game.