Efficient approach across various mobile devices?

[karsnen]

Hello,

I am currently developing a game for mobile and I use NGUI for all the UI work. Due to the valuable inexperience I have on publishing across various mobile devices on a commercial basis, I thought it would be better seek some advice and formulate certain protocols for myself while developing UI/HUD using NGUI.

My Method :

I have panels for center, bottomleft, left & right. I child the UI elements under the respective parent which have the above designated panels. Inside each panels, I set the relative offset so that they are offset from their respective base position.
The child are mostly Button with UIButton Script and at times - labels. After making them as children, I get to Transform of the Buttons and manually change them till I get a good visual feeling. I then snap them to a round integer. I do all these at the lowest resolution = 4:3 on iOS build settings.  I test it out on that resolution before bringing it to various devices. At a particular scene all the UI elements have only one parent -> one anchor.

My Request :

I want to make a UI which would work well across all iOS & Android devices. I am under the assumption that if I happen to give importance to the above method I would get a similar results on all devices. When I say similar results I also mean that, as I am testing it on 4:3 resolution my icons would be overlap on any of the other devices.

Thank you and I hope my description was precise, clear and understandable. If I have missed information or likely to have given more info - please let me know. Your help is much appreciated.

[ArenMook]

If you want your UI to look correct in various aspect ratios, then chances are you will need to use more than one UIAnchor. One panel attached to the center, another attached to left, another to right, etc.

[karsnen]

If you want your UI to look correct in various aspect ratios, then chances are you will need to use more than one UIAnchor. One panel attached to the center, another attached to left, another to right, etc.

Mike, Thanks for your replying. I highly appreciate it.

I just one more doubt. So, If I happen to use separate panels for unique position. I should also child the unique panels to an Unique anchor.  Right. Is that what you meant. Because, I kinda lost you when you said you need more than one UIAnchor then later you said you need one panel attached to the center, another to left etc. Could you pl help me here.

Thank you,

Karsnen.

[jeldrez]

No, what you need is different panels with different anchors, for example you want your score at TopRight, you should create a Panel with an Anchor at that position, so, all the things you want to keep in a different corner you should have it on the same Panel/Anchor.

For example in the image attached, you should have in the same TopLeft Panel/Anchor: Nickname and HealthBar. And Score and Distance should be in the same TopRight Panel/Anchor.

You don't need a Center parent Panel/Anchor for all the other ones.

regards!

[karsnen]

Jeldrez,

Thank you for your reply. I highly appreciate it.

But just one little question. The question is pretty simple.

When you say "Panel/Anchor" - I think you meant to have a Anchor gameobject then -> child the Panel Gameobject; right?


Sorry about that. 

[jeldrez]

Well, when you create a UI with NGUI it's create the entire hierarchy, that's: Root/Camera/Anchor/Panel

But I attach anchors directly into Panels, so I create a Panel with all the widgets I want in that position and set and Anchor for them.

I'm not sure if it's the correct way of working, but at least works good to me.

Regards,
Emilio

[karsnen]

I did not really see this video. I wish I saw it when I was learning NGUI.

http://www.youtube.com/watch?v=XAeRXckXMMw

This pretty sums up what I wanted.

Added to that, I think you could just use one panel and then have multiple anchors to facilitate multiple resolution.