UGUI - In-depth understanding of Canvas Scaler screen adaptation

preface

Before learning about the Canvas Scaler component, let’s first learn about pixels, image resolution, screen resolution, pixel ratio, and aspect ratio.

Pixel: A pixel refers to the smallest unit of an image, which is an independent color block (pixel point). An image is composed of these pixel points. The more and denser the pixel points in the unit area, the clearer the image will be.

Image resolution: Image resolution is the number of pixels per inch of the image. Image resolution is a unit, called the pixel does not inch. The higher the resolution, the higher the pixel point density, the more realistic the image.

Screen resolution: The number of pixels the screen can display. The resolution is 1920×1080, which means that there are 1920 pixels in the horizontal direction and 1080 pixels in the vertical direction. For the same screen size, the higher the resolution, the finer and finer the display.

Pixel ratio: Is each cell (pixel) square or flat. 1:1 is square, 4:3 is a little flat, and 16:9 is very flat.

Aspect ratio (image ratio) : the ratio between the width and height of a video image.

Note:

The actual screen aspect ratio is not necessarily the ratio of resolution, unless the pixel ratio is 1:1.
The actual screen aspect ratio = Landscape resolution x landscape pixel length: portrait resolution x portrait pixel length.

For example, a movie with a 640 * 360 resolution and a 16:9 aspect ratio will have a 1:1 pixel ratio.

Canvas Scaler

The Canvas Scaler Component is used for controlling The overall scale and pixel density of The UI Elements in the Canvas. This scaling effects everything under the Canvas, including font size and image borders”. The Canvas Scaler component controls the scale and pixel density of all UI elements on the Canvas. And this scale will affect everything on the Canvas, including the font size and image boundaries.

In order to accommodate different resolutions, we may need to allow appropriate UI scaling across the board, with as few local tweaks as possible, to achieve a desirable result. The Canvas Scaler is the component responsible for this functionality.

When Canvas Render Mode is Screen space-overlay or Screen space-camera, Canvas Scaler UI Scale Model has 3 options. They are :Constant Pixel Size, Scale With Screen Size, Constant Physical Size, as shown in the picture below:

When Canvas Render Mode is World Space, only one UI Scale Model of Canvas Scaler is Wordl default option, which cannot be changed, as shown in the picture below:

Here are three modes: Constant Pixel Size, Scale With Screen Size, and Constant Physical Size.

UI Scale Mode — Constant Pixel Size

Note: When the screen resolution is set to 1000 * 1000, create a Canvas and add an image with a width and height of 100 * 100 to the Canvas.

Parameter description:
- Scale Factor: The Scale of the canvas. The default value is 1, which indicates normal size.
- Reference Pixels Per Unit: Indicates the number of Pixels Per Unit.
When Scale Factor is set to 1, the width and height of Canvas is 1000 * 1000 and the width and height of image is 100 * 100, as shown in the picture below:
When Scale Factor is set to 2, the width and height of Canvas is 500 * 500, and the width and height of image is 100 * 100, as shown in the picture below:

Bottom line: UI elements remain the same pixel size regardless of screen size. Using this mode, you can specify the position and size of UI elements on the screen in pixels. This is also the default function of the canvas when no canvas scaler is attached. However, with the “Scale Factor” setting in the canvas scaler, constant scaling can be applied to all UI elements in the canvas.

UI Scale Mode — Scale With Screen Szie

When the screen resolution is set to 1000 x 1000, create a Canvas and add a picture with the width and height of 800 x 600 to the Canvas. Set the UI layout design resolution to 800 x 600.

Parameter description:
- Reference Resolution:Design resolution of UI layout.
- Screen Match Mode – Macth Width Height
  - Match is a slider that, when Match is 0, scales the Canvas proportionally by width; When Match is 1, Canvas is scaled proportionally by height. Usually it’s either zero or one, don’t worry about the middle.
  - If the screen resolution is less than or equal to the design resolution, then no matter what the value of Match is, the width and height of the Canvas will be the design resolution. In this case, 800 * 600.
  - If the screen resolution is greater than the design resolution, then when Match is 0, the width of Canvas is the width of the design resolution, and the height is calculated according to the screen resolution. In this case, the width and height of Canvas are 800. When match is 1, the height of Canvas is the height of the design resolution and the width is calculated according to the screen resolution. In this case, the width and height of Canvas are 600 and 600 respectively.
