For the health bar, we will do something quick and easy. As said before, we want to focus on the gameplay.

So, we made this:

We begin by creating sprite 2D:

In the hierarchy, we created a UI>Canvas. As child, we add three UI>Image.

  • The first Image object is the background Health. Background of the image above.
  • The second Image object is the health filler. Filler of the image above.
  • And the third Image object is the Foreground image from the image above.

Keep in mind that the order of the object in the hierarchy is important. If you want to have an object in front of the other, it must be above the other in the hierarchy.

The health filler must be setup like this:

The important properties are: "Image type: Filled", and "Fill Origin: Left".

And in the script, we will just set the fill amount depending of the player health amount:

public Image healthBar;

void Update () {
    healthBar.fillAmount = currentHealth / maxHealth;

Quick and easy :D