Official Draggable overlays, custom toolbars, new Tool systems

Barring that idea, a simple (centralized) asset reference users can refer to (and procedurally add/register their own icons to) for editor extensions (and separately for runtime) could be huge.
The key is being sure the icons are scriptable and easy to access instantly in both UI Toolkit / Builder and legacy GUI Layout. Global icons are definitely a very useful idea. Possibly borrowing some from Visual Scripting could be handy too. Heck, Unity itself could benefit (visually) by allowing people to have access to its icons easily (and repurpose them in many cases, while keeping the "Unity" look consistent).

Some thoughts on implementation/design:

Their tiny file contents should be hashed as a string 'index' (or something similar), rather than numerically ordered, so that they can be asked for directly. As long as the icon (or its data) exists somewhere (akin to a byte array), it should be generated in the GUI on the fly -- or only when needed. Beyond that, it can be cached/rechecked manually if something goes wrong, such as on installation. A ground truth (such as a list of SO assets) could handle the numerous extension icons (in a similar way as handling Assembly references -- but with icons, rather than scripts/code -- letting only the scripts/GUI that cares about the icons know about their data).

 

Also -- this made my entire year.

 

Just common stuff. I guess World Building icons would be too proprietary. But loading, saving, settings, reset, new, select, invert selection, drag, click ... something everyone can be familiar with and gives assets a common and integrated look & feel.

Icons like these. But, well, free

 

Have you seen this? https://fonts.google.com/icons

 

And another one for good measure: https://fontawesome.com/v6.0/icons

But for real, I don't necessarily expect Unity to make a bunch of random icons for developers, but I would at least expect the icons they have made should be a lot more accessible.

 

With 2021.2 now out I have started making overlays but I cannot really find a lot of the functionality the videos described for EditorTool for example. I currently subscribe to ToolManager.activeToolChanged to display an overlay associated with that tool but that doesn't seem right since the overlay is always available this way, just hidden when other tools are active. What is the current status of those changes? Am I missing something or is there no Tool Options Overlay yet?

I was thinking about moving all the stuff I currently have in an editor window to overlays since they are all just options for one EditorTool... but without a way to link these overlays to my tool that feels very hacky especially since they would all just register to SceneView. Like I said I could be I am just not good at finding any documentation of how to actually make Tool Options Overlays, just looking for some information and guidance.

 

Ohh I can elaborate a little bit. Since the Tool Options Overlay is empty on my custom tool and the API doesn't show any hooks to it in the EditorTool class I don't know how to write anything to it - that really is my first problem. The second is that most tools that as the videos describe as problematic custom tools are entire editor windows full of options. Same goes for mine. It has a basic settings tab that I recon could fit into tool options nicely since it has just brush size and spacing, stuff that you you probably have in a toolbar usually. From then on it gets a little more complicated since the other three foldouts manage presets and inspect presets and the contents of the presets.

So I was thinking the new shift makes sense to have all the stuff that a tool really needs neatly packed into overlays that you can stuff back into their little icons or expand when you frequently change loadouts and so on. But clearly when multiple overlays are linked to the sceneview that overlay list gets stuffed full with things that aren't actually for the scene but rather for that one tool. I was under the impression that each tool could have it's own list of additional overlays and write into Tool Options / Settings!

It does make sense to me to try and streamline tools so I am trying to get into overlays and toolbars since 2021.2 is out but so far its kind of hard to fit things in. Already using UI Toolkit for my EditorWindow and that also has many things that seem to "not quite fit" - liking the new directions with the tooling in Unity but there seem to be significant growing paints for early adoption.

 

That does make sense, to a degree my tool would probably most similar to the terrain toolkit in terms of what problems it faces since at least I think the layer / texture selectors should be inside such overlays. Thanks for taking time to give advice! Looking forward to seeing how the tooling side of unity matures over the next year.

 

Hi @gabrielw_unity!

