How do I create a circle body with P2 that's emptied out on the inside (same as sprite)?

[01AutoMonkey]

 

Okay so I have a sprite that's a white circle, I want to put balls into it that move and collide with the circle, that is balls that bounce around inside the circle, I can't use Arcade physics because it only has rectangular bodies so I'm looking at P2 for a solution but I'm not clear on how I'm suppose to implement it there, can I use a Circle body? Or perhaps a Polygon body?

 

A circle body can't be emptied on the inside but perhaps it's possible somehow to allow the balls to be inside the circle body and then collide with its edges?

 

If I need to use a polygon body, would I just have the figure out the polygon points for the sprite somehow?

 

Or is it perhaps possible to automatically create a body based on the colors on the sprite vs the alpha on the sprite?

 

Thanks.

[Wavertron]

You can use something like PhysicsEditor https://www.codeandweb.com/physicseditor. Note: its paid for commercial use.

 

1.) Create your circle as an image/png, but dont make it a full circle, leave a slight gap.

Also, make the background transparent. eg:

 

 

 

 

2.) Add the image into PhysEditor, click the magic wand, and bingo, you've got a pretty good array of points.

This is the reason for the slight gap and the transparent bg, so that the magic wand does all the work for you.

You can manually close the gap a little more if you like, but dont overlap it or it may not play nice in P2.

 

 

 

3.) Publish the data as JSON format

4.) Back in your Phaser game code, preload the json data

this.load.physics('physdata1', 'assets/images/objects/physdata1.json');

5.) And do a loadPolygon where needed:

this.game.physics.p2.enable(sprte);sprte.body.clearShapes();sprte.body.loadPolygon('physdata1', 'key_in_JSON_data');

[Matthias Elephant]

Hi,

 

I'm working on a prototype where I want to solve the same problem.

Does anyone know another way to do the same without polygons?

 

Is there a way to use something like that:

var circle = game.add.bitmapData(800, 600);circle.ctx.beginPath();circle.ctx.strokeStyle = '#CC181E';circle.ctx.arc(110, 110, 100, 0, Math.PI * 1);circle.ctx.stroke();circle.ctx.closePath();

 

Now i just want to collide with the stroke.

 

Thanks.