📝 Lesson 4.2: UI Scripting

Two UI Systems

Unity has two built-in UI systems. Knowing which you're using avoids a lot of confusion:

In uGUI, all UI lives under a Canvas, and every UI element uses a RectTransform (a 2D-anchored cousin of the Transform from Lesson 1.1) for layout. From a scripting standpoint, though, UI elements are just components — you reference and drive them exactly like any other.

uGUI Building Blocks

The components you'll script most often:

💡 To script a UI element you need a reference to it — the same wiring skill from Lesson 1.3. Expose a [SerializeField] field of the component's type and drag the UI object into it in the Inspector.

Updating Text & Images

Displaying a value is just: hold a reference to the label, and assign its text when the value changes.

using UnityEngine;
using TMPro;   // for TMP_Text

public class ScoreLabel : MonoBehaviour
{
    [SerializeField] private TMP_Text label;   // drag the TextMeshPro object here

    public void Show(int score)
    {
        label.text = $"Score: {score}";   // update the on-screen text
    }
}

An Image set to Filled mode is the simplest health/progress bar — its fillAmount (0–1) controls how much shows:

using UnityEngine;
using UnityEngine.UI;   // for Image

public class HealthBar : MonoBehaviour
{
    [SerializeField] private Image fill;   // an Image with Image Type = Filled

    public void SetHealth(int current, int max)
    {
        fill.fillAmount = (float)current / max;   // e.g. 30/100 → 0.3 bar
    }
}

Buttons and Sliders

Input flows the other way here: the UI element tells you when the user interacts. A Button's onClick is a UnityEvent (Lesson 3.2) — you can wire it in the Inspector or subscribe in code.

using UnityEngine;
using UnityEngine.UI;

public class PauseMenu : MonoBehaviour
{
    [SerializeField] private Button resumeButton;
    [SerializeField] private Button quitButton;

    void OnEnable()
    {
        // Subscribe in code (mirror the Lesson 1.2 / 3.2 pattern).
        resumeButton.onClick.AddListener(OnResume);
        quitButton.onClick.AddListener(OnQuit);
    }

    void OnDisable()
    {
        resumeButton.onClick.RemoveListener(OnResume);   // always clean up
        quitButton.onClick.RemoveListener(OnQuit);
    }

    private void OnResume() => GameManager.Instance.SetState(GameState.Playing);
    private void OnQuit()   => GameManager.Instance.SetState(GameState.MainMenu);
}

A Slider reports value changes through onValueChanged (also a UnityEvent), passing the new float:

[SerializeField] private Slider volumeSlider;

void OnEnable()  => volumeSlider.onValueChanged.AddListener(SetVolume);
void OnDisable() => volumeSlider.onValueChanged.RemoveListener(SetVolume);

private void SetVolume(float value) => AudioListener.volume = value;   // 0..1

Event-Driven UI

Here's where Modules 3 and 4 pay off together. A naive HUD polls the manager every frame:

// ❌ Wasteful: rebuilds the string 60x/second even when the score never changes.
void Update()
{
    scoreLabel.text = $"Score: {GameManager.Instance.Score}";
}

Better: the GameManager already raises events when things change (Lesson 4.1). The UI just subscribes and updates only on change — no Update, no waste, no coupling from the manager's side.

using UnityEngine;
using TMPro;

public class HUD : MonoBehaviour
{
    [SerializeField] private TMP_Text scoreLabel;
    [SerializeField] private HealthBar healthBar;

    void OnEnable()
    {
        // React to the manager's announcements (Lesson 3.2 subscribe pattern).
        GameManager.Instance.ScoreChanged += UpdateScore;
    }

    void OnDisable()
    {
        GameManager.Instance.ScoreChanged -= UpdateScore;
    }

    void Start()
    {
        UpdateScore(GameManager.Instance.Score);   // set the initial value once
    }

    private void UpdateScore(int score) => scoreLabel.text = $"Score: {score}";
}

💡 Don't forget the initial value: events fire on change, so a fresh UI shows nothing until the first change. Call the update method once in Start (as above) to seed the current value.

A Look at UI Toolkit

UI Toolkit is Unity's newer, web-inspired UI system. Instead of GameObjects, you define structure in UXML (like HTML) and style it in USS (like CSS), then drive it from C# via the UnityEngine.UIElements API. A UIDocument component renders it in a scene.

using UnityEngine;
using UnityEngine.UIElements;   // UI Toolkit API

public class MenuController : MonoBehaviour
{
    [SerializeField] private UIDocument document;   // holds the UXML tree

    void OnEnable()
    {
        VisualElement root = document.rootVisualElement;

        // Query elements by name (#id) or type — like CSS selectors / querySelector.
        Button playButton = root.Q<Button>("play-button");
        Label scoreLabel  = root.Q<Label>("score");

        playButton.clicked += OnPlay;          // UI Toolkit uses C# events, not UnityEvents
        scoreLabel.text = "Score: 0";
    }

    private void OnPlay() => Debug.Log("Play!");
}

Exercise & Quiz

using UnityEngine;
using TMPro;

public class HUD : MonoBehaviour
{
    [SerializeField] private TMP_Text scoreLabel;

    void OnEnable()
    {
        // TODO: subscribe to GameManager.Instance.ScoreChanged.
    }

    void OnDisable()
    {
        // TODO: unsubscribe.
    }

    // TODO: UpdateScore(int) that sets scoreLabel.text; call it once in Start.
}

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class HUD : MonoBehaviour
{
    [SerializeField] private TMP_Text scoreLabel;
    [SerializeField] private Image healthFill;
    [SerializeField] private Button pauseButton;

    void OnEnable()
    {
        GameManager.Instance.ScoreChanged += UpdateScore;
        pauseButton.onClick.AddListener(Pause);
    }

    void OnDisable()
    {
        GameManager.Instance.ScoreChanged -= UpdateScore;
        pauseButton.onClick.RemoveListener(Pause);
    }

    void Start()
    {
        UpdateScore(GameManager.Instance.Score);   // seed initial value
    }

    private void UpdateScore(int score) => scoreLabel.text = $"Score: {score}";

    public void SetHealth(int current, int max) =>
        healthFill.fillAmount = (float)current / max;

    private void Pause() => GameManager.Instance.SetState(GameState.Paused);
}

Summary

📚 Additional Resources

• Manual — Unity UI (uGUI)
• Manual — TextMeshPro
• Manual — UI Toolkit
• Scripting Reference — Button

🚀 What's Next?

Your game shows its state and takes UI input. The last piece of a complete loop is persistence: Lesson 4.3, Saving and Loading, covers writing game state to disk with JSON serialization and PlayerPrefs, so progress survives between sessions.