Works in browser but not in simulator

Cocos Creator
#1

I am very new to Cocos Creator… I have an event listener for the mouse:

…
var listener = cc.EventListener.create({

        event: cc.EventListener.MOUSE,
        
        onMouseDown: function(event){
          
            var mouseX = event.getLocationX();
            var mouseY = event.getLocationY();
            
            var mouseGridX = Math.ceil(mouseX/60);
            var mouseGridY = Math.ceil(mouseY/60);
            
            var self = event.getCurrentTarget();
            self.getComponent('scr_player').mouseClick(mouseGridX,mouseGridY);
            
        },
        
    });

…

When I run this in my browser everything works fine, but when I run it in the simulator I get:

Simulator: TypeError: self.getComponent(…) is null
at a: “self.getComponent(‘scr_player’).mouseClick(mouseGridX,mouseGridY)” (assets/Script/scr_player.js:103:16)

It’s odd that it calls my function in the browser but can’t in the simulator.

Some help would be great!

Thanks in advance.
-Sam

#2

have you tried the node.on eventlistener?

code from puzzle example (it’s intended for swiping to move around the player but it works for mouse on and off as well)

        this.node.on(cc.Node.EventType.TOUCH_START, function (event) {
            self._touching = true;
            self._touchStartPos = event.touch.getLocation();
        }, self);
        this.node.on(cc.Node.EventType.TOUCH_END, function (event) {
            if (!self._touching || !self._isMapLoaded || self._succeedLayer.active) return;

            self._touching = false;
            var touchPos = event.touch.getLocation();
            var movedX = touchPos.x - self._touchStartPos.x;
            var movedY = touchPos.y - self._touchStartPos.y;
            var movedXValue = Math.abs(movedX);
            var movedYValue = Math.abs(movedY);
            if (movedXValue < minMoveValue && movedYValue < minMoveValue) {
                // touch moved not enough
                return;
            }

            var newTile = cc.p(this._curTile.x, this._curTile.y);
            var mapMoveDir = MoveDirection.NONE;
            if (movedXValue >= movedYValue) {
                // move to right or left
                if (movedX > 0) {
                    newTile.x += 1;
                    mapMoveDir = MoveDirection.LEFT;
                } else {
                    newTile.x -= 1;
                    mapMoveDir = MoveDirection.RIGHT;
                }
            } else {
                // move to up or down
                if (movedY > 0) {
                    newTile.y -= 1;
                    mapMoveDir = MoveDirection.DOWN;
                } else {
                    newTile.y += 1;
                    mapMoveDir = MoveDirection.UP;
                }
            }
            this._tryMoveToNewTile(newTile, mapMoveDir);
        }, self);

cheers

#3

Thanks, that’s a cool way to detect touch/mouseDowns on a node but for what I’m trying to do, it doesn’t work.

Maybe I should have explained a little better.

Basically, what I’m trying to do is monitor global clicks of the mouse looking for this:

  1. A click on my player to select him
  2. A click somewhere on the screen, which is where the player will move to.

Your code works for only #1: when the player is clicked. BUT I also need to catch the click after the player has been selected to know where to move the player.

All I really want to do is be able to call a function, mouseClick() , on my player script from inside an event listen script on the same player script.

#4

… It may be better to use a global event listener that is not attached to the player but something else that then somehow runs the player’s mouseClick() function (which checks the if the player was clicked by looking at mouseX and mouseY compared to it’s x and y). But like I said, I’m new to Cocos and don’t know how to do that yet.

#5

I figured out a way to make it work in both browser and simulator. All that was needed was to set a variable before my listener that references ‘this’. Which in my code was ‘var player = this;’

var player = this;
var listener = cc.EventListener.create({

        event: cc.EventListener.MOUSE,
        
        onMouseDown: function(event){
          
            //var player = event.getCurrentTarget();
          
            if(!player.getComponent('scr_player').getEnabled()) {
                return;
            }
          
            var mouseX = event.getLocationX();
            var mouseY = event.getLocationY();
            
            var mouseGridX = Math.ceil(mouseX/60);
            var mouseGridY = Math.ceil(mouseY/60);
            
            player.getComponent('scr_player').mouseClick(mouseGridX,mouseGridY);
            
        },
        
    });
    
    cc.eventManager.addListener(listener, this.node);

Thanks for your help. I will probably be using the ‘node.on’ at some point!

1 Like