【Unity】Unity UI Fundamentals: Understanding Canvas, RectTransform, and Anchors

Overview

Health bars, scores, minimaps, buttons, menus—games need UI (User Interface). Unity includes a powerful system called uGUI (Unity GUI) for efficiently creating and managing these UI elements.

However, many beginners struggle with uGUI's unique concepts that differ from 3D object Transforms—particularly RectTransform and Anchors. "My UI layout broke when I changed screen size" is a common experience.

This article explains the three most fundamental uGUI elements: Canvas, RectTransform, and Anchors—the key to responsive layouts—along with their roles and relationships.

Canvas: The Drawing Surface for UI

All UI elements must be placed as children of a special GameObject called Canvas. True to its name, Canvas serves as the "canvas" for drawing UI. When you first create a UI element (Image, Text, Button, etc.) in a scene, Unity automatically generates a Canvas and EventSystem object.

Canvas has an important Render Mode setting that determines how UI is drawn on screen.

• Screen Space - Overlay: The most common mode. UI renders in the foremost layer, stuck to the screen above all scene elements. Used for 2D game UI and 3D game score displays.
• Screen Space - Camera: Renders UI at a fixed distance in front of a specified camera. Useful when you want particle effects between UI and 3D objects.
• World Space: Treats UI as objects in 3D space. For health bars above character heads or VR menus integrated into the 3D world.

Start by getting comfortable with the default Screen Space - Overlay.

RectTransform: Transform for UI

While regular 3D objects manage position, rotation, and scale with the Transform component, UI elements use RectTransform—a specialized Transform.

RectTransform includes Transform functionality plus properties specific to UI layout:

• Width / Height: UI element width and height.
• Anchors: The most important property—defines how UI elements follow their parent (usually Canvas).
• Pivot: The center point for rotation and scaling. Usually centered (X:0.5, Y:0.5).

Anchors: The "Anchor" Preventing Layout Breakage

Anchors appear as cross or square icons in the RectTransform Inspector and are the key UI layout concept. Anchors act as "anchors" defining which relative position on the parent element (Canvas) the UI element's corners are fixed to.

For example, smartphone screens have different aspect ratios across models. Without proper anchor settings, a button in the top-right on one device might extend off-screen on another.

Anchor Presets

Clicking the anchor icon in Inspector shows presets for common layouts. Use these as your foundation.

• Top-Left: Fixes UI position by pixel distance from parent's top-left.
• Middle-Center: Centers UI in parent.
• Bottom-Right: Fixes UI position by pixel distance from parent's bottom-right.

Stretch

Selecting presets with separated anchor corners (e.g., top-stretch) makes UI elements stretch with parent size changes.

• Horizontal Stretch: UI width changes with parent width. For top header bars.
• Vertical Stretch: UI height changes with parent height. For side panels.
• Full Stretch: Both width and height change with parent. For background images.

Understanding Anchor Behavior

The meaning of RectTransform properties like Left, Top, Right, Bottom changes based on anchor state.

• Anchors at single point: PosX, PosY represent relative pixel position from anchor point.
• Anchors separated (stretch): Left, Right, etc. represent padding (margin) between UI element edges and anchor points.

Understanding this difference is key to mastering responsive UI layouts.

Summary

Unity's uGUI system is powerful but requires understanding several key concepts.

• Canvas: The foundation for all UI elements. Render Mode determines drawing method.
• RectTransform: Transform specifically for UI. Has width, height, and anchors.
• Anchors: The most important mechanism for handling various screen sizes. Defines where UI elements are "fixed" relative to parent.

Start by experimenting—change Game view resolution to various aspect ratios and observe how UI element behavior changes with different anchor presets. Master anchors, master uGUI.