Canvas too big for the camera in Unity

Question

I have created a 2D game with an orthogonal camera and using 16:9 display size.

I dragged my background image onto the hierarchy (it's about 2048x1152) and then set the camera size to be 22.5, which made it fit the background perfectly and displays just right.

However, when I add a Canvas for a UI it is absolutely giant, about 100 times bigger. It only becomes 'normal' size with respect everything else added when I set the camera to its default size of 5. So when I add a small graphic, it too becomes giant.

I'm simply following a book I read and I'm not doing anything to deviate.

Am I doing something wrong? Below is what I mean. The background image is the little image in the bottom right and the outlined rectangle is the canvas with a small graphic added.

Thanks.

Solution 1

You should use the Unity canvas for this along with the canvas scaler component. If I'm not mistaken it will scale all elements relative to the screen they are viewed on.

The canvas scaler allows you to match the scaling based on a preferred viewport size which is a life saver.

However this may not fit you needs perfectly as it would mean that the background element would become fixed. So if you wanted to pan the element you would need to move it's x and y elements within the canvas.

Hope that helps?

Solution 2

To force your Hierarchy Canvas UI to the same resolution as the Camera View in your Unity Editor Scene window resolution (i.e. not ridiculously massive), or in other words get the Canvas to fit into the Camera size in the Scene, do the following:

1. Set the Canvas component's Render Mode to Screen Space - Camera.
2. Make sure you select or drag the relevant Camera from the Hierarchy to the Render Camera field in the Inspector.

Comments

[Dylan Auty]

One last note. You are gonna want to place most/all graphics as sub objects of the canvas element for this to take affect. Hope it helps

[Neil Walker]

All I want to do is add an overlay to my screen. Why is it so difficult... I'll rephrase that, in order to fit my screen I changed my camera to 22.5 (I have no idea what this 'size' means, there is no documentation for it) and that is what is causing the UI to be wrong. So why can't the UI Canvas just work like other items? I tried the scaler (it is already there) and nothing happened. All I want is to add UI items to my level the same as I would add a sprite.

[Neil Walker]

Ah. I get it now. The Canvas is giant compared to the camera, but it resizes to fit perfectly when the game is drawn. Well, that wasn't obvious...

[Dylan Auty]

Sorry for only getting back to you now. Yes that's correct. The canvas scaler will only run in the game view and not the scene view

[Dylan Auty]

Glad that helped. It wasn't obvious to me in the start either. Took a while to get use to 😊