Resolution independent GUI with Unity?

We're working with a 2D game, heavily dependent on GUI widgets, and we're looking for a resolution-independent solution for Unity. Is NGUI the right choice, or there are other ways of tackling this problem? Our game is very similar to the original SimCity and we need to make sure the game scales well on all aspect ratios and screen sizes (Android, iOS, Desktop, etc).

 

The Unity 4.6 GUI system will allow your UI to be resolution independent, so maybe at this point just wait until it's out? (if you're able to wait of course) Normally I'd favor using something available right now like NGUI rather than going off promises of what may come in the future but the new Unity system is pretty badass and it's supposed to be out soon.

 

It depends on what you mean by resolution independent. I struggled with this issue for ages but in the end opted for a fast and always works method but with a bit of a compromise. I use NGUI, I removed it's UIRoot and replaced it with my own that basically just scales the GUI from a base of 1024x768. So I develop the games at 1024 x 768 and just scale the root of the scene by the difference from the current resolution to the base one I chose above.

The good thing is it looks great on iPad at both retina and non retina sizes and pretty good at all resolutions with the same aspect ratio. Even on iPhones it looks ok and you never have to worry about a gui element being too small to see etc.
If you don't do it this way your only other option is to anchor things relative to corners or centre etc, but then what looks readable on a low res screen is too small to read on a hires one etc.

For me scaling wins every time, the 3rd alternative is multiple atlases at all the resolutions but who can be bothered. Also it will bloat your executable.

edit* I just need to add that I think NGUI is great and you should use that and forget about mythical GUI's from unity. I don't use the NGUI UIRoot component basically because I've never really understood what it's doing and no mater what I set it's options to it never gives me a resolution independent display. NGUI gives you so much more than just a 2d GUI and I really doubt the Unity one will come close.

 

I would think it would be better to do it manually by getting resolution and DPI. As how is Unity meant to know what to scale differently?

 

Well according to the video, uGUI will let you anchor elements and stuff so they can be scaled or stretched and stuff like that even if you change the aspect ratio and resolution and stuff. You can see the scaling in action in the video at 1:23 and 10:40. So if you wanted to design at 1024x768 and scale everything from there, you'd be able to set the anchors to all 4 corners of the screen and you'd have the kind of functionality you describe where everything scales uniformly, but with the added benefit of being able to control how it reacts to different aspect ratios

 

if you use the regular gui then you can just multiply the values by screen.width and screen.height and divide by the resolution you based it on

 

Arkon... I'm having a similar issue. We use NGUI for our 2D development also. However, we've been having a nasty little issue lately with our screen resolutions. It looks just fine in the editor on my laptop. But when we build and push it to our phones, it's totally messed up. The ammo gauge and firing button is stretched out of proportion, the game over screen is also, and the score label at the screen's top is larger than it should be. Further, it seems the camera is "zoomed in" too far... part of the background is clipped off and cannot be seen. On my phone, I can see more than my boss can on *his*, as he gets even less of the background.

So, we've narrowed it down to a definite problem with the resolution. I'll get right to the point... you said you basically re-created the UIRoot. What exactly did you create/modify that allowed you to scale like you're saying? Do you mind sharing? It would be tremendously helpful, as all my efforts have come up fruitless. Thanks either way in advance.

-Jim

 

Yes something in one of the unity updates completely messed everything up. The cause seemed to be that when execution reaches either start or awake in your own UIRoot the current resolution etc. is not correct! In fact it doesn't get the correct answer for quite a few frames. My solution or bodge that fixed the issue was to add a counter to the script and for the first 100 frames keep doing the frame scaling calculations. unity usually gives you the correct dimensions of the device within a dozen frame updates. I do it for 100 frames just to be sure. When I get back to my desk I will post my UIRoot on here. I've sent my code to the NGUI guys but they dismissed it as no good for some reason I didn't understand. But it works for me and my dozen games and apps live on stores.

 

If you design your GUI and know the resolution you're designing it on or you have it all drawn out on paper, try getting a percentage of the screen / design. My GUIs are always a screen percentage. If I have a menu item that is the top 1/3 of the screen, it'll be something like...

Code (CSharp):

1. void OnGUI()
2. {
3.     Rect title_rect = new Rect(0,0,screen.width, screen.height*0.333f);
4.     GUI.Box(title_rect, "title");
5. }