Tukukkk

I am new to Unity and I have this "issue".

I am trying to make a simple 2D mobile game (Android for now) that will be in portrait mode always but I don't manage to have the same result in all different screen sizes.

The problem is when I am trying to have the screen scaled equally in all different screen sizes, but what I get is the background cutoff either on top-bottom or left-right (I know that has to do with the Match Width Or Height) when I am trying to change screen size.

So what I am using in Canvas Scaler: Scale With Screen Size with Reference Resolution X:1080 Y:1920 and a background image of size 1080x1920.

When I try to resize to larger screen resolution (for example 1080 x 2160):

• using Shrink the background is cutoff




• using Expand I get "black bars".




• using Match Width Or Height with Match: 1, I get "black bars" or Match: 0, the background is cutoff on the sides.

OR also when resizing to smaller ratio (3:4) I get either black bars or background cutoff on the sides.

All of the 16:9 (576x1024, 720x1280, 1080x1920, 1440x2560, etc) seems to be correct.

So my question is, in which way I can support all different mobile screen sizes including all different aspect ratios without getting my background cutoff or getting the black bars on the sides?

Thanks in advance.

The black bars/cutting off of your image is caused by the fact that the image is trying to preserve its aspect ratio due to using aspect ratio fitter.

It works fine on 576x1024, 720x1280, 1440x2560 etc because the aspect ratio is the same as the original image (or canvas, which is 1080x1920) being a 9:16 aspect ratio.

If you do not want to get either black bars or a part of the image being cut off you need to stretch/crop the image to the new aspect ratio (for example aspect ratio of 1:2 if you want 1080x2160)

To be able to do this you need to remove the aspect ratio fitter, and make sure preserve aspect is ticked off on your image component. And then make the image always fill the canvas/screen size. E.g make a GameObject background as child of your canvas, add image component to background and set the width and height of the transform to be the same as Screen.currentResolution (from Screen class)

This will however stretch your image out into the direction where it doesn't fit the aspect ratio (if your original image is 9:16 (1080x1920) and you want it to display 2:1 (2160x1920) it will stretch to twice it size on the x axis, resulting in a warped, and mostly ugly image). To counter this you will probably want to make seperate images for non standard aspect ratios, or make an image that doesn't look bad when stretched.

The problem is that your canvas scaler does scale to the screen size, but your background does not. The size of the background image is fixed to 1080x1920.

I think the easiest way to do this scale (stretch) is to set the image to fill the parent (the canvas object).

To achieve this, you can set the anchor of the background image to these values. Like this Post.

Anchors



    Min  X 0 Y 0



    Max  X 1 Y 1

Or just use the anchor preset to set these values.

You can get more info about the anchors from here.

But like @remy_rm said, this approach will stretch your background image.