VOOZH about

URL: https://www.geeksforgeeks.org/c-sharp/responsive-ui-design-in-unity/

⇱ Responsive UI Design In Unity - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Responsive UI Design In Unity

Last Updated : 4 May, 2026

A game looks unprofessional if UI elements are misplaced on different screens like buttons going off-screen on mobile or text getting cut on ultrawide monitors. Responsive UI design ensures your interface looks correct on every screen size. This article covers anchors, Canvas Scaler, and safe areas.

Responsive UI Design

Responsive UI means your interface automatically adjusts to different screen sizes and aspect ratios.

  • A button at bottom-right should stay at bottom-right on all screens.
  • Health bar at top-left should never go off-screen.
  • Text should scale properly on mobile vs PC.

Problem Without Responsive Design

If you place a button at X = 500 on a 1920×1080 screen:

  • On 1920×1080: Button is perfectly placed.
  • On 1366×768: Button may go off-screen to the right.
  • On 2560×1440: Button appears too far left.

Solution 1: Anchors

Anchors decide where a UI element sticks to the screen edges.

How to use:

  1. Select any UI element (Text, Button, Image).
  2. In Inspector, find the RectTransform component.
  3. Click the Anchor Preset box (star-shaped icon).
👁 Anchors-In-Unity
Anchors In Unity

Common Anchor Settings:

AnchorEffect
Top-LeftStays near top-left corner
Top-CenterStays centered at top
Top-RightStays near top-right corner
CenterStays in middle of screen
Bottom-LeftStays near bottom-left
Bottom-CenterStays centered at bottom
Bottom-RightStays near bottom-right
StretchExpands to fill width or height

Practical Anchor Examples

1. Score Text (top-left):

  • Click Anchor Preset - Select Top-Left
  • Text stays at top-left regardless of screen size

2. Health Bar (top-center):

  • Click Anchor Preset - Select Top-Center
  • Health bar stays centered at top

3. Pause Button (bottom-right):

  • Click Anchor Preset → Select Bottom-Right
  • Button stays at bottom-right corner

Solution 2: Canvas Scaler

Canvas Scaler automatically scales all UI elements based on screen size.

Where to find: Select Canvas in Hierarchy - Inspector - Canvas Scaler component

👁 Canvas-Scaler-In-Unity
Canvas Scaler In Unity

Important Settings:

SettingWhat it doesBest for
UI Scale Mode: Constant Pixel SizeNo scalingPC games (fixed resolution)
UI Scale Mode: Scale With Screen SizeScales UI based on screenMobile, cross-platform
Reference ResolutionBase resolution to scale fromSet to your target (e.g., 1920x1080)
Screen Match ModeControls scaling (width, height, or both)Set to 0.5 for balanced scaling

Recommended settings for most games:

  • Scale With Screen Size
  • Reference Resolution: 1920 x 1080
  • Screen Match Mode: 0.5

Safe Area - For Mobile Notch

Modern phones have notches, punch-holes, and rounded corners. UI can get hidden behind them.

Example:

Attach this script to your Canvas. It automatically adjusts UI to avoid notches and rounded corners.

Complete Responsive

For most games:

  1. Canvas Scaler: Scale With Screen Size, Reference 1920×1080
  2. Anchors: Set each UI element to correct corner
  3. Safe Area script: Attach to Canvas for mobile
  4. Layout Groups: For dynamic lists (menus, inventory)

Common Mistakes

  • Placing UI with absolute positions like X = 500, Y = 300 breaks on other screen sizes.
  • Forgetting Canvas Scaler makes UI look tiny or huge on different resolutions.
  • Not testing on different aspect ratios means 16:9 works but 21:9 may break.
  • Ignoring safe areas on mobile causes UI to hide behind the notch.
Comment
Article Tags:
Article Tags:

Explore