Anchoring and responsive UI in Unity - Mini Project: Build & Apply

Anchoring and Responsive UI in Unity

📖 Scenario: You are creating a simple game menu in Unity that looks good on all screen sizes. You want the buttons and text to stay in the right place no matter the screen size or resolution.

🎯 Goal: Build a Unity UI canvas with a button anchored to the bottom right corner and a title text anchored to the top center. The UI should adjust automatically when the screen size changes.

📋 What You'll Learn

Create a Canvas with a Button and a Text element

Set the Button's anchor to the bottom right corner

Set the Text's anchor to the top center

Use RectTransform properties to position elements responsively

💡 Why This Matters

🌍 Real World

Game developers use anchoring and responsive UI techniques to ensure their game menus and HUDs look good on all screen sizes and devices.

💼 Career

Understanding Unity UI anchoring and Canvas Scaler is essential for game UI designers and developers to create professional and user-friendly interfaces.

1

Create Canvas and UI Elements

Create a Canvas GameObject in the scene. Inside the Canvas, create a Button named PlayButton and a Text element named TitleText.

Unity

// Create Canvas, PlayButton, and TitleText in the Unity Editor

Hint

Use the Unity Editor's GameObject menu to add UI elements. Make sure the Button is named PlayButton and the Text is named TitleText.

2

Set Anchors for Responsive Positioning

Set the PlayButton RectTransform anchor to the bottom right corner by setting anchorMin and anchorMax to (1, 0). Set the TitleText RectTransform anchor to the top center by setting anchorMin and anchorMax to (0.5, 1).

Unity

// Set PlayButton anchors to bottom right
// Set TitleText anchors to top center

Hint

Use the RectTransform component to set anchors. Anchors are values between 0 and 1 representing the normalized position inside the parent.

3

Position UI Elements with Offsets

Set the PlayButton RectTransform anchoredPosition to (-50, 50) so it is 50 units left and 50 units up from the bottom right corner. Set the TitleText RectTransform anchoredPosition to (0, -50) so it is 50 units down from the top center.

Unity

// Position PlayButton 50 units left and 50 units up from bottom right
// Position TitleText 50 units down from top center

Hint

Use anchoredPosition to offset the UI elements from their anchors.

4

Test Responsive UI Behavior

Add a Canvas Scaler component to the Canvas and set its uiScaleMode to Scale With Screen Size. Set the reference resolution to (1920, 1080). This makes the UI scale and stay anchored correctly on different screen sizes.

Unity

// Add Canvas Scaler component and set uiScaleMode and referenceResolution

Hint

The Canvas Scaler component helps the UI adjust to different screen sizes by scaling the UI elements.

Practice

1. What is the main purpose of using anchors in Unity UI?

easy

A. To keep UI elements positioned correctly on different screen sizes

B. To add animations to UI elements

C. To change the color of UI elements dynamically

D. To load external images into UI elements

Solution

1. Step 1: Understand what anchors do

   Anchors define how UI elements stay positioned relative to their parent when screen size changes.

2. Step 2: Identify the main purpose

   Anchors help keep UI elements in the right place on any screen size, making UI responsive.

3. Final Answer:

   To keep UI elements positioned correctly on different screen sizes -> Option A

4. Quick Check:

   Anchors = correct UI position on all screens [OK]

Hint: Anchors fix UI position for all screen sizes [OK]

Common Mistakes:

• Thinking anchors add animations
• Confusing anchors with color changes
• Believing anchors load images

2. Which of the following is the correct way to set anchors in Unity's RectTransform component?

easy

A. rectTransform.anchorMin = new Vector2(0, 0); rectTransform.anchorMax = new Vector2(1, 1);

B. rectTransform.position = new Vector3(0, 0, 0);

C. rectTransform.sizeDelta = new Vector2(100, 100);

D. rectTransform.localScale = new Vector3(1, 1, 1);

Solution

1. Step 1: Identify how to set anchors

   Anchors are set using anchorMin and anchorMax properties of RectTransform with Vector2 values.

2. Step 2: Check the options

   rectTransform.anchorMin = new Vector2(0, 0); rectTransform.anchorMax = new Vector2(1, 1); correctly sets anchorMin and anchorMax to (0,0) and (1,1), which means stretch to full parent.

