Fixing collision between physics body/mouse, acceleration

Phaser 3
1

I’m making a cute little game, more of a interactive fidget toy than a game, where a grid of squares gets pushed by the mouse then returns to a base point. Sort of like a doorstop spring, looking directly at the end of the spring.

Right now I have a quick little addition algorithm in the update method of the scene, where each physics body (square) will slowly move back to a base point. However, when the mouse physics body (right now it’s a physics body that follows the pointer) collides with any of the squares, the algorithm stops working

Any ideas on how to make sure the squares consistently return back to their spawn point? Also would appreciate any tips on how to make the mouse have a consistent physics body so it can push the squares around. When I make the physics body position = the pointer, collision stops working

class A extends Phaser.Scene {

    acceleration = 5;

    create(){
        const graphic = this.make.graphics({x: 0, y: 0, add: false});
        graphic.fillStyle(0xaaaaaa,1);
        graphic.fillRoundedRect(0, 0, 50, 50, 5);
        graphic.fillStyle(0xffffff,1);
        graphic.fillRoundedRect(5, 5, 40, 40, 5);
        graphic.generateTexture('icon', 50, 50);

        this.squares = this.physics.add.group({
            key: 'icon',
            repeat: 2,
            setXY: {x: 200, y: 200, stepX: 75}
        });
        this.squares.children.iterate( child => {
            child.setPushable(true);
            child.baseXY = [child.x, child.y];
            child.x = 100;
            child.y = 100;
        });

        this.testFollow = this.physics.add.image(600, 600, 'square');
        this.input.on('pointermove', (pointer) => {
            this.physics.moveToObject(this.testFollow, pointer, 140);
        })

        this.physics.add.collider(this.testFollow, this.squares);

    }

    update(){
        this.squares.children.iterate(child => {
            child.x += (child.baseXY[0] - child.x)/child.x*this.acceleration;
            child.y += (child.baseXY[1] - child.y)/child.y*this.acceleration;
        })

        //this.physics.arcade.moveToPointer(this.testFollow, 30);
        
    }
    
}

const config = {
    type: Phaser.AUTO,
    width: 600,
    height: 600,
    scene: A,
    physics: {
        default: 'arcade'
    }
};

const game = new Phaser.Game(config);
2

Something like

const { fps } = this.physics.world;

this.squares.children.iterate(child => {
    const dx = (child.baseXY[0] - child.x) / child.x * this.acceleration;
    const dy = (child.baseXY[1] - child.y) / child.y * this.acceleration;

    child.body.velocity.set(fps * dx, fps * dy);
});
1 Like
3

many thanks!
If you don’t mind me asking, can explain a bit more about destructuring physics.world and how that works?
I’m learning as I go, but I can’t wrap my mind around this

4

I made a mistake, it should be timed based on the update delta.

class A extends Phaser.Scene {
    // etc.
    update(time, deltaTime) {
        const fps = 1000 / deltaTime;

        this.squares.children.iterate(child => {
            const dx = (child.baseXY[0] - child.x) / child.x * this.acceleration;
            const dy = (child.baseXY[1] - child.y) / child.y * this.acceleration;

            child.body.velocity.set(fps * dx, fps * dy);
        });
    }
}

Arcade Physics bodies usually need velocity to collide correctly. So here instead of moving the bodies directly you give them an equivalent velocity that would produce the same distance moved. Multiplying by 1000 / deltaTime converts a per-update distance into a per-second velocity.