Talking about canvas and three rendering modes in unity

Talking about Unity Medium Canvas And three rendering modes

---

Orange Preface

Doing in recently Unity Performance optimization , involves Canvas This aspect , Think of taking it out alone , Let's talk about Canvas This thing , What is it , In order to solve the doubts in the novice Xiaobai's heart .
Of course , If you are 0 Basics , Let's see how to use it first , This tutorial is suitable for entry level .

---

Tips ： The following is the main body of this article , The following cases can be used for reference

One 、Canvas What is it? ？

Canvas： The interpretation after translation is ： canvas
What I understand is ： Use UGUI To carry out UI Development , Cannot do without Canvas Components , be-all UI Elements , Or include Canvas Components , Or Canvas Component location GameObject Child nodes of .

Two 、 How to create Canvas

you are here Hierarchy Right click the blank space of the view ->UI->Canvas You can create a Canvas, Then add others UI Element as its child node .

3、 ... and 、Canvas Component's RenderMode Parameters

1.Screen Space - Overlay Pattern

Canvas Cover the screen , And always cover the upper layer of other elements , in other words UI It will obscure other elements in the scene .

When RenderMode by Screen Space - Overlay when ,Canvas Other parameters of include ：

• Pixel Perfect：UI Elements are aligned exactly to pixels , The edges are clearer , But in UI There will be more calculation when adjusting and adapting （ Personal understanding ）
• Sort Order：Canvas The depth of the . Multiple There are multiple Canvas when ,Sort Order More valuable Canvas Will cover Sort
  Order Low value Canvas
• notes ： Multiple Canvas When the depth values are equal ,Hierarchy Behind in the view Canvas Show below , This is related to UI
  Elements （ Such as Image The rules are the opposite ）

2.Screen Space - Camera Pattern

and Overlay Similar pattern ,Canvas Covering the whole screen space, the canvas also fills the whole screen space . The difference is ,Canvas Placed in front of the designated camera .

In this mode UI It may not be able to render in 3d Above the elements

And

1. It must be between the near and far planes of the camera to be rendered
2. Even if the camera is Perspective Pattern ,Canvas The distance from the camera will still not affect its display size
3. Other 3 Elements can be combined with Canvas Create occlusion relationship , Elements closer to the camera will cover Canvas above UI
4. Zoom of camera / translation / rotate , as well as fov The change of , Does not affect the Canvas Show results ,Canvas
   Always place it at a certain distance from the camera viewport , And perpendicular to the horizontal line of sight of the camera

Screen Space - Camera The parameters of include ：

• Pixel Perfect ： Same as Overlay Pattern meaning
• Render Camera ： The specified is used to render Canvas The video camera
• Plane Distance：Canvas The distance between the plane and the camera
• Sorting Layer： instructions Canvas The depth of the , Can be added manually . When there are multiple modes, it is Screen Space Of Canvas
  when ,Sorting Layer Determines the priority of display .
• Order in Layer： Multiple Canvas Have the same Sorting Layer when , according to Order in Layer
  To determine the display priority .

3.World Space Pattern

In this mode ,Canvas And other in the scene 3D There is no difference between elements

here

• Canvas You can adjust RectTransform The numerical
• Camera translation, rotation, zoom and fov Will affect Canvas Display of
• need EventCamera To specify the camera that accepts the event

Four 、 summary

1. Different models of Canvas Between ,Screen Space - Overlay Of Canvas Always show in the front ,Screen Space
   -Camera and World The display relationship of depends on World Canvas Distance from the camera and Screen Space - Camera Canvas Of Plane Distance

2. same Screen Space - Overlay Canvas ： The display priority is determined by Sort Order determine

3. same Screen Space - Camera： The display priority is determined by Sorting Layer and Order in Layer determine

5、 ... and 、 Conclusion

Inferior to silicon step , A thousand miles .
Don't product the little stream , Beyond into the sea .
Make a little progress every day Thank you for watching .

Feel helpful to yourself , Welcome to your attention 、 Collection 、 forward ！ See you next time