[Thai pants spicy の Unity Treasure Box] Explanation of the four-piece set of Canvas components

1 Introduction

In the last issue, I shared a set of simple and easy-to-use UI frameworks. I didn't expect everyone's enthusiasm for learning to be so high, and the degree of discussion is currently the highest among all content.

It can be seen from this that the world has suffered UI(Qin) for a long time! ! !

1 Introduction

In the last issue, I shared a set of simple and easy-to-use UI frameworks. I didn't expect everyone's enthusiasm for learning to be so high, and the degree of discussion is currently the highest among all content.

It can be seen from this that the world has suffered UI(Qin) for a long time! ! !

Next, we continue to explore the topic of UI in depth.

What I share today is: Canvas四件套, what is a four-piece suit?

They are the following four components:

• Canvas component
• Canvas Scaler component
• Graphics Raycaster component
• Canvas Group component

Every time we create a UI interface, the first three components will be added for us by default, and the last component is also very commonly used in many cases. Today, we will explain these four components in a unified way~

2. Introduction to the four major components of Canvas

Here is a complaint about Unity’s official documentation. It’s really too dry. Let’s give a few examples to explain it. I’m afraid we will learn it, right?

In the following explanation, I will try my best to use my own understanding to “人话”explain these components.

2.1. Canvas

When we create a UI interface in Unity, the Canvas component is one of the most basic elements. It acts as a container for UI elements and provides many parameters to control the display behavior of the UI.

The following are the three modes of Canvas ( Render Mode):

2.1.1. Screen Space - Overlay

UI elements will be drawn on top of the screen, independent of the camera.

1. Pixel Perfect

   The Pixel Perfect parameter is used to ensure pixel alignment of UI elements on different screen resolutions.
   When Pixel Perfect is enabled, the position and size of UI elements are aligned to integer pixels on the screen in terms of pixels.
   The simple understanding is that after it is turned on, some pixel-style games will have better effects.

2. Sort Order

   It is used to control the occlusion order of the UI. The larger the SortOrder, the higher the top layer of the screen will appear.

3. Target Display

   For multi-screen display, generally not used

4. Additional Shader Channels

   Gets or sets the mask of additional shader channels to be used when creating the Canvas grid, generally not used

The picture below shows the effect of this mode very well, the UI is always in front of the cube object:

2.1.2. Screen Space - Camera

UI elements will be drawn under the specified camera, usually used to embed 2D UI elements in 3D scenes.

1. Pixel Perfect

   ditto

2. Render Camera

   To select the camera for rendering, you need to create a UICamera for rendering this UI mode

3. Order in Layer

   Can control the occlusion order of UI under the same level

4. Additional Shader Channels

   ditto

---

Summarize

In this mode, at least two cameras are required in the game, one is the 3D camera (main camera), and the other is the UI camera. We need to render the 3D camera first, and then render the UI camera, so that the UI will be overlaid in front of the 3D scene. We can set the Depth value in UICamera.

The picture below is my UICamera setting, the Depth setting on the 3D camera is -1, and the setting on the UI camera is 0 (or greater than -1). In addition, UICamera needs to set an orthographic camera. At this time, you only need to select Orthographic in Projection. The minimum value of Clipping Planes is recommended to be set to 0, otherwise sometimes some UI will be removed.

The picture below shows the performance of this mode very well. The UI display is rendered according to the performance seen by the camera. If the depth of the UICamera is greater than the depth of the object, it may be blocked by the object:

2.1.3. World Space

1. Event Camera

   Defines which camera the Canvas' event system should use. When the user interacts with the Canvas, this camera will be used to determine which UI elements the user taps.

2. Sorting Layer

   Divide Ui into multiple sorting levels, the higher the level is displayed at the top

3. Order in Layer

   In the same sorting level, further use numbers to distinguish the occlusion order, and combine the Sorting Layer to achieve two-level sorting

The picture below shows the performance of this mode very well. The UI and the object are rendered with the same camera, and the depth is judged according to the size of the z-axis. The simple understanding is to treat the UI as an object.

2.2. Canvas Scaler

Used to control the scaling and layout of UI elements in Canvas. It can ensure that the size and position of UI elements on the screen are always consistent under different resolutions and screen sizes

Canvas Scaler also has three modes:

