RunoseAI creator 3.6.2 How to follow the mouse movement

Developer
1

I used RunoseAI creator 3.6.2 to create an empty 2D project, then added a monochrome sprite node under the Canvas node, and mounted a script on this monochrome sprite node. The content of the script is that I listened to a touch start and touch move event for this node in the start function. When it was touched for the first time, I recorded the mouse position of the touch and the initial position of the node. Then, when moving, I subtracted the mouse position at the beginning from the new mouse position to get an offset of the x-axis and y-axis. The initial position of the node plus this offset will theoretically be the position of the node after moving. However, the node offset will become larger and larger. . . . .

start() {
let x1, y1, x2, y2;
this.node.on(Node.EventType.TOUCH_START, e => {
let pos = e.getLocation();
x1 = pos.x;
y1 = pos.y;
x2 = this.node.position.x;
y2 = this.node.position.y;
});

    this.node.on(Node.EventType.TOUCH_MOVE, e => {
        let pos = e.getLocation();
        this.node.setPosition(x2 + (pos.x - x1), y2 + (pos.y - y1), 0);
    });
}

Then I tried what was said on the forum: using the getUILocation function and then using the convertToNodeSpaceAR function to convert the coordinates to set the node position. This was even more magical. The node jumped back and forth during the movement…

start() {

    this.node.on(Node.EventType.TOUCH_MOVE, e => {
        let pos = e.getUILocation();
        this.node.setPosition(this.getComponent(UITransform).convertToNodeSpaceAR(v3(pos.x, pos.y, 0)));
    });
}

Dear experts, what should we do?

1 Like
2

I searched for a similarly confusing question on CSDN. The blogger gave the correct way to use it, which can make the node follow the mouse movement without the situation of increasing offset.

this.node.on(Node.EventType.TOUCH_MOVE, e => {
let pos = e.getUILocation();
this.node.setWorldPosition(pos.x, pos.y, 0);
});

The difference between 3.x and 2.x is quite big.

3

Generally use input.on(Input.EventType.MOUSE_MOVE, this.onMouseMove, this);
instead of this.node.on

4

This solution is problematic. The center point will only follow when the anchor point is (0.5, 0.5).

5

Only one line of code is needed to implement the touch movement (mouse drag or touch drag) component of a 2d node! Just put the code in place: import { Component, Node, Vec3, _decorator } from “cc”; const { ccclass } = _decorator /** * Node touch movement component*/ @ccclass(‘TouchMoveCom’) export class TouchMoveCom extends Component { onLoad() { /** * One line of code to implement touch movement of UI nodes*/ this.node.on(Node.EventType.TOUCH_MOVE, e => this.node.translate(new Vec3(e.getUIDelta().x, e.getUIDelta().y))) } }

6

This solution is also problematic. The center point will follow only when the rotation is 0. :rofl: