Unify the editor panel docking system and make it more flexible

[vitorbalbio]

Describe the project you are working on: Space Tactical RPG https://twitter.com/ZeroPointGame

Describe the problem or limitation you are having in your project: This proposal is part of a much more complete UI/UX overhaul and should be considered with this view about Godot Editor problems and possible solutions: #1503

Unified and More Flexibility Docking Panels System.

Godot has multiple panels each one for a specific task. With the current modular position system you can choose 8 positions that better serves you for each panel. Godot 4 makes it even better with floating panels. It's very useful for multi monitor users (mostly of us right?) since you can detach a panel and send it to another monitor. But there's some big problem here. For some reason you can't detach, change, add or remove the panels from the bottom and up elements. Also you can't detach or change position of the most important panel that would make usage of multi monitors, the Script one. This is related to two UI/UX principles: Flexibility and Consistency. 2a. Provide choice in methods of use. 3b. Be consistent with user expectations and intuition.

Describe the feature / enhancement and how it helps to overcome the problem or limitation: Describe how your proposal will work, with code, pseudocode, mockups, and/or diagrams:

This is partially covered here in a smaller scope. https://github.com/godotengine/godot-proposals/issues/28

Bottom and Left Panels Unify the Panel behavior making all just tabs with the same behavior. So they can be changed position to other docks freely and can be detached as well. Obvious some panels don't quite fit every position well, there's two approaches to it. First you can just let the user do what they want (Blender and Visual Studio approach) and if it's ugly to have the inspector in the Bottom it's ok because they can just change it anyway and it will not be default. There's also a more conservative approach that would be to have a list of allowed docks that way each panel can be attached but i'm not on it, i really would prefer the full customized way. Game developers are power users, let us have agency about our screen setup.

Top Panels The Top Panel is challenging not only it don't have a clear meaning (2D and 3D are viewport options, script and Asset Library are other panels) but they also require huge screen space to work. Also as noted before the most important detached panel is not currently detached and it's the Script Editor. This is so much important to multiple monitor users to be ignored. So my suggestion to the top panel is:

2D and 3D should be unified in a single "Viewport item". After that a option to this "Viewpot Mode" (2D/3D) need to be added.. It need be accessible all the time in viewport so should be a fixed option in the viewport top header.

Asset Library should be a floating panel by default. Just like a File Browser. It's not used so often that justify it own option here. It can be hidden in the Project menu e.g

So it let us with 2 functions Viewport and Script. What makes sense here is to keep Viewport fixed and Script as any other Panel, i mean, you should be able to put the script editor in any dock and be detachable too. I can quite think in some screen setups that would work just great with the Script in the left dock. Again the point is that Users should be allowed agency about their screen setup everytime it's feasible. With max flexibility users can fix bad default UI decisions, make it more pleasant or more similar to what they are used to.

How the default screen would look like:

How complex sub panels in bottom would look like:

If this enhancement will not be used often, can it be worked around with a few lines of script?: Will be used Often

Is there a reason why this should be core and not an add-on in the asset library?: It's a core editor feature.

[dalexeev]

2D and 3D should be unified in a single "Viewport item".

I think it is a bad idea. Those who only need 2D will find it inconvenient to work with 3D in the background.

Asset Library should be a floating panel by default. Just like a File Browser. It's not used so often that justify it own option here.

Here you may be right. On the other hand, a separate tab can be seen as promoting the Asset Library.

[KoBeWi]

I think it is a bad idea. Those who only need 2D will find it inconvenient to work with 3D in the background.

If you look at the mock-up, the 2D/3D split is still there, but the buttons are on the toolbar.

a separate tab can be seen as promoting the Asset Library.

I never used AssedLibrary for any of my projects, so if someone doesn't use it, they won't use it. We could just indicate that AssetLibrary exists, by doing something like #1499

[dalexeev]

The current editor theme is not intended for sub-tabs.

[vitorbalbio]

The current editor theme is not intended for sub-tabs.

What the problem with sub-tabs? Tested it here and it work better than my concept.

[dalexeev]

What the problem with sub-tabs?

They just look ugly. The problem is not with the sub tabs, the problem is with the theme.

[vitorbalbio]

I will also make a proposal for the default theme soon 😆

