Canvas renders oddly in both Game and Scene

First off, I’m using the latest stable beta version: 4.6.0b17 on Win 7 SP1.

You can see the issue here:

(thumbnail)
It’s a fairly simple scene: a tabletop, a light, a camera, a single Canvas, and a single Button. There are two problems here.

  1. Look at the scene view. See those two white lines? Those mark the lower-left corner of the Canvas, as it’s rendered in the scene view. I have no idea why Unity chooses to place the canvas where it does … but that’s a different issue. The point is that there is a white border around the canvas in the Scene view. That’s not a big deal. But then look at the Game view. Those white lines are also rendered in the game view. If I click the play button, then those white lines are still rendered in the game view. This seems like a graphical glitch to me.

  2. The UI elements (canvas and button) are hard to manipulate in the Scene view. The nice new tutorials (e.g. UI Components - Unity Learn) show the canvas from a face-on-perspective, from which it is fairly easy to handle the UI elements. While I can manipulate the perspective in the scene view to get that face-on orientation, it’s rather hard. Among other things, I clicked the Main Camera, and did GameObject → Align View with Selected. However, that just gave me the perspective that you see here - where I’m just seeing the lower-left corner of the canvas. Given that the render mode for the Canvas is ‘Screen Space - Overlay’, I expected that the position of the Canvas in world space would have been directly in front of the camera, sized so as to fill the frustum of the camera. The point being this: 1) I wish that there was an easy way to get the kind of perspective that is shown in the tutorials 2) I also wish that the default positioning of the canvas in world space was more sensical. I’m not sure if this is a bug, a Unity-user UI issue, or a misunderstanding on my part.

Any ideas on either of these issues?

(Note that I’ve also uploaded a zipped copy of the project folder, in case anyone wants to explore this issue)

1778123–112856–CanvasIssues_Project.zip (336 KB)

Click on the 2D button.

It’s positioned so that 1 unit = 1 pixel, since it’s an overlay and separate from any cameras. If you change it to Screen Space - Camera (and assign a camera), then it fits in that camera’s frustum at the specified plane distance.

–Eric

1 Like

Eric5h5:

  1. I think that’s a partial solution. When I click the 2D button, the Scene view rotates such that I’m looking face-on to the Canvas. However, the other parts of the scene view transform are still off. To get the same view as in the tutorials, I needed to click 2D, zoom out a lot, and then use the hand tool to grab the Scene, and shift it so that the Canvas is centered in the Scene view.

  2. You’re right. I was thinking of ‘Screen Space - Overlay’ as being ‘Screen Space - Camera’, with the constraint that you’re forced to use the Main Camera as the Canvas Render Camera.

Your suggestions made me think that I ought to switch the Canvas Render Mode to ‘Screen Space - Camera’, and set the Main Camera as the Render Camera. I did this, left the Camera selected the Main Camera, and then did GameObject → Align View to Selected. This set the rotation and position of the scene-view camera in the way that I’d wanted - face-on to the Canvas, and with the center of the canvas centered in the scene view, but the scaling was still off. I still had to zoom way out to get the borders of the canvas to match the edges of my viewport.

You can double-click the canvas, so it’s centered in the scene view.

–Eric

Thanks. That works pretty well: click 2D, double-click Canvas, then zoom just a bit.

There’s still the issue of those unexpected lines in the game view, but I now feel good about being able to work on an accessible canvas.

I expect the canvas lines in the game view are because you have gizmos activated.

–Eric

10 Likes

Good call. You’re right. I turned off Gizmos, and the lines disappeared from the game view.

Big thanks to you Eric, that was lots of fast and accurate advice.

2 Likes