UIAnchoring Multiple Widgets across Multiple Resolutions

[samurai413x]

Hi

I am trying to get my game working across multiple resolutions. I have a script that detects resolution and swaps the texture atlases accordingly.  What I'm struggling with now is Widget positioning.

I want to have a few identical copies of an image button, one above the other.  When I switch resolutions, I want the relative distance between buttons to remain the same, as well as the distance between the bottom-most button and the bottom of the screen.

1) Am I correct in assuming that I can't use pixel offsets to do this, and instead need to use the relative offset feature?

My tree looks like this:
UI Root (Automatic Off, 768 height when I run as iPad, 640 when I run as iPhone 4)
-Camera
--Panel
---Anchor0
----ImageButton0
---Anchor1
----ImageButton1
---Anchor2
----ImageButton2

I use the relative offsets on the anchors to line the buttons up in the right spots on iPad.  Runs fine.  Then when I switch to iPhone 4, the positioning is off - everything is too low.  Additionally, the box colliders on the buttons are too big (iPad size, it appears) and in the wrong positions.

2) Where am I going wrong in this setup?

The next step, something I had working before trying to get this scene going in multiple resolutions is that I want that Panel I mentioned in the tree to animate, to slide upwards from off-screen.

3) How can I do that if some of the children of that panel are anchors?

Thanks!

[ArenMook]

Bottom-most button... implying that the buttons are in a column? If so, you don't need to do anything since your "automatic" checkbox is off on the UIRoot. Just make sure to use a bottom-anchored UIAnchor. You only need one anchor, and you can parent all buttons to it.

Anchors need to be above panels, not below them.

Root
- Camera
-- Anchor
--- Button 1
--- Button 2
--- Button 3

[samurai413x]

Oh! Thanks for the quick reply, I will try restructuring.  I guess I thought the Buttons needed to be the children of a Panel?  And yes, the buttons are in a column.

[ArenMook]

Yup, the panel is added automatically if it's not present. You can place it underneath Anchor, or on the Anchor itself. I generally do the former, like so:

Root
- Camera
-- Anchor
--- Panel
---- Button 1
---- Button 2
---- Button 3

[samurai413x]

So things are definitely looking better when I switch to iPhone, but the bottom button is still getting cut off a bit at the bottom, and the spaces between them are a little to large.  Where else might I be going wrong?

[ArenMook]

Why would it be cut off? Your anchor needs to be bottom-anchored, not center.

[samurai413x]

Ah, in all the excitement I forgot the most important part!

So, now I have no more cutting off at the bottom, but still large spaces between the buttons and my top button is so high up that it is covering an important part of my background (it doesn't do this in iPad).  Is this because the distance between the buttons will always be a constant number of pixels, which represents a much larger portion of the screen on smaller resolutions?  If so, is there a way around this?

[ArenMook]

With UIRoot set to manual height, your UI should look the same proportionally regardless of resolution. If the top button is halfway down, it should still be halfway down when the resolution changes. No exceptions.

[samurai413x]

So I just downloaded the latest NGUI, to make sure that wasn't the issue, but I'm still seeing problems:

iPad:

White buttons are nicely away from the middle bar.

iPhone:

White buttons are on top of the middle bar.

Any thoughts on what the issue could be here?  All I am doing differently between runs is changing the device type in the Game Window and then changing the Height in the Root.

I don't think it should make a difference, but in the interest of full disclosure, the white bar, the blue icons, and the red trash buttons in each row are all children of an empty game object called "Row".

So:

Root
-Camera
--Anchor
---Panel
----Row
-----Blue Fist Icon
-----Red Trash Button
-----White Bar Button

[ArenMook]

Well, first of all, the height of your buttons is different. You say you're changing it... why? What for?

Edit: I guess you mean the height of the root, not buttons, but that still doesn't explain why they are different. What resizes them?

[samurai413x]

Ah yes, perhaps I should have explained that a bit more clearly, but that's what I meant by "script that detects resolution and swaps the texture atlases accordingly".

Because of the different aspect ratio of iPad and iPhone, we didn't want our images to look stretched/compressed, so we have separate versions for iPad/iPhone HD/SD.  So the iPhone HD one is being swapped in at runtime in this case.  It's a different height because our background is a different height, so we would have to also make the buttons a bit smaller to fit comfortably in that bottom section.  Does that make sense?

[ArenMook]

Well, logically if you're changing their height manually, then you should also move them manually. "Manual" setting only works if you don't do anything else yourself, but once you start changing heights of things... you're pretty much on your own. You're changing the size, which alters the space in-between of buttons.

You might find it easier to just have one UI layout for iPhone, and another for iPad.

[samurai413x]

Darn, ok, I knew I was missing something.

Would UIAnchors with Relative Offsets help me accomplish what I'm trying to do?

If not, would the best way to do different UI's for different devices to just make 4 layouts (iPad/iPhone HD/SD) and then just set 3 of them inactive when the game runs?  Will that hurt my memory usage much?

[ArenMook]

HD is double the SD size, so the layouts should be identical.

You can Resources.Load the atlas you will be using and set its value for your reference atlas. This way only one will be in memory at a time.