In this recipe, we are going to mix the radial timer with the numeric one. Like in the previous recipe, the time remaining will be displayed as a ring that reduces circularly over time. Furthermore, inside the ring, we will display the time remaining as a number. A mixed timer can serve many different purposes, especially when a number of timers have to be viewed at once. For instance, imagine a strategy game where we have a number of resources that we wish to use. Each of these resources takes time to regenerate after it has been used. At a glance, the radial timer can indicate how much time, across a range of different resources, any single resource has left. In addition, incorporating a numeric timer can specify exactly how much time is remaining until that resource is available again. In this way, using both a radial timer and a numeric timer in combination can provide the player with both an overview and a specific indication of time remaining. To create a mixed timer, we will use the Image (Script) and Text (Script) components and develop a script to manage the length of the circular bar, synchronized with the time shown as a number inside the ring.
- First of all, we need to create a circular bar for our timer, so we can open a graphic program and create it, or just use the one we created in the Implementing a radial health bar recipe from the previous chapter.
- Then, we should import it into our project and set its Texture Type to Sprite (2D and UI) (only if our project is not 2D) so that we can use it within the UI elements. Next, click on Apply.
- Now, let's create a new UI image. To do this, right-click on the Hierarchy panel and then navigate to UI | Image. Rename it to Mixed Timer.
- Inside the Image (Script) component, we have to change Image Type to Filled. The component should change a little in the Inspector.
- Ensure that Fill Method is set to Radial 360 and Fill Origin to Bottom. We have to drag the bar that we previously imported into Source Image. Finally, we can place Mixed Timer wherever we want, remembering to use Rect Tool as we do this or the keyboard shortcut T.
- We may want to keep its original proportions. In this case, we can click on the Set Native Size button in the Inspector.
- Furthermore, we need to create a new UI text to display the time as a number inside the ring. Right-click on Mixed Timer in the Hierarchy panel, and then navigate to UI | Text.
- We can change the Font and the Font Size fields as we want so that they better suit our needs.
- We can also adjust Color. For this example, we will set it to light gray, but feel free to use a color that better suits your design.
- Now we can drag Text with Rect Tool inside our timer, or again use the keyboard shortcut T.
- To see it better in the scene view, we can write something in the Text variable — for instance, the word
time, even if this value will be replaced by the script. - Make sure that the Rich Text variable is checked. We do this to ensure that different parts of the text in our timer can have different colors.
- Now, we have to create the script that manages the timer. After selecting Mixed Timer, navigate to Add Component | New Script, name it MixedTimerScript, and then click on Create and Add.
- Double click on the script to edit it, and then add the
using UnityEngine.UI;statement at the beginning of the script so that we can use UI elements within the script. - Next, we need to add five variables; three are private and two are public. These will be set in the Inspector. We write the following:
private Text uiText; private Image barFilling; public float timeAmount = 18f; private float time;
- In the
Start()function, we can set thetimevariable along withbarFillinganduiTextas well:void Start () { barFilling = this.GetComponent<Image> (); time = timeAmount; uiText = this.GetComponentInChildren<Text> (); } - Finally, in our
Update()function, we need to decrease the time byTime.deltaTimeand then update thefillAmountvariable of the bar accordingly. We can do this by writing the following:void Update () { if (time > 0) { time -= Time.deltaTime; if(time < 0 ) time = 0; barFilling.fillAmount = time / timeAmount; uiText.text = "<color=blue>Time</color>: " + time.ToString("F2"); } } - Save the script and test it by clicking on the play button. We should see the following result:
After importing the image, we set it to Sprite (2D and UI) (only for 2D projects) so that we could use it in the UI. Then we created a new image and changed its Fill Method value to Radial 360 and Fill Origin to Bottom. In this way, the image can disappear gradually in an anticlockwise direction starting from the bottom, as the time decreases. Furthermore, we created another game object nested in the Mixed Timer object, with a Text (Script) component, in order to display the time as a number. Finally, we implemented a script for the logic.
In the script, we have four variables. The first one is barFilling and stores the reference to the Image (Script) component attached to the same game object of the script. The second one is uiText, and it stores the reference to the Text (Script) component, which is attached to the child game object of the mixed timer. The third variable is timeAmount, which is the amount of time set at the start, and from which the countdown begins to decrease. Finally, the fourth variable is time and contains the amount of time remaining.
In the Start() function, we began by assigning the Image (Script) component, which is attached to the same game object of this script, to barFilling. We did this by calling the this.GetComponent<Image>() function. We assigned the Text (Script) component, which is attached to the child of the game object where this script is, to the uiText variable by calling the this.GetComponentInChildren<Text>() function. We did this to get the reference that we need in order to quickly access that component. Finally, we set the time to timeAmount so that the countdown begins with that specific starting time.
In Update(), we check at every frame whether time is more than zero. If so, we subtract Time.deltaTime from time, since the coupon decreases. If time is less than zero, then we set it to zero. Finally, we put the ratio between time and timeAmount into the Fill Amount variable, which is contained in the Image (Script) component of the mixed timer. In fact, the ratio is the percentage of the time remaining, which also indicates how much longer our linear timer needs to be. In the last line, we also updated the text inside our timer so that it could be displayed correctly inside the ring.
The following section will teach us how to improve the aesthetic of our timer to better suit our needs.
We can easily change the script so that it displays a certain number of decimal points in the timer. In order to do that, let's add a variable called decimalDigits into our script and set its default value to 2:
public int decimalDigits = 2;
Then we have to look for this line inside the Update() function:
uiText.text = "<color=blue>Time</color>: " + time.ToString("F2");And we can replace it with the following:
uiText.text = "<color=blue>Time</color>: " + time.ToString("F"+decimalDigits);To decide how many decimal points will be shown, we need to set the decimalDigits variable in the Inspector. In fact, by setting this variable in the Inspector, we are changing the parameter of the ToString function. We do this in order to return a string that represents the float as a string, with as many decimal points as we have decided in decimalDigits.
Instead of using a radial timer, we can also use a linear timer and put the text inside the bar. In this example, it would be nice to add some borders to the bar. In fact, this helps to better integrate the timer with the rest of the UI. To do this, you can refer to the Implementing a linear health bar recipe contained in the previous chapter, inside the There's more... section.
To change the radial timer to a linear one, we have to change the Fill Method of the mixed timer to Horizontal and change Fill Origin to Left. Of course, we also have to change the Source Image with the linear bar. If needed, we can use the Set Native Size function and/or change the size of the text of the timer to better fit the bar. Once we have done all of these steps, we should have something that looks like this:
