Godot: 2D editor enhancements

[groud]

Hi everyone,

I plan to work on the 2D editor to make it more modern. I opened this issue to discuss what and how the changes should be implemented.

Here is a list of what could be added:

Control nodes

• [x] Display the margin values when moving a node (#10437),
• [x] Display width and height values when resizing a node (#10437),
• [x] When moving anchors, draw a rectangle to show the selected node without rotation/scaling (#10437),
• [x] Hide anchors helpers if child of a container (#10437),
• [x] Add a menu option to hide the helpers (#10437).

Grid and guides

• [x] Implement top and left rulers (#10437)
• [x] Implement a smart grid that align with the rulers, thus depending on the zoom level the rulers adapts to the grid instead (#10437)
• [x] Smart snapping: snap anchors / nodes to the grid / guides / align with other nodes, etc... (suggested by reduz) (#10437)
• [x] Implement guides
• [x] Display the grid behind the selected node, but above the selected node's parents. (Forget about that, too hard to implement :/)

Other

• [x] Move "zoom in"/"zoom out"/"Reset zoom" out of the view menu (#10437),
• [x] Remove "Set zoom", it's pretty useless don't you think ? (#10437),
• [x] Fusion lock+unlock and selectable children/not selectable children (#10437),
• [x] Snap rotation (and scale ?)
• [ ] Add a configurable key to zoom by moving the mouse.
• [ ] Add a local/global button that could:
  
  
  
  • rotate the view to align with the selected node (or its parent)
  
  
  • display the grid relative to the node,
  
  
  • If it is implemented, make the smart grid/rulers display relative values instead of absolute ?
  
  
• [ ] Blender-like selection: first click selects the topmost node, other the one under and so on. _(implementation reminder to myself: keep a list of the control nodes under mouse when clicking somewhere. If the list changes when we click somewhere else, we select the node on the top, else, we take the following node in the list)_

Keyboard controls

• [x] Toogle grid snapping (#10437),
• [x] Toogle grid visibility (#10437),
• [x] Multiply/divide the grid size by 2 (#10437),
• [x] Use the shift key to restraint anchor dragging to a single axis (#10437),
• [x] Toogle snapping temporarily (ctrl key when dragging)
• [ ] Make all keys as editable shortcuts (will be difficult, unless we find a way to fix #10497)

Note to myself: related #5121, #3225, #7595

[Shin-NiL]

Smart snapping

That's one thing I miss a lot :)

[timoschwarzer]

Maybe a Blender-like selection for overlapping nodes:
1st click: Select the topmost node
further clicks: Select the next node behind the current selected node

But this may be hard to implement because selection is broken for many nodes atm.

[groud]

But this may be hard to implement because selection is broken for many nodes atm.

What do you mean ? Is there an issue about that ?

[timoschwarzer]

Oh no, wait. It actually was the 3D selection that doesn't work sometimes (e.g. for Sprite3Ds).
Then it's maybe not hard to add that functionality into the 2D viewport.

[groud]

configurable modifier for zooming

This is not clear, what do you mean ?

[toger5]

• [ ] configurable modifier for zooming

_(a setting for a keyboard modifier which could be used to zoom in the 2d editor, like space for panning)_

removed to old message for the chat history

[groud]

And like you move the mouse up and down to zoom in/out ? Or just a key tozoom in and another to zoom out ?
Isn't the scroll wheel not enough ?

[toger5]

you use the mouse movement in combination with pressing the key.
The mouse wheel works. But I actually prefer using keys + on touchpad the mouse wheel/ scrolling is used for panning so a modifier key would be great to zoom.

[puppetmaster-]

Grid control keys (I miss this a lot in my workflows) (perhaps like the old GtkRadiant)

• Toggle Grid (Turns grid view on/off) [keypad 0]
• Toggle Grid Snap (Turns snap on/off) [keypad .]
• Set grid size 1 (set size off grid to 1x1) [keypad 1]
• Set grid size 2 (set size of grid to 2x2) [keypad 2]
• Set grid size 4 (set size of grid to 4x4) [keypad 3]
• Set grid size 8 (set size of grid to 8x8) [keypad 4]
• Set grid size 16 (set size of grid to 16x16) [keypad 5]
• Set grid size 32 (set size of grid to 32x32) [keypad 6]
• Set grid size 64 (set size of grid to 64x64) [keypad 7]

use case 1 (need to position a node on the grid but snap to grid is off)

• move a node with [CTRL] key pressed should turn snap to grid on

use case 2 (need to position a node free but snap to grid is on)

• move a node with [CTRL] key pressed should turn snap to grid off

[groud]

I am ok with use cases 1 and 2, but not sure with the keypad values impacting the grid.
As we work with pixels in 2D, having a grid of size 1 (=1px) is quite absurd.
Instead, maybe we could have two buttons to multiply/divide by 2 the grid size ?

I add interesting shortcuts in the list.

[puppetmaster-]

I used grid size 1x1 , 4x4 and 8x8 a lot in this fresh new game. (https://puppetmaster.itch.io/escape-from-the-apes)
It's not always absurd to use a grid size of 1x1pixel. It depends on the resolution 😄
Not exactly sure but you can place a node to subpixel by default.

I'm OK with the two button idea.

[groud]

Ah you mean when you zoom in. I checked the code it does allow for floating point values as a position, so you are right.

I'm OK with the two button idea.

I add it to the list then :).

[wbrbr]

Maybe snapping the rotation to 90° multiples when CTRL is pressed could be convenient too ?
EDIT: not necessarily 90° multiples, just toggling the rotation snapping actually

[groud]

Maybe snapping the rotation to 90° multiples when CTRL is pressed could be convenient too ?
Yes, is rotation snapping is activated that should do it :)

[toger5]

@groud since you already have the code for the anchor pins I propose this. although I think it is too much effort for the gain... but still if you immediately know how to do it and could implement it fast:
it would be nice if there would be controls in the style box editor. so that you can just drag to increase the border size.. or to change the corner radius... or the expand margins...
what do you think?

[groud]

@groud since you already have the code for the anchor pins I propose this. although I think it is too much effort for the gain... but still if you immediately know how to do it and could implement it fast:
it would be nice if there would be controls in the style box editor. so that you can just drag to increase the border size.. or to change the corner radius... or the expand margins...
what do you think?

Sure, but i first focus on the canvas_item_editor, we'll see later for the stylebox editor ^^

[ghost]

Having to set the "Use Pixel Snap" option every time I open a given project is a little odd. It doesn't bother me too much, but I think having the option persist with each project would be ideal. Is this something you're able to do?

[groud]

Having to set the "Use Pixel Snap" option every time I open a given project is a little odd. It doesn't bother me too much, but I think having the option persist with each project would be ideal. Is this something you're able to do?

I don't think this is desirable anyway, as this option is really project-dependant. However we can discuss if it should be activated or not by default. I personally believe it should be activated.

[bojidar-bg]

I don't think this is desirable anyway, as this option is really project-dependant.

Well, we should at least save it along with other _project-specific_ metadata, no?

However we can discuss if it should be activated or not by default. I personally believe it should be activated.

👍 for that.

[groud]

Well, we should at least save it along with other project-specific metadata, no?

Isn't this the case yet ?

[ghost]

Isn't this the case yet ?

Oh, huh, I just did some testing and it actually does save. I'm not sure what's been causing it to uncheck itself all this time, guess it was my own fault. Sorry for the confusion.

[shackra]

What about considering the tasks from #843?

[groud]

What about considering the tasks from #843?

I'm working on the Canvas Item Editor for now, not the tilemap editor :).
No need to merge the two issues.

[efirdc]

It looks like rulers cause dragging points to become misaligned. #11484

And sorry to nag about this but do you still plan to expose snap_point() and snap_angle() to GDScript? #11180

[groud]

It looks like rulers cause dragging points to become misaligned. #11484

I'll fix that

And sorry to nag about this but do you still plan to expose snap_point() and snap_angle() to GDScript? #11180

I think it could be done sometime. The main problem is that we do not expose the editor classes by now, this should be done to expose snap_point. This could be an enhancement but I think it is not yet a priority.

[BraindeadBZH]

Hi,
First, thanks for your work on the 2D editor, it is more and more usable.

However the limit of 256x256 for the grid is quite limiting. Except if there is a technical limitation, I think not imposing a maximum would make it even more flexible.

[m1ga]

What I would like to see is changing properties like Rotation, Position,.. (all with numbers) by using the mouse scroll-wheel. Default increase/decrease value should be the current amount of zeros with a 1 at the end. Perhaps even a setting to change that.

E.g.

Rotation = 15 deg -> Mouse wheel would be 1 deg per scroll
Scale = 0.5 > Mouse wheel would be 0.1 deg per scroll
and so on

[aki-cat]

hey, are there any plans for keyboard shortcuts to zoom in/out/reset zoom?

[groud]

hey, are there any plans for keyboard shortcuts to zoom in/out/reset zoom?

Not yet. But it should be easily added.
Which keys are you thinking about ?

[Calinou]

@groud These are the de facto standard shortcuts for zooming (e.g. in Web browsers and GUI text editors):

• Ctrl++ to zoom in,
• Ctrl+- to zoom out,
• Ctrl+0 to reset the zoom level to 100%.

[NathanLovato]

Big plus for Calinou: I instinctively tried these shortcuts a few times in Godot already, as they work in pretty much all image editing programs, LibreOffice/Office, Tiled map editor, etc.

[groud]

Solved by #18412

[aki-cat]

@groud that was fast! thanks!

[NathanLovato]

@groud Avant l'éditeur il peguait bieng mais le Gillou il se boulégue té
(means 😄 )

[groud]

@NathanLovato Arf. Que cagarél ! ^^

[justinluk]

The "not selectable children" icon is still showing up in the editor when you hide the node it is applied to. I would think that the icon would hide along with the node once it's hidden.

[Anutrix]

Any updates on the remaining 3 features?

[Anutrix]

Add a configurable key to zoom by moving the mouse.

Isn't this done by #18412?

[MCrafterzz]

No scale snapping feels kinda strange. Also can't the text in the bottom left corner (rotating 15 degrees for example) be added to 2d as well.

[Janglee123]

Currently, wheel scroll only does zoom-in zoom-out for 2d mode and doesn't take input of modifier keys. It would be nice to use the input combination of modifier keys with a mouse wheel for navigation.

Like here is the scheme used by Inkscape.

• mouse wheel: Scroll vertically
• Shift + mouse wheel: Scroll horizontally
• ctrl + mouse wheel: Zoom

[akien-mga]

Closing as most items on this tracker have been fixed over the years.

The remaining items should be moved to dedicated proposals on godot-proposals so that they can be implemented independently.