Too… many… displays…

When I tested Monster Connection on an Android (just for fun, to check the performance) I noticed something weird. The UI was tiny! Not at all like in the preview on my PC. I scratched my head, wandered back to my computer, and realized I had designed my test UI for an iPhone 3GS resolution of 320×480, while the Android I tested on was at 800×1280. “Well, duh, of course that doesn’t work.” But that moment, when you realize how many resolutions and aspect ratios there are, you get a little scared at first.

Android screen sizes diagram

Android screen sizes diagram

By now most displays are 16:9. It’s more or less the standard. But then you want backwards compatibility. Older iPhones are 3:2, many older Androids appear to be 5:3, some devices are 16:10, and there’s still stuff in between. Recovering from the shock about multiple wide screens, you take a look at iosres.com and learn that iPads actually are 4:3! You want a game to appear on every major device, without black bars or anything? Well great, you have to support everything there ever was!

The resolutions are a less complicated problem, given the magic of scaling~. You can make 2-3 versions of your 2D images and switch them at run-time depending on the screen size to get an optimized look on every display. The resolutions in between are just scaled up/down a little, which doesn’t reduce the quality too much. But you do need multiple versions, because usually you can’t just scale down an image optimized for 1080p, for a resolution like the iPhone 3GS’. It won’t look good, unless done in a proper image editor. (Not to mention the hardware restrictions regarding image sizes.)

On my research on how to handle all this, being not too eager to code it myself, I came across 2 libraries for Unity that stood out to me, NGUI and 2D Toolkit.

NGUI is the optimal solution for me when it comes to UIs. I’ve tried it for Monster Connection and it does exactly what I want. Scaling, swapping, and anchoring images, with easy to use editor integration and events (like OnClick, OnDoubleClick, etc). However, 2D Toolkit got something that I’m missing in NGUI.

When I tried to build a 2D scene in landscape mode with a background, a text box on the bottom of the screen, and a character image on top of it, like you can find it in some RPGs for example, I couldn’t get NGUI to scale properly, because it only takes the screen height into consideration. That way it got a little more complicated, fitting the background properly, stretching the text box across the screen, adjusting the text, etc, because with NGUI the screen would always extend/shrink horizontally.

2D Toolkit has an option to adjust the scene to the screen width, so things are cut at top and bottom, instead of right and left. That way, if you care more about the width than the height, you can simply set and anchor things, with the background being cut off a little on wide screens. Designing the background with that in mind, putting important things towards the center, you get easy cross-platform support. It’s not specifically made for UIs though, making some things required for that more complicated.

I have yet to try if those two can work together, without naming collisions or anything, but that might be the optimal solution.