Horizontal/Vertical Ruler with guide markers

Suggest to add a horizontal and a vertical ruler to the scene editor with an option to enable/disable it based on user preference. Here’s a mockup of the same.

Developers can click on the rulers in the scene editor and pull out a horizontal and vertical guide and place it on the scene to create easy layouts. Guides placed on the editor can be clicked and moved as required and can be removed/deleted completely. The guides can be saved along with the scene and layout for quick reuse of scenes/layouts.

Here’s a quick mockup video of the feature: HV Ruler mockup vid-GDevelop.mp4 - Google Drive

1 Like

Hey TrinityNeo!

I see that this topic has a similarity to the one that you’ve created before Tool to calculate distance and angle between two points - #6 by Luni in the sense that you want to know the distance or measurements of and between instances.

Why do you request the guides that come from the rulers if GDevelop has a snap-to-grid feature?

Hi Luni,

Thanks for getting back on this.

Consider this idea as an extension to my proposed idea “Distance and Angle marker”. Both ideas can work independently and have different purposes as I mentioned. Before I provide more details, I would like to clarify that my proposed rulers/guide markers are scoped to scene editor only and will be used for reference purpose in the editor only. They will not be available in the event sheet or in the output.

While “Snap objects to a virtual grid” feature does provide an option to snap object to a virtual grid, you need additional setup to use this extension. You need to draw the grid and then snap the object to the grid. Not a one click solution. To ensure that all the dragged objects are snapped to the grid, you need additional events and actions. Also, unlike the proposed markers, the feature works in the runtime also.

The current “Toggle/edit grid” provides an helpful option to configure/view the grid. However, it does not allow us to setup and configure guide/markers on the grid. For instance, I would like to have a dedicated space in the UI Bars for Healthbar/scores which should be placed on the top of the screen with width 400px and Height 100 px, or need to place the icons in both the top bar and the bottom bar aligned to each other with their Y positions different (I do it by matching the X coordinates of both objects and changing their Y coordinates). Currently, there’s no way to imagine/visualize/block the scene space except placing an object of size same as that of block, lock it and then align the remaining objects. We can change the object coordinates as part of the event sheet, but then we have to preview the scene to understand if the placement was correct. With Markers, we can have full picture of scene layout/structure even before placing the object on the scene. In fact, I have created my own markers in Gdevelop to help me visualize layout and accelerate the designing.

My proposed concept can work with or without “Snap objects to a virtual grid”. Using Guides, it is super simple to design a layout on the fly, align objects, adjust/delete the layout/objects per markers. You don’t need to look at instance X and Y coordinates, or to calculate delta distance between objects. Just align the objects per the markers and you are done. No additional events and actions are required to be added to the event sheet. I found such guides extremely helpful to save time and efforts to design a layout.

Hope that helps!