Any chance to have a 'percentage' mode (as opposed to pixels)

As a mobile developer, I find that it's often easier to develop GUIs using percentages of the screen, rather than absolute pixel space.

While it's possible to do this, by moving anchor points and using stretch mode, it is very awkward. It's hard to quickly build a GUI this way, and I can probably build the same GUI faster using the 'legacy' functional approach.

Can we get a toggleable option for the rect tool and rect transform that treat all translations of points as percentages of the screen, rather than absolute coordinates?

This would make it much, much easier to set up GUIs to give users similar experiences across all devices.

One major problem is that a button that is 50 pixels tall is a decent size to hit on a 800x480 screen, but on larger screens, like 1280x800, the button may be much smaller, and much harder for that user to press.

Using the 'legacy' functional approach to GUI, I was easily able to solve this problem by adding a number of extensions to the Rect class that would return a sub-rect at some anchor and with some percentage.

Ex of how I used these extensions:

Code (csharp):

1.  
2. Rect screen = new Rect(0, 0, Screen.width, Screen.height);
3. if (GUI.Button(screen.Upper(.1f), "This button appears in the top 10% of the screen")) {/*do stuff*/}
4. Rect brush = screen.Bottom(.333f);
5. GUI.Box(brush, "Group");
6. GUI.Box(brush.Left(.333f).Trim(8), "This appears in the bottom-left ninth of the screen,\n trimmed a little to fit inside it's parent");
7. GUI.Box(screen.MiddleCenter(.333f, .333f), "This appears in the middle-center ninth of the screen");
8.  

That code was very easy to write, and would produce the following:

It was easy to make sure that elements would be scaled properly to any screen.

Nesting elements could be organized easily and clearly, and it was very quick for me to build GUIs using this percentage based approach. Even building things quickly, I could ensure that the GUIs I built would be functional for all users, and not just ones who had screens at the resolution I was designing for.

I also had some functions that would resize text the same way, to ensure that the text was scaled properly to the screen as well.

The new uGUI is a bit of a step backward for me, using pixels everywhere, rather than percentages.
I would like to make use of having an easy to use visual editor while creating GUIs quickly and easily, but I won't be interested in making full use of uGUI unless there is some way to easily move every element with the rect tool, and make sure that they all scale to some percentage-based position on the screen, rather than some pixel offset from an anchor point.

Please address this in version 4.6, I have been looking forward to the new GUI system, but it will not be very useful for me until such a feature is implemented. I really would like to use the new GUI system, as the 'legacy' system is quite slow when there are a lot of elements, as it uses up a lot of draw calls, and I would really like to take advantage of having both an easy-to-use editor and a more optimized GUI system.

 

Like you said, this is where anchors really find their power. If you position the anchors at the corners of an element, you get what you described, with the added benefit of being able to set pixel offsets on the borders (so you can easily make a button be 20% screenwidth + 5px margin e.g.). You also get sliced sprites, which is a nice addition imho!

To aid in being able to place anchors quickly, perhaps you'll find my Anchors-to-Corners (and vice versa) Editor extension useful.

I'm in a bit of a hurry though, so if I missed anything/ misunderstood, let me know!

 

Using percentages in the UI layout is possible with anchors as you say. However, it doesn't solve the problem you describe, since everything else than the rects would still not scale up with the screen size.

E.g. if you have that button you talk about and use percentages (with anchors or otherwise) to scale it up according to the screen resolution, the text will still appear much smaller (percentage-wise) on the larger screen, since the text doesn't scale up together with the rect.

What you probably really want is a way to scale up everything; not just the rectangles. You can do that using the ReferenceResolution component, which you can put on the Canvas. There's more info in the manual.

 

You can create a "percentage mode" by adding ReferenceResolution at 100x100

 

The problem is I don't want to move the anchors individually, or even use a script/hotkey, it would be nice to have a toggleable mode (like center/pivot and local/world) where dragging the rect changed the anchors, and not pixel offsets.

It's trivial to change the size of text when the screen resizes with a script.
and if Reference Resolution would solve this problem, it seems they should make it be a toggle option/group on the Canvas, and not an optional component.

 

@ninjapretzel you can always try extending the components yourself

 

This was mostly a suggestion thread to the devs, in the hopes that they would look at it.
I know that users of Unity can extend the editor and add their own editor windows and stuff, and that's kind of a given when it comes to anything. I made this thread to suggest that they add a feature to the rect tool that allows you to toggle between a rect that moves the pixel offsets and the anchors.

As far as I know, unless I want to dig in the source code for 4.6 once it's officially released, it would be easier for them to add it, since it's pretty difficult to add such features through editor extension, since there aren't any documented hooks for the rect handle, and the UnityEditor.SceneView and UnityEditor.SceneViewState classes are still undocumented, so even if I wanted to poke around, it's still not really supported per se.

 

@ninjapretzel and others this is now dead easy:


FORTUNATELY IT IS VERY SIMPLE:

make a panel with a horiz layout group.

put two panels in it.

on each panel put a layout element

simply set PREFERRED WIDTH as desired.

for example 45 and 55 for a 45/55 split

that's all there is to it. put anything you want inside the two left/right panels.

cheers

 

I had to set Flexible width instead of preferred width for this to work in my case, but anyway this really helped me, thank you!

 

Talk about fiddly just to set width to sat 15% of a parent rect! They should take a leaf out of CSS' approach.

 

You'd have loved Adobe Flex. This is exactly how they work their layouts.