Jump to content

Understand toLocal result


Recommended Posts

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


    // create our little bunny friend..S
    var bunny = new PIXI.Sprite(texture);
    bunny.interactive = true;
    bunny.buttonMode = true;
    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.x = 200;
    bunny2.y = 200;

    // add it to the stage

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



Link to comment
Share on other sites

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

Link to comment
Share on other sites

Look into the code I created a simple example:

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

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

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

// add it to the stage


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

Link to comment
Share on other sites

  • 3 weeks later...
  • 1 year later...

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?




Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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
            $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



Link to comment
Share on other sites

  • 3 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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