Unity UI System

# CHAPTER 8

Unity UI System #

1. Introduction #

2. Learning Objectives #

• Understand the 2D Canvas and how it overlays the 3D world.

• Create and manipulate TextMeshPro (TMP) elements.

• Configure UI Anchors for responsive design across different resolutions.

• Create interactive UI Buttons.

• Link C# scripts to the UI to update scores and health dynamically.

3. The Canvas #

• Right-click the Hierarchy -> UI -> Canvas.

• The Canvas is essentially a massive invisible 2D movie screen projected directly over the player's camera.

• Rule: Every single UI element (Text, Image, Button) *must* be a child of a Canvas. If you drag text outside the Canvas, it will disappear.

4. UI Anchors (Responsive Design) #

• Click your UI Text. In the Inspector, click the square Rect Transform anchor icon.

• Hold Shift + Alt and click the Top-Right option.

• This pins the text to the top-right corner of the screen, regardless of the monitor's resolution or aspect ratio!

5. TextMeshPro (TMP) #

• Right-click Canvas -> UI -> Text - TextMeshPro. (Unity may ask you to "Import TMP Essentials"—always click yes).

• TMP uses advanced rendering to ensure your text is perfectly sharp whether it is size 10 or size 500.

• You can change the Font, Color, Outline, and Shadow directly in the Inspector.

6. Interactive Buttons #

• Right-click Canvas -> UI -> Button - TextMeshPro.

• A Button is actually an Image with a script attached, plus a child Text object.

• In the Inspector, the Button component has an On Click () list. This is where you tell Unity exactly which C# function to run when the player clicks the button with their mouse.

7. Updating UI with C# Scripts #

using UnityEngine;
using TMPro; // REQUIRED for TextMeshPro!

public class ScoreManager : MonoBehaviour
{
    public TextMeshProUGUI scoreText; // Drag the UI Text object here in the Inspector!
    private int score = 0;

    public void AddScore()
    {
        score += 10;
        scoreText.text = "Score: " + score; // Update the UI visually
    }
}

8. Visual Learning: The UI Hierarchy #

[ Canvas ] (The 2D Screen Overlay)
   |-- [ Text (TMP) ] "Health: 100" (Anchored Top-Left)
   |-- [ Text (TMP) ] "Score: 0"    (Anchored Top-Right)
   |-- [ Button ]                   (Anchored Center)
         |-- [ Text (TMP) ] "Start Game"

9. Best Practices #

• Canvas Scaler: Click your Canvas object. In the Inspector, find the Canvas Scaler component. Change the "UI Scale Mode" from Constant Pixel Size to Scale With Screen Size. Set the Reference Resolution to 1920 x 1080. This ensures your UI scales up perfectly on a 4K TV, and scales down perfectly on a 720p mobile phone without breaking your layout.

10. Common Mistakes #

• Clicking the 2D Button: Editing a 2D UI inside a 3D perspective Scene View is maddening. When editing the Canvas, look at the very top of the Scene View window and click the small "2D" button. This flattens the camera, making it vastly easier to drag and align UI elements.

11. Mini Project: Build a Clicker Game #

1. 1. Create a Canvas. (Set it to Scale with Screen Size).

1. 2. Add a TextMeshPro object. Name it "ScoreText". Anchor it to the Top Center. Change the text to "Score: 0".

1. 3. Add a Button (TMP). Place it in the middle of the screen. Change its child text to "Click Me!".

1. 4. Create an empty GameObject in the Hierarchy named GameManager.

1. 5. Create a script named ClickerGame and attach it to the GameManager.

using UnityEngine;
using TMPro;

public class ClickerGame : MonoBehaviour
{
    public TextMeshProUGUI scoreUI;
    int score = 0;

    // This MUST be public so the Button can see it!
    public void OnButtonClick()
    {
        score++;
        scoreUI.text = "Score: " + score;
    }
}

1. 6. Click the GameManager, and drag the "ScoreText" UI object into the empty scoreUI slot.

1. 7. Click the Button UI object. In the Inspector, scroll down to On Click (). Click the + icon.

1. 8. Drag the GameManager object into the empty slot.

1. 9. Click the dropdown that says No Function, go to ClickerGame, and select OnButtonClick().

1. 10. Press Play and click the button!

12. Practice Exercises #

1. 1. What specific using namespace must be added to the top of your C# script to manipulate modern Unity text?

1. 2. What feature of the RectTransform ensures that a UI element stays in the correct corner of the screen regardless of the monitor's aspect ratio?

13. MCQs with Answers #

14. Interview Questions #

• Q: Explain the purpose of the Canvas Scaler component. Why is switching from "Constant Pixel Size" to "Scale With Screen Size" mandatory for multi-platform deployment?

• Q: Walk me through the exact workflow of connecting a visual UI Button to a C# script function. How do you pass the reference in the Unity Editor?

• Q: Why did Unity deprecate the legacy Text component in favor of TextMeshPro? What underlying rendering technology makes TMP superior?

15. FAQs #

16. Summary #

17. Next Chapter Recommendation #