Canvas scaling problems. (Images/objects in canvas not scaling correctly)

I'm having some trouble on making my canvas scale with different screen ratios. When I have it set at 16:9, everything works perfectly, but as soon as I set it to 16:10 --or any other setting-- it all falls apart.

(16:9)
9889287--1427268--upload_2024-6-13_12-18-20.png

(16:10)
9889287--1427271--upload_2024-6-13_12-20-18.png

I am trying to make it so that the blue grid in the pictures above move from where they are now to the bottom of the screen, and out of view from the player --save for the button that will reveal it again when desired. The main problem with this mishap is that the grid is still visible due to the extended portion at the bottom of the screen, and because --as mentioned before-- I need to have a button still be visible so that the player can make the grid pop up again, I can't shift it down more to account for the added space.

At first, I checked online and in many different forums to try and solve this problem, but all of them either didn't do anything, or made all of the objects be shifted to the sides of the screen for some reason. Bellow is the settings I have for my canvas.

(Settings for canvas. As you can see, I also tried to use the Aspect Ratio Filter, but wasn't able to get it to work.)
9889287--1427274--upload_2024-6-13_12-22-58.png

I am looking for any help I can get, and am hoping there is just some simple mistake that I didn't see that needs to be fixed.

(If the pictures aren't showing, please tell me. This is my first time using the Unity forums)

Here are the official docs on how to make your UI handle various resolutions and aspect ratios cleanly:

https://docs.unity3d.com/2023.1/Documentation/Manual/HOWTO-UIMultiResolution.html

Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

https://discussions.unity.com/t/845782/4

https://discussions.unity.com/t/848795/5

Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.

I also use this CanvasScalerOrientationDriver utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.

https://gist.github.com/kurtdekker/8802b1b6c708637398f8c9167641efd3

1 Like


9889731--1427385--upload_2024-6-13_12-22-58.png


So you know, the 2D forum is for 2D specific features i.e. Sprites, 2D Physics etc.

UI is not a 2D feature and has its own support sub-forum which I'll move your thread to.

FYI: There's no such thing as Unity 2D. ;)

[quote=“Kurt-Dekker”, post:2, topic: 950190]
Here are the official docs on how to make your UI handle various resolutions and aspect ratios cleanly:

https://docs.unity3d.com/2023.1/Documentation/Manual/HOWTO-UIMultiResolution.html

Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

https://discussions.unity.com/t/845782/4

https://discussions.unity.com/t/848795/5

Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.

I also use this CanvasScalerOrientationDriver utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.

https://gist.github.com/kurtdekker/8802b1b6c708637398f8c9167641efd3
[/quote]

Ok, I will try and look into that. Thank you

I already tried that, it just makes it cut off the sides.

9891261--1427730--upload_2024-6-14_16-34-39.png

Sorry, I will try and keep that in mind next time I open a thread.

Based on the forms that kurt-dekker sent above, I found the solution for anybody who is facing the same problem. I first changes all the transforms into Rect Transform's, and then made the grid anchor to the bottom left side of the screen. Then I edited my code to change the position the grid is trying to get to be on the same x-axis that it's currently on (due to how it is now anchored to the same relative x-axis position, no matter the resolution)

9891285--1427736--upload_2024-6-14_16-55-34.png

9891285--1427736--upload_2024-6-14_16-55-34.png

1 Like