In this recipe, we are going to create a radial health bar. The health of the player will be displayed as a ring that reduces circularly when health decreases and fills with increasing health. To achieve this, we will use the Image (Script) component and develop a script to manage the length of the bar.
First of all, we need to create our ring, so let's open a graphic program and create it. It should look like the following:
Then, import it in to our project and, if the project isn't set to 2D, set the Texture Type of the image to Sprite (2D and UI), and then click on Apply.
Next, create a new image, so right-click on the Hierarchy panel and then UI | Image, and, finally, rename it Radial Healthbar.
Selecting inside the Image (Script) component we need to change Image Type into Filled. The component should change appearance a little bit in the Inspector.
Ensure that Fill Method is set on Radial 360 and Fill Origin on Bottom.
Since the logic is the...