Three modes of canvas and three zoom modes

The Canvas component has three different rendering modes:

  • Screen Space – Overlay
  • Screen Space – Camera
  • World Space

I. Overlay mode

Full name: Screen space-overlay mode. This mode is used by default after Canvas is created. This mode has nothing to do with camera, so UI game objects will still be rendered even if there is no camera in the scene

  • Screen space: The 2D space of a computer or phone display, with only the X and y axes
  • Overlay mode: UI elements always precede 3D elements

Several related attributes:

  • Pixel Perfect: When selected, UI corresponds to screen pixels, so UI images do not appear jagged edges
  • Sort Order: Depth level of the current canvas

2. Camera mode

Full name: In Screen space-camera mode, you need to specify a Camera game object and the UGUI will automatically appear in the “projection range” of the Camera, which is the same as the default UI Root effect of NGUI. If you hide the Camera, the UGUI will not render

Several related attributes:

  • Render Camera: Used to Render a Camera
  • Plane Distance: Controls the Distance between the UGUI element and the camera without affecting the display

3. WorldSpace mode

Full name: WorldSpace mode. When set to this mode, the UGUI acts as a common “Cube game model” in the scene. You can move the UGUI elements around the scene, usually used for monster health bar display and VR development

 

Canvas Scaler

To accommodate different resolutions, we might allow for proper UI scaling across the board, plus some minimal layout tweaking. This can achieve a more desirable effect. Unity provides a Canvas Scaler component that controls the uniform scaling and pixel density of UI elements in the Canvas. The scale value affects all elements on the Canvas, including font size and image borders.

attribute

Property: Function:
UI Scale Mode The scaling mode for UI elements in the Canvas
        Constant Pixel Size Make the UI its own size, regardless of screen size.
        Scale With Screen Size The bigger the screen, the bigger the UI
        Constant Physical Size Keep UI elements the same physical size, regardless of screen size.

 

Constant Pixel Size:

Property: Function:
Scale Factor Scale all UI elements by factor value (canvas size)
Reference Pixels Per Unit If the Sprite is set to ‘Pixels Per Unit’, then each pixel in the Sprite will occupy one pixel in the UI

 

 Scale With Screen Size:

Property: Function:
Reference Resolution The resolution the UI layout is designed for. If the screen resolution is larger, the UI will be scaled up, And if it’s smaller, the UI will be scaled down. The design resolution of the UI layout, if the actual resolution is larger, the UI will be scaled down.
Screen Match Mode A mode used to scale the canvas area if the aspect ratio of the current resolution doesn’t fit the reference ResolutionCanvas scale mode
        Match Width or Height Scale the canvas area with the width as reference, the height as reference, or something in between Height or the middle value of width and height by weight to scale the Canvas
        Expand Expand the canvas area either horizontally or vertically, So the size of the canvas will never be smaller than the reference
        Shrink Crop the canvas area either horizontally or vertically, So the size of the canvas will never be larger than the reference
Match Determines if the scaling is using the width or height as reference, or a mix in between.
Reference Pixels Per Unit If a Sprite has this’ Pixels Per Unit ‘setting, then one pixel in the Sprite will cover one Unit in the UI. If the Sprite has Pixels Per Unit set to x, then x Pixels of the Sprite will occupy one Unit of the UI.

Constant Physical Size:

Keep the scaling constant by adjusting the physical size of the Canvas. This means that you don’t change the DPI of the Canvas on any screen, but instead adjust the physical size of the Canvas to always match the screen. This may be harder to understand than Constant Pixel Size, but they are essentially the same, except that Constant Pixel Size maintains scaling by adjusting the logical Pixel Size, Constant Physical Size maintains scaling by adjusting the Physical Size. To use this mode you must specify a factor for the physical size of the pixel conversion (fill in 96 for development on Windows). The runtime calculates the Canvas pixel size and scaling factor from the device-specific DPI. This pattern is designed with the intent to use physical units rather than pixel units for development, which only complicates the work of the program and art and is not of great practical value. Because developers are more concerned with the pixel resolution of the design, they need to draw pictures that are clearly pixel sized! In the future, if developers and players alike use super-high DPI monitors, there may be more emphasis on physical size.

Dpi: dots per inch. Common values are 120, 160, and 240. I usually call it pixel density, or density for short

For canvases that are set to “Screen space – Overlay” or “Screen space – Camera”, the Canvas Scaler UI scale mode can be set to “constant pixel size”, “Zoom by screen size” or “Constant physical size”.