SoFunction
Updated on 2025-03-06

Unity UGUI's CanvasScaler Canvas Scaler Component Introduction

Introduction and use of CanvasScaler (Canvas Scaler) components of Unity UGUI

1. What is the CanvasScaler component?

CanvasScaler is a component in the UGUI system in Unity that controls the scaling and adaptation of the canvas. Through the CanvasScaler component, adaptive display of the UI interface at different resolutions can be realized.

2. What does CanvasScaler work?

The CanvasScaler component adjusts the scaling ratio of the canvas to maintain a consistent display effect at different resolutions. It calculates the scaling ratio based on the set reference resolution and screen resolution ratio and applies it to the canvas.

3. What are the commonly used properties of CanvasScaler?

  • UI Scale Mode: Set the scaling mode of the canvas, including three modes: Constant Pixel Size, Scale With Screen Size, and Constant Physical Size.
  • Reference Resolution: Set the reference resolution to calculate the scaling.
  • Screen Match Mode: Set the screen matching mode, there are two modes: Match Width Or Height and Expand.
  • Match: When setting the screen matching mode to Match Width Or Height, specify the matching ratio of width or height.
  • Physical Unit: Set physical units to calculate the scaling ratio in Constant Physical Size mode.

4. What are the commonly used functions of CanvasScaler?

  • SetScaleFactor(float scaleFactor): Set the scaling ratio of the canvas.
  • SetReferencePixelsPerUnit(float referencePixelsPerUnit): Set the reference pixel unit.
  • SetReferenceResolution(Vector2 referenceResolution): Set the reference resolution.
  • SetScreenMatchMode(ScreenMatchMode screenMatchMode, float matchWidthOrHeight): Set the screen matching mode and matching ratio.

5. CanvasScaler usage sample code:

Example 1: Set the scaling mode of the canvas to Scale With Screen Size

CanvasScaler canvasScaler = GetComponent<CanvasScaler>();
 = ;
 = new Vector2(1920, 1080);
 = ;
 = 0.5f;

Operation steps:

  • Get the CanvasScaler component.
  • Set the uiScaleMode property to Scale With Screen Size.
  • Set the referenceResolution property to the reference resolution, such as 1920x1080.
  • Set the screenMatchMode property to Match Width Or Height.
  • Set the matchWidthOrHeight property to the matching ratio, for example, 0.5 means that the matching ratio of width and height is 1:2.

Example 2: Set the zoom mode of the canvas to Constant Pixel Size

CanvasScaler canvasScaler = GetComponent<CanvasScaler>();
 = ;
 = 2f;

Operation steps:

  • Get the CanvasScaler component.
  • Set the uiScaleMode property to Constant Pixel Size.
  • Set the scaleFactor property to scale, for example, 2 means twice the size of the canvas.

Example 3: Set the zoom mode of the canvas to Constant Physical Size

CanvasScaler canvasScaler = GetComponent<CanvasScaler>();
 = ;
 = 100;

Operation steps:

  • Get the CanvasScaler component.
  • Set the uiScaleMode property to Constant Physical Size.
  • Set the referencePixelsPerUnit property to the reference pixel unit, for example, 100 means that each unit corresponds to 100 pixels.

Example 4: Dynamically set the scaling ratio of the canvas

CanvasScaler canvasScaler = GetComponent<CanvasScaler>();
(1.5f);

Operation steps:

  • Get the CanvasScaler component.
  • Call SetScaleFactor function to set the scaling ratio of the canvas to 1.5.

Example 5: Dynamically set the reference resolution of the canvas

CanvasScaler canvasScaler = GetComponent<CanvasScaler>();
(new Vector2(1280, 720));

Operation steps:

  • Get the CanvasScaler component.
  • Call SetReferenceResolution function to set the reference resolution of the canvas to 1280x720.

Things to note

  • When using the CanvasScaler component, you need to set the Render Mode of Canvas to Screen Space - Camera or Screen Space - Overlay, otherwise the CanvasScaler will be invalid.
  • When setting the reference resolution, it should be adjusted according to the resolution of the target platform to ensure that the UI displays consistently on different devices.

References:

Unity official documentation - CanvasScaler

The above is the detailed introduction to the CanvasScaler canvas scaler component of Unity UGUI. For more information about the Unity UGUI canvas scaler component, please follow my other related articles!