Some initial feedback to the new UI

[Alan47]

Hello everyone,

after my first couple of hours with the new UI system, I’d like to share some thoughts and wishes with you, as feedback.

What I like a lot:

• General workflow is pretty good.
• It’s the easiest-to-use “retained mode” UI I’ve seen so far for Unity.
• Power Flower is just an awesome gizmo. Simple, intuitive and powerful.
• Reasonable range of options for every widget (you don’t drown in options that influence each other as in some desktop frameworks)
• I didn’t try it yet, but judging from the tutorial videos in the learn section, the databinding and ‘onEvent’ mechanism looks excellent.
• The fancy stuff: 3D rotation, shader support…
• How scroll panels were implemented. Looks fairly intuitive to me, and built-in glide and bounce features are nice to have, too.
• Sprite editor for slicing sprites and so on works perfectly and is fairly intuitive to use.
• Image ‘fill’ options are very nice and handy

What I would like to have:

• When resizing a control by holding down the shift key, it resizes proportionally. Very good. Now please add the standard behaviour of so many other programs that holding down the CTRL key resizes it while keeping it at the same center point. Otherwise you have to: place widget where you want it, realize that you want it bigger, scale it, need to position it again.
• It would be nice to have a hotkey to hold down while dragging a UI widget that drags the anchor point (power flower) synchronously with it. That would have come in handy a couple of times for me today (Shift key, perhaps?)
• A snap-to-pixel-grid functionality would be a godsent feature for implementing UIs that are very small where every pixel matters. Moving a UI widget just a tiny little bit can cause the renderer to decide to place a pixel differently, which can have bad effects on UIs that require pixel perfectness.
• Again, for low-resolution (or just very compact) UIs: a convenient form of bitmap font support that doesn’t require an external program would be nice (i.e. assign the bitmaps for the letters and Unity generates a bitmap font right inside the editor). True Type fonts in combination with the new UI system don’t work well at font sizes of 10px or less.

Overall, congratulations on the new UI, in my humble opinion it looks excellent already, with the exception of a couple of small quirks that still need some love.

Best regards,

Alan

[runevision]

@Alan47

When resizing a control by holding down the shift key, it resizes proportionally. Very good. Now please add the standard behaviour of so many other programs that holding down the CTRL key resizes it while keeping it at the same center point. Otherwise you have to: place widget where you want it, realize that you want it bigger, scale it, need to position it again.

In Photoshop this is done with Alt, not Ctrl, at least for me here. I believe we investigated this and found this to be the case in most software we sampled.

You can also do this with Alt in Unity, though there is a trick to it: You need to only hold down Alt after you’ve pressed down with the mouse, otherwise dragging with Alt activates orbiting in the Scene.

@Alan47

It would be nice to have a hotkey to hold down while dragging a UI widget that drags the anchor point (power flower) synchronously with it. That would have come in handy a couple of times for me today (Shift key, perhaps?)

While this isn’t possible, you can drag the anchors while holding Shift + Ctrl/Cmd in order to move the UI element together with the anchors. This way around reinforces the notion that anchors control UI elements; not the other way around. Also, shift-dragging UI elements is already used for dragging with snapping along one axis.

@Alan47

A snap-to-pixel-grid functionality would be a godsent feature for implementing UIs that are very small where every pixel matters. Moving a UI widget just a tiny little bit can cause the renderer to decide to place a pixel differently, which can have bad effects on UIs that require pixel perfectness.

I can definitely see this. If you zoom the Scene View a bit out, it should snap to pixels. However, in some cases there’s a question about what should be snapped. The pivot? One of the corners, and in that case which? For elements with a width and height that’s a whole number of units, it wouldn’t make a difference which corners, but in other cases it does, which can also be caused by anchors set to stretching.

@Alan47

Overall, congratulations on the new UI, in my humble opinion it looks excellent already, with the exception of a couple of small quirks that still need some love.

Thanks! Glad to hear it.

[Alan47]

Hi,

first of all: thanks for your response!

@runevision

You can also do this with Alt in Unity, though there is a trick to it: You need to only hold down Alt after you’ve pressed down with the mouse, otherwise dragging with Alt activates orbiting in the Scene.

Okay I didn’t know that. I guess it depends on which “world” you come from. In the windows world, the control key is pretty much standard for this (see PowerPoint, Inkscape & many others). But knowing that it’s the Alt key for Unity is fine as well (did the video tutorial mention this?).

@runevision

While this isn’t possible, you can drag the anchors while holding Shift + Ctrl/Cmd in order to move the UI element together with the anchors. This way around reinforces the notion that anchors control UI elements; not the other way around. Also, shift-dragging UI elements is already used for dragging with snapping along one axis.

Makes sense!

@runevision

I can definitely see this. If you zoom the Scene View a bit out, it should snap to pixels. However, in some cases there’s a question about what should be snapped. The pivot? One of the corners, and in that case which? For elements with a width and height that’s a whole number of units, it wouldn’t make a difference which corners, but in other cases it does, which can also be caused by anchors set to stretching.

Well if you include all the bells and whistles about rotation, resizing and scaling, things are much more complicated of course. However, in a scenario where a pixel-perfect UI is required, the circumstances are usually much simpler:

• Only native size at scaling 1.0 (the bitmap was designed to fit this exact size, after all)
• Single anchor point (no stretching due to anchor, those kinds of UIs usually don’t resize)

So basically in such a scenario, all you really want to do is to copy an image pixel by pixel onto the render output of Unity. I’ll give you a conrete example. Let’s say you want a small health bar for your game to keep the player’s HUD as non-intrusive as possible.

Let’s do an experiment with the blue bar. All graphics in the example below (except for the background graphic) were imported by using the “Point” filter instead of the “Bilinear” filter.

Here’s how it looks in the Unity editor (zoomed in) with the overlay grid for the bar at position Y = -0.63:

… and in the game view (not zoomed, 1:1 ratio):

That’s the way we want it to be.

Now, for the sake of the example, let’s move the overlay grid a tiny little bit to Y = -0.78:

Editor:

In the editor, the change is barely visible. However, in the game view…

See that? Shifting the UI widget by just a small amount (barely visible in the editor UI) can cause the renderer to “snap” it to a different pixel in the game view. Which, more often than not, will lead to you wondering why the UI looks fine in the editor but distorted in the game view. The easiest solution I can imagine here is some ‘snap to pixel’ functionality that prevents you from doing these micro-changes to UI element positions in the editor.

I hope this helps to illustrate the point.

Best regards,

Alan