Understand toLocal result

[josescxavier]

I'm reading some tutorials about pixi.js and I can't understand the result I got from toLocal. I expect the result to be 100,100 however I got 200,200.

Console output:

bunny1: 100 100
bunny2: 200 200
200 200

Code:

    // create our little bunny friend..S
    var bunny = new PIXI.Sprite(texture);
    bunny.interactive = true;
    bunny.buttonMode = true;
    bunny.anchor.set(0.5);
    bunny.scale.set(1);
    bunny.x = 100;
    bunny.y = 100;

    // create our little bunny friend..S
    var bunny2 = new PIXI.Sprite(texture);
    bunny2.interactive = true;
    bunny2.buttonMode = true;
    bunny2.anchor.set(0.5);
    bunny2.scale.set(1);
    bunny2.x = 200;
    bunny2.y = 200;

    // add it to the stage
    app.stage.addChild(bunny);
    app.stage.addChild(bunny2);

    console.log("bunny1:",bunny.x,bunny.y)
    console.log("bunny2:",bunny2.x,bunny2.y)
    console.log(bunny.toLocal(bunny.position, bunny2).x,bunny.toLocal(bunny.position, bunny2).y)

 

[ivan.popelyshev]

Bunny's position is (100,100).

If you put that point in bunny2 local system, global coords are  (300, 300).

Relative to bunny1 its (200,200).

[josescxavier]

6 hours ago, ivan.popelyshev said:

Bunny's position is (100,100).

If you put that point in bunny2 local system, global coords are  (300, 300).

Relative to bunny1 its (200,200).

I understand what you say here but I can't infer this from the documentation :S

[ivan.popelyshev]

Its difficult to write that kind of abstractions in docs. 

I know of other places like this, for example Texture frame/orig/trim, I tried to rewrite it, may be I made it better but i cant judge 

Look at implementation, and may be we rewrite the docs together?

 https://github.com/pixijs/pixi.js/blob/dev/src/core/display/DisplayObject.js#L305 , https://github.com/pixijs/pixi.js/blob/dev/src/core/display/DisplayObject.js#L261

[josescxavier]

Look into the code I created a simple example:

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

var bunny1 = new PIXI.Sprite.fromImage('required/assets/basics/bunny.png')
bunny1.anchor.set(0.5);
bunny1.scale.set(1);
bunny1.x = 200;
bunny1.y = 200;

var bunny2 = new PIXI.Sprite.fromImage('required/assets/basics/bunny.png')
bunny2.anchor.set(0.5);
bunny2.scale.set(1);
bunny2.x = 300;
bunny2.y = 300;

// add it to the stage
app.stage.addChild(bunny1);
app.stage.addChild(bunny2);

console.log("bunny1:",bunny1.x,bunny1.y)
console.log("bunny2:",bunny2.x,bunny2.y)
console.log(bunny1.toLocal(bunny2.position))

bunny1 position on bunny2 frame shouldn't be (-100,-100)?

[ivan.popelyshev]

You wrote code for bunny2 position in bunny1 coords, its (100,100)

[josescxavier]

On 9/22/2017 at 11:37 PM, ivan.popelyshev said:

You wrote code for bunny2 position in bunny1 coords, its (100,100)

English is not my native language and I read it on the opposite way. Got it

 

[ivan.popelyshev]

6 minutes ago, josescxavier said:

English is not my native language and I read it on the opposite way. Got it

 

That's why you have to read source code to be sure. Coordinates bullshit is very difficult to describe.

[shepelevstas]

Could you help me with this? It's very difficult to grasp. The documentation terms and wording are confusing.

I have a Sprite (named 'bunny') inside a Container (named 'doc') inside another Container ('doc and shadow' and it can be dragged around with spacebar held down) inside stage.

Working on a graphics editor like a simple Photoshop.

