Building a HUD

Displaying Score and High Score with TextMeshPro

Players need immediate feedback to understand their performance. While our scoring system worked in the console, it's invisible in-game. That's where a HUD (Head-Up Display) comes in.

Canvas Types

Unity UI lives inside a Canvas. There are two main types:

Screen Space - Overlay

• default for HUDs;
• appears over everything in the scene;
• ideal for score, health bars, ammo counters.

World Space

• UI exists within the 3D world;
• useful for floating health bars above characters, in-game signs, or interactable UI.

For our score display, we'll stick with Overlay.

Canvas Scaler: Making UI Responsive

To ensure your HUD looks good on different screen sizes and resolutions, set the Canvas Scaler component on your Canvas:

• change UI Scale Mode from Constant Pixel Size -> Scale With Screen Size;
• set a Reference Resolution (e.g. 1920x1080);
• choose a Screen Match Mode.

Match Width Or Height lets the UI scale proportionally based on screen dimensions.

This ensures that score, highscore, and other HUD elements maintain consistent size and layout across different devices and window sizes.

Adding Text

Create -> UI -> TextMeshPro - Text.

Unity prompts to import TMP essentials - click it.

Create two labels:

• "Score:";
• "High Score:".

Next to each, add a TextMeshPro element to update dynamically via code.

Updating Text via Script

Add TMP assembly reference:

using TMPro;

Declare TMP elements in the GameManager script:

public TextMeshProUGUI scoreText;
public TextMeshProUGUI highScoreText;

Assign them in the Inspector.

Update text during gameplay:

scoreText.text = score.ToString();
highScoreText.text = highScore.ToString();

.ToString() converts integers to the string type expected by TextMeshPro.

Custom Fonts

• create a Fonts folder in the Project tab;
• drag your font file into the folder;
• open Window -> TextMeshPro -> Font Asset Creator;
• drag the font file into the generator, click Generate Font Asset;
• assign the generated TMP font asset to your TextMeshPro text element.