We found a bug regarding the new tool overlay window-thingy. Do you want me to submit it or this description is good enough? Unity version: 2021.2.1f1. Grid snapping and Incremental snapping setting window. If you put wider number in the numerical input boxes, they get wider and you can actually push out the Z input box from the window.
See the screenshot here. I only found these 6 input boxes doing this.

 

Curious about an ETA for this -- I'm really worried about complex tool support, as I can easily think of ways I would like to use said tooling in non-standard ways, with a variety of display, interface, and shortcut options -- especially when it comes to particular kinds of workspaces. For example, I won't need the same kinds of tools when designing a level as I need when I'm programming or writing my game's scenarios and/or using other kinds of tooling while inside Unity.

 

I'm finding the simple cases most difficult, is there any way to add back labels instead of only icons? I really cannot differentiate all the different icons, many concepts are just too difficult to express in a single icon.



I would kill for a way to trade in some of this empty unused space just to see what current pivot mode i'm in. Just like how it used to be. To make matters worse the icons seem to change depending on your selection, just when you remembered the strange half moon is the render debug dropdown, it turns into a bug when you actually change your selection.

There's ample space for it, why not add labels?

 

Strongly agree!

 

That has already been changed. This is 2022.1 b2

 

Oh thats great news, thanks!

 

I only have one question: why Unity hates user settings this much? This editor supposed to be the pinnacle of customizability and time and time again, Unity is just ignoring obvious places where it is a good thing to give choice for the users. Like turning on and off labels. Now all people have the labels, doesn't matter if they wanted them or not. How hard is it to implement a checkbox menu point in the already existing context menu to turn on and off labels? And you can do it once for all toolbars.

 

The P from Pivot and G from Global are too close to the icon, it would look better if there was a few pixels more margin, at least the same as the icon is from the left side of the bounding box.

I made a mockup how I would do it :

 

Or allowing us to drag the buttons up to the global toolbar, where the play buttons are.

I understand for some people that is illogical, but for me its incredibly useful to have the buttons there. They have always been there, it seems like such a small concession to make in order to appease existing users.

 

Agreed
I do know its out of context if they are placed there, but for legacy users it nice to be consistent with the past. Once the whole UI gets a revamp with layout buttons it makes more sense to remove them, but now it seems too soon.

If the toolbar on the top can be used for users to add buttons they want, no matter of they are in context then it would be solved too.
A bit like shortcut keys, you can make them for anything you want.
If the top-bar can be used to make buttons for anything you want it would be really nice.
Maya has this functionality.

 

There are a few subtle differences between this mockup and the current version

1 active states in the overlay are blue in the current version and gray in the mockup, I prefer the gray as the current becomes too busy with all the blue.
2 different shade of blue for highlight items
3 items in the overlay have a backgrond now while in the mockup the blend in nicely with the background of the toolbar
4 draggable part is double lines now instead of one in the mockup
5 mockup looks cleaner as a result of these differences

 

Hey, just curious if there's any examples about for making a button bar/strip. I see that there's a method listed in the documentation called

EditorToolbarUtility.SetupChildrenAsButtonStrip()

but it has no useful documentation and googleing that method doesn't get me any hits other than that doc page.

I assume that I need to create a visual element of some sort that has the buttons I want in a button strip and then call that method on it, but I also am not really finding clear information on making toolbars that don't use the default elements. I'm digging through stuff to try and figure it out on my own, but I wouldn't mind a head-start if someone has an example to look at.

Edit: I think I got something working using a custom *.uss stylesheet and some other fenagling, but idk if it's the best way to do things. Would still appreciate if anyone has some input.

 

Unity's CS reference is really helpful

This is what it does:
https://github.com/Unity-Technologi...GUI/Toolbars/Core/EditorToolbarUtility.cs#L23

This is how its used:
https://github.com/Unity-Technologi...orToolbar/ToolbarElements/BuiltinTools.cs#L20

