Runtime 2D Curve / Path Editor Tool for Godot 4

This tool script adds Bézier curve manipulation handles for mouse and touch screens inside your running game (or app).

It's a spin-off tool I made by cherry picking code from the Scalable Vector Shapes 2D plugin.

Try the online demo

Add to your game

You can add a curve editor to your game in a couple of ways, the simplest being: just add the RuntimeCurveEditor2D node to your scene and give it at least 2 points.

Because RuntimeCurveEditor2D extends from Path2D you can use it inside the editor in exactly the same way.

In game controls

Play the example on Itch or in the example scene in the example_curve_editor resource folder to test these controls in action.

Mouse controls

• Double click on a line to add a point
• Drag point by holding left mouse button
• Turn an edge into a curve by dragging it
• Double click on a point to toggle curve control handles on / off
• Drag curve control handles to change curves
• Drag curve control handles while holding shift to symmetrically mirror them
• Right click on any handle / point to delete it (at least 2 points will remain)

Touch controls

• Double tap on a line to add a point
• Drag points around while touching the screen
• Turn an edge into a curve by dragging it
• Double tap on a point to toggle curve control handles on / off
• Drag curve control handles to change curves
• Long tap for 1.2 seconds on any handle / point to delete it (at least 2 points will remain)

Advanced uses

The curve editor is a very powerful tool (thanks to how Godot works internally, really).

As you can see in the demo, it can control other types of nodes as well, like a Line2D, a Polygon2D and a CollisionPolygon2D.

Direct a parent Line2D, Polygon2D or CollisionPolygon2D

The simplest way to gain in-game control over one of these node types is to simply add it as a child node.

It will automatically lock the parent node in the editor.

The curve editor will try to match the shape of the parent node automatically using a curve fitting algorithm.

Assign more nodes

But of course you may want to have a visible shape that also collides. How to do both?

In the inspector you can assign more nodes under Assigned Nodes > Other Nodes:

Styling your in game editor

In the example, the styling changes when touch events are detected. This is done by changing the properties that you can finder under Looks in the inspector:

• Antialiased: will draw antialised handles and outline
• Outline Color: the color of the hint line
• Outline Width: the width of the hint line
• Handle Size: size of all the handles (radius)
• Handle Color: fill color of the handles
• Handle Stroke Color: outline color of the handle
• Handle Stroke Width: width of the handle outline
• Handle Hovered Color: handle fill color while hovering over and interacting with the handles
• Handle Hovered Stroke: handle outline color while hovering over and interacting with the handles

Curve settings

You can configure how fine or coarse your curves become at cost of performance using these 2 settings:

• Max Stages
• Tolerance Degrees

These are passed to Curve2D.tessellate(), so be sure to read those docs.