When starting the game with three lives, show a picture of three Player ships, instead of a “Three” or a “3”.
Image of three Player ship lives
To work with an image, highlight Canvas in the Hierarchy and right click and choose in the menu “UI — Image” ( instead of a placeholder for text). This puts the UI into the Canvas container.
Right click on Canvas for UI — Image
(a) Highlight the new placeholder.
(b)Rename, “Lives_Display_Img”
(c) Drag and drop Sprite image from Assets — UI “Three” to the Inspector “Image — Source Image.”
Inspector with image dropped to property “Source Image”
Set Anchor Presets to “top left” and position and scale image to Game view.
To maintain the Aspect of the artwork, highlight the object, checkmark the box “Image Type — Preserve Aspect”
Checkmark Preserve Aspect
Here is an example Game view after positioning:
Gameview after positioning
During game play, as remaining player lives decrease from 3, 2, 1, to zero, each Lives sprite image needs to become the value in component “Image — Source Image.”
Type: “Sprites[]” array
Use the UI Manager (“Canvas”) to maintain a reference for each of the four sprites to work with.
public class UIManager : MonoBehaviour
{
[SerializeField]
private Sprite[] _liveSprites;
...
}
If “Canvas” in the Hierarchy is highlighted, there is now a dropdown property of “Live Sprites” size 0.
Dropdown of Live Sprites — Size 0
(a) Highlight “Canvas.”
(b) Change the array size to four.
(c) Drag and drop each sprite, or also named each “texture,” to the corresponding array box.
![Dropdown Sprite[] array filled in.](../../images/unity-screenshots/35 ui array/20 array filled in.png)
Dropdown Sprite[] array filled in.
C# Array Syntax
In the example, Live_Display_Img is a Canvas Component. (not a Sprite)
Image Component with property “Source Image”
Here we have the reference, the array and the index:
public class UIManager : MonoBehaviour
{
...
[SerializeField]
private Image _livesImage; // reference pointing to Sprite used in _liveSprites
[SerializeField]
private Sprite[] _liveSprites;
private int _currentPlayerLives;
void Start()
{
...
}
}
After entering a reference into a script, save and revisit the Unity Inspector to assign a value to the reference. “Lives Image” is unassigned, reading “None (Image).”
Unassigned value for the new reference variable “Lives Image”
Clicking on the circle-dot icon at “None (Image)” offers a choice, but we need to start with one of the Live Sprites elements.
Two options for “Lives Image” reference
Switch away from “None.”
Lives_Display_img for reference “Lives Image”
Canvas has Score_Text and Lives_Display_Img. Property “Lives_Image” was changed from “None” to “Lives_Display_Img”. Now one of the four “Live Sprites” can be assigned to “Canvas — UIManager (Script) — Lives Image — Lives_Display_Img” according to array index.
public class UIManager : MonoBehaviour
{
...
[SerializeField]
private Image _livesImage; // reference pointing to Sprite used in _liveSprites
[SerializeField]
private Sprite[] _liveSprites;
...
public void UpdateLives(int currentLives)
{
// _livesImage is the reference, but .sprite is the 2d image file (the sprite)
_livesImage = _liveSprites[currentLives];
}
}
Now we can call the method from an outside class, the Player class which keeps track of player damage.
Access the UpdateLive() from the reference “_uIManager”, not from the class UIManager.
public class Player : MonoBehaviour
{
private UIManager _uIManager;
...
void Start()
{
...
_uIManager = GameObject.Find("Canvas").GetComponent();
}
private int _lives = 3;
...
public void Damage()
{
...
_lives -= 1;
_uIManager.UpdateLives(_lives);
}
}
Save scripts, save Unity, and check one more thing before running.
Canvas — Lives_Display_Img — Image — Source Image is set to three lives, matching the game’s start with three lives (Player — Lives — 3)
Verify a Sprite has been assigned to Source Image before game run.