Matter-js: Deactivate renderer

[BlueInt32]

Hi,
I've started to use matter.js in my game made with pixi.js, but I'd like to use matter.js without using its renderer. This may seem a silly question but how do you create an engine without any rendering ? Actually, I just want to apply objects positions / rotation data to existing pixi sprites.

Thanks a lot !

[liabru]

You can pass a custom renderer when you create a engine. I've yet to fully document any of this, but here's how:

    var engine = Engine.create(document.body, {
        render: {
            controller: CustomRenderer,
            options: {
                  something: true
            }
        }
    });

Where CustomRenderer is an object that implements two functions:

• CustomRenderer.create(options) where you set up anything you need, where options is the render.options object passed via Engine.create on creation (but you may not need to pass anything)

e.g. see L21 on Render.js

• CustomRenderer.world(engine) where engine is passed by the engine that calls this method on every render, from there you can access the whole world composite via engine.world. This is where you should update your Pixi sprites.

e.g. see L98 on Render.js

You can see an alternate renderer I implemented RenderPixi.js

Usage of this would be e.g.

    var engine = Engine.create(document.body, {
        render: {
            controller: Matter.RenderPixi
        }
    });

Hope that clears it up!

[BlueInt32]

Ok, I think I get it, thanks !
There is still something I don't understand though, about the way the matter.js' world is updated. In the demos you made, I can't find a way to obtain the responsability for setting the world's update step, like we can do in box2d by calling World.Step when we want (i.e. in the game loop). Here you say the engine calls the CustomRenderer function on every render : but who decides how often or/and when to render ? Can I ?
As you know in pixi.js we depend on what we pass to requestAnimFrame to manage the game loop. So how can matter.js' world be updated and accessed by me in this scenario ?

Side note : I wouldn't be surprised to have been missing some key concept of your engine... I guess as it grows in popularity you would have to clear these basic questions up anyway.

[liabru]

I can't find a way to obtain the responsability for setting the world's update step, like we can do in box2d by calling World.Step when we want (i.e. in the game loop)

If you wish to call update yourself the function is:

Engine.update(engine, delta, correction)

Where engine is the engine to update, delta is the time between steps (e.g. 1000/60) and correction is a time correction factor between steps (you can just use 1 for now).

Have a look at the source for Engine.js.

Here you say the engine calls the CustomRenderer function on every render : but who decides how often or/and when to render ?

Fair question. Matter.js includes a built in game loop in Engine.js, that I've spent some time testing and optimising.

It uses window.requestAnimationFrame and therefore updates at 60fps usually.

I've experimented with this and found you really don't want to be updating at any less than 60fps or physics and rendering really start to suffer.

I also found that the timestamps supplied by requestAnimationFrame are noisey and this causes jittery physics, so the Matter.js game loop has smoothing filters over a sliding window to prevent this.

I wouldn't be surprised to have been missing some key concept of your engine... I guess as it grows in popularity you would have to clear these basic questions up anyway.

No worries, it's still early days and most of this isn't yet fully documented. The key thing to note is that you should look at how Engine.run works and integrate it into your own game loop. Or the other way round!

I hope to make this a bit clearer and easier in future.

[BlueInt32]

All right,
Thanks a lot for your answers, I'll be studying this ;)