Jump to content

Getting world coordinates from a Phaser.Graphics object


Recommended Posts

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.



Link to comment
Share on other sites

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)}



Link to comment
Share on other sites

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.




Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...