Top Only Input Over and Out Events
Demonstrates how to use the topOnly property to enable input events for all overlapping Game Objects simultaneously, rather than just the one on the top layer.
800 × 600
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 ()
{
const sprite1 = this.add.sprite(400, 300, 'eye').setInteractive();
const sprite2 = this.add.sprite(450, 350, 'eye').setInteractive();
const sprite3 = this.add.sprite(500, 400, 'eye').setInteractive();
// If you disable topOnly it will fire events for all objects the pointer is over, regardless of place on the display list
this.input.topOnly = false;
// Events
this.input.on('gameobjectover', (pointer, gameObject) =>
{
gameObject.setTint(0xff0000);
});
this.input.on('gameobjectout', (pointer, gameObject) =>
{
gameObject.clearTint();
});
}
}
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);