Creating a health bar with armor
In this recipe, we are going to create a health bar, similar to the one in Implementing a linear health bar recipe, but there is an armor that protects the player. In fact, if the player is attacked, he or she will first lose the armor, then the health. To achieve this, we will use multiple Image (Script) components, both for the health bar and for the pieces of armor, and develop a script to manage the entire logic.
How to do it...
To begin, let's create an image, so right-click on the Hierarchy panel and then UI | Image, and rename it HealthBar with Armor.
Let's change Fill Method into Horizontal and Fill Origin into Left. Of course, we need to add the Healthbar that we have just created to Source Image. Finally, we can place the Healthbar with Armor everywhere we want, always using the Rect Tool.
In order to keep its original proportion, you can click on the Set Native Size button in the Inspector.
Next, right-click on Healthbar with Armor and add a new image...