3. Final Answer:

   rectTransform.anchorMin = new Vector2(0, 0); rectTransform.anchorMax = new Vector2(1, 1); -> Option A

4. Quick Check:

   anchorMin and anchorMax set anchors [OK]

Hint: Use anchorMin and anchorMax with Vector2 to set anchors [OK]

Common Mistakes:

• Using position instead of anchors
• Confusing sizeDelta with anchors
• Trying to set anchors with localScale

3. Given this code snippet in Unity:

rectTransform.anchorMin = new Vector2(0.5f, 0.5f);
rectTransform.anchorMax = new Vector2(0.5f, 0.5f);
rectTransform.anchoredPosition = new Vector2(100, 50);

Where will the UI element appear relative to its parent?

medium

A. Positioned at the bottom-left corner of the parent

B. Stretched to fill the entire parent

C. Centered in the parent with an offset of (100, 50)

D. Positioned at the top-right corner of the parent

Solution

1. Step 1: Analyze anchor values

   Both anchorMin and anchorMax are set to (0.5, 0.5), which means the anchor is at the center of the parent.

2. Step 2: Understand anchoredPosition effect

   anchoredPosition moves the element relative to the anchor point, so (100, 50) offsets it right and up from center.

3. Final Answer:

   Centered in the parent with an offset of (100, 50) -> Option C

4. Quick Check:

   anchor at center + offset = position [OK]

Hint: anchorMin = anchorMax centers; anchoredPosition offsets from center [OK]

Common Mistakes:

• Thinking anchors stretch element
• Ignoring anchoredPosition offset
• Assuming anchors at corners

4. What is wrong with this Unity UI anchoring code?

rectTransform.anchorMin = new Vector2(1, 1);
rectTransform.anchorMax = new Vector2(0, 0);
rectTransform.anchoredPosition = new Vector2(0, 0);

medium

A. anchorMax cannot be set to (0, 0)

B. anchorMin values must be less than or equal to anchorMax values

C. anchoredPosition cannot be zero

D. RectTransform cannot have anchors set programmatically

Solution

1. Step 1: Check anchorMin and anchorMax relationship

   anchorMin should be less than or equal to anchorMax on both axes; here anchorMin (1,1) is greater than anchorMax (0,0).

2. Step 2: Understand consequences

   This causes invalid anchor setup and can lead to UI layout errors or unexpected behavior.

3. Final Answer:

   anchorMin values must be less than or equal to anchorMax values -> Option B

4. Quick Check:

   anchorMin ≤ anchorMax required [OK]

Hint: anchorMin must never be greater than anchorMax [OK]

Common Mistakes:

• Setting anchorMin greater than anchorMax
• Thinking anchoredPosition can't be zero
• Believing anchors can't be set in code

5. You want a UI button to always stay 20 pixels from the bottom-right corner of the screen, regardless of screen size. Which anchor settings and properties achieve this?

hard

A. anchorMin = (0, 0), anchorMax = (0, 0), anchoredPosition = (20, 20)

B. anchorMin = (0, 1), anchorMax = (0, 1), anchoredPosition = (20, -20)

C. anchorMin = (1, 1), anchorMax = (1, 1), anchoredPosition = (-20, -20)

D. anchorMin = (1, 0), anchorMax = (1, 0), anchoredPosition = (-20, 20)

Solution

1. Step 1: Set anchors to bottom-right corner

   Bottom-right corner corresponds to anchorMin and anchorMax both at (1, 0).

2. Step 2: Set anchoredPosition for offset

   anchoredPosition is relative to anchor; to move left and up by 20 pixels, use (-20, 20).

3. Final Answer:

   anchorMin = (1, 0), anchorMax = (1, 0), anchoredPosition = (-20, 20) -> Option D

4. Quick Check:

   Anchors bottom-right + offset (-20,20) = correct position [OK]

Hint: Anchor bottom-right (1,0), offset negative x, positive y [OK]

Common Mistakes:

• Using wrong anchor points for bottom-right
• Setting positive x offset moves right off screen
• Confusing top and bottom anchors