Extract Bezier curves from SVG file?

Phaser 3
1

Hi Everyone!

I’m working on a game where the artist is defining curved paths for moving platforms. She’s drawing the paths in Illustrator, and I’ll be re-creating those paths in Phaser as a guide for the platforms to follow.

Does anyone know if it’s possible to extract the Bezier curve info from an SVG file and use that to re-construct the save curve in Phaser?

For example, the SVG path data looks like this:

<path class="cls-1" d="M.5,366.18c0-159.74,304-623.74,800-175.74" />

It looks like there are 4 values there (?). Would anyone know how to apply them to this example?

 var startPoint = new Phaser.Math.Vector2(100, 500);
    var controlPoint1 = new Phaser.Math.Vector2(50, 100);
    var controlPoint2 = new Phaser.Math.Vector2(600, 100);
    var endPoint = new Phaser.Math.Vector2(700, 500);

    curve = new Phaser.Curves.CubicBezier(startPoint, controlPoint1, controlPoint2, endPoint);

Thanks!

2

Hmm, looks strange. The only way this makes sense is if ‘c’ uses ‘,’ instead of space as separator, and ‘-’ as comma…

Then maybe these are the coordinates:
5, 366.18
0, 159.74
304, 623.74
800, 175.74

So, just load the svg as html, and parse as domElement. See this example.

3

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Path_commands

4
5

Thanks so much, @samme and @Milton! That makes lots of sense and seems very doable! I’ll try and report back :slight_smile: