Drag Distance Threshold
Demonstrates how to use the dragDistanceThreshold property to require the pointer to move a minimum number of pixels before an object starts being dragged.
800 × 600
class Example extends Phaser.Scene
{
constructor()
{
super();
}
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.image('bg', 'assets/skies/cavern1.png');
this.load.image('goblin', 'assets/pics/goblin.png');
this.load.image('spider', 'assets/pics/spider.png');
}
create ()
{
this.add.image(400, 300, 'bg');
this.add.text(16, 16, 'Move 32px before drag starts').setFontSize(24).setShadow(1, 1);
this.add.image(200, 300, 'goblin').setInteractive({ draggable: true });
this.add.image(600, 300, 'spider').setInteractive({ draggable: true });
// The pointer has to move 32 pixels before it's considered as a drag
this.input.dragDistanceThreshold = 32;
this.input.on('drag', (pointer, gameObject, dragX, dragY) => {
gameObject.setPosition(dragX, dragY);
});
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'game-container',
scene: Example
};
const game = new Phaser.Game(config);