How to get touch position relative to a Node

Cocos Creator
1

I have a ParentNode (say 1000px by 1000px) and a centered ChildNode (say 200px by 200px).
ChildNode has a script attached to it and listens to touch events and prints out Touch Coordinates. How can I get the Touch Coordinates relative to the ChildNode instead of Touch Coordinates with regard to whole screen?
For example when I click on the lower left corner of ChildNode, I want to see (10, 10) instead of (400, 400).

// Script attached to the centered child node
onLoad(){
  this.node.on(Node.EventType.TOUCH_START, this.onTouch, this);
}

onTouch(event : EventTouch){
  console.log(event.getLocation());
}
2

You can try :

image
image1011×310 34.8 KB

use function getLocationInView() to get Position in screen.

Other, can u see more at: Cocos Creator 3.8 API - EventMouse

3

This will do it. Will fail if cameras ortho height is changed. I only tested in ‘preview in editor’ mode.

@property({ type: Node }) public gameCam: Node;

onLoad() {
    this.node.on(NodeEventType.TOUCH_START, this.onTouch, this);
}

onTouch(event: EventTouch) {
    let childnode: Node = event.getCurrentTarget();

    let touch: Vec2 = event.getUIStartLocation();
    let node: Vec3 = childnode.getWorldPosition();
    let camera: Vec3 = this.gameCam.getPosition();
    console.log(`touch coords to node origin:${(touch.x - node.x) + camera.x}`);

    let nodePosVec2: Vec2 = new Vec2(node.x, node.y);
    let cameraPosVec2: Vec2 = new Vec2(camera.x, camera.y);
    let nodeTouchPos: Vec2 = touch.subtract(nodePosVec2).add(cameraPosVec2);
    console.log(`touch coords to node origin:${nodeTouchPos}`);
}