Creating UI Elements : Text
The Text Element would be a great UI element to demonstrate how the UI system generally works. We start by introducing a UI Manager that will hold information and execute logic related to the majority of our UI Elements. Additionally we create our first UI Text Element responsible for displaying the Player Score.
UI Manager
Mainly to keep our code organised before creating any UI element, it’d be wise to create a new script containing most of the logic that is related to the UI components functionality.
- Create a new script called UIManager.cs and attach it to a new Canvas GameObject. Set the UI Scale Mode to Scale With Screen Size the Canvas Render Mode to Screen Space — Overlay.
- In order for this script to work with the UI System, we need to add a namespace reference allowing us to access a new set of key words.
Add the namespace UnityEngine.UI to the UIManager script.
UI Text Element
The Text element or Label is a dynamic element that can be accessed through scripting. For example, printing the player’s current score to the screen requires the numeric value of the score to be converted to a string, generally through the .toString() method, before it is displayed.
- The Text Component has a Text field for entering the text that will be displayed. Character settings allow us to set the font, font style, font size and whether or not the text has rich text capability. Paragraph settings allow us to set the alignment of the text, horizontal and vertical overflow which affect what happens if the text is larger than the width or height of the rectangle and a Best Fit option that makes the text resize to fit the available space.
Adding a Text Element
Just like how we referenced GameObjects through variables before, we can also create a reference to a Text field. In the UIManager.cs script, add a variable Text named ‘_scoreText’.
Then, in the Scene View Hierarchy, create a new Text component, make sure it is a child of the Canvas GameObject to which the UIManager.cs is attached and that it is correctly anchored. To insert a Text UI element, go to the Scene Hierarchy, Create → UI → Text. Name it Score_text and drag this new Text Element into the Text Field on the UIManager Component.
To modify the Score Text field at the start of the Game we simply overwrite it in Start() saying;
Here we grab the reference to the score Text field and update the string. If you were to press Play, the Text Field would be updated to whatever we declared in Start().
Using the Text Element
Obviously we don’t want to set the Text Field manually, so instead we create an accessible Method to update the Player Score.
This time we expose an integer variable in the method name and dynamically update the value by using the .ToString() function.
Accessing the Text Element through the Player.cs
Having done the previous, we can simply create a new method in the Player.cs, responsible for adding a score amount to the Player Score.
Now we can call this method wherever we like, for example when we want to add 1 score to the score amount if an Asteroid gets destroyed…
