Pointerout not triggering when I enabled multi-touch

Phaser 3
1

I am creating a mobile game that requires 2 or more input touches but the problem is the ...on('pointerout', ...) won’t trigger when pointer leaves the game object. It works fine as expected without this on the game config:

var config = {
       ...,
       input: {
           activePointers: 4 // or any number
       },
       ...
   }

Here is the code snippet of my problem:

var config = {
      type: Phaser.AUTO,
      width: 320,
      height: 320,
      parent: 'phaser-game',
      scene: {
        create: startGame
      },
      
      input: {
        activePointers: 4
      }
      
    };
    game = new Phaser.Game(config);
    
    function startGame() {
        var text = this.add.text(game.config.width/2, game.config.height/2, 'NONE', {
          color: '#000000', fontSize: 32
        }).setDepth(10).setOrigin(0.5, 0.5);
        
        var test = this.add.rectangle(
        0, game.config.height/2,
        game.config.width, 64, 0xff0000).setOrigin(0, 0.5)
        .setInteractive()
        .on('pointerdown', function() {
          test.setFillStyle(0x00ff00);
          text.setText('pointerdown');
        })
        .on('pointerup', function() {
          test.setFillStyle(0x0000ff);
          text.setText('pointerup');
        })
        .on('pointerout', function() {
          test.setFillStyle(0xff0000);
          text.setText('pointerout');
        })
    }

Try testing it out with the activePointers enabled then try it again without the activePointers. Is this a bug or am I missing something? By the way I’m only using my phone so I haven’t test it out on a desktop.

1 Like