Just seems to assign the correct stylesheet to itself, and the assumed button children.

 

I there a way to use a custom .uss for the toolbar?

 

Today I upgraded from 2020 LTS to 2021.2 and I have some feedback on some editor changes:

I would like to remove the Collaborate, Services and Sign-In buttons in the top left, and replace them with the tools, where they actually used to be.

It just feels like wasted space, the entire top rown feels somewhat unnessecary now. The only important things remaining there are the layers and layout buttons, and they could be moved to where the other drop down menus are, in between Window and Help. And the undo history should be in the undo dropdown, not on the complete opposite side in my opinion (It actually is, which makes the button not that useful, saving just one click but cluttering the view permanently. If this was something you used frequently, a button makes sense, but you might use this once every few hours, if at all).

The scene/game view toolbar is also thicker than before, even though the icon size has stayed the same, there is just more padding now. I would like to see a compact mode for the editor maybe.

In general, I would like more flexibility in customizing the editor, as it looks very cluttered with a lot of elements I just never use. In my browser I use adblock to simply block all of the dozens of elements I never click on on sites like YouTube, and as a result the site looks so much better with a lot less unneeded visual noise.

The toolbar icons are also MUCH harder to see. I am using the bright theme and you removed pretty much ALL shading from the buttons now, whilst ALSO making the icons pretty much lines only. I just cant believe how anyone thinks this is more usable than before (Dont mean this to sound harsh but this is just very important to me and makes it so much worse to use - I am using Unity the entire day, please stop making it so much harder with changes like this).


For a program where you actually work in all day - as a developer, I would try to make it look as appealing to everyone as possible, as if they are happy, their work gets better and if their work gets better, Unity makes more money.


Furthermore, I am not sure if this is the right place to post this, but can we please have shaded buttons, checkboxes, text fields etc back. They dont just look prettier to me, but were so important to the editor ux, just like the old icons which were a lot more diverse in shape and color and thus easier to differentiate. Simpler does not mean better. Following visual ui trends blindly has made this editor so much less useable and, to me, quite unappealing visually. Every time I look at the 2018 and older editor I just get so happy, it looks pretty and inviting. And fun. Its a game engine after all.

I have attached an image, because its easy to just ignore opinions like this as nostalgia, but they aren't. Just look at the comparisons and tell me the majority of these changes have actually improved usability:

 

I have the same thoughts, although the flat look has grown on me.
I have managed to add icons back into the toolbar with toolbar extender
https://github.com/marijnz/unity-toolbar-extender

And now I’m trying to use an .uss to scale back the icons to a bigger one as before.
I can manage in the UI debugger but I did not manage to make them permanent with an .uss
I hope anyone here will have a solution how to apply a .uss theme to the top bar.

This removing of the padding is only for MacOS, on windows you don’t need to do that.

 

Thanks for the link Lets hope they add customization like that one day

 

Hello, I really like the overlays, however over time I have been liking the styling less and less. The color and styling doesn't really match anything that is already in Unity(the styling matches the top toolbar I suppose), and it feels rather noisy/cluttered to me.

What I would really prefer is if the buttons didn't have a background at all, and when selected they would be lighter color background. This would make it less cluttered feeling, be a bit more consistent with the rest of Unity (matches how toolbars act with normal/active/hover/etc), and in my opinion looks more modern. I am a bit unsure of my styling of the floating overlay (the transform tools overlay), but I could mess around to see if I could get something that looks a bit nicer if that would be desired.


Thank you for your time and for creating such a nicer overlay system. I hope you will consider changing the styling

This is the styling I used for it (I did the styling a bit quick-n-dirty so stuff like pressed states are still blue)

Code (CSharp):

