In this recipe, we are going to create a timer that displays the time (as a number) on the screen. This may be a useful element when attempting to inform the player how much time has passed during an objective. In some cases, if the player is aware of how much time he is taking with a task, it may encourage him to be more efficient and considerate about his choices throughout the gameplay. To create a timer, we will use the Text (Script) component as well as develop a script to implement the logic of the timer.
- First of all, we need to create a new UI text to show our timer. To do this, right-click on the Hierarchy panel and then navigate to UI | Text. Next, rename it to Numeric Timer.
- We can change the Font and the Font Size fields as we wish so that they suit our needs.
- We can also adjust Color. In this recipe, we will set the color to light gray, but feel free to change it to a color that better suits your design.
- Now, we can drag Numeric Timer with Rect Tool where we want to place it. In some cases, it is important to make a timer properly to a player. In other instances, it is a nice, subtle addition to the UI.
- To display the timer better in the scene view, we can write in the Text variable the word
time, even if this value will be replaced by the script. This is so that we have a better approximation of how it will look. This will help us to better gauge whether its placement will be effective or will inhibit or distract the player during gameplay. - Next, we want to ensure that the Rich Text variable is checked. This is important in order to display the color of the text and also for us to observe the appearance of the timer within the game space.
- Then, we have to create a script that manages the time. To do this, navigate to Add Component | New Script, then name it NumericTimerScript, and finally click on Create and Add.
- Double-click on the script to edit it and, as always, add the
using UnityEngine.UI;statement at the beginning of the script. This allows us to handle the UI elements within the script. - Before we add any functions to the timer, we need to add two variables and make sure that we set them to
private. So, we can write this:private Text uiText; private floattime;
- Next, we can set up the
uiTextvariable in theStart()function. In fact, this is the ideal function for assigning the initial value to our variables, since it is called when the script runs for the first time in the game environment. Therefore, we can assign the reference to the Text (Script) component to the variable just before the timer starts, in the following way:void Start () { uiText = this.GetComponent<Text> (); } - Now, we need to update our timer for each frame. This can be done by writing the following lines in the
Update()function:void Update () { time += Time.deltaTime; uiText.text = "<color=blue>Time</color>: " + time.ToString("F2"); } - Finally, we can save the script and the work is done. When we run the script, we should see something like this:
First of all, we created a new UI text, and then adjusted it to suit our needs. We changed Font, Font Size, and also Color. In addition, we ensured that Rich Text was checked. In this way, it is possible to use different colors in the text of the timer. Then, we wrote a script to handle the timer.
In the script, there are two private variables: uiText and time. The uiText variable stores the reference to the Text (Script) component, so we can get access to it and modify its text. The time variable stores the amount of time that has passed since the timer started.
In the Start() function, we assigned the reference to the Text (Script) component, which is attached to the same game object of this script, to the uiText variable by calling the this.GetComponent<Text>() function.
Keeping in mind that the Update() function is called at every frame, we added Time.deltaTime, which is the time that has elapsed from the last frame to the time variable. We did this to accumulate the time that has passed since this script/timer started. In the second line, we updated the text variable on the Text (Script) component, which we can have access to through the uiText variable, with the new time value. Since we don't want all the decimal points, we have to change it to float by calling ToString("F2") on it.
The next section will teach us how to retrieve the value of our variable.
- For more details about the
getfunction, refer to the Implementing a score counter recipe in Chapter 2, Implementing Counters and Health Bars, inside the There's more... section - However, if you are looking for more information about rich text, the official documentation is the best place to visit at http://docs.unity3d.com/Manual/StyledText.html