Matter-js: Unclear documentation about RenderPixi

[knod]

It would be very helpful to have that note about needing pixi.js right there in the RenderPixi documentation section. It was hard to track down. Also, http://brm.io/matter-js-docs/classes/RenderPixi.html points me to Demo.js for usage examples, but I can't find RenderPixi anywhere in Demo.js. If you do end up including it there, including a comment that explains the use of pixi.js could be very clarifying.

[liabru]

You're right, the documentation for renderers needs work.

I've started to write some information on the wiki though, take a look at the Rendering page.

It shows how to pass through the RenderPixi controller to an engine, hopefully that helps?

[knod]

Thanks for that, that clears up a few things. I was actually reading the docs at http://brm.io/matter-js-docs and completely forgot about the wiki. I'll look through that a bit and get some more information.

[dcrockwell]

+1

Spent 6 hours trying to figure out pixijs + matterjs:

• Still not sure why the physics library has anything to do with instantiating my pixi canvas.
• I have an existing pixijs canvas; not sure how to pass that to matter.js so that it won't create an extra canvas.
• Not sure how to get the renderer from matter.js so that I can draw simple shapes to the canvas.

[liabru]

You can use pixi.js and matter.js the same way you'd use any physics engine with any other renderer... the included RenderPixi is just for demo and testing purposes. There's no reason you can't handle rendering and game loop in your own way. Check out this example on codepen for an alternate way to use pixijs. Here's another that's using threejs.

[dcrockwell]

@liabru thank you very much for the prompt response. I'll start from the example code :)

[liabru]

No problem, I understand that it may not be that clear. I'm working on moving the renderers to a separate project :)

[dcrockwell]

I'm writing a fully open-source game with a community of folks to serve as a defacto example of bringing custom geometry into matter-js from SVG and rendering it with pixijs. We're making great progress with it.

As soon as it's in a non-confusing state, I'll be sure to send it to you as a learning aide.

[liabru]

Awesome. I've been keeping an eye on your channel, it's looking good. Keep me posted!

[crazyyi]

Since RenderPIXI is going to be deprecated, what should I do to use matter.js with PIXI renderer? I use something like this to do a frame update:

app.ticker.add(function(delta) {
  play();
});

The app is a PIXI.Application and there is a ticker function in the module so I just run frame update in the ticker. I assume the delta used here should mean the same thing in Matter.js's engine update function. So in play() function I update the sprite's position with the shape I created using Matter.js, and I use Engine.update(engine, delta). Then the animation is super slow. I don't know why. Can you show me what I did wrong if you have time? Thank you. Here is my codepen:
https://codepen.io/caymanbruce/pen/wJYvJm?editors=0010

[liabru]

Looks like PIXI.ticker's value for delta is not in ms but instead scaled relative to a target FPS (e.g. 60), since most of the time it is 1, so instead try using play(delta * 16.666) (I think).

[crazyyi]

@liabru Thanks your solution is perfect. Now I just use play(delta * (1000 / 60)). You have a much deeper understanding in PIXI than I do.

[jcyuan]

@crazyyi @liabru should use ticker.deltaTime / PIXI.settings.TARGET_FPMS

[liabru]

Thanks for the info @jcyuan. Closing this thread now though since Matter.RenderPixi is deprecated.