Unty Canvas not representative of actual layout

Question

I have a canvas on the screen which for some reason is very small compared to my scene. I have a major issue placing UI components in the correct place on the canvas so that they appear in the correct place on the actual game screen.

If you take a look at the 2 attached screen grabs it may make more sense.

the issue I have is that when I run this on my 1080p tv the text does not get positioned correctly at all. if I place it as in the first image then it ends up 8 squares from the top and 15 squares from the right, if I place it as in the second image then it appears 12 squares from the top and 21 from the right.....

I just want the text to be near the top corner.

How do I get the edit screen and actual game to match positioning?

Answer 1

On your canvas, set the Canvas Scaler component's Ui Scale Mode to Scale with Screen Size. Then you can define a Reference Resolution of 1080p, i.e. 1920 x 1080.

To see the canvas fit into the camera's size in the scene, change the Canvas component's Render Mode to Screen Space - Camera, and drag the camera from the hierarchy to it.

Answer 2

Thats exactly why you have to debug your game with your actual anticipated aspect ratio. This must be set explicitly and it can change alot about your game as the canvas can change itself drastically to accomidate.

Answer 3

Ok, along with some pointers from Catwood above I worked out the issue. I had not set the canvas to stretch with screen!

So it was placing the text correctly it was just that the canvas was staying a fixed size rather than filling the screen.