UGUI Canvas & Event System

UGUI Canvas & Event System

If you are working on legacy projects, you will encounter the Unity UI (UGUI) system.

The Canvas

Every UGUI element (Image, Text, Button) must reside under a Canvas GameObject. The Canvas draws all child elements to the screen.

When you create a UI element:

1. Unity automatically creates a Canvas (if one doesn't exist).
2. It adds an Event System GameObject (which handles inputs, hovering, and clicks).
3. The UI element is added as a child of the Canvas.

RectTransform

Standard GameObjects have a Transform component. UGUI elements have a RectTransform component instead.

• Anchors: Controls how the element moves and stretches when the screen size changes (represented by 4 triangles).
• Pivot: The point around which rotation and scaling occurs.
• Position (Pos X, Pos Y, Pos Z): Position relative to the anchors.

Canvas Scaler

The Canvas Scaler component on the Canvas determines how the UI behaves on different resolutions:

• Constant Pixel Size: UI maintains its exact size in pixels (looks tiny on 4K screens).
• Scale With Screen Size: Scales UI elements based on a target Reference Resolution (highly recommended for mobile and multi-platform games).

TL;DR

• UGUI UI elements require a Canvas parent and an Event System in the scene.
• RectTransforms use Anchors to anchor positions to screen corners or edges.
• Use Canvas Scaler set to 'Scale With Screen Size' for responsive scaling.