While dragging 'bunny' I was using .on('mouse... events. The handler function gets PIXI-event with its' event.data.getLocalPosition(). I used it, feeding 'doc' Container to it to calculate new 'bunny' position. But for the functionality I'm trying to implement I have to use native app.view.addEventListener('mousedown', event =>. And that native event does not have .data.getLocalPosition(), only event.x and event.y. I tried doc.toLocal(... and bunny.toLocal(... while reading documentation.

Experimenting I tried logging doc.toLocal(bunny) and noticed that though while doc and bunny didn't move relative to each other, dragging the whole 'doc and shadow' Container around changed the result of doc.toLocal(bunny) method. Why??

The documentation says PIXI.Container.toLocal(position, from, point, skipUpdate), where position is "The world origin to calculate from." So does that mean that doc.toLocal(bunny) calculates the position of doc in terms of bunny coordinates (since it's "world origin")? But in previous post you wrote that it's the opposite. So 'bunny's position (which is "The world origin to calculate from.") is translated to doc's coordinates?? (which I was hoping would be the same as event.data.getLocalPosition(doc), but I failed)

The documentation also says that PIXI.Container.toLocal "Calculates the local position of the display object relative to another point." Is "the display object" is the Container on which the method is called? Then again doc.toLocal(bunny) means doc local position in bunny coordinates? "another point" - is it "position" (the bunny in my case) or is it the "point" from .toLocal(position, from, point, skipUpdate)??

Could you please bring a little light to it?

 

 

 

[ivan.popelyshev]

Look, it also difficult to me. Every time i just look in the code and i have those matrices written down on paper

Without an example that i can help you fix I cant do anything because describing this stuff is like describing a newbie how to play chess beyond the moves of figures. The only way to get it is practice and writing down matrices on paper.

local/global is also bad , maybe "relative to stage" and "relative to bunny" is more clear  

toLocal takes coords from param1 relative to param2, the result is the same point on screen but relative to "this" object.

 

> Experimenting I tried logging doc.toLocal(bunny) and noticed that though while doc and bunny didn't move relative to each other, dragging the whole 'doc and shadow' Container around changed the result of doc.toLocal(bunny) method. Why??

Because you forgot first param, its doc.toLocal(new PIXI.Point(0,0), bunny);

[shepelevstas]

Thank you for rapid reply! I wouldn't expect it in such an outdated thread!

After some experiments I figured out many of my questions:

"position" in Container.toLocal(position... is a position in global coordinates! A global position. Not the root of world(or global) coordinates as I would parse "world origin to calculate from". The very important implicit piece of information about .toLocal is that it expects the "positioin" to be global! So when I try to calc doc.toLocal(bunny) (which is dumb even without understanding all that since bunny.parent is doc ? looks like yesterday my head stopped working after many hours of trying to make some sense out of it ?, and when I drag the whole scene around, the result changes since global position of the doc changes! And I guess its' global position is accounted for when calculating some local position (local to the doc) of some global "position".

So the equivalent for PIXI mouse event handler event.data.getLocalPosition(docContainer) in context of native mouse events would be docContainer.toLocal(globalMousePosition) where globalMousePosition is set with the help of app.renderer.plugins.interaction.mapPositionToPoint(globalMousePosition, event.x, event.y).

Yes, maybe "relative to" is a better term . I sea what you mean talking about chess. I feel like I'm trying to study Go (strategy board game). The game has only 10 rules, but the strategy is so complex and hard to put in words that the entrance learning curve is very steep

I hope this would be useful to someone like me yesterday struggling to understand and stumbling upon this thread in Google

I would say that PIXI.Container.toLocal(position) converts a global position into local coordinates of the Container. And the IMPORTANT part is that it expects the "position" param to be in global coordinates! And I have no idea what PIXI.Container.toLocal(position, from) does ?

[jonforum]

I confess I also had a lot of difficulties with this and still today! despite my daily use.
Yet I often used this kind of features in big publisher like adobe DUIK or spine2d.

I often get incomprehensible results, but it is difficult to explain.
I think that picture is a bit more talkative. 

 

Example senario
I want transfere the gem in the slot.
All hierarchy are container.
Mouse is in "stage=>mouse"
Gem is in "stage=>mouse=>item"
target slot is in "stage=>huds=>pinMenue=>bar1=>slot"

If you want transfer the gem in the slots , but from same position.
You can compute getGlobalPosition, but it more short with toLocal
But sometime the logic give weird result!

 

The logic here , if we want transfere the gem in the slots but at same screen position
We need compute global position thats give you :

x: 14,y:-36

Than, you make some tests with toLocal and you keep the most near result

See if i dont add From , i get wrong result, in this case , need from.
Test 2 and 4 are fine, but 4 not perfect.
You can look the yellow circle thats show the pivot.

so for this, i do something like that.

            const localTest = $mouse.holdItem.toLocal(slot.item,slot.item);
            slot.item = $mouse._holdItemID; // setter: create add new sprite gem in slot1
            slot.item.position.copy(localTest);
            $mouse.setItemId(null); // remove mouse item
            TweenLite.to(slot.item.position, 1, {x: 0, ease: Elastic.easeOut.config(1.2, 0.8)});
            TweenLite.to(slot.item.position, 0.6, {y: 0, ease: Bounce.easeOut });

Hope this can help, but i agree , toLocal it hard to understand.
I would have preferred a more intuitive term like

PIXI.compute.localFrom(gem,slot);

@+

[nobody_123]

The documentation makes no sense at all.

Bunny position relative to bunny2 is -100,-100

What the documentation says is practically grammatically meaningless. I often have this trouble with PIXI. The documentation is literally unreadable.