With the way the games industry is heading, we’re seeing a rise in players that wish to play a game with all their HUDs (Heads up display) aka UI ( referring to basic User Interface) turned off or have practically minimal UI elements on the screen. The reason being immersion. Games have also been migrating towards minimal UI because that’s what the Players(we) want, games like Last of Us, Ghost of Tsushima, where environmental cues are being used to guide the player, show player status, etc. But for competitive games (Arcade games, Battle Royals), UI elements (for example, Time, Score, Kills) are required to immerse the player.
Currently, our arcade game has no means to let the player know how much health/ how many hits he can take before witnessing the beautiful game over screen nor do we have a score factor to make the player keep track of his progress. Luckily, Unity makes creating these Elements quite easy.
Let’s start by implementing a score factor that increases with the number of enemies destroyed.
For starters, lets create a UI Text field which will be the place holder for the Player Score.
We now need a position to place our Score on the Player Screen.
So a few things have been done here, lets look at those briefly,
The Canvas game object contains a Canvas Scaler component which contains a UI Scale Mode, make sure you have this set to scale with screen size as you don’t want the screen size to affect the look and feel of your UI.
Here, in the Score game object, we need to make sure that the Anchor position is set. This is done to ensure that the UI element(Score, in this case) remains attached to that position even when the screen is being scaled. Think of it as an anchor to a ship.
Similarly, we will now be adding a heath bar which will help the player keep track of how many lives he has left. But instead of it being a Text field that updates based on the lives we have left, we will be using sprites to keep track of the number of lives the Player has.
The process is the same but with a slight change instead of creating a Text object we will be creating an Image object(as we want Sprites to show number of lives left).
Here’s another catch if we leave things as it is the sprite passed in wont be in its native size instead it would be scaled to fit into the white Image object as shown above.
This was achieved by doing the following,
With this done, we can now move onto managing this behavior of adding on to score and decreasing lives by using a script.
Score Behavior :
Since this is a UI behavior we can create a UIManager which deals with anything UI related have it attached to the Canvas game object.
Now lets create a method to update the player score,
This method takes an integer value as an input parameter and appends it to the Player Score. So depending on the Enemy type we can vary the points given to the Player.
Now, lets move onto the Player script
All thats left is to decide the score given to the player based on the enemy type for now we only have one enemy, but it’s always better to code while thinking of scalability.
So, heres how the score gets updated in the enemy behavior.
With this we should have our Score updating based on the the type of enemy destroyed(in this case we only have a single enemy type for now, so scores will be incremented by 10 for every enemy destroyed).
Note : Make sure to add the Score game object to your UIManager in the Editor.
With this we have got the score function working, now let's get the Lives to reflect how many lives we have left.
Lives Behavior :
The concept here is that we will be replacing the Lives game object’s sprite with new sprites to show how many lives we’ve left. To do this we will be using an array which will store 4 sprites, one for each state(3 lives, 2 lives, 1 lives, no lives).
We know that arrays are 0 indexed meaning the indices start from 0 and go till the length(Array)-1. So if we have 3 lives left we will check the array at the 4th position(Array). Similarly,
Two lives → Array implying the 3rd position of the array.
One Life → Array implying the 2nd position of the array.
No Lives → Array implying the 1st position of the array.
Now all that’s left is to pass the number of lives the Player has, this can be done through the Player script.
Note : if you’re using the method the same way I am then we don’t need our Array to have a size of 4 since we can make do with 3. That being 2 lives, 1 lives, no lives, as by default the game already shows us with 3 lives left.
This gives us the following result,
Thank you for reading. More to come!!!