Input over/out events not triggered on mobile when sliding finger

[fariazz]

I'm working on an on-screen touch controller similar to the one in Phaser examples page:  http://examples.phaser.io/_site/view_full.html?d=input&f=virtual+gamecontroller.js&t=virtual%20gamecontroller

 

My game (this is for a new Phaser tutorial!):   http://static.pablofarias.com/monster-kong/

 

I'm experiencing the following issue on a Nexus 5 with Android L (Chrome, Firefox and the Intel XDK App Preview app), when I do this sequence without taking the finger off the phone:

 

right arrow button -> left arrow button -> right arrow button -> left arrow button --> lift the finger
 

After I lift the finger, the character keeps on moving to the left, because the left arrow button never triggers a "out" event.

 

Console output on the phone when doing this "right left right left" sequence without lifting the finger:

 

right input down main.js:200
right input out main.js:195  
left input out main.js:174   --> we see an "out" event for the left button, but no "over" event was ever triggered for this element
right input over main.js:190
right input out main.js:195
left input over main.js:169
right input up main.js:205  --> no "up" or "out" event is triggered for the left button even after lifting the finger, that's why the character will keep on moving to the left after lifting the finger.

 

(note: if you do the sequence in the opposite order, the same thing happens just to the other side)

 

Version of Phaser 2.2.2

 

Code:

