Dragging with Scroll Factor

Demonstrates how to drag Game Objects that have different scroll factor values. The input system automatically accounts for the scroll factor, ensuring the object tracks the pointer correctly even when configured for parallax movement.

Dragging with Scroll Factor, running
1024 × 768
GitHub
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 image1 = this.add.sprite(200, 300, 'eye').setInteractive();
        const image2 = this.add.sprite(400, 300, 'eye').setInteractive();
        const image3 = this.add.sprite(600, 300, 'eye').setInteractive();

        this.input.setDraggable([ image1, image2, image3 ]);

        image1.setScrollFactor(1);
        image2.setScrollFactor(0.7);
        image3.setScrollFactor(0.5);

        this.input.on('gameobjectover', (pointer, gameObject) =>
        {

            gameObject.setTint(0x00ff00);

        });

        this.input.on('gameobjectout', (pointer, gameObject) =>
        {

            gameObject.clearTint();

        });

        this.input.on('dragstart', (pointer, gameObject) =>
        {

            gameObject.setTint(0xff0000);

        });

        this.input.on('drag', (pointer, gameObject, dragX, dragY) =>
        {

            gameObject.x = dragX;
            gameObject.y = dragY;

        });

        this.input.on('dragend', (pointer, gameObject) =>
        {

            gameObject.clearTint();

        });
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.WEBGL,
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Dragging22 examples