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.

I love game design and development.