Coordinates

[batman]

Guys, hi,  spent couple hours to figure out how to combine local and global coordinates. 

The issue: I have a stage, there is a gameboadr on this stage, the gameboard holds many elements with coordinates related to this gameboard. Then I add element on game stage. It is animated effect. So when I click on element on the gameboard. It passes itself as parametr to that animation and trigger it. But, animation is displayed in a wrong place (it just need to be on the stage, not on gameboard). What I try to do is simply display that effect on top of the element. The gameboard scale is 0.5, the element is scaled to 0.9, the effect scale is 1, the anchor for all objects is 0.5.  The relation as follows: 

app.view (pixi app/canvas)->> Game.stage (where effect is placed) ->>Gameboard->> Elements

I did as follows: 

Animations.rocketRun = function (elementOnBoard) {

    let frames = [];

    for (let i = 0; i < 25; ++i) {
        frames.push(PIXI.Texture.fromImage(picture_' + i + '.png'));
    }
    let anim = new PIXI.extras.AnimatedSprite(frames);

    //anim is my effect should be put on top of elementOnBoard,so actually cover it, only of X axis
    //anim.x = -319 + CELL_SIZE + SPACE; manual calculation, bad approach
    //anim.x = Game.stage.toGlobal(elementOnBoard.position).x;// wrong
    //anim.x = Game.stage.board.toGlobal(elementOnBoard.position).x;//wrong
    //anim.x = elementOnBoard.parent.toGlobal(elementOnBoard.position).x); //like on tutorial, but got Cannot read property 'toGlobal' of null, on tutorial is says: "And it will work even if you don't know what the cat's parent container currently is."
    anim.x = elementOnBoard.getGlobalPosition().x; // finally supposed to be the best one, but...
   
    Game.stage.addChild(anim);

    anim.anchor.set(0.5);
    anim.animationSpeed = 0.1;
    anim.loop = false;

    anim.play();
};

P.S. I found a solution during making this post. The problem was, I think scale. I simply adjusted the coordinates calculation of my effect as below (multiply on scale, and deducted one of my constant - manual adjusment points). Indeed there is some inaccuracy, not sure why, but I adjusted by adding custom number. Could you explain why? Thanks,

  anim.x = elementOnBoard.getGlobalPosition().x * 0.5 - SPACE-19;

[botmaster]

Just create a second container on top fo the gameboard, make it mirror position and scale then add to it your graphic and start your animation. Once the animation is over you can even as easily put the graphic back in gameboard. Use containers they make your life much easier.

[jonforum]

on my side all element are in a map Container, and camera move map.
The stage are parent for map container.

So for get reel position with zoom and camera position.
(for position stage, try use pivotXY instead of positionXY)

 

this example debug give me the reel position of mouse , and also the object in stage and inside the map container.

camera position are bind the container pivot.

mapX: ${ (this.x/$camera.zoom.x)+$camera.position.x }

mapY: ${ (this.y/$camera.zoom.y)+$camera.position.y } ||