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?


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});
  return vtx;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.