GUI Layout Techniques When Using Multiple Viewports

[Sarus]

Hello All,

The game I'm working on has a basic RTS style UI (think Starcraft minus the awesome graphics haha).  On the left hand side is a Minimap created with a second camera and a viewport positioned in the lower left.  On the right hand side is a close up of the currently selected unit created with a third camera postioned in the lower right.

What I want to do is have all the other controls fit between the two viewports.  Right now I just can't figure out how to size/position the center UIPanel containing my other controls.  On my computer it looks correct but on my android device the UIPanel is always cutoff by the minimap or unit viewport.  If I anchor the UIPanel to the left I can get the UIPanel to be the correct offset over so that is starts in the correct position but then I can't get the UIPanel width right (it's either too short, leaving a gap, or too long, getting cut off by the unit close-up viewport). 

Does anyone have any advice on the best way to setup this type of GUI?   I attached a screenshot showing what I'd like to achieve.

 Thank you!

[Nicki]

I'll have a deeper look when I get home from work, but off the bat, anchor the main thing at the Bottom, the other in their respective bottomLeft/right

Set sizes relatively to screen size and it should be fine.

[Nicki]

Of course, if you want the blue part to change if there's more room, like have more content - like starcraft does - then it's a bit more complicated.

[Sarus]

Yeah, if the blue area is a fixed size then I can get it working no problem (i.e., target the smallest possible width I'll ever see and let the padding between the viewports just be larger or smaller). 

Is there a way to get the center part (blue part) to always be a certain percentage of the screen resolution.    My thinking is that the two viewports on the left and right are both set to have a width of 0.2 which based on the Unity documentation seems like it will always be 20% of your screen width (or 40% with the two combined).  If I anchor the blue panel to the center bottom and give it a width of 60% then it seems like in theory it will always be the right size. 

Is there a way to get UIStretch to perform this behavior?  Or is that an incorrect usage pattern. 

Thanks!

[ArenMook]

UIStretch is for scaling individual widgets, such as a background texture. You can still use it to scale a game object that has a bunch of children widgets, but... might be better to just write a quick script for that instead, as UIScale works in screen coordinates.