When we create a UI element, if there is no Canvas in the scene, Unity will automatically create a Canvas at the same time and place the new UI element below it.
There are three rendering modes under Canvas: Screen space-overlay, Screen space-camera and World Space.
Here’s a closer look at the three rendering modes.
1. Screeb Space-Overlay
Function:
In this mode the canvas will fill the whole screen space, and will the canvas below all UI elements on the top screen, this mode the canvas zoom to fit the screen directly, and render directly without reference or the scene camera (even if don’t have a camera in the scene will render the UI), if the screen size or resolution changes, The canvas will automatically change size from fit.
Application scenario:
Use for simple UI element display.
Notes:
- 3D objects in this mode cannot be illuminated by the Main Camera, so they cannot be seen.
- In this mode, you don’t need a camera to see the 2D components on the canvas.
Parameter description:
Screen Space-Overlay rendering mode canvas takes two parameters: Pixel Perfect and Sort Layer:
- Pixel Perfect :(available in screen space only)
Effect: Determines whether UI elements have anti-aliasing effects, even if the edges of the UI elements are clear and not blurred.
- Sort Layer :(owned by this mode only)
What it does: Sets the depth of the canvas. For example, if there are two Canvas, the larger sort order is, the later it is rendered, the more the UI element is in front of the other Canvas elements.
Screen Space-Camera mode
Function:
- Similar to Screen space-overlay, the canvas is placed at a specific location for the specified camera.
- UI elements are rendered by the camera, and the appearance of the UI depends on the camera setup. If the camera is set to an orthogonal view, the UI elements will be displayed as perspectives, and the amount of perspective distortion is controlled by the camera’s field of view.
- If the screen size, resolution, or camera cone changes, the canvas ADAPTS. All 3D objects in the scene that are closer to the camera than the UI plane will be rendered in front of the UI, while objects behind the UI plane will be obscured.
Application scenario:
This mode can be used to realize the need to display 3D models on the UI, such as the equipment interface on the left and the characters on the right.
Parameter description:
- Render Camera
Set up the render camera (drag the camera you want to render here
- Plane Distance
Sets the distance between canvas and camera
Note:
1. Once this distance is set, the relative distance between the camera and the canvas will never change, and if you drag the camera, the canvas will move as well. 2. By changing the size of this distance, you can control where 3D objects and 2D objects appear before and after the canvas (screen)Copy the code- Sorting Layer
Ugui-specific Settings that can be used to specify the depth of the canvas. For example, the larger the Sorting Layer, the later it is rendered, the UI elements will be in front of the other Canvas elements.
- Order in Layer
Order in Layer is a subdivision of Sort Layer. When the Sort Layer is the same, the larger the Order in Layer, the later the rendering.
Third: World-space
Function:
The canvas behaves like any other object in the scene, like a Plane, and can be manually sized and positioned via RectTransorm, along with its rotation Angle (not the first two modes). Its UI elements are rendered in front of or behind other objects in the scene, depending on their 3D position. Adapt the UI to be called part of the world. This interface is also known as a “narrative interface”.
Application scenario:
This mode can be used to implement the health bar or name that follows the movement of the task.
Parameter description:
- Event Camera
This is used to specify the camera to receive the event, which can be generated by radiating events through the GraphicRaycaster component on the canvas.
- Sorting Layer
Ugui-specific Settings that can be used to specify the depth of the canvas. For example, the larger the Sorting Layer, the later it is rendered, the UI elements will be in front of the other Canvas elements.
- Order in Layer
Order in Layer is a subdivision of Sort Layer. When the Sort Layer is the same, the larger the Order in Layer, the later the rendering.