[dalexeev]

The theme itself is good, but it is not meant for sub-tabs. I tried to improve the picture in Paint.

Before:

After:

But it seems to me that the current bottom panel design is good anyway, without sub-tabs.

[vitorbalbio]

But it seems to me that the current bottom panel design is good anyway, without sub-tabs. @dalexeev Much better your version but see that the proposal is not about subtabs in bottom panel. It's just a very small consequence of a much more flexible and unified panel dock system. Only posted this sample because it was fair to show how complex elements would work on this proposal. But the proposal itself is not about it.

[breadnone]

Not only this would be comfortable for working with laptops or any small screens in general but it also makes the workspace looks a lot cleaner for big monitors

[PLyczkowski]

let us have agency about our screen setup

I concur. My preferred setup would be viewport on the far left, and then 3 columns of panels: File System, Scene, Inspector (this way I would have to drag stuff across the whole screen over the viewport).

That's impossible to do in the current design since there can be max 2 column on either side of the viewport currently.

[aaronfranke]

Also you can't detach or change position of the most important panel that would make usage of multi monitors, the Script one.

The ability to detach main screen plugins is something that will likely be implemented by itself anyway regardless of any UI overhaul, it just hasn't been done yet by anyone. This would include the ability to detach Script to its own window.

(2D and 3D are viewport options, script and Asset Library are other panels)

No, 2D and 3D are completely separate things in Godot, they aren't "viewport options". It's not like in Unity where 2D is "flat 3D".

Asset Library should be a floating panel by default. Just like a File Browser. It's not used so often that justify it own option here.

If you are using the Asset Library, you don't need to view the 2D/3D/Script main screens at the same time. Having the Asset Library be its own main screen makes sense to me. I don't think it should be a dock like FileSystem.

[vitorbalbio]

The ability to detach main screen plugins is something that will likely be implemented by itself anyway regardless of any UI overhaul, it just hasn't been done yet by anyone. This would include the ability to detach Script to its own window.

It's good news but i highly doubt it will be implemented by itself if no one code it. 😁 Since there's no public roadmap for UI changes is impossible to know about what will or not be done. So here's my proposal.

No, 2D and 3D are completely separate things in Godot, they aren't "viewport options". It's not like in Unity where 2D is "flat 3D".

Not by the user point of view (which is the point here right?). They are exactly views for the 2D and 3D parts of your scene. If they run in different engines and physics... there's not diference for the UI/UX perspective. It's so transparent and used as a Viewport option to the user that it even changes automatically when you select a Node of the 2D or 3D type... If it was a 2D/3D switch in the header as proposed (Check the croqui) would change nothing the current design and workflow.

If you are using the Asset Library, you don't need to view the 2D/3D/Script main screens at the same time. Having the Asset Library be its own main screen makes sense to me. I don't think it should be a dock like FileSystem.

If you're using the Asset Library you need to view nothing about your current scene, you're just really in a (bad) browser searching for a asset to download. It's a totally standalone tool and used so little often that have no point in keep it up there. I can see no better place than a floating window if you want to keep things coherent.

[Shadowblitz16]

I think the docker dialog should be removed completely in favor of dragging and dropping the tabs

[jordanlis]

Totally agree with the proposition : why is there assets and 3D by default ? I don't use them ! The interface should be simplified as described in the mockups !

[Calinou]

Totally agree with the proposition : why is there assets and 3D by default ? I don't use them ! The interface should be simplified as described in the mockups !

I'm afraid "I don't use them" is not a good enough reason for hiding tabs and making them harder to find for newcomers who are actually interested in them :slightly_smiling_face:

[jordanlis]

Yes it is, from a UX point a view it seems logical to have a viewport with subtabs 2D and 3D. In the example, they are easy to find. It will be really easy for newcomers to find them and others will find usefull to have a lighter interface. The strength of godot is to provide a clear and simple interface without too much options that few users are using, but with powerfull and logical hierrarchy for these advanced options. As for the assetlibs, it has nothing to do here because it is not in the same category as 2D/3D/Script that are used to create the game. Assetlibs is only used at very specific moment of a project, so it's not well organized.

However, it's not a big deal but we should really be aware of these UI/UX elements.

