Menu
I'm trying to use the matter.js physics library. I'm using their "getting started" tutorial, but it can't find the canvas.
Here is my html:
<html>
<head>
<meta charset="UTF-8">
<title>Physics test</title>
</head>
<script type="text/javascript" src="./lib/matter-0.8.0.js"></script>
<script type="text/javascript">
// 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);
</script>
<body>
</body>
</html>
The console shows the following error:
" [Matter] warn: No "render.element" passed, "render.canvas" was not inserted into document."
I tried to create the render.element and render.canvas, but I'm acting blindly. A "minimal example to get you started" should be already working. What am I doing wrong?
304
Taking off part by part of the demo, I found out that most of the code should be in a function, called in the page load, like:
<body onload='Start()'>
and
function Start() {
// create a Matter.js engine
var engine = Engine.create(document.getElementById('canvas-container'));
// 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);
}
Well document.body exists in the browser console, but not in JavaScript.
You can use document.querySelector("body") instead.
The error probably comes because you passed undefined to Engine.create(), as document.body returns undefined.
Also, make sure you execute your code after the window.onload event, so that all the HTMLElements have been loaded. Like this:
window.addEventListener("load",init);
function init(){
var body = document.querySelector("body");
// Matter.js module aliases
var Engine = Matter.Engine,
World = Matter.World,
Bodies = Matter.Bodies;
// create a Matter.js engine
var engine = Engine.create(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);
}
Hope this helps!
24
It has been a long time for this question but I see that the library might be improved with new Render object so the new basic sample code is as follows
Include following in <head> tags
<script src="matter.js" type="text/javascript"></script>
The JS code can be placed at the bottom of the <body> tag
<script>
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
// create an engine
var engine = Engine.create();
// create a renderer
var render = Render.create({
element: document.body,
engine: engine
});
// create two boxes and a ground
var ball = Bodies.circle(420, 15, 20);
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, [ball, boxA, boxB, ground]);
// run the engine
Engine.run(engine);
// run the renderer
Render.run(render);
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
