Pixel Perfect Input with Atlas Frames
Demonstrates how to enable pixel-perfect input detection on a sprite using a trimmed frame from a texture atlas.
800 × 600
class Example extends Phaser.Scene
{
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.atlas('atlas', 'assets/atlas/megaset-2.png', 'assets/atlas/megaset-2.json');
}
create ()
{
const sprite = this.add.sprite(400, 300, 'atlas', 'hello').setInteractive({ pixelPerfect: true });
sprite.on('pointerover', function ()
{
this.setTint(0xff0000);
});
sprite.on('pointerout', function ()
{
this.setTint();
});
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.AUTO,
parent: 'game-container',
width: 800,
height: 600,
backgroundColor: '#efefef',
scene: Example
};
const game = new Phaser.Game(config);