Detects Nodes touched when touching and dragging


I have a game screen with squares (Node) that are generated when the game starts. I have no idea how to do it so that when the player taps and drags, the touched squares change color. The most difficult part is how to get information about the squares (Node) that are touched. You can think of this as dragging and selecting cells in Excel. Any suggestions please? I’m just a student learning to make games with Cocos.

Hello, on how to listen for node click events and get click node information, you can check this article:
https://docs.cocos.com/creator/manual/en/getting-started/first-game-2d/touch.html?h=touch

In addition, to achieve dragging objects through the mouse, you can refer to the following code:

import { _decorator, Component, EventTouch, Node, UITransform, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('DragMove')
export class DragMove extends Component {

    @property(Node)
    touchNode: Node = null;

    start() {
        this.node.on(Node.EventType.TOUCH_MOVE, this.dragMoveNode.bind(this), this);
    }

    dragMoveNode (e: EventTouch) {
        var touchLocation = e.getUILocation();

        var nodeWorldPos = new Vec3(touchLocation.x, touchLocation.y, 0);
        var nodePos = this.touchNode.parent.getComponent(UITransform).convertToNodeSpaceAR(nodeWorldPos);
        
        this.touchNode.setPosition(nodePos);
    }

    update(deltaTime: number) {
        
    }
}

59459.zip (598.8 KB)

2 Likes