My 90 day journey becoming a Unity game developer: Day-21 & 22

Objective: Create an User Interface for score text and implementing a scoring system.

Score updating onscreen.

In the Hierarchy, either right-click or use the drop-down menu, go to UI and select in this game the Text component. We’re just going to use simple text, compared to TextMeshPro which will allow us to make our text more interesting. We will see in the Hierarchy that we have a Canvas, which is where all our UI elements will be constructed on. There is also an EventSystem added on that will allow us to interact with the elements on the canvas by hovering over them. Click on Text, and change its name to Score_Text.

Adding text to the screen to show the score by using a canvas.

The Rect Tool is a good tool to use when manipulating the elements on the Canvas. When working with the UI system it’s usually a good idea to keep it set to Pivot and Local. The Rect Tool is usually set to Pivot mode and Space in the Toolbar. When using this tool you can scale, move, and rotate along the pivot point.

The Rect Tool used for scaling, moving, and rotating.

We’re going to move the Score_Text element up to the top-right corner by heading over to the Rect Transform. From there click on the Anchor Presets box. Shift-click to set the pivot point and Alt-click to set the position. Then with the Rect Tool selected, adjust the score element position to your satisfaction.

Moving the Score element to the top-right corner.

Change the Text color to white so it will be easier to see up against the background.

Using the Rect Tool, we will scale and move the Score_Text element to fit in the right corner that we’re satisfied with.

Adjusting the Score element in the right corner of the screen.

Now if we scale the game’s screen down in size, we will notice the text stays the same size and moves across the screen which we don’t want. Click on Canvas, come over to Canvas Scaler and in UI Scale Mode click Scale with Screen Size.

Making the canvas scale with screen size.

Click back on the Score_Text object, and down in Text change the text size to between 18–20 where it looks reasonable, but won’t interfere with the enemy ships coming down at the player.

Now to get an idea how the score will look in the game, go inside the Text field and type (Score: 100).

Next we will create a UI Manager to handle updating the on-screen display and user interface. Create an empty game object in the Hierarchy and name it UI_Manager. Also, attach a new script to it call UImanager.

Creating a scoring system.

To create the score system, go to the Player script and create a variable name score which will equal 0. Then create a method call Score() that will return 10 points for every enemy destroyed.

Then go to the Enemy script, create a variable to connect to the player’s component name player. Inside Start() use the player variable to get the Player’s component. Inside the OnTriggerEnter() function, when the laser hits the enemy we will add 10 points right before every enemy destroyed.

Adding 10 points every time an enemy is destroyed.

To update the score on screen we need to use the UIManager script created. Create a variable to change the text on screen. Then use the variable to access the Player component to use the Score() method inside Start(). Inside Update() we’re going to use the scoreText variable and change the player’s score from integers to text. For all of this to work, make sure to include the (using UnityEngine.UI) namespace at the top of the script. This will allow us to use the toolkit for arranging, positioning, and styling the user interface.

There is 2 ways we can use the UIManager script in the game. The first way is attaching the script to the UI Manager game object.

UIManager script attached to a game object.

Second way is to attach the script to the Canvas itself.

UIManager script attached to the Canvas.

We’re going to make a modification to the Score() method by passing in a parameter call points. If we decide to add other enemies in the game, we would like to give them different point values when they’re destroyed.

Score method with a parameter of points passed in.

Over in the Enemy script inside the OnTriggerEnter() function, let’s pass 10 points as the argument in the player Score(10) method.

Now we need to communicate with the UI to update the score on the screen. Start by creating a variable to access the UIManager. Then in Start(), use the variable to find the Canvas and get the UIManager component. Also, check to make sure the UIManager isn’t NULL. Create a method name Score to handle the accumulation of points and showing it onscreen. We will use the uiManager variable to access a new method call UpdateScore(_score) which will take the score and show the visual representation in the text field located at the top-right corner.

Back at the UIManager script, we will create the method UpdateScore() which will take an argument of the player’s score. Inside we will use the scoreText variable that will be assigned the current score, but show it as a string onscreen for the player to see.

Score updating on the screen.

We’re going to display lives onscreen next time.