(SOLVED) How do I draw a curved dotted path?

I know the shape painter which has the quadratic and bezier curved lines.
But if I want to draw a dotted line or circles (or any sprite) along a curve what is the smartest way to do that?

To plot points along a Bezier or quadratic curve, you use a variable (say named š‘”) that goes from 0 to 1 in steps, for example 0.02. For each š‘”, you calculate the position using the curve’s formula and plot a point or place an object at each position.

I can dig up an old project I have that uses this technique and post the relevant parts if you like.

2 Likes

Here’s a link to a small demo that contains a Bezier curve editor (too many relevant parts to put in a post), a ā€œGamePlayā€ scene that displays the saved Bezier curve as a series of dots and an extension of 3 functions to calculate the Bezier curve points and length.

Editor scene:
RMB click creates a curve.
LMB to drag the control points and the ends of the line.
ā€œsā€ saves the curve details to storage.

In the ā€œGamePlayā€ scene, the curves are plotted with points automatically. Play around with the point parameters to get more or less points.

2 Likes

Hi @MrMen How do I use the files in the ZIP file, do I install it somehow as an extension or as a new Gdevelop project?

It’s a complete GDevelop project. Unzip it to a folder on your computer and open the json file with GDevelop.

1 Like

Thnx @MrMen But the segment length calculation seems to be off - at least I can get results like this:


Where the distance between the dots are different…?
I am no expert on bezier curves and calculations but is this expected?

(the curve looks like this:

Yeah, that doesn’t look right. I used it for a C curve as part of ball run in a pinball machine and hadn’t tried it out for an S curve. I’ll have a look at the functions when I have a moment.

1 Like

You get points using this extension:
https://wiki.gdevelop.io/gdevelop5/extensions/curved-movement/

2 Likes

hmmm this is great for when the game is running.
But I would like to define the curved paths in the editor…
Do any of you know if it is possible to take @mrMens curve generating code and turn it into an extension extending the editor? So you could draw bezier curves on your editor canvas like dragging in a sprite?

Unfortunately, you cannot draw in the editor.

There is also no support for Editor GUI extensions, so that is not something you’d be able to add without outright forking the engine/making a PR and modifying the source code.

1 Like

You could define the curve or path using objects for the start, end and control points. It wouldn’t be the same as an actual line but it would give you a rough idea. You could add an image to line up the nodes and other items and then delete it at runtime.

1 Like

I think I’ll go along these lines:
Make a debug/edit mode where I can add and edit the bezier lines when running. And then manually add the resulting values to a Scene Data Array Structure: BezierPoints - this is somewhat what @MrMen does and I can get help from the code he supplied.
It is not ideal, but that is the solution I can get my head around.
Alternatively I could store the curves in a firebase solution where all my players could get the curves from - but that is not the one I’m going with right now - that will be ā€œa future improvementā€ :slight_smile:

1 Like

And the ingame result

1 Like

That’s great @chucklebeast - I think the yellow dots need to be darker though.
It would be great to have an in-engine path editor - there’s a button ā€˜create paths’. Click this and then drag nodes to create and name paths - and assign these paths to shape painter objects in events.

1 Like