Unclear documentation about RenderPixi about matter-js HOT 13 CLOSED

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

from matter-js.

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

from matter-js.

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?

from matter-js.

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.

from matter-js.

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

from matter-js.

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.

from matter-js.

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

from matter-js.

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

from matter-js.

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.

from matter-js.

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

from matter-js.

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

from matter-js.

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

from matter-js.

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

from matter-js.