- Screen Match Mode – Expend
  - When the screen resolution is less than or equal to the design resolution, then the width and height of Canvas is 800 * 600 of the design resolution.
  - When the screen resolution is greater than the design resolution, the one with the smaller width and height difference between the screen resolution and the design resolution is selected as the scaling criterion, and the other one is scaled according to the screen resolution. In this case, the height difference is (1000-800)200, and the width difference is (1000-600)400. 200 is smaller, so the width of Canvas in this case is 800, and the height is 800 according to the screen resolution 1:1.
  - This is designed to reduce the impact on the overall layout of the UI caused by scaling up the resolution. Suitable for making smaller standard sizes and expanding to larger screens.
- Screen Match Mode – Shrink
  - Similar to Expend, but better suited for shrinking.
  - Select the one with the widest width and height difference between the screen resolution and the design resolution as the scaling criterion, and then scale the other one according to the screen resolution. In this case, the height difference is (1000-800)200, and the width difference is (1000-600) 400. 400 is larger, 600, and the width is 600 based on the screen resolution 1:1.

Bottom line: The bigger the screen, the bigger the UI elements. When using this mode, you can specify the position and size according to the specified resolution pixels, and if the current screen resolution is greater than the reference resolution, the canvas retains the reference resolution but is enlarged to fit the screen. If the resolution of the current screen is less than the reference resolution, the canvas shrinks to fit the screen.

UI Scale Mode — Constant Physical Size

Note: The Constant Pixel Size mode is essentially the same as the Constant Pixel Size mode. Constant Pixel Size maintains scaling by adjusting the logical Pixel Size, while Constant Physical Size maintains scaling by adjusting the Physical Size. To use this mode, you must specify a factor to convert a pixel to a physical size, and the runtime calculates the final Canvas pixel size and scale using the device’s DPI.

Parameter description:
- Physical Unit:A physical unit used to specify the location and size of a UI
Property Description Calculated in the targetDPICentimeters cm 2.54Millimeters 25.4Inches, approximately 25.4 Millimeters 1 points, 1/72 inch, 1/12 picas picas card 72, 1/6 inch 6
- Fallback Sprite DPI:If the DPI for the screen is not available, this value will be used to calculate the scaling.
- The Default Sprite DPI:Calculate the number of Pixels Per UI Unit together with Reference Pixels Per Unit.
- Reference Pixels Per Unit:Count pixels per UI unit in conjunction with Default Sprite DPI.
Source:

///<summary>
///Handles canvas scaling for a constant physical size.
///</summary>
protected virtual void HandleConstantPhysicalSize()
{
    float dpi = (currentDpi == 0 ? m_FallbackScreenDPI : currentDpi);
    float targetDPI = 1;
    switch (m_PhysicalUnit)
    {
        case Unit.Centimeters: targetDPI = 2.54 f; break;
        case Unit.Millimeters: targetDPI = 25.4 f; break;
        case Unit.Inches: targetDPI = 1; break;
        case Unit.Points: targetDPI = 72; break;
        case Unit.Picas: targetDPI = 6; break;
    }
    SetScaleFactor(dpi / targetDPI);
    // Set the number of pixels in each Canvas unit
    SetReferencePixelsPerUnit(m_ReferencePixelsPerUnit * targetDPI / m_DefaultSpriteDPI);
}
Copy the code

Bottom line: UI elements remain the same physical size regardless of screen size and resolution. Using this pattern, you can specify the location and size of UI elements on the screen in physical units. This mode requires the device to correctly report its screen DPI(resolution). For devices that do not report DPI, you can specify to roll back DPI

Refer to the reference

# Unity studies pixels,Camera size, and resolution

# Adaptive artifact

# Unity UGUI-Canvas Scaler summary

Ugui (2) – Canvas Scaler

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

UGUI – In-depth understanding of Canvas Scaler screen adaptation

preface

Canvas Scaler

UI Scale Mode — Constant Pixel Size

UI Scale Mode — Scale With Screen Szie

UI Scale Mode — Constant Physical Size

Refer to the reference

UGUI – In-depth understanding of Canvas Scaler screen adaptation

preface

Canvas Scaler

UI Scale Mode — Constant Pixel Size

UI Scale Mode — Scale With Screen Szie

UI Scale Mode — Constant Physical Size

Refer to the reference

Related Posts

Front end algorithm: palindrome string

Js prototype prototype chain personal understanding

Understand the Vue style guide | good programming style, often get twice the result with half the effort