How to set the camera sizing as the canvas in Unity 2020.2.1f1

Hi,

May I ask why is that when I create the canvas and wanted to change the sizing.

The Width and Height are grey out. Kindly advise.


Thank you!

 

If your canvas is set to Overlay, you can't change the size or position manually, since it's being driven by the camera, in a sense. Instead, it's set using your Canvas Scaler's reference resolution property (I think... I'm not on my dev machine now to check what it's called).

If you're trying to adjust the size of something with your UI, show us some more screenshots of what you're working with, including the hierarchy and scene view and we'll get you sorted.

 

Thanks Schneider21, I think I should be asking how to set the Camera to the same size as the canvas.

 

That's the thing, though. You don't need to. A camera will, by default, take up the full size of the viewport (as seen under Camera → Output → Viewport Rect (W:1, H:1). It doesn't matter if your screen is 16:9, 9:16, or anything else. Your camera is showing what it can show within that provided viewport.

The only way you get to think of canvases as static things where you're setting things precise pixels apart from each other is if you're targeting exactly one resolution for your game (say, 1920x1080). If that's the case, you can have all of your elements fixed width/height, and absolute position them however you like, using any setting of anchors and origins that makes the output look correct to you. But nobody in their right mind would target just one resolution, and nobody that cares about their health and mental wellbeing makes apps for mobile, so we have to think a lot more abstractly.

For all intents and purposes, you have no idea what resolution or aspect ratio your game is going to be run at on mobile. So you're using your Canvas Scaler component on your Canvas to indicate what Reference Resolution you want to work with, just for doing the math within your UI. Like I said, I think 1920x1080 is a good setting to work with there (1080x1920 if you're targeting portrait mode, which it seems like you are, so I'll assume that moving forward), since the math works out nicely for common divisions. You'll set up most of your elements like buttons and labels with fixed width (you set your Canvas Scaler's Match value to 1 with the slider fully to Width, right?), anchor them to a corner, edge, or center of the screen, adjust their origin as appropriate, and then test, test, test to make sure you've accounted for screens large and small.

I don't love page of the manual, as I feel like it's not specific enough, but it may do a better job explaining than I am.

And honestly, the best way to see how it works is to just mess around, making a bunch of test elements and doing a build for an actual mobile device to see how it works in practice. Tinker with it enough and it'll start to make sense.

Edit: My apologies for referencing something I stated previously. I was getting this thread confused with another similar one.

 

Hi,

I think I understand what you mean.

But I realize that this works for me Correct me if i'm wrong. I realize that you can resolve the issue of ""not know what resolution of the mobile will work on your game issue by going to Canvas > Render Mode > Screen Space- Camera. Then the Canvas will be the same length and breath as the Camera.

 

It does, but there are side-effects to that as well. Since the UI will now be rendered in relation to the camera, elements from your scene can occlude the UI if they get between the camera and where the canvas is placed.

What problem does setting Screen Space solve for you? Why must you know the specific resolution of the screen in order to layout your UI? Or, phrased another way, what don't you like about how I recommended designing your layout?

 

Okay I'm not too sure yet if this is related to the size of my canvas or it just that my screen layout is not proportionate to the Unity Camera. When I export my build base on 1920x1080, the game looks chop off. When It's suppose to be a portrait 1920x1080, you would expect the build to comes out portrait, but half of it was chopped off.

My assumption(Coz I haven't tested enough to deduce why it is so) is that either I didn't choose to work on a 2d Mobile template when I first started, or that unless I fix the camera onto the 1920x1080 canvas. I'm not getting the output I wanted.

Anyway, thanks to your help, I have gotten more information regarding the camera, the scene on the canvas than before. The rest is, like what you said, to test it again and again.

Thanks alot Schneider21 for your help and patience!

 

So you're only supporting portrait mode, then? If that's the case, you definitely want to set your Canvas Scaler reference size to be a portrait ratio (1080x1920 is fine), and set the Scale With to Width = 1. This way, as phones with slightly different aspect ratios open the game, the UI will increase or decrease in height appropriately, but you can always count on something defined as "1080px wide" in your UI to be 100% of the screen width. You could, of course, scale with height instead so the width is variable, but I think it's more useful in portrait mode to have it work the first way.

After that it's just anchoring to a corner, side, or center of the viewport and making sure your layout elements stay within their bounds and are anchored/pivoted appropriately, and everything should work smoothly. I know it's not exactly intuitive, but it's a sensible way of dealing with near infinite resolutions on the client side.

Please don't hesitate to ask any more questions! Good luck!