Phaser 3: Clone Sprite on click & drag immediately

Question

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);
}

Answer 1

Maybe I'm missing something, but a simple solutionwould be.

1. create two images/buttons, one normal and one as placeholder
   • the placeholder will be cover by the original, except when it is dragged
2. on drag, just drag the normal button
3. on the end of dragging reset the position of the normal button

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/[email protected]/dist/phaser.js"></script>

...this should be even more performant, than creating and destroying image/buttons...