Using Matter.js for physics with Pixi.js

[CaptainBamboo]

I'm looking to make a simple game using Pixi.js as a renderer and Matter.js for the physics. But I'm having a hard time wrapping my head around how to do that. Does anybody have some code or projects, using both pixi and matter, that I could take a look at? Any documentation/articles/videos are also welcome.

Much appreciated.

[mattstyles]

Took me a bit of rummaging but finally found it, although things have changed since I last checked it! http://brm.io/matter-js/docs/classes/RenderPixi.html Hopefully that deprecation warning mentioning moving it to a new repo has happened, it sounds like it may have as all the examples mention the Matter.Renderer but they do say this is a debug renderer, which would be a great decision for a physics library to decouple from presentation and provide a debug instance for quick development to be replaced with a performant renderer (like Pixi) for when things get serious.

If you get this working please update here, I've previously coupled Pixi with P2 but P2 could well be a little too precise (i.e. heavy) for simpler projects and I wonder if Matter could fill that gap (maybe not, its a pretty darned good full-featured physics library so maybe its just as heavy).

[lmfielding]

Any luck?

[ivan.popelyshev]

I think I saw someone who used matter with pixijs. ITs the same as with other physics engines. Whats your problem with integrating physics?

Here's the lib that helps with PhysicsEditor output: https://github.com/eXponenta/pixi-poly

[Exca]

I've used matter.js with pixi once. Haven't got any public source codes for that (client work, source code rights went to them), but basically what we made was a solution where each of the objects we had on screen could have body determined. If it had one, then the body was added to matter world and on every render tick the Engine was updated and before rendering the maincontainer each of the objects with body were synced so that their graphical representation was set to values of the body.

[d13]

I'm working on this at the moment. Assuming you have a basic MatterJS world up and running....

Create your physics bodies as Pixi sprites as usual. However, You will need an array that will store sprite/body pairs. For example:

physicsSprites = [];

Pixi sprites will also need to have their anchors set to (0.5) to match the physic body anchors. 

anySprite.anchor.set(0.5);

Then, when the sprite and body have been created, Push the pair of them into the physicsSprites array:

physicsSprites.push([body, sprite]);

You'll end up with a 2D array of matching pairs for each of your bodies and sprites.

Then, in your game loop, loop through the elements in the physicsSprites array and set the sprite's position to the position of the body:

function update() {
  physicsSprites.forEach(element => {
    let body = element[0];
    let sprite = element[1];
    sprite.x = body.position.x;
    sprite.y = body.position.y;
    sprite.rotation = body.angle;
  });
}

MatterJS works beautifully with Pixi - my physics engine of choice.

 

[mobileben]

I actually started using MatterJS.

I liked the library but found there are issues with it for my test cases. I switched to Box2D because I got more predictable results and could also more accurately step ahead and project where something would be.

In case you're curious to see if you'd be affected by them, I reported them.

https://github.com/liabru/matter-js/issues/768

https://github.com/liabru/matter-js/issues/767

Adding a little more detail here as well. Also keep in mind that matter.js doesn't have kinematics and you also can't disable gravity on individual bodies. Phaser, which supports matter made a code change to allow for this (they added an ignoreGravity property).

I'm not saying it's a bad library. As indicated, I like it. Just be aware of the limitations and if possible prototype around your needs to make sure you can get the expected results.

Edited August 30, 2019 by mobileben
Added more details

[bubamara]

There's also planck.js : Planck.js is JavaScript rewrite of Box2D physics engine for cross-platform HTML5 game development.

https://github.com/shakiba/planck.js