Sprite scaling in different aspect ratios

This has been asked a lot and I’ve truly did my search, experimented with orthographic camera, etc. The math in “correct” answers in other posts is correct, but it just doesn’t work for me for some reason. I have a sprite 119x119 pixels. My computer is 1366x768 and the screen aspect ratio is 16:9. i use this line for scaling:

this. sprite.transform.localScale = new Vector3(Screen.width/1366f, Screen.height/768f,  1);

It scales the sprite correctly in all resolutions in on my computer. Yet I tried running it on aspect ratios like 5:3, etc. and it just looks stretched on either axis.

Now, maybe there’s something I’m doing wrong? All I want is to keep the sprites with the same aspect ratio, not squared in any way on every resolution. C#.

Thank you for any help.

[34605-screenshot+2014-11-01+16.13.37.png|34605]

[34606-screenshot+2014-11-01+16.13.25.png|34606]

Ok, the comment was not clear, I go for a longer answer (not enough space for a comment)

The documentation on the 4.6 is interesting because it explains how Unity 4.6+ handles different resolutions. There are examples of different cases and one must be what you want to do. It’s interesting even if you don’t use 4.6+.

If you want your UI to be the same on every resolutions and screen ratio without stretching, there are 2 different things to do: positioning and scaling/resolution.

Positioning:
Imagine 2 screen size (x*y) 100x100 and 200x100. One is ratio 1:1, the other 2:1, note that they have the same pixel ratio of 1:1 = square pixels like all devices nowadays. If you have a 10x10 sprite to display on the upper left corner, you’ll want to display it at 0,0 in both cases with the original 10x10 size. If it’s in the upper right corner, it have to be displayed at 90,0 in the first screen and 190,0 in the second screen.

To compute this, the best is to use percentage (the Anchors in Unity 4.6). Say, the sprite is at the upper right corner when x = 90%. Then, 10090% = 90, 20090% = 180 and it will work for any resolution. That’s a way to solve some cases. You will then need to define that the sprite’s origin is at n % from the screen origin, or, that the sprite’s right border is at 5% of the screen’s right border, or, at 5% of the right border of a container (like a window or group of UI elements). That way, you can handle different screen size and ratio. It’s not easy to cover all cases, that’s why Unity 4.6 took long time to do I guess :slight_smile: (check the new RectTransform component)

Scaling:
Now, in the previous example, the 10x10 sprite would be ok in both 100x100 and 200x100 screens, it doesn’t need to be scaled. If we introduce a new 500x400 resolution, then the 10x10 sprite may become too small. You can manage this with a reference resolution. Say, your 10x10 sprite is perfect for 100x100 resolution, then, you can scale it according to the X resolution: 500 / 100 = 5. Then, the 10x10 sprite becomes 50x50. You can also choose the Y axis to scale it: 400/100 = 4: the sprite will be 40x40. You can also choose a mix of both X & Y ratio, most of the time the X ratio gives the best results.

With both positioning and scaling, you can achieve a UI that matches all screen ratio and resolutions, but that’s not a simple task. If you can use the 4.6+ you will save time (and even if it’s still in beta state, it’s quite stable and should be released soon)

The other problems you’ll have with different resolutions is that a sprite scaled 4x is not as nice as a not scaled one, and that a sprite scaled 0.25x becomes even more unreadable. You may then need different source images. Font is also a problem as the font size must be chosen according to resolution too (same concept as the sprite’s scaling)

Well, that’s not a simple problem. Unity 4.6 helps a lot, or check the asset store for solutions for pre 4.6 Unity versions.