Can't set position of node to where mouse is clicked

Cocos Creator
#1

Iv’e tried a jumble of things but right now I’m not trying to do anything fancy, I just want to click the screen and set the position of that node.

Right now when I use console.log(event.getLocation()), the center point is in the bottom left corner so when I use node.setPosition(event.getLocation()) the center point is off like so:
Screen Shot 2023-11-06 at 12.54.09 PM

How can make it so that the node is placed right where I clicked?

#2

I guess your event.getLocation() returns World coordinates. While for setPosition() you need to set local coordinates.
You can use node.setWorldPosition(), or convert world coordinates to local with node.inverseTransformPoint() and then set result Vec3 with ‘setPosition()’.

        const worldLocation = event.getLocation();
        node.setWorldPosition(worldLocation.x, worldLocation.y, 0);

By the way I tried with Input.EventType.MOUSE_DOWN and its event.getLocation() returns Vec2, for me its wont even work as you mentions. Thats why I used (worldLocation.x, worldLocation.y, 0).

#3

hmm I got it working with getUILocation() and setWorldPosition() and for tweens I used inverseTransformPoint() and then set the position in tween. It seems a pretty weird way to go about it to me and I thought there was a straight forward way.

export class GameCtrl extends Component {

    @property(Node)
    box: Node = null

    onLoad() {
        input.on(Input.EventType.MOUSE_DOWN, this.onMouseDown, this)
    }

    start() {

    }

    update(deltaTime: number) {

    }

    onMouseDown(event: EventMouse) {
        const mousePos = event.getUILocation();
        const newPos = this.node.inverseTransformPoint(new Vec3, new Vec3(mousePos.x, mousePos.y, 0))
        //this.box.setWorldPosition(mousePos.x, mousePos.y, 0)
        tween(this.box).to(0.1, { position: newPos }).start()
    }
}
#4

You can use { worldPosition : new Vec3(x,y) } in tween too. (as i checked 0 as 3rd argument is not necessary)
But anyway converting from Vec2 to Vec3…

const worldLocation = new Vec3(event.getUILocationX(), event.getUILocationY());
tween(node).to(0.1, {worldPosition: worldLocation}).start();

I can not find any Event type that returns Vec3.

Also if parent of the Node have the same size as World and anchor point in 0,0 (0.5,0.5 is by default) - node’s local coordinates should be the same as world and no convertation will be necessary. But this way is more weird I think as your node can have any tree-level of the parent from situation so…
Vec3’s became with 3 version of CC how I remember - with 3D adding, and now we should work with them even on 2D projects…

Maybe I’m missing something, but this is how I see it)

1 Like