Align the camera (2D) with the canvas

Verification environment

Windows

• Windows 11

Unity Editor

• 2020.3.25f1

Initial state of the camera and canvas

When you place an "input field" or "button" as an object, a "Canvas" is automatically created. However, since the display area of the camera (2D) and the display area of the canvas are different in the editor, it is difficult to grasp the positional relationship between the objects placed in the display area of the camera and the UI of the canvas during editing.

If you run the game, the two views will overlap for the time being.

In the case of 3D, the position of the camera is placed in 3D space, so there is no problem with a completely different arrangement from the UI. In 2D, the viewpoint of the camera and the viewpoint of the UI are often the same, so here we set the two layouts to be in the same position.

Align the canvas with the camera

Place some kind of UI, such as a button, in the scene. The Canvas will be added automatically.

Select the added Canvas and change the Render Mode under from the Inspector Canvas to Screen Space - Camera.

A new item called "Render Camera" has been added and a warning is displayed. Set up your camera here.

warning

A Screen Space Canvas with no specified camera acts like an Overlay Canvas.
(カメラが指定されていないスクリーンスペースキャンバスは、オーバーレイキャンバスのように機能します。)

You can select it from the button to the right of "None (Camera)". It's quicker to drop the ones in the hierarchy onto the Main Camera render camera. If you select the Main Camera, you can't drop it on the Canvas. With the Canvas still selected, drop the Main Camera onto the Render Camera.

Then, in the Scene view, there will be no area of the Canvas.

If you zoom in, you can see that the object you placed on the canvas is visible in the range of the camera. You can now set the camera's visible range and the UI placed on the canvas in the same area.