In this recipe, we are going to create a linear timer. In this instance, the timer is shown as a long bar that shortens over time. An example of this would be when we want a player to make a decision within a short period of time, such as during a dialog choice to progress the narrative. In this case, the timer may feature above or even below the choices to indicate the amount of time that the player has left to decide. To achieve this, we will use the Image (Script) component and develop a script to manage the length of the bar according to the time remaining.
using UnityEngine.UI;
statement at the beginning of the script. This ensures that we are able to manipulate the UI elements within the script.private Image barFilling; public float timeAmount; private float time;
Start()
function, we have to set up the time
variable along with the barFilling
one, by adding these lines:void Start () { barFilling = this.GetComponent<Image> (); time = timeAmount; }
Update()
function, we have to decrease the time
variable by the time that has elapsed from the last frame, and update the filling of the bar so that it can reflect the amount of time that has elapsed. Therefore, we can script the following:void Update () { if (time > 0) { time -= Time.deltaTime; barFilling.fillAmount = time / timeAmount; } }
After we have imported the image, we can set it to Sprite (2D and UI) (this is not needed if the project is in 2D). Next, we can change its Fill Method field to Horizontal and set Fill Origin to Left so that the image can disappear gradually as the time decreases, starting from the right-hand side.
Then, we have created three variables in our script. The first variable, barFilling
, stores the reference to the Image (Script) component, which is attached in the same game object of this script. The second variable, timeAmount
, is the starting value of time for the countdown, in seconds. Finally, the third variable, which is time
, contains the time that is remaining.
In the Start()
function, we first assigned the barFilling
variable by calling the this.GetComponent<Image>()
function. Then, we set the time to timeAmount
so that the countdown begins with a specific starting time.
Finally, in the Update()
function, we set the ratio between time
and timeAmount
to the fillAmount
variable. This is contained in the Image (Script) component of Linear Timer. In fact, the ratio is the percentage of time left and also how much longer our linear timer should be.
The first of the next two sections will explain to us how to improve our timer by running some code after the timer expires. The second one, instead, will give us an idea about how to quickly change the design of our timer.
In order for something to happen after the time has expired, such as loading the game on the screen, or triggering the sound of a closing door because the player shouldn't be able to reach it after the time limit, we have to add a new variable to our script:
private bool isOver;
Also, add an else
branch inside the Update()
function after the if
statement, in the following way:
else{ if(!isOver){ isOver = true; //DO SOMETHING } }
We use the isOver
variable to trigger the time elapsed event only once after the time expires. In order to test it, we can write something in the debug console by calling this function:
Debug.log("Timer expired!");
18.117.71.211