Camera drag with smooth stop

Manually dragging the camera with some variables to smooth the camera to a stop on release. Couldn’t find anything simple and working so adding a quick solution here, if you’ve got better please share.

create() {

        this.dragLastX = 0;
        this.dragLastY = 0;
        this.lastDown = 0;

        this.downTime = 0;
        this.dragCheck = false;
        this.camSpeedX = 0;
        this.camSpeedY = 0;

        this.smoothTime = 0;
        this.smoothLastX = 0;
        this.smoothLastY = 0;

        this.input.on('pointermove', this.dragHandler, this);
        this.input.on('pointerdown', this.downHandler, this);
        this.input.on('pointerup', this.upHandler, this);
}

downHandler(pointer) {

        this.dragLastX = pointer.x;
        this.dragLastY = pointer.y;

        // Camera smooth scrolling listener

        this.camSpeedX = 0;
        this.camSpeedY = 0;
        this.dragCheck = false;
}

dragHandler(pointer) {

        let camera = this.cameras.main;

        let distX = (this.dragLastX - pointer.x) * 1.25;
        let distY = (this.dragLastY - pointer.y) * 1.25;

        if (pointer.isDown) {

            this.smoothTime = this.downTime;
            this.smoothLastX = this.dragLastX;
            this.smoothLastY = this.dragLastY;

            camera.scrollX += distX;
            camera.scrollY += distY;
            this.dragLastX = pointer.x;
            this.dragLastY = pointer.y;

        } // if (down)

        // Smooth scroll handling

        this.downTime = this.time.now;
        this.dragCheck = true;
}

upHandler(pointer) {

        let distX = (this.smoothLastX - pointer.x);
        let distY = (this.smoothLastY - pointer.y);
        let elapsed = (this.time.now - this.downTime) || 17;    // Default to 60fps
        let mulTime = (1000 / elapsed);     // Multiply for dist per second

        // Direction, speed

        if (this.dragCheck) {

            this.camSpeedX = distX * mulTime;
            this.camSpeedY = distY * mulTime;

        } // if (dragged)
}

update(time, delta) {

        // Camera smooth scroll updating

        if (this.camSpeedX != 0 || this.camSpeedY != 0) {

            let camera = this.cameras.main;

            let speedX = this.camSpeedX;
            let speedY = this.camSpeedY;
            let reduceTime = 1000;    // Calculate per second

            let scrollX = ((speedX * 2) / reduceTime) * delta;
            let scrollY = ((speedY * 2) / reduceTime) * delta;

            camera.scrollX += scrollX;
            camera.scrollY += scrollY;

            // Reduce speed of scroll

            this.camSpeedX -= (this.camSpeedX * .8) / 100 * delta;
            this.camSpeedY -= (this.camSpeedY * .8) / 100 * delta;

            // Absolute values to stop movement

            let absX = Math.abs(this.camSpeedX);
            let absY = Math.abs(this.camSpeedY);
            if (absX <= 8 && absY <= 8) {
                this.camSpeedX = 0;
                this.camSpeedY = 0;
            } // if (both slowed)

        } // if (camera scrolling)
}
1 Like