This question must have been asked here before, but I can't find a proper explaining answer. So I'm a new unity3d programmer who knows about C#. Now, I selected my canvas size to 854x480 and tested the scene on moto g, samsung tabs etc. They all look same and I wonder why. Because if I design for 854x480, shouldn't I get blue bars on high-res phones? Another question is, how do I design it so that it looks all the same on different devices. In my case, 854x480 does look zoomed a little on a kindle fire. Please provide a conceptual answer.
2 Answers
The concept behind this is the aspect ratio and scale factor.
Aspect ratio = width / height
If you run your game in any device with the same aspect ratio then your game will look exactly same because the scale factor for height and width is same.
In your case,Aspect ratio = 480/854 = 0.562
If you run your game on Moto G(1st Gen) which has a resolution of 1280 x 720(In portrait),
Aspect ratio = 720/1280 = 0.562 which is same as your canvas's aspect ratio so the scale factor for width and height will be same.
Now if you run your game on kindle fire, which has a resolution of 1280 x 800,
Aspect ratio = 800/1280 = 0.625 which is not same as your canvas's aspect ratio. So the scale factor(which unity will automatically calculate) will be different for width and height(In your case, scale factor of height will be more) and hence your assets will look a little zoomed in height.
Hope it explains the concept.
1 Comment
The thing is that the camera rendering frame changes based on resolution, so instead of "blue bars" you get extra rendered image that is displayed instead of it, as for the UI goes, since it can't render extra UI (there is no extra UI, everything has to be shown) it changes position and scale of elements by using anchors. You can change these setting when selecting Canvas and changing values in the inspector.