How to manage Canvas and game display ?

Unity Engine
,
1

Hello everyone,

I’m working on a 2D game, grid style, with a layout around it, for buttons and infos.
I tried to place the game grid just above the bottom layout element (canvas).

With the Screen space - overlay for the canvas, i got a nice layout which adapts depending on resolution.
But i didn’t manage to translate the Canvas bottom image height, into world camera coordinates. So i can’t place my grid right on top of it.

I tried World space, but then i seem to lose the auto resolution of the Canvas.

I’m a little lost here on what path to explore next.
I need to place Unity GameObject on relation to Canvas images. But they are in different spaces.

Any advice would be much appreciated.

2

Just to note for the future, the UI forum is here.

3

Am I understanding correctly that you are creating your entire game inside the UI?
As in the “game grid” is a grid layout in the canvas and not a tilemap outside the canvas?

Also make sure you look at the Game View when checking how UI looks, the Image you posted is in the scene view (I assume because of the Grid Lines), where screen space canvas wont match what the camera sees anyway, so you can not expect anything to line up with the bottom of the camera view there

4

Thank you. I was wondering where to post. And the sub title in UI doesn’t match the subject, so i though of 2d.

5

Hello, thank you for the answer.
No the game is not inside the UI. But maybe it would be simpler. I have a layout in a canvas, and i need to display the game in the remaining space. It is a grid game (go shaping a grid) but i’m not using any unity layout for this.

Yes i check the Game view to be sure. But the space is the same.
When i used a Screen space - overlay Canvas, i can’t get to position the camera to align my game onto the Canvas bottom image.
And with World space it seems even more complicated.

6

Oh I see, I only asked because it would be weird to have the entire game in the UI, and cause some problems.
Its fine the way you have setup then, I just misunderstood what you wrote

there shouldnt be any problem here, why can you not position the camera so the UI aligns in the way you want?
at what point does it fail? moving the camera itself, or is the camera too zoomed out/ has the wrong aspect ratio?

if the camera is simply too zoomed out, look into the camera inspector and change the “Orthographic Size”, this one determines how much your 2D camera can actually see
keep in mind that the UI will simply overlay whatever the camera sees in screen space, so even if you only want to display your game world up to a specific lower border, your camera still needs to be able to see a bit beyond that border to be able to overwrite it with the screen space UI

7

But there is :slight_smile:
When i get the height of the Canvas bottom image, i don’t get to translate this pixel (i suppose) height, into world height, so i can’t add it to the camera. Since my camera is centered to my game, I only need to move it above a little bit, of the bottom image size.

When i get the bottom image position :
GameObject bottomHud = GameObject.FindWithTag(“BottomHud”);
Debug.Log("BOTTOM POS - bottom position : "+ bottomHud.transform.position);

And translate it into world point, i got strange values:
Debug.Log("BOTTOM POS - bottom pos wts: "+ Camera.main.WorldToScreenPoint(bottomHud.transform.position));

8

but why are you trying to move the UI to a specific world position?

the idea with screen space UI is usually that you say you dont care about the world, the UI is fully decapsulated from the rest of the game world

thus you would rather just “steer” the “position” of the UI elements using your camera view and some position offsets within this view

in other words, you usually do not move around UI elements according to world positions (unless in very specific scenarios where you need to)

lets say for example you want to achieve this:

with the blue screen being what is visible of your game world, and the yellow panel being a ui panel at the bottom of the screen
unless you use rendertargets to write the view to an image, this will not really work the way I draw it with screen space canvas, because the screen space UI needs to overlay the camera view (can only be within the blue rectangle)

so what you do to still only see downwards up to the same point is you let the camera see a little bit further down, but scale the the UI panel so it covers up that additional area the camera can see


and to get the UI to the correct height (height of the yellow box) you can simply change this in the recttransform in the inspector
and to get the camera to see low and wide enough, simply change the orthographic size and maybe set the aspect ratio to some fixed ratio, or scale the UI height with the aspect ratio, and move the camera a little

there shouldnt be a need to translate world to screen coordinates here because you should be able to set these heights and sizes to match your aspect in inspector manually with no calculations, since you can see at what point the bottom layout will fit the bottom of your game

9

Thank you for your big answer. I see what you mean.
I’m not trying to move the UI. It is a Canvas, and it adapts well for any resolution now.

But i want to place my camera to see the game above the bottom ui image, for any resolution too. Actually, i artificially added 1.8f, to place it approximately. I need it with pixel precision.

_camera.transform.position = new Vector3(lastCellPositionX/2, (lastCellPositionY/2 + 1.8f), -1);

That’s why i try to get the size of the bottom image at run time. Since it changes depending on resolutions. And i want to steer the camera on the y axis to place the game juste above the bottom UI. I get the height, but i don’t find a way to translate it in a figure i can use to steer the camera of the right amount.

10

But how do you know the numbers ? I don’t want to do it manually and approximatelly. I want it to be automatic and work for any screen resolution or ratio.