I have a strange problem using Unity: On a Canvas, my images look fine in preview, but are completely out of scale in the actual executable.

Take this example image:

Green and red are test images that are put over the background image. When building the executable, these green and red shapes become completely distorted vertically:

I should say that on my current PC, I use a different resolution (16:10) than the canvas has (16:9), but these stretches are far beyond anything I would expect from differing aspect ratios. Note also that the background image is not distorted, but fills the whole screen nicely (with a small stretch in vertical direction, as expected from the difference between 16:9 and 16:10).

Here is the BackgroundImage inspector:

This is the Image inspector (for the green stripe), with the same setting like the BackgroundImage:

And the Canvas settings:

BackgroundImage and Image are both children of the Canvas.

I can make no sense of this behavior...

I have a strange problem using Unity: On a Canvas, my images look fine in preview, but are completely out of scale in the actual executable.

Take this example image:

Green and red are test images that are put over the background image. When building the executable, these green and red shapes become completely distorted vertically:

I should say that on my current PC, I use a different resolution (16:10) than the canvas has (16:9), but these stretches are far beyond anything I would expect from differing aspect ratios. Note also that the background image is not distorted, but fills the whole screen nicely (with a small stretch in vertical direction, as expected from the difference between 16:9 and 16:10).

Here is the BackgroundImage inspector:

This is the Image inspector (for the green stripe), with the same setting like the BackgroundImage:

And the Canvas settings:

BackgroundImage and Image are both children of the Canvas.

I can make no sense of this behavior...

• unity-game-engine

2 Answers 2

I have just quick tested your settings. Created new canvas with one image filling the screen second image with rect tr. top and bottom on 450 and copying rest of what you have and the result is that gamemode UI perfectly matches the scene view one. Only difference I see that your canvas Rect Transform have scale 0,51 The scale could be problem I remember first time fiddling out with UI and changing canvas size but here if I change it manually to 0,51 I still have correct result. But I also see that you have height to 974,31 and if I change that, then the stripe will become uneven. I just dont understand how it got messed up when you have correctly Screen Space Overlay

Edit:
Check your game view Display mode. It needs to be set to aspect you are targeting. Free aspect can mess up stuff like the canvas in Scale with screen size mode.

I finally found the issue, when I realized that the game was always showing the image in full size, even though I had set the display mode to 1920x1080. The reason was that in File -> Build Profiles -> Player Settings -> Player -> Resolution and Presentation, the checkbox "Default is Native Resolution" was checked (and Fullscreen Mode set to Fullscreen Window):

And since my own screen resolution is 2560x1600, this obviously confused Unity. I unchecked the box and set Default Screen Width and Height to 1920x1080, and it worked.