Problem with touch (javascript) in cocos creator

Cocos Creator
#1

Hi,

I’m rather new in cocos2d and Cocos Creator. I’ve already made some progress in my game, but the touch interaction with the game seems not to work in Cocos Creator. Based on findings on the internet I thought I needed to work like the code below, but touching on my screen doesn’t lead to the ‘help’ message. The ‘back’ node fills the whole screen and the ‘debug’ node is a label node in which I write down values of my script.

I would think that this script gives “HELP” wherever is touched on the screen, but it doesn’t.

Any help is greatly appreciated.

Guy

debugUpdate: function (string) {
    this.debug.string = 'DEBUG: ' + string.toString();
},

setInputControl: function() {
	var listener={
		event: cc.EventListener.TOUCH_ONE_BY_ONE,
		swallowTouches: true,
		onTouchBegan: function(touches,event){
			this.debugUpdate("HELP")
		},
		onTouchMoved:function(touches,event){
		},
		onTouchEnded:function(touches,event){
		}
	}
	cc.eventManager.addListener(listener, this.back);
},

onLoad: function() {
    this.setInputControl();
},
#2

perhaps you have to change the node order. The debug node should be higher than the back node.

#3

I would not recommend you to use eventManager: “This class is deprecated. This class has been deprecated, please use cc.systemEvent or cc.EventTarget instead.”
For touch you should use the EventTarget that every node has.

startingMyTouchCallback(event) {
    let loc = event.touch.getLocation();
    cc.log("Someone started touching the canvas (screen) at "+loc.x+", "+loc.y);
},
stopingMyTouchCallback(event) {
    cc.log("It stoped!");
},

onLoad() {
    // It works only for a node instance, cc.Canvas.instance.node is the entire screen
    cc.Canvas.instance.node.on(cc.Node.EventType.TOUCH_START, this.startingMyTouchCallback, this);
    cc.Canvas.instance.node.on(cc.Node.EventType.TOUCH_END, this.stopingMyTouchCallback, this);
},

Nevertheless, your code should also work, but I think you are confusing the objects. The listenerFunction will call the debugUpdate of the object that called it, meaning that it will try to call the this.back.debugUpdate, it is a javascript feature about the ‘this’ keyword.
Also, are you sure that this.back is a Node, not a Component?

So the correct code would be like: (but don’t use it, use the above)

setInputControl: function() {
    var myCurrentObject = this;
    var listener = {
        event: cc.EventListener.TOUCH_ONE_BY_ONE,
        onTouchBegan: function(touch, event) {
            myCurrentObject.debugUpdate("HELP");
            return true; // Don't capture the event, otherwise it will not get the onTouchEnded
        },
        onTouchEnded: function(touch, event) {
        }
    };
    cc.eventManager.addListener(listener, this.node);
}
#4

all you really need is:

	onLoad: function () {
		this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
    },

    onTouchStart: function () {
         this.debugUpdate('HELP');
    }
#5

Hi all,

Thanks for the help. I managed to get it to work based on the comments of Gabrui and skara.

Guy