Ease of Building UI Elements in Unity
Adding A Scoring System and Displaying the Player Lives
--
Creating a UI in Unity is extremely easy. For Unity’s UI to work correctly and be Interacted with you need a Canvas and UI Event System. The Canvas is where all of the UI that is displayed is kept. The Event System is what allows you to interact with the UI, like clicking on a button. If you add any UI element to the scene Unity will Automatically create the Canvas and Event System.
Creating a Score Text
Right Click in the Scene and add text element. I named it Score Text.
I set the Font size to 20. Changed the Color to a lighter color, My background is black and I want The Text to be readable. I used the Anchors Button to set the anchor, pivot, and position to the top right of the screen. The Anchors Button lets you select from a set of preset anchors. Holding the Shift Key will also set the pivot. Holding the Alt Key will also set the Position.
Setting the anchors helps reposition the UI element when the screen size changes.
I changed the width to 144, this allows for the score to be 99,999,999 with out the commas.
I then moved it down and to the left to have some padding on the edges of the screen. I think -10, -10 looks good.
I then set the Canvas to scale with the screen size. This changes the scale of the canvas as the screen size changes. The text will get smaller as the screen gets smaller. I also changed the Reference Resolution to a 16:9 resolution size 800x450
I then Added a Display Int Variable Component to the text box.
The Display Int Variable is a simple Behavior. You add it to a Text UI Element, It has a Message that will display and an Int Reference Variable that will display the value of the Int after the message.
I do not have a variable to hold the score yet so I created one.
Now I don’t have anything that updates the score yet. But I do have a Game Event that happens every time an enemy is destroyed. I added a Game Event Listener to the Score Text. I had it Add 10 every time the enemy is destroyed.
And that easily I Have A Scoring System and it quickly Displaying on screen
Displaying Lives
I created an Image UI Element. Add the Player Lives Image to it, and set the image to preserve the aspect ratio. Used the Anchors Button to set the anchor, position, and pivot to the top left. I then moved the Image 10 to the right and 10 Down from the Top.
Now I need a way to Display the Player Lives.
I add the Component to the Player Lives Image and set all the parameters.
I have the Game set to only be able to display 3 Lives. You can access arrays by a index starting at 0, so for the first Image I used No Lives, this is index 0. Index 1 will be 1 Life. and so on.
I get a reference to the player lives. I Then set the Image Sprite to be the Index of the sprites array of the number of lives the player has. What happens if there are more lives then what there are sprites to display? It will get a index outside bounds error. So I have to check for this.
Array’s are zero-based index meaning that the first element in the array is at index 0. The Length of the array is the total number of elements in the array. So if I have 4 sprites in the sprites array the index of the last sprite will be 3 and the length of the array will be 4. The index of the last sprite will be the 1 less than the length.
I now need a way to notify the Player Lives That it needs to Update. So I created A Game Event called Player Damaged. I add a Game Event Listener to The Player Lives Display to Listen to this Event and when the Event Happens it will call the Update Player Lives Display.
Now all I need to do is fire this Event when the Player Takes Damage. I added A Game Event to the Damageable Behavior and in the Damage Method I raise the damage event.
