Anchoring and responsive UI in Unity - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Unity UI anchoring code?

Consider a UI Button anchored to the top-right corner of the Canvas. The Canvas size is 800x600 pixels. The Button's RectTransform has anchors set to (1,1) for both min and max, and its anchoredPosition is (-50, -30). What will be the Button's position relative to the Canvas?

Unity

RectTransform buttonRect = button.GetComponent<RectTransform>();
Vector2 anchorMin = buttonRect.anchorMin; // (1,1)
Vector2 anchorMax = buttonRect.anchorMax; // (1,1)
Vector2 anchoredPos = buttonRect.anchoredPosition; // (-50, -30)
Vector2 canvasSize = new Vector2(800, 600);
Vector2 buttonPos = new Vector2(canvasSize.x * anchorMin.x + anchoredPos.x, canvasSize.y * anchorMin.y + anchoredPos.y);
Debug.Log($"Button position: {buttonPos}");

A Button position: (50, 30)

B Button position: (750, 570)

C Button position: (850, 630)

D Button position: (-50, -30)

💡 Hint

Remember that anchor (1,1) means top-right corner, so position is relative to top-right.

The anchor at (1,1) means the position is calculated from the top-right corner of the Canvas (800,600). Adding the anchoredPosition (-50,-30) shifts the Button 50 pixels left and 30 pixels down, resulting in (750,570).

🧠 Conceptual

intermediate

Which anchor setup makes a UI element stretch horizontally but stay fixed vertically?

You want a UI Panel to stretch across the full width of the Canvas but keep a fixed height and vertical position. Which anchorMin and anchorMax values achieve this?

A anchorMin = (0, 0), anchorMax = (0, 1)

B anchorMin = (0.5, 0), anchorMax = (0.5, 1)

C anchorMin = (0, 0.5), anchorMax = (1, 0.5)

D anchorMin = (0, 0), anchorMax = (1, 1)

💡 Hint

Stretch horizontally means anchors span full width (0 to 1) on x-axis, but fixed vertical means anchors share the same y value.

Setting anchorMin.x=0 and anchorMax.x=1 stretches the element horizontally. Setting anchorMin.y=anchorMax.y=0.5 fixes vertical position and height.

🔧 Debug

advanced

Why does this UI element not resize with the Canvas?

A developer sets a UI Image's anchors to (0.5, 0.5) for both min and max, and sets its sizeDelta to (200, 100). When the Canvas size changes, the Image stays the same size and position. Why?

Unity

RectTransform imageRect = image.GetComponent<RectTransform>();
imageRect.anchorMin = new Vector2(0.5f, 0.5f);
imageRect.anchorMax = new Vector2(0.5f, 0.5f);
imageRect.sizeDelta = new Vector2(200, 100);

A Because anchors are fixed at center, sizeDelta controls size, so it won't resize with Canvas.

B Because sizeDelta is ignored when anchors are equal, so the element has zero size.

C Because anchors must be set to (0,0) and (1,1) to enable resizing.

D Because the Canvas Scaler component is missing, so resizing is disabled.

💡 Hint

Anchors at the same point fix the element's position and size relative to that point.

When anchors are the same, the UI element's size is controlled by sizeDelta and does not stretch. So it keeps fixed size and position regardless of Canvas size.

📝 Syntax

advanced

Which code correctly sets a UI element to stretch fully in both directions?

Select the code snippet that correctly sets a RectTransform to stretch horizontally and vertically inside its parent Canvas.

A

rect.anchorMin = new Vector2(0.5f, 0.5f);
rect.anchorMax = new Vector2(0.5f, 0.5f);
rect.sizeDelta = Vector2.zero;

B

rect.anchorMin = new Vector2(0, 0);
rect.anchorMax = new Vector2(0, 0);
rect.sizeDelta = Vector2.one;

C

rect.anchorMin = new Vector2(1, 1);
rect.anchorMax = new Vector2(0, 0);
rect.sizeDelta = Vector2.zero;

D

rect.anchorMin = new Vector2(0, 0);
rect.anchorMax = new Vector2(1, 1);
rect.sizeDelta = Vector2.zero;

💡 Hint

Stretching means anchors at opposite corners and sizeDelta zero.

Setting anchorMin to (0,0) and anchorMax to (1,1) makes the element stretch fully. sizeDelta zero means no extra size offset.

🚀 Application

expert

How to keep a UI element anchored to bottom-left but scale with Canvas size?

You want a UI Text element to stay anchored to the bottom-left corner of the Canvas but also scale its size proportionally when the Canvas size changes. Which approach achieves this?

A Set anchorMin and anchorMax to (0,0), use sizeDelta for base size, and add a script to scale sizeDelta based on Canvas size.

B Set anchorMin to (0,0), anchorMax to (1,1), and set pivot to (0,0) to stretch and scale automatically.

C Set anchorMin and anchorMax to (0,0), set sizeDelta to zero, and rely on Canvas Scaler to scale automatically.

D Set anchorMin and anchorMax to (0.5,0.5), and use layout groups to control scaling.

💡 Hint

Anchors at (0,0) fix position; scaling size requires manual adjustment or layout control.

Anchors at bottom-left fix position. sizeDelta controls size but does not scale automatically. To scale size with Canvas, a script must adjust sizeDelta based on Canvas size changes.