1. .unity-overlay {
2.     --unity-overlay-buttons-on-color: rgba(120, 120, 120, 0.5);
3. }
4.  
5. .unity-overlay .unity-toolbar-button {
6.     --unity-colors-button-background: rgba(0, 0, 0, 0);
7.     --unity-colors-button-background-hover: rgba(90, 90, 90, 0.5);
8. }
9.  
10. .unity-overlay .unity-button {
11.     --unity-colors-button-background: rgba(0, 0, 0, 0);
12.     --unity-colors-button-background-hover: rgba(90, 90, 90, 0.5);
13. }
14.  
15. .unity-overlay .unity-toolbar-toggle {
16.     --unity-colors-button-background: rgba(0, 0, 0, 0);
17.     --unity-colors-button-background-hover: rgba(90, 90, 90, 0.5);
18. }

 

That is the issue, UX/UI should be consistent, when changing icons like that, this makes it not consistent.. Common design mistake. So, I agree that is a problem...

I also agree about the unused space, and to be able to tell what mode your in... No offense to the designer, but this is a common mistake from UX designers.

I'm sure they will iterate on this new tool, because so far, its what I been wanting, as we designed tools like this in other in house engines, and it makes level design, world building and over all usable in the engine, much easier and better, which allows people to be alot more creative to have more access to what ever it is they are making..

The old editor, was a mess, which made a lot of assets, have HORRIBLE UX/UI's, something I been critical about. Some Unity, so far nice job! Just keep going. and don't abandon this.

ALot of us long time Unity users, wanted something like this for a long time. its been shaping up so far pretty good.

 

They should allow us to change it, and have total control over it.... This would solve that, because in UX/UI Design, shape, color, being consistent is super important, and this screws it all up, when you have no control over it..

 

This does look a lot more consistent and easier to understand exactly what options are selected.

 

