This recipe teaches us how to use multiple Image (Script) components inside a script in order to create a symbolic lives counter. The number of lives are not displayed as a number, but with heart symbols on the screen. It is similar to the counter in the Implementing a lives counter recipe, but the logic to manage different icons is different.
- To begin, let's create a new empty game object. To do this, right-click on the Canvas object, since we want it as parent, and then Create Empty. Finally, rename it as SymbolicLivesCounter.
- Next, click on SymbolicLivesCounter and add a new image by selecting UI | Image, and then rename the object just created as Heart1.
- Take a heart icon image, or create on our own, and import it in to our project. If our project is not set as 2D, remember to set the Texture Type of the icon into Sprite (2D and UI) and then click on Apply.
- Let's duplicate Heart1 with Ctr+D as many times as the maximum amount of lives that the player will have. Rename them consecutively, such as Heart1, Heart2, Heart3, and so on. In this example, we have five hearts, and so in the Hierarchy panel, we should have the following:
- Distribute them in the Scene View, keeping their order. For example, Heart2 must be after Heart1 and before Heart3. This order is important because the script that we are going to write uses this order. The following is an image of the correct way to order your hearts:
- In the SymbolicLivesCounter, go to Add Component | New Script and name it SymbolicLivesCounterScript, and then press Create and Add.
- Double-click on the script to edit it. This time, the
using UnityEngine.UI;statement at the beginning of the script it is not needed since we will not use any UI classes. - Before we add any functions, we need a two variables, one
privateand onepublic, to set this last one in the Inspector so that we can write:public GameObject[] hearts; private int lives;
- In the
Start()function, we need to set up the lives value, so:void Start () { lives = hearts.Length; } - As in the Implementing a lives counter recipe, we need to write a function to
addLife(), and also here there is a return value to understand if the life is added or not. The function is as follows:public booladdLife(){ if (lives <hearts.Length) { lives++; updateSymbolicLivesCounter(); return true; } return false; } - And now the
loseLife()function, again with a return value to check whether the player has finished his life:public boolloseLife(){ lives--; if (lives > 0) { updateSymbolicLivesCounter(); return false; } lives = 0; updateSymbolicLivesCounter(); return true; } - Finally, we need to update our
updateSymbolicLivesCounter()function. Here the logic is different from the Implementing a lives counter recipe. According to the number of lives, we have to either enable or disable the hearts. The following is the function to achieve this:private void updateSymbolicLivesCounter () { for (int i=0; i<hearts.Length; i++) { if(i<lives){ hearts[i].SetActive(true); }else{ hearts[i].SetActive(false); } } } - Let's save the script, but keep in mind that we haven't finish yet. We will have to set up the hearts in the Inspector.
- Now, inside the Inspector, set the size of the hearts variable to 5, then link each Heart1, Heart2, and so on to fill the array. At the end, you should have something that looks like the following:
- Now the Symbolic Lives Counter is ready.
We have created several hearts icons inside a GameObject named Symbolic Lives Counter. Finally, we have attached our script to it.
In our script, we have two variables. The first one is an array of game object, called hearts, and as the name suggests us, it will store all the hearts contained in the Symbolic Lives Counter. The second one is the number of lives possessed by the player.
This time, we didn't have a variable that stores the maximum number of lives allowed. So, in the Start() function, we set the lives variable to be equal to the length of the array. Since we will set it in the Inspector and it contains all the hearts in the scene, its length represents the maximum number of lives allowed.
Furthermore, we have also written a function called addLife() that adds lives to the player that returns back a Boolean value: true if a life is added, otherwise false if the number of lives is equal to the maximum number of lives allowed and the function. It is quite similar to its homonymous function in implementing a lives counter. In fact, at the beginning, there is an if statement that checks whether lives are less than the hearts.Length, which is the maximum number of lives. If so, we increase the lives by one, lives++;, then we call updateSymbolicLivesCounter() function to update the interface, and, finally, we return true, otherwise we just return false.
Now, we also have a function for loseLife().This function returns back a Boolean value: true if the player has no more lives, otherwise false. First, we decrease the number of lives by one, lives--;, then we check to see whether lives are more than zero, and, if so, we call the updateSymbolicLivesCounter() function to update the interface and finally, we return false. Otherwise, we set lives = 0; since we don't want a negative number of lives, and, after updateSymbolicLivesCounter(), we return true.
In the updateSymbolicLivesCounter() function, we have to set active or no each heart. In order to do so, we have a for-cycle for every entries of the hearts array. Then, there is an if statement that checks if the number of lives is more than the heart of that iteration. For example, if the player has just three lives left, we only want to display the first three hearts on screen and not the last two. Therefore, we enable only the first three hearts, and if there are no hearts in the array, we disable them.
In the last step, we assigned each heart objects to the entries of our hearts array.
- See Animating hearts of the symbolic lives counter and Changing animation of the hearts of the symbolic lives counter through script recipes in Chapter 6, Animating the UI for animating the hearts on this counter.