Search code examples
javascriptmelonjs

Convert local (viewport relative coordinates) to global (layer coordinates)


I am trying to convert viewport coordinates to the global(layer) coordinates.

I have tried like described in docs, but it seems like doesn't work:

var result= me.game.viewport.localToWorld(x,y, me.game.viewport.AXIS_BOTH);

I have, working vise versa combination (converting global to local):

me.event.subscribe("pointerdown", function (event) {
  // convert the given into local (viewport) relative coordinates
  var pos = me.input.globalToLocal(event.clientX, event.clientY);
});

Why I think that me.game.viewport.localToWorld doesn't work? Because for my entity I have very big difference in coordinates (like more than 200 points), when clicking on it.

Code snippet:

game.PlayerEntity = me.Entity.extend({

    /**
     * constructor
     */
    init:function (x, y, settings)
    {
        var self=this;
        self.leftMouseClicked=false;
        me.event.subscribe("pointerdown", function (event) {
            if(!self.leftMouseClicked) {
                var result= me.game.viewport.localToWorld(self.pos.x,self.pos.y, me.game.viewport.AXIS_BOTH);
                console.log(result);
                console.log(event.clientX);
                console.log(event.clientY);
                self.leftMouseClicked=true;
            }

        });
...

So my question is:

How can I convert viewport coordinates to layer one, something similar like we have for converting global to local?


Solution

  • I have found the solution, it was getting offset from me.game.viewport.pos.

    Result code:

    var self=this;
    me.event.subscribe("pointerdown", function (event) {
            //me.game.viewport.pos -- offset
            var pos = me.input.globalToLocal(event.clientX, event.clientY);
            self.mouseXCoord = pos.x+me.game.viewport.pos.x;
            self.mouseYCoord = pos.y+me.game.viewport.pos.y;
    });