UI elements are stretching on wide screens

[Yishai_Q]

Hi,
I have created an app and on the canvas element I defined the Reference Resolution of x 800 y 600.
I don’t want my menus to stretch, so I give them a preset of middle center or top left, never a stretch. But then, when I run my app on a screen that has a different aspect ratio then 4/3 I do get a stretch. What do I do?
Thanks

[Kurt-Dekker]

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

Inconsistent game object placement/size between two people

It can be very fiddly but it is super-powerful once you reach comfort with the UI. Building upon Praetor’s great post above, let me suggest this approach: make a quick first draft of your UI. in the Unity game window change the shape / dimensions of your Game window (you can even make your own resolutions) see what happens to your UI in this new shape window iterate and fix your anchors and scalings and whatnot Make sure you do not overlook the Canvas Scaler settings. Personally I (almost) …

SOLVED: Game UI Button Size problem

That seems excessive… What is the text of the actual complaint from them? Make something like this with a fixed aspect ratio (in this case 2:1, maybe you need 3:1 or whatever suits your buttons), and ALL your buttons anchored inside it to never move within that box: [7337383--891847--fixed_aspect_ratio_box.png] then anchor that fixed against the bottom center (red dot below). On the ipad it looks like: [7337383--891850--ipad.png] on the iPhone it looks like: [7337383--891853--iphonex.pn…

[Yishai_Q]

@Kurt-Dekker

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

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

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

Thanks for your reply.
I looked on the second link you referred to. there you say " I usually set the CanvasScaler to Scale with ScreenSize, but then I do not use Expand, since with these whacko-long phones like iPhoneX, etc. things get out of control fast."
this is exactly my problem, but sorry for the ignorance, I was looking for the Expand property, on the canvas object and couldn’t find it. it is exactly what I need, the UI should not expand with the screen width. only the background color may cover the whole screen, so that the aspect ration will be preserved, but I can’t find this property. is it a property you can only set with code? if so then how?
Thanks

[Kurt-Dekker]

@Yishai_Q

only the background color may cover the whole screen, so that the aspect ration will be preserved, but I can’t find this property

I usually make a FULL screen anchored at corner colored backdrop.

Then the meat and potatoes of your game goes into a 9:16 aspect ratio inner box, fixed aspect ratio and contained within.

This keeps you off the ends of the tall skinny phones while still filling them with color

[Yishai_Q]

@Kurt-Dekker

I usually make a FULL screen anchored at corner colored backdrop.

Then the meat and potatoes of your game goes into a 9:16 aspect ratio inner box, fixed aspect ratio and contained within.

This keeps you off the ends of the tall skinny phones while still filling them with color

I have a Canvas object, within I have a panel object which is called SafeAreaPanel, and it has a code that keeps it’s size according to the screen size of the device, without notches, within this panel I put all other game objects. This panel has a preset of stretch on all sides, how do I keep its aspect ration fixed?

[Yishai_Q]

I ended up doing it with code, by keeping the aspect ratio of the safeAreaPanel fixed like this:

    private void RefreshPanel(Rect safeArea) {

_rectTransform.SetAnchor(AnchorPresets.MiddleCenter);
        _rectTransform.SetPivot(PivotPresets.MiddleCenter);

        safeArea.width = Mathf.RoundToInt(safeArea.height * (4f / 3f));
    }

though I do feel having to keep the game in a fixed aspect ratio is missing the point of having the anchor presets system and pivot presets system. On the unity editor, even if I change the ratio of the screen, everything is fine, nothing gets stretched, as it should be, Why do I get these problems on devices like iPhoneX of stretched UI objects?

[Yishai_Q]

And even this did not change the end result, still my UI elements are being stretched.

[Kurt-Dekker]

@Yishai_Q

how do I keep its aspect ration fixed?

You really should endeavor to familiarize yourself with the API(s) you are using.

One extremely powerful approach is to use Google.

[Yishai_Q]

@Kurt-Dekker

You really should endeavor to familiarize yourself with the API(s) you are using.

One extremely powerful approach is to use Google.

This Aspect Ratio Fitter object is keeping the panels aspect ratio, while fitting it into the parent object in varies ways. Not what I need anyway, because as I said, keeping the aspect ratio of the game, makes no sense, we want to use the whole screen, that is why we have anchors to keep buttons at a certain distance from the edge of the screen no matter its size, so we can make use of the whole area of the screen no matter its size and aspect ratio.

I had a feeling it has to do with the player settings, and after playing with the properties, I found that “Reset resolution on window resize” has to be checked and this solved my problem, because really on the editor everything worked fine no matter the aspect ratio of the screen I chose, so I knew it had to be something in the player settings.
Thanks anyway.

[Yishai_Q]

The change I did in the player settings, fixed the problem on Android, but not on iPhone. if anyone has any idea what can possibly be the problem, any help would be appreciated.

[Yishai_Q]

problem solved, it wasn’t the Reset Resolution on window resize, this was just the simptom. I was using Screen.SetResolution to change the resolution, and it had conflicted with the resolution in the canvas and was causing this stretching, fixed it and everything is OK.