onInputOver doesn't trigger after x times

[Quinten]

Hi,

I am creating a very simple game where the player needs to draw a pattern bij moving the mouse or his finger(mobile) over a grid of 9 "tiles" 3x3.

The problem is that about half of the time when i get to the 8th tile/sprite the onInputOver doesn't trigger the first time i get on it. I need to move the pointer off the tile and back on it again in order for it to trigger. In the code it's console.log('over') that supposed to trigger but doesn't.

Can someone shed some light onto why this is happening?

Below is some code that could be relevant. Note that 'tile' is something specific for this game and not a Phaser tile.

var gameState = {

    tileGroup: undefined,
    tiles: [],
    currentPath: [],
    touchedPath: [],
    tileIsDown: false,

    create: function () {

        this.tileGroup = game.add.group();
        this.tileGroup.x = game.world.centerX - 160;
        this.tileGroup.y = game.world.centerY - 160;

        var t = 0;
        for (var y = 0; y < 3; y++) {
            for (var x = 0; x < 3; x++) {
                var tile = this.tileGroup.add(gameState.createTile(x * 110, y * 110));
                tile.t.index = t;
                tile.t.square.inputEnabled = true;
                tile.t.square.events.onInputOver.add(this.tileOver, this);
                tile.t.square.events.onInputDown.add(this.tileDown, this);
                tile.t.square.events.onInputUp.add(this.tileUp, this);
                this.tiles.push(tile);
                t++;
            }
        }

        this.loadNextWord();

    },

    tileDown: function (target) {
        console.log('down');
        console.log(target.parent.t.text.text);
        this.touchedPath = [];
        this.touchedPath.push(target.parent.t.index);
        this.tileIsDown = true;
    },

    tileOver: function (target) {
        console.log('over');
        if (this.tileIsDown && (this.touchedPath.length < 8) && (this.touchedPath.indexOf(target.parent.t.index) == -1)) {
            console.log(target.parent.t.text.text);
            this.touchedPath.push(target.parent.t.index);
        }
    },

    tileUp: function (target) {

        console.log(this.currentPath);
        console.log(this.touchedPath);

        var touchedCorrrect = false;
        if (this.touchedPath.length > 7) {
            for (var p = 0; p < this.currentPath.length; p++) {
                if (this.touchedPath[p] == this.currentPath[p]) {
                    touchedCorrrect = true;
                } else {
                    touchedCorrrect = false;
                    break;
                }
            }
        }

        if (touchedCorrrect) {
            this.loadNextWord();
            alert('RIGHT!');
        } else {
            alert('WRONG!');
        }

        this.tileIsDown = false;
    },

    createTile: function (x, y) {

        var tile = game.add.group();
        tile.x = x;
        tile.y = y;

        tile.t = {};

        tile.t.square = tile.create(0, 0, 'square');

        tile.t.borderTop = tile.create(0, 0, 'line');
        tile.t.borderRight = tile.create(100, 0, 'line');
        tile.t.borderRight.rotation = Math.PI * .5;
        tile.t.borderBottom = tile.create(0, 96, 'line');
        tile.t.borderLeft = tile.create(4, 0, 'line');
        tile.t.borderLeft.rotation = Math.PI * .5;

        tile.t.text = game.add.text(50, 50, "A", null, tile);
        tile.t.text.anchor.setTo(0.5);
        tile.t.text.font = fontName;
        tile.t.text.fontSize = 64;
        tile.t.text.fill = '#18323a';


        return tile;
    }
};

 

[Quinten]

In the meanwhile i solved my issue by checking the activePointer in update:

    update: function () {

        if (this.tileIsDown && (this.touchedPath.length < 8)) {
            for (var t = 0; t < this.tiles.length; t++) {
                if (this.touchedPath.indexOf(t) > -1) {
                    continue;
                }
                if ((game.input.activePointer.position.x >= this.tiles[t].worldPosition.x) &&
                    (game.input.activePointer.position.x < this.tiles[t].worldPosition.x + 100) &&
                    (game.input.activePointer.position.y >= this.tiles[t].worldPosition.y) &&
                    (game.input.activePointer.position.y < this.tiles[t].worldPosition.y + 100)) {
                        console.log(this.tiles[t].t.text.text);
                        this.touchedPath.push(t);
                    break;
                }
            }
        }

    },