Screenresolution on iOS-Devices

[BehindTheStone]

Hey there!

So I looked up this tutorial video: http://www.youtube.com/watch?v=XAeRXckXMMw
which is well made and gave me a better understanding of the work with the resolution on the devices.

So I made a UI with the same Hierarchy and set the UIRoot-Scaling Style to "PixelPerfect"

I followed the tutorial and made a Hierarchy like this:



Here is the SceneView:



So the first resolution is the "iPhone 4G Wide (960x640)"  (all the Assets were made with this Ratio in mind!)
The Game-Scene looks like this:



That's the way it should like on the 4G Device.

But, if I switch to "iPad Wide (1024x768)", it looks like this:



I get this "gaps". I would suggest this is normal according the ScalingStyle is set to PixelPerfect. So I changed that Style to "FixedSizeOnMobile" and got this nice result with the "iPad Wide (1024x768)":



BUT then I switched back to the "iPhone 4G (960x640)" Setting and got this:



Like in "PixelPerfect" with the iPad Setting it's the same gap now in "FixedSizeOnMobile" with the iPhone 4G.

What do I have to do in order to get it right in every Landscape/Wide-Resolution?

[Nicki]

Ok, first thing's first.

Pixel Perfect
Pixel Perfect means that the coordinate system used by localtransforms corrosponds with the pixels on the physical screen. That means that if you're on an iPhone 4 in portrait mode, the screen is 640x960. On an iPad, however, the screen size is 768x1024. Both the sizes and the aspect changes. If your UIRoot is set to pixel perfect, then if your assets fit perfectly on the iPhone, they will be too small to fill corner to corner on the ipad, just because the size is just bigger there.

Fixed size
Fixed size is a way for you to set the height of the screen manually. Let that part sink in.
The aspect of the screen will be calculated from the physical resolution, but it will calculate the width based on the manualHeight that is input in UIRoot.

Examples:
iPhone 4 is 640x960 pixels in portrait. I set my manualHeight to 960. Now the coordinate system under UIRoot will fit so that I can assume that the width is 640 and the height is 960.

What happens on on Ipad!?
Well, if my manualHeight is still set to 960, but the physical height is actually 1024. Then you have to calculate how wide the internal coordinate system (Virtual Pixels) actually is now:
PhysicalWidth / PhysicalHeight * manualHeight = calculatedWidth

768 / 1024 * 960 = 720. If you assume a manual height of 960, then the width of the screen is 720 on the iPad.

Does that make sense?

Solutions for your specific problems become more readily available once you understand this. Either, scale the manual height up so it fits better; have more stuff on the sides that's outside the screen on smaller device; or something entirely different on screen in different sizes. There are many possible solutions.

[BehindTheStone]

Well thank you very much for the explanation! It helped, but now I am a little bit confused, too

I'm worried now about the position of the UI-Elements on different devices. In fact, the position of the Buttons. What I mean:

On "FixedSizeOnMobile" I have the GameView on the 4G Wide Settings:



As you can see the Buttons are positioned to the left/right sides off the Screen/ (Panel).

But on the iPhone 5 Settings the Buttons are positioned at the same place of course:



But I want them to be at the left/right sides, too, otherwise the Player on the iPhone 5 has to move his thumbs further in order to tap the Buttons.

How can I manage that?

[ArenMook]

You need different anchor points. Check the very first tutorial in NGUI. Note how buttons in corners stay in corners? That's because they are anchored there.

[Nicki]

From my perspective, your design does not support stretching is such a manner, unless you just want to actually stretch the bars and wires hanging between/behind the buttons.

Alternatively, you need corner anchors like ArenMook suggests.

Perhaps the background thingies can be designed in such a way that they can be anchored to the bottom and the buttons themselves can have multiple positions on that background based on screen size.

[BehindTheStone]

Yeah, I did it with Anchors and that did the job for the Buttons
Thanks for that.

The thing behind the Buttons: I think I'll scale the Width of the Sourcefile, thinking that's the easiest way to deal with that.