Ease of Building UI Elements in Unity

Day 22- Making 2D Space Shooter Game

The User Interface (UI) is the series of screens and visual elements — like buttons and icons — that enable a person to interact with a product or service.

One of the most important aspect of game is telling the player what his progress is currently and how many chances he gets. This is UI comes in, it provides player with the much needed information on how he is doing currently and also be able to interact with it ex: Pause Menu.

Currently, our Space Shooter has no way to tell our player how many lives he has left and how much his score is. Luckily, Unity has the GUI based UI to help create interactive UI in your game.

Score UI:

Let’s start by implementing a Score system in the game that increases the score every time player destroys enemy using laser by 10 and if player and enemy collide then player only gets 5.

To create a Text in your UI, Right click on your Hierarchy and select UI then select Text in the following tab. Rename your Text gameobject as you like, and change your Text to Score : 0. It is not important to change it since you will be controlling every UI element using code but for now it will be a good reference to see how it looks.

Then select your canvas and Change the UI scale mode from Constant Pixel size to Scale with screen size. This will scale your UI with the size of your screen. If you don’t do this then the Text size remains the same even in smaller screen so if you play in Android then your score text is going to take up all the screen depending on its actual size.

Change your Font, color and other properties and make it look good. Also change its position in scene view to fit your need. Don’t worry you have anchored the Score_text to the top right which means it will position itself relative to the top right.

Now we have created a UI but how to make it behave like you want it to because if you play right now, you will only see Score : 0 and it won’t change its value.

First add a UIManager script to your canvas. Now create a method to update your score inside UIManager script.

Here, when this method is called, the caller needs to provide a value which in this case will be a player score which will then be added to the existing score of the player every time it is called.

Now inside of Player script, create a connection to the UIManager script and pass the score value by calling the method created in UIManager to update the player score.

Now go to enemy script and call a player to Update score whenever the enemy collides with something. If player and enemy collide then it will provide 5 score (you can change it to 0 or any number you want to use as score) and provides 10 when laser hits enemy.

As you can see the player score is updating like you designed it to. You can also create a life system similar to the score as you can see on the top left.

To do this, you can create a image in canvas and update it with sprites. You need four sprites. one of full health, 2 health, 1 health and lastly on health.

Then you can use the script to SetActive(true) and SetActive(false) to change the image whenever your lives go down. You can also use the concept of array to change the sprite on one image.

Tell me if you want to know how to create a lives UI as well.