Ability to easily draw lines/curves in UI

Currently, if I wanted to make a line in a gui, I’d have to use a Frame for every major angle, and I’d have to segment my line into multiple pieces. This is not a problem for straight lines with single segments, but for multi-segment lines:

  • Each new angle would require another frame.
  • If the line needs to be changed in any way, every frame needs to be updated.
  • Curving lines can be very difficult for developers to create (almost impossible for non-scripters).

Roblox developers already use lines for numerous use-cases. This would just add more options and make it a lot easier:

Proposed solution

Why not create a Line gui object? A line is fairly basic and should allow for a lot of flexibility.

  • The line would need to have a start and end property (preferably UDim2).
  • Having a rotation property for the start and end would allow for curving lines.
  • Having end and start head properties (Image, Size, Color, ZIndex) would make it a lot easier to create arrows.
  • And being able to specify how the arrow should be charted (Bezier control point specification, minimum angle, or maybe an enum: straight, 90° turns or smooth) would allow for more stylistic choices.

Alternative suggestions

  • A Path object
    Similar to a line object, except that instead of having a start and end goal, it would be up to the user to specify way-points that make up the line. This is already a fairly common feature for vector editing software and drawing APIs. As long as the preview of the path in Studio is accurate, this would fulfill my requirements. Whoever for the average use case, this would be overkill.
  • A NodeFrame object
    What inspired this request was wanting to create a node based editor. Such as [Roblox’s Dialog Editor], Blender’s Shader Editor, or Natron’s Node Graph. Having a Frame similar to a ScrollingFrame would work to solve the original problem, whoever it does not solve the root cause.

If Roblox is able to address this feature request, it would make development of UI that uses (curved) lines between 2 points much more convenient, faster, and also more performant (because no excess of frames/images would need to be used/loaded to accomplish the task, if it was a built-in engine feature).

39 Likes

Support. I’m currently working on something that uses graphs to visualize data, and I had to create a graph module that draws the lines out of many Frames with trigonometry.

It ends up making tons of Instances, and is not very performant. Being able to draw lines and curves in-engine would be extremely useful to me.

(You can find this module open-sourced here.)

12 Likes