How to collide a Sprite with a Graphic

[blackhawx]

I'm using the following two examples as references in trying to get a sprite to collide with a basic shape, using arcade mode.

To create my graphic
https://labs.phaser.io/edit.html?src=src\game objects\graphics\fill rounded rectangle.js

To create collision
http://labs.phaser.io/edit.html?src=src/physics\arcade\static body.js

And here is what I came up with:

class FirstScene extends Phaser.Scene {
  constructor() {
    super({
      key: 'FirstScene',
      active: true,
      physics: {
        default: 'arcade',
        arcade: {
          debug: false,
          gravity: {
            y: 100 //the game gravity
          }
        }
      }
    });
    console.log('my constructor');
  }

  init() {
    console.log('the init method');
  }
  preload() {

    console.log('the preload method');
    this.load.image("crate", "game06/media/crate.png");
  }
  create() {

    console.log('the create method');

     //add my sprite and associate gravity
     mcrate = this.physics.add.sprite(180,100,'crate');

     //set world boundary for my crate
     mcrate.body.setVelocity(100, 200).setBounce(1, 1).setCollideWorldBounds(true);

     //now add a simple graphic to stage  
     mshape = this.add.graphics();
     mshape.fillStyle(0xffff00, 1);  
     mshape.fillRoundedRect(32, 22, 700, 10, 5);

  }
  update() {
    //console.log('the update method');

    //attempting to add collision between my sprite and my graphic, but no luck...
    this.physics.world.collide(mcrate, [mshape]);
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  title: 'Training with Scenes',
  backgroundColor: "#87CEEB",
  scene: [FirstScene]
};
var game = new Phaser.Game(config);
let mshape, mcrate;

 

i'm on Phaser 3.12.  What am I missing to get my 2 objects to collide?

Thanks

 

 

[iKest]

mshape = this.add.graphics();
     mshape.fillStyle(0xffff00, 1);  
     mshape.fillRoundedRect(32, 22, 700, 10, 5);
this.physics.enable(mshape)

 

[blackhawx]

hmm.. thats not working for me.  my crate sprite still does not collide with my yellow graphic

[prob]

Have you tried using .setCircle or .setSize on the graphics?

[blackhawx]

I stand corrected.  You can collide a graphic with a sprite.  I'm running the following test on Phaser 3.13 and it appears to be working for me

 

 create() {
    
     /* SET UP SPRITE WITH PHYSICS AND COLLIDABLE WORLD BOUNDS */
     mcrate = this.physics.add.sprite(180,100,'crate');
     mcrate.body.setVelocity(100, 200).setBounce(1, 1).setCollideWorldBounds(true);

    /* SET UP GRAPHIC */
    mgraphic = this.add.graphics();
    mgraphic.fillStyle(0xffff00, 1);  
    mgraphic.fillRoundedRect(0, 0, 700, 15, 0);

    /* ENABLE ARCADE PHYSICS OBJECT ON GRAPHIC */
    this.physics.add.existing(mgraphic);
    mgraphic.body.setSize(700,15);
    mgraphic.body.velocity.x = 0;
    mgraphic.body.velocity.y = 0;
    mgraphic.body.bounce.x = 1;
    mgraphic.body.bounce.y = 1;
    mgraphic.body.collideWorldBounds = true;
  }

  update() {
    /* COLLIDE SPRITE WITH GRAPHIC */
    this.physics.world.collide(mcrate, [mgraphic]);
  }

 

FYI - make sure to define your vars in a place that works for you.  In my demo above, they are created outside my create method (i..e mcrate, mgraphic).