Has anyone tried using p2.js or other physics engines with PIXI.js?

[caymanbruce]

I have tried p2.js but I am unable to make it work in PIXI.js.  Can anyone point out what is wrong? I just want to make a simple program that if I click on the canvas a ball will be created and fall down. 

 

[Owlzy]

Hmm it looks okay to me, intially I just thought you werent updating p2.  One thing to be careful of though is as PIXI is y up, you might want to use a positive gravity or invert the stage by scaling y =-1.  Couldn't see you invert the scene anywhere?

[mattstyles]

I'm using the two https://github.com/mattstyles/odyssey-nova with no issues. Also, Phaser uses both pixi and p2 (as one of their physics options).

[Owlzy]

you were kinda doing it in a way I found confusing.  On 2nd look I seem to of found your issue.  Try this pen - 

 

With p2 I always use position[0] and position[1] for x,y values respectively , not sure you can access them with position.x

[caymanbruce]

2 hours ago, Owlzy said:

Hmm it looks okay to me, intially I just thought you werent updating p2.  One thing to be careful of though is as PIXI is y up, you might want to use a positive gravity or invert the stage by scaling y =-1.  Couldn't see you invert the scene anywhere?

Oops I copied that gravity part from example. I just removed the gravity because I think I don't really need that.

[Owlzy]

You need gravity, but just with pixi that will be a very low number and the gravity will currently act upwards. If you check the pen it should work as you expected, with the balls falling when you place them

[caymanbruce]

1 hour ago, Owlzy said:

you were kinda doing it in a way I found confusing.  On 2nd look I seem to of found your issue.  Try this pen - 

 

With p2 I always use position[0] and position[1] for x,y values respectively , not sure you can access them with position.x

Thanks I initially thought of using the circles array to store all those bodies but then I found I can use addBody in World and get the bodies using world.bodies so I am a bit confused. I don't even need to do this:

for (let i = 0; i < world.bodies.legnth; i++) {
    const body = world.bodies[i];
    const sp = movableObjects.children[i].position.set(body.position.x, body.position.y);
}

But I don't understand. Why can't I just get the bodies from world and use the positions? When I put a console.log at world.bodies I get nothing. What is world.bodies for?

Edited March 31, 2017 by caymanbruce

[caymanbruce]

15 minutes ago, Owlzy said:

You need gravity, but just with pixi that will be a very low number and the gravity will currently act upwards. If you check the pen it should work as you expected, with the balls falling when you place them

I see I just fiddle with the gravity property and I find that if I use new p2.World() the ball will go up. So p2 implemented in a very similar way with matter.js, or vice versa  I played with matter.js first then p2.js. But I find matter.js is better documented and someone actually puts video tutorials on Youtube.

In your previous experience with p2.js, what do you think of using p2.js to do the collision detection? Does it do the job well enough? I want to choose a physics engine for my game but kind of stuck in choosing between the two. Matter.js has implemented broadphase collision detection, but using it is confusing too. I have implemented my own broadphase collision detection but it will be good if physics engines can do that by default.

[Owlzy]

On 31/03/2017 at 6:11 PM, caymanbruce said:

I see I just fiddle with the gravity property and I find that if I use new p2.World() the ball will go up. So p2 implemented in a very similar way with matter.js, or vice versa  I played with matter.js first then p2.js. But I find matter.js is better documented and someone actually puts video tutorials on Youtube.

In your previous experience with p2.js, what do you think of using p2.js to do the collision detection? Does it do the job well enough? I want to choose a physics engine for my game but kind of stuck in choosing between the two. Matter.js has implemented broadphase collision detection, but using it is confusing too. I have implemented my own broadphase collision detection but it will be good if physics engines can do that by default.

It just that for a physics lib it makes sense that gravity should be negative, as gravity pulls not pushes, so I should think all physics libs do this.  You can just use a negative value but I found it can get a bit complicated flipping the signs in your head if your using physics formulas a lot, programmer preference rlly. 

Both p2 and matter are full featured if you ask me, both would suit your needs fine I should imagine.  The only thing I can actually remember from  when I compared the two is that matter.js had a prettier website

 

[caymanbruce]

33 minutes ago, Owlzy said:

It just that for a physics lib it makes sense that gravity should be negative, as gravity pulls not pushes, so I should think all physics libs do this.  You can just use a negative value but I found it can get a bit complicated flipping the signs in your head if your using physics formulas a lot, programmer preference rlly. 

Both p2 and matter are full featured if you ask me, both would suit your needs fine I should imagine.  The only thing I can actually remember from  when I compared the two is that matter.js had a prettier website

 

Thanks I think for now I will let the physics engine do the collision detection for me. However I find that bodies in matter.js always have bouncing issues when they collide. I am now learning and using Box2D. Hope it does what I want to do for me.