blackhawx

How to collide a Sprite with a Graphic

Recommended Posts

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

 

 

Share this post


Link to post
Share on other sites

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).

 

 

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.