Node won't go to touched locaton

Cocos Creator
#1

Below i get touched location and move the node to that position which in theory works but it doesn’t (the coordinates become that location but it’s not at that position i don’t know how to explain so i uploaded a video sorry i was too lazy to record on pc)

  onLoad: function () {
        this.node.parent.on('touchstart', ( event ) => {
            console.log('Tourched!');
            var xpos = event.getLocationX();
            var ypos = event.getLocationY();

    var aksi = cc.moveTo(0.2,xpos,ypos);
    this.node.runAction(aksi);
    console.log(xpos +" VE "+ ypos);
    console.log(this.node.getPositionX() +" VE "+ this.node.getPositionY());

    /*var aksi1 = cc.moveBy(0.2, cc.p(0,-100));
    this.runAction(aksi1);*/
    
});

some details

det
det854×794 50.4 KB

#2

It is because the coordinates of the touch location are given in reference to the global/window coordinate system.

Your ball is in the Canvas reference system, so you have a offset that is exactly the half of the screen size.

To fix this:

  • you can either put your ballon outside the canvas in the node tree (not recommended); or
  • you can transform the global coordinates to the Canvas coordinates:
    • by subtracting directy cc.Canvas.instance.size.width/2 and cc.Canvas.instance.size.height/2 from your xpos and ypos (not recommended)
    • by using the function to do this transformation for you

I did not test this, but I think this one will do the trick:
this.node.convertToNodeSpace(event.getLocationInView());
Please, refer to http://docs.cocos.com/creator/api/en/classes/Node.html#converttonodespace

onLoad: function () {
    this.node.parent.on('touchstart', ( event ) => {
        console.log('Tourched!');
        var point = this.node.convertToNodeSpace(event.getLocationInView());
        var xpos = point.x;
        var ypos = point.y;

    var aksi = cc.moveTo(0.2,xpos,ypos);
    this.node.runAction(aksi);
    console.log(xpos +" VE "+ ypos);
    console.log(this.node.getPositionX() +" VE "+ this.node.getPositionY());

});

Beware of the this keyword.
Also, depending on who is the ‘this’ you migth need to change it to this.node.parent.convert… instead of the this.node.convert…

#3

it didn’t fix node without parent makes balloon vertically go away and with parent does’nt change anything

#4

OK, I have got it. Now it works and I have tested it:

// Ballon.js
cc.Class({
    extends: cc.Component,

    properties: {

    },

    myClick(evento) {
        let pos = this.node.parent.convertToNodeSpaceAR(evento.getLocation());
        // You can also use this.node.parente.convertTouchToNodeSpaceAR(evento);
        this.node.setPosition(pos);
    },

    onLoad() {
        // The last parameter is the object that should call myClick function
        this.node.parent.on(cc.Node.EventType.TOUCH_START, this.myClick, this);
        // It is the bind for the this keyword in this.myClick
    }
});

It is important to make the tranformation Anchor Relative (AR), because the origin (anchor) of the canvas is (0.5, 0.5) and not the (0, 0).
It was a mistake of mine to use the getLocationInView(), the View coordinate has the origin in the upper left corner and the y-axis inverted, it should be just getLocation().

So what is happening? We have the touch position in global coordinates, and we have to convert the global coordinate to the local coordinate that the ballon is in, that is his parent’s coordinate system.
For example, if you click the lower left coner, that is the (0, 0) global coordinate, we have to transform it to the (-width/2, -height/2) coordinate of the canvas.

#5

https://streamable.com/d02ts so it worked but it always goes a little below the touched location @Gabrui

#6

stupid me it worked when the anchor was 0,5 and 0,5, but when one of them is 6 it doesnt it always goes a little below the position so how do i fix this or do i have to keep the anchor 0,5

#7

so yeah im an idiot :smiley: i got the same result just by changing its position in first place so yeah :smiley: