Anchoring and responsive UI in Unity - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the anchor of a RectTransform to the center.

Unity

rectTransform.anchorMin = new Vector2([1], [1]);
rectTransform.anchorMax = new Vector2([1], [1]);

Drag options to blanks, or click blank then click option'

A0.5

B0

C1

D-0.5

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 or 1 places the anchor at edges, not center.

Negative values are invalid for anchors.

Setting anchorMin and anchorMax to (0.5, 0.5) places the anchor at the center of the parent.

2fill in blank

medium

Complete the code to make the UI element stretch horizontally by setting anchorMax.x to the right edge.

Unity

rectTransform.anchorMax = new Vector2([1], rectTransform.anchorMax.y);

Drag options to blanks, or click blank then click option'

A1

B0.5

C0

D-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 or 0.5 will not stretch to the right edge.

Negative values are invalid.

Setting anchorMax.x to 1 makes the right edge of the UI element stretch to the parent's right edge.

3fill in blank

hard

Fix the error in setting the pivot point to the bottom-left corner.

Unity

rectTransform.pivot = new Vector2([1], 0);

Drag options to blanks, or click blank then click option'

A1

B0.5

C-0.5

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0.5 centers the pivot.

Negative values are invalid.

The pivot at (0, 0) sets it to the bottom-left corner of the UI element.

4fill in blank

hard

Fill both blanks to create a RectTransform that stretches fully with a 10 pixel margin on all sides.

Unity

rectTransform.offsetMin = new Vector2([1], [1]);
rectTransform.offsetMax = new Vector2([2], [2]);

Drag options to blanks, or click blank then click option'

A10

B-10

C0

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using positive values for offsetMax causes incorrect margins.

Using zero removes margins.

offsetMin sets the left and bottom margins (positive 10 pixels), offsetMax sets the right and top margins (negative 10 pixels) to create a 10 pixel margin all around.

5fill in blank

hard

Fill all three blanks to set anchors and pivot so the UI element stays fixed to the top-right corner.

Unity

rectTransform.anchorMin = new Vector2([1], [2]);
rectTransform.anchorMax = new Vector2([1], [2]);
rectTransform.pivot = new Vector2([3], [3]);

Drag options to blanks, or click blank then click option'

A0

B1

C0.5

D-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 or 0.5 for anchors or pivot will not fix the element to top-right.

Negative values are invalid.

Setting both anchorMin and anchorMax to (1, 1) anchors the UI element to the top-right corner. Setting pivot to (1, 1) makes the pivot point the top-right corner, so the element stays fixed there.

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