Working with Points, Rects, and the scene graph

[westy]

Hi,

I'm starting out with pixi.js, and really liking it so far! One thing that has really been puzzling me, however, is how to work with points and the scene graph.

Let's say I have a problem like this, with two containers, and objects within those containers that essentially need to interact across the scene graph.

In theory, the problem is trivial, however what I'm not quite sure of is the 'PIXI way' of doing this. For example, what's the best way to get some arbitrary point and convert its position to a global one? How about getting a DisplayObject's global position? And is there an easy way to transform a point from one local coordinate system to another?

I've looked at the functions toLocal and toGlobal but they don't seem to be working as I'd expect them to. The documentation seems very thin and without usage examples I'm struggling to see how to use them properly. Also, where do WorldTransform and all of these matrix-related methods come into play? I was of the impression that an object's transform in space could be fully qualified with its point, parent, scale and rotation values so I'm having trouble seeing where these matrix operations step into the picture.

On a related note, I'm having trouble working with objects like PIXI.Point and PIXI.Rectangle. For example, say I wanted to make a helper function that adds two points. My first thought would be to do something like

function add(p1, p2) {
  return new PIXI.Point(p1.x + p2.x, p1.y + p2.y);
}

but that's clearly not right, since it's making a heap allocation every time the function is called! In fact, anywhere I find myself working with points, I keep wanting to treat them as value types, and I am not seeing a good way to use these structures conveniently, passing to and from functions, without making constant allocations.

If I could see an example of PIXI code that works with points in one of these ways, I think it would be really helpful.

Thanks!

Daniel

[ivan.popelyshev]

Good question!

var p2 = container2.toLocal(p1, container1, tempPoint);
if (rect.contains(p2)) {
   ...
}

[westy]

Thanks @ivan.popelyshev!

What would 'tempPoint' be in this example?

Also, thinking about my question regarding heap allocations - the Point returned by toLocal isn't being allocated as a new point, right? So the function is returning a reference to an internal point somewhere? What happens if I modify p2?

[ivan.popelyshev]

2 hours ago, westy said:

Thanks @ivan.popelyshev!

What would 'tempPoint' be in this example?

Also, thinking about my question regarding heap allocations - the Point returned by toLocal isn't being allocated as a new point, right? So the function is returning a reference to an internal point somewhere? What happens if I modify p2?

Its exactly what you are thinking: if tempPoint is null, result will be allocated, and if not, tempPoint will be returned. Please clone pixi.js github project dev branch and check it for yourself  Also that way you'll be able to help us with development if you see some strange places in the code.

[westy]

44 minutes ago, ivan.popelyshev said:

Its exactly what you are thinking: if tempPoint is null, result will be allocated, and if not, tempPoint will be returned. Please clone pixi.js github project dev branch and check it for yourself  Also that way you'll be able to help us with development if you see some strange places in the code.

The documentation shows toLocal to only take two parameters. The source code linked to in the documentation also confirms this.

Is the documentation outdated? 

I'm using typescript, and the typings file also references the current documentation (not that you can do anything about that, but it does present a problem for me).

[ivan.popelyshev]

I see it in pixi v4 and its jsdocs 

pixi v3 https://github.com/pixijs/pixi.js/blob/master/src/core/display/DisplayObject.js#L422 

pixi v4 https://github.com/pixijs/pixi.js/blob/dev/src/core/display/DisplayObject.js#L381

there are jsdocs. I dont know how it isnt in jsdocs