In this recipe, we are going to create a radial timer. The time that is remaining will be displayed as a ring that reduces circularly over time. To achieve this, we will use the Image (Script) component, along with a script to manage the length of the circular bar. A timer like this can be useful when it is relating to something in particular. For instance, if a character has a special ability and we want the timer to represent the duration that the ability can be used for, a radial timer can be implemented. In this way, we are able to add an icon that then represents the ability. It can be centered in the middle of the radial timer, keeping the UI concentrated and contained.
- First of all, we need to create a circular bar for our timer. We can do this by opening a graphics program to make it, or by implementing the one that we previously created in the Implementing a radial heath bar recipe in the previous chapter.
- Next, import the bar into your project, and remember to set its Texture Type field to Sprite (2D and UI) (only if the project is not in 2D) in order to use it as part of the UI elements. Lastly, click on Apply.
- Now, we need to create a new UI image. Right-click on the Hierarchy panel and then navigate to UI | Image. Rename it to Radial 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.
- Since the logic is the same as that of the previous recipe, we only have to add BarTimerScript that we created before. This is because it contains what we need. To learn how to create it, you can refer to Creating a linear timer in the previous recipe.
- After completing all of these steps, our radial timer is ready to use.
First of all, you have either imported the image from the Implementing a radial health bar recipe or created a new one with a graphic program. If the project isn't in 2D, we have to set it to Sprite (2D and UI). Then, we added a new UI image to the scene; this time, we set Fill Method to Radial 360 and Fill Origin to Bottom. We did this so that the image can disappear or appear gradually in 360 degrees in an anticlockwise direction, starting from the bottom, according to the amount of time remaining. Finally, we attached BarTimerScript that we developed in the Creating a linear timer recipe. It works fine, since it implements the same logic.
- If you want learn how to create BarTimerScript, you can refer to the Creating a linear timer recipe
- For different kinds of timers or countdowns, you can take a look at the Implementing a numeric timer, Creating a linear timer, Creating a mixed timer, Creating a well-formatted timer, and Developing a well-formatted countdown that changes recipes, all contained in this chapter