Collision with Line and Images of a group?

Phaser 3
1

Here is a group that contains left shelf and right shelf. and inside the left shelf there is left flag and inside of right shelf there is right flag.

        Phaser.Display.Align.In.RightCenter(this.leftFlag, this.leftShelf).setOrigin(0,0.5);
        Phaser.Display.Align.In.LeftCenter(this.rightFlag, this.rightShelf).setOrigin(0,0.5);

I want to move them all as a group:

        const groupShelf = this.physics.add.group({
            defaultKey: 'row',
            bounceX: 1,
        });
        groupShelf.add(this.leftFlag);
        groupShelf.add(this.rightFlag);
        groupShelf.add(this.leftShelf);
        groupShelf.add(this.rightShelf);
        groupShelf.setVelocityX(100);

and i add two lines at the left and right side of the screen for checking collision with leftFlag and rightFlag to change the movement direction and avoid to exit shelves from the screen.

        this.lineLeft = this.add.line(0,0, 0,0, 0, game.config.height,  0xff00ff).setOrigin(0);
        this.lineLeft.setLineWidth(5);
        this.physics.add.existing(this.lineLeft);

        this.lineRight = this.add.line(0,0, game.config.width,0, game.config.width, game.config.height,  0xff00ff).setOrigin(0);
        this.lineRight.setLineWidth(5);
        this.physics.add.existing(this.lineRight);

this.physics.add.collider(this.rightFlag, this.lineRight, function ()
        {
            console.log("Right Flag ");
             groupShelf.setVelocityX(100);
        });

        this.physics.add.collider(this.leftFlag, this.lineLeft, function ()
        {
            console.log("Left Flag ");
             groupShelf.setVelocityX(-100);
        });

there is no error and there is no collision detection.
Thank you very much for your guidance.

Untitled
Untitled484×639 5.38 KB

2

The physics bodies for the lines have zero width or height so they can’t collide. You can adjust the body sizes but I think it would be simpler to use the world bounds instead.

1 Like
3

I want to chang movment direction of shelves by tapping

let flagLeft = this.physics.add.image(0, 0, ‘flagLeft’)
let flagRight = this.physics.add.image(0, 0, ‘flagRight’)

//set line left & right for avoiding shelves exiting from the screen
let leftLine = this.add.image(0, 0, “flagLeft”);
this.physics.add.existing(leftLine);
leftLine.body.velocity.x=0
//
let rightLine = this.add.image(0, 0, “flagRight”);
this.physics.add.existing(rightLine);
rightLine.body.velocity.x=0

//create a group for moving right&left sheld and right&left flag together
const groupShelf = this.physics.add.group({
defaultKey: ‘row’
});
groupShelf.add(flagLeft);
groupShelf.add(flagRight);
groupShelf.add(shelfLeft);
groupShelf.add(shelfRight);
groupShelf.setVelocityX(this.speed);

//check when shelf should move back and dows not exit from the screen
this.physics.add.overlap(flagLeft, leftLine, () =>{
groupShelf.setVelocityX(200)
},null, this);

this.physics.add.overlap(flagRight, rightLine, () =>{
groupShelf.setVelocityX(-200)
},null, this);

i want to chang movment direction of shelves by tapping and i need to get velocity of group, but i can not find any code about get velocity or something that can help me in this senario:

4

To get the current velocity of the group, you should be able to reference the velocity property on the physics body. Something like:

// get both the x and y velocity
console.log(gameObject.body.velocity);
// get just the x velocity
console.log(gameObject.body.velocity.x);