I have a sprite that works as a button, but as you press it, it duplicates and lets you drag the duplicate. I've almost got it to work, however currently you have to click first to create a duplicate and are only able to drag after a second click. I'd like to be able to click once and immediately be able to drag.
It is important that the DUPLICATE gets dragged, as opposed to the original, since the original has all the click-functions.
create() {
sprite = scene.add.sprite(0,0, "clean", "showerhead_0000");
sprite.setInteractive({ useHandCursor: true });
sprite.on('pointerdown', () => {
dragTool(scene, options[idx], sprite);
});
this.input.on('drag', function(pointer, gameObject, dragX, dragY) {
gameObject.x = dragX;
gameObject.y = dragY;
});
this.input.on('dragend', function(pointer, gameObject) {
gameObject.destroy();
gameState.clean_cursor = false;
});
}
function dragTool(scene, option, sprite){
let activePointer = scene.input.activePointer;
let clone = scene.add.sprite(sprite.x,sprite.y, sprite.texture.key, sprite.frame.name);
gameState.clean_cursor = clone;
gameState.clean_cursor.setInteractive();
scene.input.setDraggable(gameState.clean_cursor);
}
Maybe I'm missing something, but a simple solutionwould be.
this should work the same, and it is no so complicated.
Here a working example:
let Example = {
preload () {
this.load.spritesheet('brawler', 'https://labs.phaser.io/assets/animations/brawler48x48.png', { frameWidth: 48, frameHeight: 48 });
},
create () {
let buttonPos = { x:0, y:0};
let buttonPlaceholder = this.add.image(buttonPos.x, buttonPos.y, 'brawler', ).setOrigin(0, 0);
let button = this.add.image(buttonPos.x, buttonPos.y, 'brawler', ).setOrigin(0, 0);
this.isDragging = false;
button.setInteractive({ useHandCursor: true });
this.input.setDraggable(button);
this.input.on('drag', function(pointer, gameObject, dragX, dragY) {
gameObject.x = dragX;
gameObject.y = dragY;
});
this.input.on('dragend', function(pointer, gameObject) {
gameObject.x = buttonPos.x;
gameObject.y = buttonPos.y;
});
}
}
const config = {
type: Phaser.AUTO,
width: 400,
height: 200,
scene: [ Example ]
};
const game = new Phaser.Game(config);<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>...this should be even more performant, than creating and destroying image/buttons...