Movement glitches with drag facility

Phaser 3
1

Hello guys,

I’m struggling to prevent movement glitches with my puzzle game when the mouse is still depressed after movement begins. Ideally, you’d expect a player to drag the object in the direction of travel and let it go. But if they still hold on, the UFO objects experience movement glitches which is a bad user experience.

For context, the level below shows a game where a player can move any of the UFO objects in the 4 corners to collect the yellow stars on the screen. The code below is what I currently have. I’m not sure how I can disable drag (or user input) when drag starts to prevent the movement glitches. Maybe if I can change my approach entirely from drag to swipe to allow the UFO objects move freely without glitches, I’m happy to do so. At the moment, the code samples I am seeing for the swipe effect don’t work as desired.

I’m new to Phaser, so will appreciate any help that can be given.

image
image778×1204 177 KB

  this.input.on('dragstart', function (pointer, gameObject) {
            gameObject.setTint(0xff0000);

            currentX = gameObject.x;
            currentY = gameObject.y;

            draggedObject = gameObject;

            // gameObject.input.draggable = false;

        });

        this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
            gameObject.x = currentX;
            gameObject.y = currentY;

            // gameObject.disableInteractive();

            if (dragY > currentY + dragThreshold) { // moving down
                gameObject.body.setVelocityY(dragSpeed);
                gameObject.body.setVelocityX(0);

                // gameObject.input.draggable = false;
                isDragging = true;
                
            } else if (dragY < currentY - dragThreshold) { // moving up
                gameObject.body.setVelocityY(-dragSpeed);
                gameObject.body.setVelocityX(0);

                // gameObject.input.draggable = false;
            } else if (dragX > currentX + dragThreshold) { // moving right
                gameObject.body.setVelocityX(dragSpeed);
                gameObject.body.setVelocityY(0);

                // gameObject.input.draggable = false;
            } else if (dragX < currentX - dragThreshold) { // moving left
                gameObject.body.setVelocityX(-dragSpeed);
                gameObject.body.setVelocityY(0);

                // gameObject.input.draggable = false;
            }
        });

        this.input.on('dragend', function (pointer, gameObject) {
            gameObject.clearTint();
            isMoving = true;
        });
2

I updated my code to have input.mouse.enabled=false which appears to prevent the glitches as desired. The issue I now have is re-enabling mouse input when the UFO completes its movement. Setting input.mouse.enabled=true has no effect. Not sure what else I need to do to re-enable mouse.input. My updated code looks like this:

          this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
            gameObject.x = currentX;
            gameObject.y = currentY;

            if (dragY > currentY + dragThreshold) { // moving down
                gameObject.body.setVelocityY(dragSpeed);
                gameObject.body.setVelocityX(0);

                isDragging = true;
                
            } else if (dragY < currentY - dragThreshold) { // moving up
                gameObject.body.setVelocityY(-dragSpeed);
                gameObject.body.setVelocityX(0);

                isDragging = true;
            } else if (dragX > currentX + dragThreshold) { // moving right
                gameObject.body.setVelocityX(dragSpeed);
                gameObject.body.setVelocityY(0);

                isDragging = true;
            } else if (dragX < currentX - dragThreshold) { // moving left
                gameObject.body.setVelocityX(-dragSpeed);
                gameObject.body.setVelocityY(0);

                isDragging = true;
            }

            if(isDragging){
                console.log('isDragging:true');
                isDragging = false;

                // self.scene.pause();
                game.input.mouse.enabled = false;
            }
        });

    function playerStopped() {
        console.log('playerStopped');
        game.input.mouse.enabled = true;   *// this has no effect*

        moveFarmers();
    }
3

For a swipe interaction you should probably avoid the drag events.

Or, if you use dragging, maybe see input/zones/drop zone. I probably wouldn’t use velocity with dragging.

4

Thanks @samme for your reply. I’m certainly open to other ideas that will enable me initiate a movement of an object by dragging it (for example from left to right) and it would continue on its own till it gets to the side wall. I had tried using gravity, but that had its own limitations in the sense that it ‘stuck’ to the side wall (e.g. brown bricks in my screenshot above).

What techniques did you have in mind to either avoid a drag event as well as the velocity?