Laying out & inheritance - Pulling my hair out! X|

[Tom G]

Hey,

So I've been pulling my hair out trying to get a particular layout working in a UI. On the face of it it didn't seem that complicated, and while I can get each of the individual concepts to work (like anchoring, stretching, and offsetting) it seems that whenever I try to bring them together into a single layout it falls over and Widgets start going mental in scale or position.

I have looked through tutorials and Googled the hell out of the forums but I can't get it nailed.  Can anyone give pointers as to what my strategy should be?

Here's what I'm trying to achieve (simplified)...



Inherited sizes are marked in brackets.

Some notes:
 - I don't mind if it uses one UIPanel or five, as long as I can turn the different sections on and off independently (using SetActive I guess)
 - I am not using a UIRoot - I am using a UIOrthoCamera instead as the game is 2D.
 - My border/fill sprites will all stretch and tile and slice as you'd expect, so I don't need advice with that side of things for now.
 - I have tried out using Cameras, Panels (clipped and unclipped) and Widgets as 'containers' in the UIAnchor and UIStretch components, but to no avail.
 - I understand that Widgets can't be nested, but I have tried several other means of getting dimensions passed down a hierarchy with no luck.

Help please!!!!

Thanks,

Tom

[dlewis]

You should be using a UIRoot. The advantage is that it scales everything so that the units are in pixels (much better to work with).

- Try to make sure that for all the widgets that the scale of parent objects is (1,1,1), as soon as one parent has a different scale then everything below that will be silently scaled in ways you may not intend (silently because local scale doesn't reflect the parent scale).
- If you want to be able to turn elements on and off independently then generally it's best to have each component under it's own panel and a different game object structure.

ie
UIRoot
-- Camera
---- Section 1
---- Section 2
---- Section 3

Once you get multiple components under the one game object (ie Section 2 being a child of Section 1) then it makes it more difficult to manage what is active and what isn't, especially if you are using a recursive SetActive.

[Tom G]

Thanks dlewis,

I don't think it's the lack of a UI Root which is causing the problem (I will confirm shortly) but your advice about panels got me thinking.  I have previously been treating Panels as widgets with dimensions, and I've been attaching UIAnchors and UIStretches to them, assuming that these would transfer to the widgets below.

I'm part way through an attempted implementation where I'm avoiding doing *anything* geometric with Panels -- no anchors, no stretches, no offsets even --  and it seems to be going well so far.  I'll post back shortly...

[ArenMook]

Panels should always remain at a scale of (1, 1, 1), and so should all objects leading up to your widgets (except UIRoot). Only the actual widgets themselves can have a different scale. UIAnchor a game object, add children to that game object.

[Tom G]

Thanks Aren.

I've had some success now. Here's the outcome...



For the record, here's the rules I followed when implementing:

 - I never attached a UIStretch or a UIAnchor to a UIPanel.
 - After creating each panel, the first thing I did was create a Widget (e.g. UISlicedSprite) that would define the physical bounds of that panel.  I'd name this something like "0.Border.BOUNDS" to keep it at the top of the list and to remind me that this was the 'master' widget.
 - Every time I created a UIAnchor or UIStretch on this panel, I would drag this BOUNDS object into the Widget Container field of that component. This logic cannot be applied to the Panel Container field because the Anchor/Stretch code ignores panels that have 'clipping' turned off.

For anyone that's interested, here's a childlike drawing of the hierarchy I used:



I did in fact stick with the UIOrthoCamera instead of using a UIRoot and it seems to work fine -- keeping the UI pixel perfect even with dynamic screen resizes (which is what I want).

I've now got about a hundred half-pixel and depth issues to fix, but I feel like I've broken the back of it thankfully =)