Visualizing Shield Strength and Adding Shield Lives

The initial deployment of the shield is that it’s only capable of blocking 1 hit. The new requirement is that the shield is capable of handling 3 hits and the strength of the shield will be visualized by color.

My current implementation is to change the color property of the Sprite. First, I created an array to store 3 colors:

[SerializeField]
private Color[] _shieldLifeColor;

Then, I added the colors in the editor:

Next, I added several attributes to store the number of shield lives and max shield life:

private int _maxShield = 3;
private int _shieldLife = 0;

I used _shieldLife as the index for _shieldLifeColor to change the color of the Shield sprite.

private void UpdateShieldAppearance()
{
   if (_shieldLife > 0)
   {
       SpriteRenderer renderer = _shields.GetComponent<SpriteRenderer>();
       renderer.color = _shieldLifeColor[_shieldLife - 1];
   }
}

When the shield powerup is collected, the shield is enabled and appropriate shield color is updated:

public void ShieldsActive()
{
   _shields.SetActive(true);
   _shieldsActive = true;
   _shieldLife = _maxShield;
   UpdateShieldAppearance();        
}

The shield color is also updated when the shield is damaged:

private void DamageShield()
{
   _shieldLife--;
   UpdateShieldAppearance();
   if (_shieldLife == 0)
   {
       _shieldsActive = false;
       _shields.SetActive(false);
   }
}

Now, the implementation looks like this:

If you notice, the color change works more like a tint because I set the color of the shield when it has two lives to yellow, but it looks green during implementation.