-
Notifications
You must be signed in to change notification settings - Fork 2k
Rendering
Examples of how to render a Matter.js engine
A basic example for rendering the bodies in a world as wireframes, given a previously created Matter.Engine
(see Getting started):
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);
(function render() {
var bodies = Composite.allBodies(engine.world);
window.requestAnimationFrame(render);
context.fillStyle = '#fff';
context.fillRect(0, 0, canvas.width, canvas.height);
context.beginPath();
for (var i = 0; i < bodies.length; i += 1) {
var vertices = bodies[i].vertices;
context.moveTo(vertices[0].x, vertices[0].y);
for (var j = 1; j < vertices.length; j += 1) {
context.lineTo(vertices[j].x, vertices[j].y);
}
context.lineTo(vertices[0].x, vertices[0].y);
}
context.lineWidth = 1;
context.strokeStyle = '#999';
context.stroke();
})();
A good place to start with your own rendering is to take a look at the source of Matter.Render (you can also simply copy it and customise as you require).
There is an included debug renderer called Matter.Render.
This module is an optional canvas based renderer for visualising instances of Matter.Engine
. It is mostly intended for development and debugging purposes, but may also be suitable starting point for simple games. It includes a number of drawing options including wireframe, vector with support for sprites and viewports.
By default Matter.Render
will only show bodies as wireframes (outlines). This is useful for testing and debugging, but to enable full solid rendering (and sprites if you are using them) you must set render.options.wireframes = false
.
See the documentation for Matter.Render.
var engine = Engine.create();
// ... add some bodies to the world
var render = Render.create({
element: document.body,
engine: engine,
options: options
});
Engine.run(engine);
Render.run(render);
Where:
-
element
is a container element to insert the canvas into -
engine
is aMatter.Engine
instance -
options
is an object specifying render settings, see below (optional)
You can also just pass a canvas
instead of a container element
if you wish to create the canvas yourself.
A number of options may be passed to Matter.Render.create
:
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: 800,
height: 600,
pixelRatio: 1,
background: '#fafafa',
wireframeBackground: '#222',
hasBounds: false,
enabled: true,
wireframes: true,
showSleeping: true,
showDebug: false,
showBroadphase: false,
showBounds: false,
showVelocity: false,
showCollisions: false,
showSeparations: false,
showAxes: false,
showPositions: false,
showAngleIndicator: false,
showIds: false,
showShadows: false,
showVertexNumbers: false,
showConvexHulls: false,
showInternalEdges: false,
showMousePosition: false
}
});