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

Need a 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

Need a 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

Need a 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

Need a hint?

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