I want to process when I tap the screen

Hello. I am looking to process a tap anywhere on the screen in cocos.
To do this, I create a Node called TouchNode in Scene and attach the following source code.


import { _decorator, Component, Node } from 'cc';.
const { ccclass, property } = _decorator;

@ccclass('TouchNode')
export class TouchNode extends Component {
    start() {
     console.log('START');

      this.node.on(Node.EventType.MOUSE_DOWN, (event) => {
        console.log('Mouse down');
      }, this);
    }
}

This source code was adapted from the first description on the following page
ttps://docs.cocos.com/creator/manual/en/engine/event/event-node.html

When I run this, it opens a chrome browser, and when I check the console log with F12, I get a large number of errors.

Searching by the error content, I found it to be the same as the error on the following page
ttps://discuss.cocos2d-x.org/t/cannot-read-properties-of-null-reading-camerapriority/59240

However, I could not find how I solved this problem by looking at pandamicro’s Replay, which is the solution on this page.

Is it related to Canvus?

I couldn’t figure out the problem by looking at this page:
ttps://docs.cocos.com/creator/manual/en/engine/event/event-node.html

In the Demo ui of the Examples in Templates HelloWorld, where the input is detected, there was a button process, but there does not seem to be a process to detect the input itself, as I want to do this time.

This problem is probably very simple, but it is very difficult for me as a new Cocos user.

If you could tell me where the TouchNode should be placed to solve this, that would be great.

Did you attach the TouchNode to the Camera node? Try create an empty Node and attach TouchNode to it.

And the Node attached to TouchNode.ts must be child of a Canvas Node.
image

Thank you for your answer.
What do you mean by “TouchNode to the Camera node”?

I have tried the following two patterns, but could not solve the problem.


・Pattern1
I placed the TouchNode under the Canvus as in the screenshot you posted.

・Pattern2
The one with the TouchNode attached to the Camera.

I guess “attach TouchNode.ts to Camera node” causing your problem, because I got the same error when i did that. If not, forget it. There is another possible reason. Did you not add the UITransform component to the node(Pattern1 is right)

Yes, this is a UITransform.
This was caused by UITransform.
First, I had created an EmptyNode, renamed it to TouchNode, and attached the TouchNode.
However, this does not solve the problem, as the UITransform is not attached, so moving it under Canvus does not solve the problem.
However, if I create an EmptyNode under Canvus, it is created with the UITransform attached, so this error does not occur, and the problem is solved!

It is a bit strange that the same method of creating EmptyNode produces different created ones, but thanks to you the problem is solved.