Eonevolve Learning
Unity and DevelopmentUnity and codeIntermediate~6 min

UI Canvas Basics: Anchors, Scaling, and a Dumb View

Snapshot

~75 sec

A Canvas is the root a UI renders under, and its Canvas Scaler decides how that UI survives different screen sizes. Keep the UI itself a dumb view: it displays state it is given and raises events on interaction, instead of holding gameplay logic of its own.

You will learn

  • Explain what a Canvas Scaler's reference resolution actually controls.
  • Anchor a UI element so it stays in a sensible place on a different aspect ratio.
  • Separate a dumb UI view from the gameplay state it displays.

Target outcome

You can predict roughly where an anchored element lands on a wider or narrower screen than the one you designed on.

Visual walkthrough

Visual walkthrough

~6 min

  1. Four pieces of the UI puzzle

    • Canvas

      The root object every UI element must live under to render.

    • Canvas Scaler

      Decides how UI size adapts across different screen resolutions.

    • Anchor

      Where an element is pinned relative to its parent's rectangle - a corner, an edge, or the center.

    • Dumb view

      A UI element that only displays given state and raises events, owning no gameplay logic itself.

  2. State flows in, events flow out

    The UI never reaches into gameplay systems directly. A presenter script updates the dumb view; the view raises an event back when the player interacts.

    1. Game state

      Health, score, or invented currency values live outside the UI.

    2. HUD presenter script

      Reads state and writes it into UI fields each time it changes.

    3. Canvas UI elements

      Text, sliders, and buttons - display only.

    4. Button click event

      The view raises an event; it does not decide what happens next.

    The UI never reaches into gameplay systems directly. A presenter script updates the dumb view; the view raises an event back when the player interacts.

    Reading order

    1. Game state

      Health, score, or invented currency values live outside the UI.

    2. HUD presenter script

      Reads state and writes it into UI fields each time it changes.

    3. Canvas UI elements

      Text, sliders, and buttons - display only.

    4. Button click event

      The view raises an event; it does not decide what happens next.

    Connection explanations

    1. HUD presenter script → Canvas UI elements (writes into)

      The presenter owns the translation from raw state to display text; the view just renders what it is handed.

    2. Canvas UI elements → Button click event (raises on click)

      A button click becomes an event the gameplay layer subscribes to - the view never calls gameplay code directly.

  5. Fix a resolution bug

    A HUD element sits perfectly in the top-right corner on your 16:9 test device, but floats near the middle of the screen on a narrower phone. What is the most likely misconfiguration?

    Expected reasoning

    The element is anchored to the center instead of the top-right corner, so it does not track the corner across different aspect ratios. Re-anchoring it to the top-right (and checking the Canvas Scaler's reference resolution and match ratio) keeps it pinned to that corner regardless of screen shape.

Go deeper