//this game will have only 1 statevar GameState = {  //initiate game settings  init: function() {    //adapt to screen size, fit all the game    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;    this.scale.pageAlignHorizontally = true;    this.scale.pageAlignVertically = true;    //init physics system    this.game.physics.startSystem(Phaser.Physics.ARCADE);    //define some constants    this.RUNNING_SPEED = 220;    this.JUMPING_SPEED = 550;  },  //load the game assets before the game starts  preload: function() {    this.load.image('ground', 'assets/images/ground.png');        this.load.image('platform', 'assets/images/platform.png');        this.load.image('player', 'assets/images/player.png');        this.load.image('fire', 'assets/images/fire.png');        this.load.image('goal', 'assets/images/goal.png');        this.load.image('arrowButton', 'assets/images/arrowButton.png');        this.load.image('actionButton', 'assets/images/actionButton.png');          },  //executed after everything is loaded  create: function() {    //size of the game world    this.game.world.setBounds(0, 0, 360, 700);    //floor    this.ground = this.game.add.sprite(0, 638, 'ground');    //enable physics properties (the floor wont move)    this.game.physics.arcade.enable(this.ground);    this.ground.body.immovable = true;    //level data. location of elements    var levelData = {      platformData: [        {x: 0, y: 430},        {x: 45, y: 560},        {x: 90, y: 290},        {x: 0, y: 140}      ],      fireData: [        {x: 200, y: 538},        {x: 60, y: 408},        {x: 190, y: 408},        {x: 180, y: 268},        {x: 200, y: 118}      ]    };        //group to keep all the hard platforms    this.platforms = this.game.add.group();    //enable physics properties    this.platforms.enableBody = true;    //create each platform    var self = this;    var platform;    levelData.platformData.forEach(function(element){      platform = self.platforms.create(element.x, element.y, 'platform');      //we don't need to enable body on each element, as we enabled body for the entire group, so body will be present here      platform.body.immovable = true;    });    //group for fire    this.fires = this.game.add.group();    this.fires.enableBody = true;    //create fire    var fire;    levelData.fireData.forEach(function(element){      fire = self.fires.create(element.x, element.y, 'fire');    });    //create goal    this.goal = this.game.add.sprite(20, 90, 'goal');    this.game.physics.arcade.enable(this.goal);    //create player    this.player = this.game.add.sprite(10, 545, 'player');    this.game.physics.arcade.enable(this.player);    this.player.body.gravity.y = 1000;    //object for custom parameters we might want to add    this.player.customParams = new Object();    //don't leave the world boundaries    this.player.body.collideWorldBounds = true;    //the camera will follow the player in the world    this.game.camera.follow(this.player);    //arrow keys    this.cursors = this.game.input.keyboard.createCursorKeys();    //add touch control    this.createButtons();  },  update: function() {    //the player collides with the ground and platforms    this.game.physics.arcade.collide(this.player, this.ground);    this.game.physics.arcade.collide(this.player, this.platforms);    this.game.physics.arcade.overlap(this.player, this.fires, this.burn, null, this);    this.game.physics.arcade.overlap(this.player, this.goal, this.win, null, this);    //platformer controllers    this.player.body.velocity.x = 0;    //get the active input id    var activePointer = this.game.input.activePointer.id;    //moving to the left with the keys or touch    if(this.cursors.left.isDown || this.player.customParams.isMovingLeft) {      this.player.body.velocity.x = -this.RUNNING_SPEED;    }    //moving to the right with the keys or touch    else if(this.cursors.right.isDown || this.player.customParams.isMovingRight) {      this.player.body.velocity.x = this.RUNNING_SPEED;    }    //jumping with the up arrow or action button    if((this.cursors.up.isDown  || this.player.customParams.canJump) && this.player.body.touching.down) {      this.player.body.velocity.y = -this.JUMPING_SPEED;      //if action button is kept pressed it wont jump more times      this.player.customParams.canJump = false;    }  },  //burn player  burn: function(player, fire) {    console.log('auch!');    game.state.start('GameState');  },  //win the game  win: function() {    alert('you win!');    game.state.start('GameState');  },  render: function() {    this.game.debug.bodyInfo(this.player, 0, 100);  },  //create touch pad and enable input  createButtons: function() {    this.leftArrow = this.game.add.button(20, 535, 'arrowButton');    this.rightArrow = this.game.add.button(110, 535, 'arrowButton');    this.actionButton = this.game.add.button(280, 535, 'actionButton');    //fix to camera    this.leftArrow.fixedToCamera = true;    this.rightArrow.fixedToCamera = true;    this.actionButton.fixedToCamera = true;    //left arrow button    this.leftArrow.events.onInputOver.add(function(){      this.player.customParams.isMovingLeft = true;      console.log('left input over');    }, this);    this.leftArrow.events.onInputOut.add(function(){      this.player.customParams.isMovingLeft = false;      console.log('left input out');    }, this);    this.leftArrow.events.onInputDown.add(function(){      this.player.customParams.isMovingLeft = true;      console.log('left input down');    }, this);    this.leftArrow.events.onInputUp.add(function(){      this.player.customParams.isMovingLeft = false;      console.log('left input up');    }, this);    //right arrow button    this.rightArrow.events.onInputOver.add(function(){      this.player.customParams.isMovingRight = true;      console.log('right input over');    }, this);    this.rightArrow.events.onInputOut.add(function(){      this.player.customParams.isMovingRight = false;      console.log('right input out');    }, this);    this.rightArrow.events.onInputDown.add(function(){      this.player.customParams.isMovingRight = true;      console.log('right input down');    }, this);    this.rightArrow.events.onInputUp.add(function(){      this.player.customParams.isMovingRight = false;      console.log('right input up');    }, this);    //action button    this.actionButton.events.onInputDown.add(function(){      this.player.customParams.canJump = true;    }, this);    this.actionButton.events.onInputUp.add(function(){      this.player.customParams.canJump = false;    }, this);  }};//initiate the Phaser frameworkvar game = new Phaser.Game(360, 592, Phaser.AUTO);game.state.add('GameState', GameState);game.state.start('GameState');

[fariazz]

I solved by adding some code I had missed from the example, which has to do with a bug.

 

Adding this in update() solved it:

if (this.game.input.currentPointers == 0 && !this.game.input.activePointer.isMouse) {      this.player.customParams.isMovingLeft = false;      this.player.customParams.isMovingRight = false;    }