Icons and placement is consistent, but actual back ground colors are not.( Which is the icons, just being selected, making the black background blend in.

( SO he wants more control over this.) Which in the world of Design (UX/UI) i'M a professional designer, we give users this control over style/color.

When I make tools for larger companies, it was a common thing users where asking for,. Color matters.. in the world of UX/UI Design, and in that tool panel there is a difference..... This is when you give users the control, to there liking, and make a default that matches, and change when selection by icon, background should not change.. (typically)

With this one, if they just used the icon on selection and left the icon background for icons alone, it would of been fine and worked as he expected.




It looks to me like the colors of the background for icons is what has changed by selection. So not the actual background..

Its the same way all over the upper panel as well, where they have blue back grounds.. on the icon background.. Which you can do, but then you need to have the ability to change background colors, to keep it consistent.

I believe that is what he is looking at???

(background is the window( color/Shape) Then you have the icon background, and the icon itself, which are different elements. ( So, having control over shape, color, over all 3 ...This way you can adjust the style to your liking.

 

In PS, as an example, you can see how consistent and easy to read the UI is , as the background is different. (IE window)

Now he could do the same, just make all of the icon background Grey... ( and just change the selection, color. ) This will solve that. ( but having more control over color and shape is a MUST... in UX/UI Design....You shouldn't have to work around color and shape... in design for UX/UI.

 

With the great help of @MechaWolf99 I was able to tweak the unity editor exactly to how I like it!

I have added custom toolbar buttons on the top toolbar and the tweaks @MechaWolf99 did to the sceneview buttons It came to this result in unity 2022 on Mac

 

Kinda off-topic but just bumping the prefabs tab you have in this image. I was actually about to write a post about having something like that in Unity to organize your asset library. It can also keep people out of source files that they won't need to modify or worry about them, they will always be using the correct files. It's a pretty useful tool, Unreal has something similar called collections.

P.S. Is that available publicly in a package or so?

 

Yes Its a really nice tool called Smart Library and you can find it on the asset store:
https://assetstore.unity.com/packages/tools/utilities/smart-library-200724

 

So at the end of the day, the Unity's reference really isn't that helpful. Largely because basically everything is marked internal. I just want to make my buttons look like buttons. As far as I can tell, I can't use the default Toolbar Overlay because I want to mix button elements with a tool strip, and eventually also have a panel attached that displays some text.

So instead of things that look like this:

Instead it looks like this:


The only difference UXML/uss that I can see is that my top level Visual Element is missing the class ".unity-toolbar-overlay." I'm unable to add this class via code because there is not a good way to get to the parent element on something that extends "Overlay." When I create my visual element in CreatePanelContent, it doesn't have a parent yet.

Of course, I can't test to see if that is the issue or not, because the UI Toolkit Debugger doesn't let me add classes.


And I also keep getting errors saying that my overlay is attempting to set unsupported layout: VerticalToolbar. I guess I'm supposed to implement that somehow, but everything that I can find is both internal and deprecated.

It feels like I'm going in circles and not accomplishing anything. Anyone have a different direction I can try? I'm spinning my wheels.

 

That asset should be built-in! I think its quite incredible that were still missing simple level design features like that

 

It is possible that you're using non-squared icons? We're using icons that have a size of 64x64 and it looks Unity native.

The

ICreateHorizontalToolbar

and

ICreateVerticalToolbar

were public interfaces, but they became internal. You can read more about it here:

https://forum.unity.com/threads/reg...d-icreateverticaltoolbar-are-internal.1121923

To be honest, it seems strange that they created such amazing tools, just to later lock users from using them.

If you're trying to make a button stripe though, you can inherit from

ToolbarOverlay

instead of

Overlay

, which will automatically assign a styling.

However, this is pretty restrictive and you won't have control over the styling nor you'll be able to dynamically add/remove buttons to your toolbars.

 

I will try messing with the icons. I think they're squre, but not sure. That's at least an avenue to check. What sort of settings do you have for your icon images on the import?

The issue is that I need a couple free standing buttons above a button strip, so I need an overlay that contains both. I have a button strip object defined that contains the bottom three icons, but as you can see, they aren't getting styled either.

Hopefully messing with the icons will help...

I can post my code too later today but I need to clean it up first. I've been throwing spaghetti code at the wall hoping something will stick.

 

Here's what I do. First I have a class that inherits from

OverlayToolbar

, which is the container:

Code (CSharp):

1. [Overlay(typeof(SceneView), "My Toolbar")]
2. public class MyToolbar : ToolbarOverlay
3. {
4.     private MyToolbar() : base(
5.         Element1.ID,
6.         Element2.ID,
7.         Element3.ID,
8.         ...
9.     ) { }
10. }

Then, for each element, there's a class that inherits from

EditorToolbarButton

that creates the button:

Code (CSharp):

1. [EditorToolbarElement(ID, typeof(SceneView))]
2. public class Element1 : EditorToolbarButton
3. {
4.     public const string ID = "My Toolbar/Element1"
5.  
6.     protected TToolbarButton() => this.Setup();
7.  
8.     private void Setup()
9.     {
10.         this.text = "Element 1";
11.         this.icon = // Load your texture
12.         this.clicked += () => Debug.Log("Hello World");
13.     }
14. }

Again, not ideal, because the elements are defined in the super-constructor, and that makes it impossible to generate the elements dynamically. But this is as far as I could get with the public API

 

That was the first thing I did, and was probably the closest I've gotten to what I want, but it's still not quite what I'm ultimately after.

When I have tried to add visual elements that are non EditorToolbarButton (say for example a button strip) to a ToolbarOverlay they have not shown up or been findable in the UI Toolkit Debugger at all. Not sure what is happening to them, but they aren't going where I want them. That is why I moved away from the ToolbarOverlay to a plain overlay. That and my hope of adding colored text to my Overlay at some point.

A quick mockup I just put together, excuse the slapdash nature of it. Also, imagine all the button icons are mine, and not the built in ones. Just was trying to put together something quick to demonstraight what I am after.

 

That's such great news! Thank you for the heads up!