Drawing curves and changes points dynamically

Phaser 3
1

Hi! Before asking, just a note that I’m a beginner exploring Phaser in spare time, after regular job as a biochemist… :slight_smile: So it could be a pretty dummy question sometimes, my apologies to the group in advance.

Can we draw a Bezier curve like closed path and dynamically change points, some points? I’m trying to define oil drop in a scene, but possibly with randomized shape each time. It actually doesn’t matter, but it could be explanatory.
For a last hour and more, I experimented with something simplified like:

preload() {
        this.drop = new Phaser.Curves.CubicBezier(new Phaser.Math.Vector2(100,100),
                                                    new Phaser.Math.Vector2(150,112),
                                                    new Phaser.Math.Vector2(130, 222),
                                                    new Phaser.Math.Vector2(170, 115));
        this.graphics = this.add.graphics();
        this.graphics.lineStyle(5, 0xff00ff, 0.5);
        this.graphics.fillStyle(0xffddff);
    }

    create() {
        
        this.drop.draw(this.graphics);
    }

Actually, at first it was with Path, and a lot of lineTo, as it was just like in BASIC eons ago (yes I’m an old chap reaching 80s tech, that’s why I catch up with Phaser when I got idea to make games in spare time :stuck_out_tongue: ).

Quick Edit: Can we use curve made in Inkscape, and somehow export it to JSON definition, or manipulate with SVG???

2

https://labs.phaser.io/edit.html?src=src/paths/curves/drag%20cubic%20bezier%20curve.js

For SVG I think you would have to parse that yourself.