Show:

Matter.Render

The Matter.Render module is a simple HTML5 canvas based renderer for visualising instances of Matter.Engine. It is intended for development and debugging purposes, but may also be suitable for simple games. It includes a number of drawing options including wireframe, vector with support for sprites and viewports.

Methods

Matter.Render._createCanvas

(width, height)
private

Description

Parameters

Returns

canvas

Matter.Render._getPixelRatio

(canvas)
Number private

Gets the pixel ratio of the canvas.

Parameters

Returns

Number

pixel ratio

Matter.Render._getTexture

(render, imagePath)
→ Image private

Gets the requested texture (an Image) via its path

Parameters

Returns

Image

texture

Matter.Render.applyBackground

(render, background)
private

Applies the background to the canvas using CSS.

Parameters

Matter.Render.bodies

(render, bodies, context)
private

Description

Parameters

Matter.Render.bodyAxes

(render, bodies, context)
private

Draws body angle indicators and axes

Parameters

Matter.Render.bodyBounds

(render, bodies, context)
private

Draws body bounds

Parameters

Matter.Render.bodyConvexHulls

(render, bodies, context)
private

Optimised method for drawing body convex hull wireframes in one pass

Parameters

Matter.Render.bodyIds

(render, bodies, context)
private

Draws body ids

Parameters

Matter.Render.bodyPositions

(render, bodies, context)
private

Draws body positions

Parameters

Matter.Render.bodyShadows

(render, bodies, context)
private

Description

Parameters

Matter.Render.bodyVelocity

(render, bodies, context)
private

Draws body velocity

Parameters

Matter.Render.bodyWireframes

(render, bodies, context)
private

Optimised method for drawing body wireframes in one pass

Parameters

Matter.Render.collisions

(render, pairs, context)
private

Description

Parameters

Matter.Render.constraints

(constraints, context)
private

Description

Parameters

Matter.Render.create

([options])
Render

Creates a new renderer. The options parameter is an object that specifies any properties you wish to override the defaults. All properties have default values, and many are pre-calculated automatically based on other properties. See the properties section below for detailed information on what you can pass via the options object.

Parameters

Returns

Render

A new renderer

Matter.Render.debug

(render, context)
private

Description

Parameters

Matter.Render.endViewTransform

(render)

Resets all transforms on the render context.

Parameters

Matter.Render.grid

(render, grid, context)
private

Description

Parameters

Matter.Render.inspector

(inspector, context)
private

Description

Parameters

Matter.Render.lookAt

(render, objects, [padding], [center=true])

Positions and sizes the viewport around the given object bounds. Objects must have at least one of the following properties:

  • object.bounds
  • object.position
  • object.min and object.max
  • object.x and object.y

Parameters

Matter.Render.mousePosition

(render, mouse, context)
private

Renders mouse position.

Parameters

Matter.Render.run

(render)

Continuously updates the render canvas on the requestAnimationFrame event.

Parameters

Matter.Render.separations

(render, pairs, context)
private

Description

Parameters

Matter.Render.setPixelRatio

(render, pixelRatio)

Sets the pixel ratio of the renderer and updates the canvas. To automatically detect the correct ratio, pass the string 'auto' for pixelRatio.

Parameters

Matter.Render.startViewTransform

(render)

Applies viewport transforms based on render.bounds to a render context.

Parameters

Matter.Render.stop

(render)

Ends execution of Render.run on the given render, by canceling the animation frame request event loop.

Parameters

Matter.Render.vertexNumbers

(render, bodies, context)
private

Renders body vertex numbers.

Parameters

Matter.Render.world

(render)

Renders the given engine's Matter.World object. This is the entry point for all rendering and should be called every time the scene changes.

Parameters

Properties

The following properties are specified for objects created by Matter.Render.create and for objects passed to it via the options argument.

A Bounds object that specifies the drawing view region. Rendering will be automatically transformed and scaled to fit within the canvas size (render.options.width and render.options.height). This allows for creating views that can pan or zoom around the scene. You must also set render.options.hasBounds to true to enable bounded rendering.

The canvas element to render to. If not specified, one will be created if render.element has been specified.

Default: null

The 2d rendering context from the render.canvas element.

A back-reference to the Matter.Render module.

A reference to the element where the canvas is to be inserted (if render.canvas has not been specified)

Default: null

A reference to the Matter.Engine instance to be used.

Render.options

The configuration options of the renderer.

A flag that specifies if render.bounds should be used when rendering.

Default: false

The target height in pixels of the render.canvas to be created.

Default: 600

The target width in pixels of the render.canvas to be created.

Default: 800

Render.textures

The sprite texture cache.

Events

The following events are emitted by objects created by <span class="prefix">Matter.</span>Render.create to objects that have subscribed using Matter.Events.on.

Events.on(Render, "afterRender", callback)

Fired after rendering

Event Payload:

  • event Object

    An event object

    • timestamp Number

      The engine.timing.timestamp of the event

    • source

      The source object of the event

    • name

      The name of the event

Events.on(Render, "beforeRender", callback)

Fired before rendering

Event Payload:

  • event Object

    An event object

    • timestamp Number

      The engine.timing.timestamp of the event

    • source

      The source object of the event

    • name

      The name of the event

0.13.0