Good solution to resize NGUI according to screen resolution

[mayafishing]

Hi everyone,

I was wondering if anyone has a good solution to handle multiple resolutions for different iOS devices.

I am currently developing a universal app with NGUI. One thing made me head spinning is that I cannot seem to find a good solution to handle multiple device resolutions for NGUI's UI elements.

One solution I applied for my previous apps is to calculate and resize each elements. But that solution only worked with simple apps with few UI elements.

The project I am working on right now is much more complex and involved many UI elements. So I was wondering if anyone has a overall solution to handle the multiple resolution problem.

Thanks

[ArenMook]

Leaving UIRoot at "fixed size" will effectively eliminate the need to resize anything. I always leave mine at "fixed size on mobiles".

I suggest you watch the video on handling multiple resolutions. It's on the docs page.

[mayafishing]

Thanks Aren.

I have used FixedSizeOnMobiles and it worked.

However, I met a strange problem. My original design is for iPhone4 resolution landscape mode which is 960 by 640 pixels. The fixed size worked perfectly for resolutions on iPad1 and iPad3. But for iPhone4 resolution, all the UI elements shrank to a smaller size in width direction( the height maintained the same as 640 pixels), although I designed it as 960 pixels.

So my solution is to set the mode to PixelPrfect for iPhone4 and iPhone5 resolutions(for iPhone5, I also have to programmatically resize all the relevant elements so it can cover the wider screen), and set FixedSizeOnMobiles for iPad resolutions.

Although the problem solved, but I still wonder why it happened in the first place. Did I do something wrong for some settings?

Thanks

[ArenMook]

Likely, yes. Most likely the "min" value on the UIRoot.

[sonicviz]

I have an iPad/Desktop app based around 1024x 768 rez which I want to deploy to smartphone.

It is set up correctly to use anchors for the GUI elements so works fine on iPad versions (deployed at iPad 2 rez, not retina atlas switching) and on desktop looks fine when different resolutions selected.

When I deploy to my Galaxy S3 (currently using FixedSize or FixedSizeOnMobiles) everything is correctly positioned, but some UI elements (buttons, popup lists) are now too small for fingers and I need to resize them for the smaller screen due to better UX.

I'd rather do this programmatically rather than manually hack them for android and iOS versions.

Are there any guides or examples for this use case?

ty!

[ArenMook]

I'd advise enlarging the collider of your popup list. You don't have to have it match the background sprite's dimensions.

[sonicviz]

ah, didn't think of that approach! ty, will try.

EDIT: How will this work with new version 2.6 though?

ie: - FIX: UISlider will now use the sprite size rather than collider size to determine the touch effect area.

If sprite size is smaller than collider, will sprite override collider detection?

[ArenMook]

That change has nothing to do with that.

[sonicviz]

I found I could tweak the UI for smartphone by manipulating the size for fixedsizedonmobile

[capitalj]

Hey guys, does this advice (to use fixed size for mobile option) also work for Retina or very hi res desktop builds? ie: if the retina macbook pro has a resolution of 2880-by-1800 and the app is a standalone build, then pixel perfect ui would look very very small right?

[ArenMook]

It would, but the stand-alone build is affected by the min/max values you give it. If you set it to 1080 as the max for example, then the UI will keep the maximum height of 1080 (1920x1080).