Question How to adjust settings for different aspect ratios?

So, I've built a game finally (yay me). But, when I installed it on my phone, the elements didn't fit on my phone. I found out that my phone's aspect ratio is 18:41, which I've never even heard of a ratio like this. I built my game in a 9:16 aspect ratio. It looks fine in Unity. Am I going to have to build a different version for every possible aspect ratio? All my anchors should be correct so that they resize and move with the screen.

 

If it's just UI you use the Canvas Scaler component to do all this: https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/script-CanvasScaler.html

 

I've done that already. So, it must be something else. Could I be setting my anchors wrong? I have a camera scaler, which helps to get the actual game objects on the screen based on resolution size and works fine. So far, I've only noticed UI not aligning right.

 

You can test these resolutions in the editor. Saves you a lot of trouble and lets you quickly iterate through the various settings to find the ones that give the desired results.

In the Game view I created a custom 32:9 Aspect for my monitor, you can also add specific resolutions. All through the + button at the bottom of the list:

 

It's more than just scaling. It will almost certainly require correct anchoring and potentially some grouping and layout elements.

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

https://forum.unity.com/threads/inc...size-between-two-people.1130146/#post-7261747

https://forum.unity.com/threads/game-ui-button-size-problem.1142650/#post-7337383

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

 

Since you're making a portrait mode app, it is very likely that you should have your canvas scaler screen match mode set to match width or height with width set to match 100%. This is inverted from the typical setting, to match height 100%, used for landscape oriented games meant to be played on a monitor. The reference resolution does not really change the outcome, but is used by your developers as a frame of reference when setting values in "pixels" as opposed to using anchors. I like to set my reference resolution so that the matched axis is some common resolution value for that axis in the market of devices I expect to support. So, often I go to a resolution like 1920x1080 (landscape), but in your case that would be 1080x1920. However, like I said, we're only interested in the matched axis, in this case the width. So, reference width of 1080. (Again it doesn't really matter, it's somewhat preferential. The scaling calculation performs a multiplication to scale from the reference to the actual resolution, hence why I try to pick some middle ground.) With your canvas scaler configured this way, the width of all UI elements will be exactly the same on all screens, regardless of whether you specify their rects with anchors or pixels, or a mix of both. Anchor values along the width axis are basically meaningless, but also do no harm.

So, with the matched axis (width) completely handled, we only have to worry now about height. So, my approach is to start with the shortest aspect ratio you expect to ever support. Reallistically I believe that is 3:4 (portrait version of 4:3), which would be iPads. There are some screens in the world that have a 5:4 landscape / 4:5 portrait ratio, but they are rare and I believe they are only seen in computer monitors. So, if you make your UI all fit properly on a portrait oriented iPad (3:4), then your UI will also not catostrophically fail on any aspect ratio from here on out. The worst thing that could possibly happen is that your UI elements will space out from each other based on where they are anchored along the height axis. That's good. Now your UI cannot fail. So, back to the reference resolution. That means we should do some basic algebra with our chosen reference resolution on the matched axis, to determine what the reference value should be for the variable axis, for the shortest / narrowest supported ratio. So, in this case, a portrait mode 1080 matched width in 3:4 aspect ratio would mean the reference height should be set to 1440. (Not 1920.)

So, with a UI that we know cannot catostrophically fail, and we only have to worry about how it spreads out on taller screens. That's where you have to start using anchors. Maybe the element is just anchored in one place along the variable height axis, and so the size of the element never changes. Maybe the element's rect is anchored in two places along the height. If anchored at the edges of the element, then the relative height of the element will be the same on all ratios. If the two anchors are not at the edges, the element will stretch to some degree, but also be limited in how much it stretches on taller ratios. This is where you have to start tweaking and testing in editor with those various resolution / ratio settings on the game view to verify how everything will look before release.

In my humble opinion, you should design a completely different canvas if your app can display in both portrait and landscape. However, if you really want to use the same elements, you could simply use screen match mode Expand with a square reference resolution of something like 1080 x 1080. If it works as a square then you can use anchors on both axes to control how it stretches out from there in either orientation.

 

Thank You. I have tried various aspect ratios and it doesn't look right on some. One article I read, said to build for the inside out. So, you start with a small width and tall height. That way, it'll look good there, then you can fill in around the edges or something like that to fit wider resolutions.

 

It is set to scale with screen size and 100% to width. I used 450x800 as reference resolution, which is 9:16 aspect ratio.