1. Constant Pixel Size：

2. Scale With Screen Size：

3. Constant Physical Size：

But here I am not going to explain them one by one, only the most commonly used setting method: 自适应屏幕, which is the second modeScale With Screen Size

• Reference Resolution：

  Taking the mobile platform as an example, most of the mainstream cameras now have a resolution ratio of 16:9. The resolution cannot be set too high, and compatibility with low-end cameras must be considered. Here you can set the resolution to 1136 x 640. (I set 800 x 600 here for the Plants vs. Zombies project)

• Screen Match Mode：

  The screen relative mode is generally set to Expand, which means that the UI under the Canvas is always kept on the screen. When the screen width is narrowed, it will scale the height as a whole to keep adaptive.

  始终保持宽度You can also select or in the drop-down box 始终保持高度, so that when the resolution changes, the part beyond the screen will be cropped.

2.3. Graphic Raycaster

Used to detect if a UI element is clicked or touched. When using the mouse or touching the screen, Graphic Raycaster fires a ray to the UI elements in the scene to determine which element was clicked or touched

1. Ignore Reversed Graphics

   Controls whether reversed graphics are ignored. If this option is enabled, the Graphic Raycaster will ignore interacting with its back-facing UI elements. For example, if you have a UI element in the scene that has only one front face, enabling this option ensures that clicks or touches are only detected when the front face of the element is facing the camera.

2. Blocking Objects

   Controls which objects are ignored to ensure the ray only interacts with UI elements.
   In the drop-down box of this parameter, you can choose to ignore 2d物体/ 3d物体, so that when there are these objects in front of the UI, the ray can also reach the UI.

3. Blocking Mask

   Similar to the above option, except that this time, Mash is blocked instead of Objects.

2.4. CanvasGroup:

The official explanation is: the elements used to control 整个UI组, 某些方面and 不需要单独处理they.

So my understanding is that this component is used to control some features of all UI elements below Canvas, such as UI transparency, UI interaction, and so on.

He contains four parameters:

• Alpha：

  Control the transparency of the entire canvas group, parameter range[0-1]

• interactable：

  Controls the interaction of the button. When set to False, your button will not be clickable. And all buttons will be translucent (indicating that they cannot be interacted with).

• Blocks Raycasts:

  Control touch penetration. If there are two buttons at the position of the mouse, the top-level UI will intercept this touch, so that the bottom-level UI does not respond to this touch. Whether to penetrate or intercept is controlled by this parameter.

  For example, control "更改用户按钮"whether to be "用户列表界面"intercepted by touch: if checked , the button will not receive user touch events.
  Blocks Raycasts

• Ignore Parent Groups：

  The effect of ignoring 父CanvasGroupis easy to understand. We can add it at different positions of a Panel CanvasGroup. If we want the current position CanvasGroupnot to be affected by the parent node CanvasGroup, we need to check this option.

For example, if I want to realize the fade in and fade out when the interface is opened and closed, then I can combine Canvas Groupand DoTweenuse:

The specific code is as follows

    public virtual void OpenPanel(string name)
    {
    
    
        // ...

        CanvasGroup canvasGroup = GetComponent<CanvasGroup>();
        canvasGroup.alpha = 0.0f;
        DOTween.To(() => canvasGroup.alpha, x => canvasGroup.alpha=x, 1, 2);

        // ...
    }

    public virtual void ClosePanel()
    {
    
    
        isRemove = true;
        CanvasGroup canvasGroup = GetComponent<CanvasGroup>();
        DOTween.To(() => canvasGroup.alpha, x => canvasGroup.alpha = x, 0, 1).onComplete(
            () =>
            {
    
    
                SetActive(false);
                Destroy(gameObject);
                if (UIManager.Instance.panelDict.ContainsKey(name))
                {
    
    
                    UIManager.Instance.panelDict.Remove(name);
                }
            }
        );
    }

More

The above is Xiaoqi’s sharing of Canvas four-piece set~

The video version of the article has been synchronously published on b站the account of the same name ( 打工人小棋), interested students can go and have a look~

I believe that after reading these contents, it will definitely help your game development skills.

Students who have any experience with Canvas, or any mistakes in the article, are welcome to discuss in the comment area.

See you next time~~~