How can I generate vertex data from an SVG?

Question

I am trying out the Phaser game engine, and am interested in making a vector graphics game (simple black and white like Asteroids), but I want to use vector graphics instead of raster PNGs.

I was looking at this example, which looks like what I want to do...

Where I am stuck is, say I draw a simple Asteroids style ship in Illustrator, consisting of 3 connected lines. How do I export that data into an array of vertices that would work with the setPolygon() method in Phaser/Box2d?

Answer 1

Perhaps the following function (it's JavaScript) could help you.

The first parameter is an element of type SVG, it can be a path, rect, circle, etc. The second parameter is the distance of segments. Returns an array as a javascript object, which is generally used in Phaser or matter js.

function toVertex(pathSVG, n){
  let pathLength = pathSVG.getTotalLength();
  let vtx = [];
  var i = 0;
  while(i < pathLength){
    let arr =  pathSVG.getPointAtLength(i);
    vtx.push({x:arr.x, y:arr.y});
    i+=n;
  }
  return vtx;
}