game.physics.arcade.collide() in phaser js

Question

I use framework phaser js. I create a two circles using graphics

var graphics;
var ball;

var graphics1;
var ballHome;

function create(){
  game.physics.startSystem(Phaser.Physics.ARCADE);  

    graphics=game.add.graphics(500,500);    //first circle
    game.physics.arcade.enable(graphics);
    graphics.enableBody=true;
    graphics.beginFill(0xFFFFFF,1);
    ball=graphics.drawCircle(10,10,15);
    graphics.endFill();


    graphics1=game.add.graphics(500,500);   //second circle
    game.physics.arcade.enable(graphics1);
    graphics1.enableBody = true;
    graphics1.beginFill(0xFFF55F,1);
    ballHome=graphics1.drawCircle(300,300,500);
    graphics1.endFill();

}

function update() {
     game.physics.arcade.collide(ball,ballHome); 
}

I want them to collide

Why does not game.physics.arcade.collide(ball,ballHome) work?

Thanks for the help

Answer 1

The problem is that the collide() function takes Phaser.Sprite s as its input, but ball and ballHome are not sprites; they are PIXI.Graphics objects. You need to create sprites from your Graphics objects, and then pass those sprites into collide() .

To make a sprite from your graphics object, first call Graphics.generateTexture() ( doc ) to create a texture, then call game.add.sprite() ( doc ) with the texture you just created.

For more information on Phaser, plus loads of really helpful tutorials, see the Phaser website .