Three modes and three zoom modes of canvas

Canvas Components have three different rendering modes :

* Screen Space - Overlay
* Screen Space - Camera
* World Space

one ,Overlay pattern

Full name : Screen space - Coverage mode (Screen Space-Overlay),Canvas After creating it , The default is this mode , This mode is camera independent ,
Even if there is no camera in the scene ,UI Game object rendering

* Screen space : Computer or mobile phone display 2D space , only x Axis and y axis
* Coverage mode :UI The elements are always there 3D Front of element
Several related properties :

* Pixel Perfect: After checking UI Corresponding to screen pixels ,UI There are no jagged edges in the image
* Sort Order: The depth level of the current canvas
two ,Camera pattern

Full name : Screen space - Camera mode (Screen Space-Camera
), After setting to this mode, you need to specify a video game object , After designation UGUI It will automatically appear on the screen of the camera “ Projection range ” within , and NGUI Default of UI
Root The effect is consistent , If you hide the camera ,UGUI Of course, it can't be rendered

Several related properties :

* Render Camera: For rendering cameras
* Plane Distance: control UGUI Distance between element and camera , The display is not affected
three ,WorldSpace pattern

Full name : World space model (WorldSpace), After setting to this mode UGUI It's like an ordinary one in the scene “Cube
Game model ”, It can move freely in the scene UGUI The location of the element , Usually used for monster blood display and display VR development

 

Canvas Scaler( Canvas zoom )

In order to adapt to different resolutions , We may allow the appropriate UI Holistic scaling , Plus a few layout tweaks as little as possible .  In this way, an ideal effect can be achieved .Unity Provides us with Canvas
Scaler Component is used to control the UI Unified scaling of elements and pixel density . Scale value effect Canvas All the elements on the screen , Including fonts size and image Of borders.

<> attribute

Property: function :
UI Scale ModeCanvas in UI The scaling mode of the element
        Constant Pixel Size
send UI Keep your size , It's not about screen size .

        Scale With Screen Size
The larger the screen size is ,UI The bigger

        Constant Physical Size
send UI The elements remain the same physical size , It's not about screen size .

 

Constant Pixel Size:

Property: function :
Scale Factor
adopt factor Value to scale all UI element ( canvas size )

Reference Pixels Per Unit If Sprite Set up ‘Pixels Per Unit’, Then it's time Sprite One pixel will occupy UI One pixel of
 

 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.

UI Design resolution of layout , If the actual resolution is large ,UI The display will be enlarged , If the actual resolution is small ,UI It zooms out .

Screen Match Mode
A mode used to scale the canvas area if the aspect ratio of the current
resolution doesn’t fit the reference resolution

Canvas Zoom mode

        Match Width or Height
Scale the canvas area with the width as reference, the height as reference, or
something in between

According to the width of the design resolution , High or take the value of wide high middle according to the weight to scale Canvas

        Expand
Expand the canvas area either horizontally or vertically, so the size of the
canvas will never be smaller than the reference

Expand canvas size horizontally or vertically ( Therefore, the actual canvas size is always larger than the design resolution )

        Shrink
Crop the canvas area either horizontally or vertically, so the size of the
canvas will never be larger than the reference

Horizontal or bus shrink canvas size ( Therefore, the actual canvas size is always smaller than the design resolution )

MatchDetermines 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 Sprite Set up ‘Pixels Per
Unit’ by x, Then it's time Sprite Of x Pixels will occupy UI A unit of .(UI How many design resolution pixels does a unit correspond to , It's better to be consistent with the picture settings , otherwise Image The display will not match the canvas )

Constant Physical Size:

By adjusting Canvas Physical size to maintain scaling . It means no change on any screen Canvas Of DPI, It's regulation Canvas
The physical size of is always consistent with the screen . It's probably better than that  Constant Pixel Size It's harder to understand , In fact, they are essentially the same , It's just that  Constant Pixel
Size  Scaling is maintained by logical pixel sizing , and Constant Physical Size
Scaling is maintained by physical sizing . To use this mode, you must specify a factor that converts pixels to physical size ( fill in 96 Convenient in windows Development on the Internet ). Run time reports through specific devices dpi calculation
Canvas
Pixel size and scaling factor . This pattern is based on the intention of the design , This is to use physical units instead of pixel units in development , This only complicates the work of programming and art , The actual use value is not high . Because developers are more concerned about the pixel resolution of the design , They need to draw clear pixel size images ! If the future developers and players use super high DPI Monitor for , At that time, we might pay more attention to physical size .

dpi :dots per inch , Directly, how many pixels per inch . Common values 120,160,240. I usually call it pixel density , Density for short

For set to “ Screen space - cover ” or “ Screen space - camera ” My canvas ,Canvas Scaler
UI The scale mode can be set to “ Constant pixel size ”,“ Zoom to screen size ” or “ Constant physical size ”.

 

 

 

 

I'm not familiar with this area , I sorted out my search , Easy to deepen on canvas Canvas Understanding of

Technology
©2019-2020 Toolsou All rights reserved,
【Java8 New features 1】Lambda Expression summary What is a process , Concept of process ?hdfs dfs Common basic commands java When creating objects, you must _Java Basic test questions Generation of random numbers + Figure guessing game When will we enter the old generation ?HDFS Common commands ( summary ) It is never recommended to spend a lot of time studying for employment pythonmacOS Big Sur The installation could not be completed Big Sur Why can't I install it ?Python pyttsx3| Text reading ( Various languages )