How to Maintain Aspect Ratio Regardless of Screen Size

Question

I'm developing a 2D game for iOS and I need a square panel in the meddle of the screen. How do I adjust the size of the square according to the screen size? The problem using anchors is that a square on iPhone becomes a rectangle on iPad.

Answer 1

Answer by highpockets · Feb 27, 2021 at 06:00 PM

You will want the canvas to Scale With Screen Size, but depending on your setup, horizontal and vertical anchors at the panel bounds will not work because screen ratio changes between devices and thus the panel will only be square for the aspect ratio you create the game in. If you need it in the middle of the screen, make sure you have the parent panel rectTransform transform set to full scale and then set the RectTransform of the panel you want to create a square with set to the middle/center point with position set to (0,0,0). Then set the size delta x and y to what you want and you’re good to go

Add comment · Share

Answer 2

Answer by Catdrinkingacat · Feb 27, 2021 at 06:19 PM

Look into this one:

https://gamedev.stackexchange.com/questions/79546/how-do-you-handle-aspect-ratio-differences-with-unity-2d

Add comment · Show 4 · Share

timehunter · Feb 27, 2021 at 09:17 PM 0

Share

Added the ViewportHandler to my Main Camera and CameraAnchor to my Panel. Then I set Anchor Type to "Middle Center" and expected to have my square always in the middle with the right size. But when I select another resolution (e.g. when I switch from an iPhone to an IPad, my square (which actually contains a video player) doesn't resize and remains left-aligned. Is there any property to be set in the canvas or wherever else?

highpockets timehunter · Feb 27, 2021 at 09:40 PM 0

Share

I have noticed that the canvas scaler does not always update correctly in the editor when you switch resolutions. To get the scaler to reset, I just disable/enable and it updates with the correct sizing. When built to a device, there have been no issues that I’ve seen

timehunter highpockets · Feb 28, 2021 at 09:04 AM 0

Share

What should I select as the Render Mode in the Canvas? "Screen Space - Camera" or "Screen Space - Overlay"? I'm asking because if I select "Screen Space - Camera", then sizes match but the panel is not visible in the game view. Otherwise, if I select "Screen Space - Overlay", then the panel is visible in the gamer view, sizes match, but when I switch from iPhone (the position is correct here) to IPad, then the panel position is wrong as it appears a bit out of bound toward the upper-left corner.

Show more comments

How to Maintain Aspect Ratio Regardless of Screen Size

2 Replies

Your answer

Follow this Question

Related Questions