Jump to content

Using Matter.js for physics with Pixi.js


Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 years later...

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.

Link to comment
Share on other sites

  • 2 weeks later...

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. 


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.


Link to comment
Share on other sites

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.



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 by mobileben
Added more details
Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...