[Solved] Get all game objects on pointer down?

Phaser 3
1

This example shows how to detect when a game object is clicked on:

https://labs.phaser.io/edit.html?src=src\input\game%20object\custom%20shape%20hit%20area.js

But if multiple objects are overlapping, it only returns the topmost. Is there any way to modify the event to tell to return all objects under the mouse click?

Below is a modified snippet that makes the objects overlap:

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('ball', 'assets/sprites/spikedball.png');
}

function create ()
{
    var ball1 = this.add.image(100, 300, 'ball').setInteractive();
    var ball2 = this.add.image(150, 300, 'ball').setInteractive();
    var ball3 = this.add.image(200, 300, 'ball').setInteractive();

    this.input.on('pointerdown', (pointer, gameObjects) => {
        for (const obj of gameObjects) {
            // I expect the gameObjects array to contain all the objects,
            // but it only contains the topmost
            obj.setTint(Math.random() * 16000000)
        }
    })
}
2

add this line -

this.input.topOnly=false;

1 Like
3

Amazing, thank you!!