Top Only Over and Out Events

Demonstrates how to toggle the topOnly input property to control whether hover events fire only for the topmost object or for all overlapping Game Objects.

Top Only Over and Out Events, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
    }

    create ()
    {
        for (let i = 0; i < 14; i++)
        {
            this.add.sprite(100 + i * 30, 100 + i * 30, 'eye').setInteractive();
        }

        //  If you disable topOnly it will fire events for all objects the pointer is over
        //  regardless of their place on the display list
        this.input.setTopOnly(true);

        //  Events

        this.input.on('gameobjectover', (pointer, gameObject) =>
        {

            gameObject.setTint(0xff0000);

        });

        this.input.on('gameobjectout', (pointer, gameObject) =>
        {

            gameObject.clearTint();

        });

        const text = this.add.text(10, 10, 'Input.topOnly: true', { font: '16px Courier', fill: '#00ff00' });

        this.input.on('pointerdown', function (pointer)
        {
        
            if (this.input.topOnly)
            {
                this.input.setTopOnly(false);
                text.setText('Input.topOnly: false');
            }
            else
            {
                this.input.setTopOnly(true);
                text.setText('Input.topOnly: true');
            }

        
        }, this);
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.WEBGL,
    parent: 'game-container',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

More in Game Object19 examples