For exemple in blender, they have tabs for all specific tasks in modeling, which is logical I think both for newcomers and experimented people. Blender is not the perfect example since the interface is really complex, so I won't use it too much as an example but here, for the tabs of each task, it makes sense according to me.

[YuriSizov]

We have 4 tabs, which take very little space, and Blender, by default, has a dozen of them, which most people instantly delete. I think as far as first time UX goes, Blender does it worse.

That said, parts of the editor can already be disabled using the Editor Features menu. You can hide the tabs unneeded, can limit what features or even node types are accessible throughout the UI. The only thing that is missing is an easy way to switch between those profiles.

[jordanlis]

That's amazing, I didn't know that... haha

[Shadowblitz16]

We have 4 tabs, which take very little space, and Blender, by default, has a dozen of them, which most people instantly delete. I think as far as first time UX goes, Blender does it worse.

That said, parts of the editor can already be disabled using the Editor Features menu. You can hide the tabs unneeded, can limit what features or even node types are accessible throughout the UI. The only thing that is missing is an easy way to switch between those profiles.

I would not use blender for any sort of example as its a utter abomination when it comes to ui design

[MickL]

When making something a new window (floating) by default, please keep in mind that on macOS laptop's users often use fullscreen. Any new window would leave the editor and go back to the desktop and open there which is very distractive and annoying, as it does currently with play / play scene: https://youtu.be/kZI56d0ddHo

Therefor I would prefer to have nothing open a new window by default.

[philippedcote]

We have 4 tabs, which take very little space, and Blender, by default, has a dozen of them, which most people instantly delete. I think as far as first time UX goes, Blender does it worse. That said, parts of the editor can already be disabled using the Editor Features menu. You can hide the tabs unneeded, can limit what features or even node types are accessible throughout the UI. The only thing that is missing is an easy way to switch between those profiles.

I would not use blender for any sort of example as its a utter abomination when it comes to ui design

What you say used to be true like 3-4 years ago, but it’s much better now.

[SilencedPerson]

True, it wen't from bad to industry standard tier UI. Cinema4D even stole it, that's how good Blender's UI is at the moment.

[Codel1417]

Any update on this? the bottom tab row is a PITA to deal with. Unity offers moving every tab out of the box.

[Calinou]

Any update on this? the bottom tab row is a PITA to deal with. Unity offers moving every tab out of the box.

There is work being done to allow detaching the script and shader editors to separate windows, but it's not planned to be merged for 4.0 as we're in feature freeze. Also, work on making bottom panels draggable to other docks hasn't started yet.

[Codel1417]

Any update on this? the bottom tab row is a PITA to deal with. Unity offers moving every tab out of the box.

There is work being done to allow detaching the script and shader editors to separate windows, but it's not planned to be merged for 4.0 as we're in feature freeze. Also, work on making bottom panels draggable to other docks hasn't started yet.

Ah that's good to hear. Maybe in 4.1 or 4.2 this will be ready.

[CarsonKompon]

Any further updates for plans on this now that Godot 4 has reached the Release Candidate phase?

[Calinou]

Any further updates for plans on this now that Godot 4 has reached the Release Candidate phase?

Any new features will be for 4.1 at the earliest, as no new features are being added to Godot 4.0 now.

[philippedcote]

True, it wen't from bad to industry standard tier UI. Cinema4D even stole it, that's how good Blender's UI is at the moment.

What did Cinema 4D steal exactly? Cinema 4D’s UI hasn’t changed that much since like forever. I used to use it before Blender. Just curious to know.

[ParadoxV5]

Those coming from RPG Maker like me needs time to get used to the Tilemap panel at the bottom rather than the side.

[ditiem-games]

I've been facing this issue since I started using Godot, and I was about to suggest something similar when I came across this discussion.

Here are my two ideas:

1. Stack Trace Buttons: Move them to the top toolbar, just before the play button. These buttons would dynamically appear and disappear based on whether the game is running.
2. Debugger Tabs: Each debugger tab should be in its own panel, with the option to dock them wherever the user prefers.

In a future iteration, certain panels could automatically show or hide depending on whether the game is being executed.

I'm happy to start coding this.

What needs to happen for the bottom section to become dockable?