Generally speaking, the canvas has three rendering modes
One: canvas rendering
1.Screen Space - Overlay is the overlay mode
In this mode, the canvas automatically fills the screen, and by default it covers other screens at the front of the screen, which is the usual selection mode
2. Screen Space - Camera camera mode
The same canvas automatically fills the entire screen, but you can adjust whether to cover the canvas by adjusting the position of the object in front of the camera
But to use this mode, you need to select the desired camera in the rendering camera after selection
3. World Space world coordinate mode
The size is based on the set rect, which is no different from other objects in the camera, and the canvas is displayed according to its world position
The effect is as follows
Notice:
The maximum size of the canvas in modes 1 and 2 is related to the adaptation in the game interface, which is the position in Figure 2 below
Two: screen pixels
1.Constant Pixel Size
constant pixel size
Keep UI elements the same pixel size regardless of screen size
Scale Factor zoom factor: scale all UI elements in the canvas by this factor
Reference Pixels Per Unit reference pixels per unit: the number of pixels corresponding to a unit in Unity
But there is a problem with this model:
When we adapt on different devices, the fixed pixels will cause adaptation problems
2.Scale With Screen Size
Scale with screen size
So in general we use this pattern
The larger the screen, the larger the UI elements, and the UI scales with the screen size
Reference Resolution Reference Resolution: The resolution of the layout design. If the screen resolution is larger, the UI will be scaled up, and if the screen resolution is smaller, the UI will be scaled down.
Screen Match Mode Screen Match Mode Match Width or Height: Use width, height as a reference, or a value in between to scale the canvas area.
Expand: Expands the canvas area horizontally or vertically, so the size of the canvas is never smaller than the reference value.
Shrink: Crops the canvas area horizontally or vertically, so the size of the canvas is never larger than the reference value.
Match : Determines whether scaling uses width or height as a reference, or a mix of both.
Reference Pixels Per Unit: reference pixels per Unity unit
3.Constant Physical Size constant physical size
unused pattern
That is, keep UI elements at the same physical size (actual physical size on the screen) regardless of screen size and resolution.
Three: Canvas Group
Generally used as a subclass object under the unified control component
only four attributes
Alpha: Transparency
Interactable: Whether it can be interacted with, when not, reject input
Blocks Raycasts: Blocking Rays: Whether it can be collided by the rays emitted by Graphic Raycaster (the selected state is to respond to collisions). Note that this does not apply to Physics.Raycast, that is, physical rays cannot interact with UI elements. , the mouse click is not responding
Ignore Parent Group: Ignore the component of the parent class
That is, we add blocking rays to the parent object
Subclass panel:
Buttons can still be clicked
Four: Render Order rendering order
In UGUI, the rendering order is rendered according to the order in Hierarchy
That is, the back covers the front
Subclass overshadows parent
Here you can refer to the blood bar creation in the previous content and use a mask to cover the blood bar to achieve the effect of reducing the blood bar
Or we can use the sorting layer to control the rendering order
For example, our button at the back will cover the button at the front, and the button at the back will cover the font at the front