2

I would like to use Matter.js with my custom game loop, I followed instructions from here and added Engine.update(engine, 1000/60, 1); in draw loop, but nothing happens, just blank screen. Do I need to add tick method somewhere?

Here is my code:

window.onload = function () {

    // Matter.js module aliases
    var Engine = Matter.Engine,
        World = Matter.World,
        Bodies = Matter.Bodies;

    // create a Matter.js engine
    var engine = Engine.create(document.body);

    // create two boxes and a ground
    var boxA = Bodies.rectangle(400, 200, 80, 80);
    var boxB = Bodies.rectangle(450, 50, 80, 80);
    var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

    // add all of the bodies to the world
    World.add(engine.world, [boxA, boxB, ground]);

    // run the engine
    //Engine.run(engine);

    draw();

    function draw(){ 
        Engine.update(engine, 1000/60, 1);        

        requestAnimationFrame(draw);
    }
};
ggorlen
  • 44,755
  • 7
  • 76
  • 106
dede
  • 809
  • 3
  • 11
  • 26
  • Did you ever get this figured out? – WhiteHotLoveTiger Jan 28 '16 at 12:50
  • What did you expect to happen based on this code? You've initialized some matter.js objects without a renderer, then started a custom loop that doesn't render anything. The MJS engine is running a simulation you can't see. Try adding some rendering code to reflect what MJS is doing to the bodies by drawing them on canvas, DOM, p5.js, etc. See [Using Matter.js to render to the DOM or React](https://stackoverflow.com/questions/63906218/using-matter-js-to-render-to-the-dom-or-react/65354225#65354225) for DOM examples. – ggorlen Jun 29 '21 at 16:57

1 Answers1

0

You are probably using the wrong parameters. I have a function working with Engine.update that looks like this:

var updateTime = 1000/60;
Matter.Engine.update(engine, [delta=updateTime], [correction=1]);
Greyson R.
  • 416
  • 6
  • 17