Layout System: Pixels vs Percentage

[vexir]

Hi there,

We're in the process of setting up our screens and are running into some layout system issues. The promise of the system, if I understand it, is that screens can be built in a way that makes them resolution independent (i.e. portrait, landscape, super-tall, androids, iphones, tablets, whatever) and that widgets can be positioned and scaled relative to each other.

The issue we're running into specifically is that the layout system by default uses pixels to define offsets from targets. This means that when we're setting up a layout in portrait mode, and then we switch to landscape mode, the UI is incapable of handling the change in height because it's trying to respect the pixel offset from the anchor.

We were able to get around this by using the Custom setting, which lets you specify a % of the target's height. The issue is now that none of your tools for resizing or moving widgets respect percentage settings. Moving or resizing a widget in the scene will start to add pixel values to the anchor, which then screws up the layout on different resolutions.

Example:

Original:


Using Pixel Anchoring:


Using Custom / Percentages:


This is the anchoring of one of the buttons:



In order to have them positioned correctly and scale correctly when in landscape mode (i.e. for their widths to stretch but their heights to not overshoot the vertical space of the screen), we had to use % instead of pixel values.

This is really hampering our ability to make layouts, because it means that every widget must be sized and positioned using numbers in the inspector, as opposed to the handles. It feels like NGUI should support both pixel and percentage anchoring - and the handles we use to resize widgets or reposition them should be able to affect both pixels and %, depending on what the anchor is set to.

How did you create layouts with just pixel anchoring? Is that truly the right way of doing things? And if not, please please add % support ASAP - we're in production and could really use handles that change the %, not the pixel offset.

[ArenMook]

In most cases you'd have a container widget that would be relatively anchored, and the actual widgets would be using pixel offsets, anchored to the container. It's true that when you adjust the widget in the scene view it moves the absolute values and leaves the relative ones intact, but that's intentional. The relative value is just the anchor point, and the absolute value is the adjustment.

Easiest way to cater to different resolutions is to use a fixed size UIRoot and have parts of your UI be modular, attached to different sides or corners of the screen. In your case you have a full-screen dialog, and I would not advise you to have it stretch like you're doing now. Instead create two different dialogs -- one for portrait and another for a landscape mode. It's the only way you will be able to easily take full advantage of all available space. Think about it -- squishing those buttons to fit on a landscape mode just wastes space. It would be better to split the dialog into 2 parts at that point -- text on one side and buttons on the other, split down the middle of the screen.