Getting world coordinates from a Phaser.Graphics object

[smezo]

Hi all.

 

I'm a beginner Phaser user and game developer. I'm working on a game where I use the Phaser.Graphics class to draw a line. At some other point in the game I need to get the lines world coordinates, which I cannot seem to get in any simple way. I have probably missed something so I'm sure my workaround is far from the best way to do this. For sprites it seems like I can do mySprite.x but not with the graphics object.

 

After debugging in Chrome I found that the only place I could find the information I was looking for was through myLineGraphicsObject.graphicsData. I'm using TypeScript and I had to add this to the definitions file in order to access it.

var gd = myGraphicsObject.graphicsData;var x1 = gd[0].points[0];var y1 = gd[0].points[1];var x2 = gd[0].points[2];var y2 = gd[0].points[3]; 

I would be grateful if somebody could point me in the right direction.

 

Thanks!

[smezo]

Nobody? 

[george]

Hi smezo,

graphicsData is the right spot you have found to retrieve the list of points you have drawn so far. But this array is not intended to be accessed as it's a very internal implementation detail of the pixi graphics engine. It's a no-no in short

 

I would rather introduce some kind of data structure in your case. An array holding all of your important coordinates so you can access them later.

In pseudo code:

var points = []points.push({x:0, y:0} //startpoints.push({x:100, y:0}points.push({x:100, y:100}points.push({x:0, y:100}points.push({x:0, y:0}g.moveTo(points[0].x,points[0].y)for(var i=1; i< points.length;i++){  point = points[i]  g.lineTo(point.x,point.y)}//Now you have drawn it but you can still access your array with all points (that's your very own data structure ) via points//If you need to do something else than a lineTo you could also store the kind of the action to do with other parameters like so:points.push({x:0, y:0, type: 'lineto'}points.push({x:0, y:0, radius:20, type: 'circle'}//later in the code:if(point.type === 'line'){  g.lineTo(point.x,point.y)}else if(point.type === 'circle'){  g.drawCircle(point.x,point.y, point.radius)}

cheers

George

[smezo]

Thanks for taking your time to answer this, George.

 

It is good to get a confirmation that there is no straight forward way to do this and as I suspected my current way of solving this is really a big no-no (I did have to dig into the pixi docs to figure my "workaround" out afterall)

 

I also appreciate you providing some pseudo-code and I'm fully onboard with your approach and thinking here.

 

Cheers,

Thomas