2020-12-28 11:11:39 -05:00
< img alt = "Matter.js" src = "https://brm.io/matter-js/img/matter-js.svg" width = "300" >
2014-02-19 09:15:05 -05:00
2014-12-03 19:05:49 -05:00
> *Matter.js* is a JavaScript 2D rigid body physics engine for the web
2014-02-19 09:15:05 -05:00
2020-12-28 11:11:39 -05:00
[brm.io/matter-js ](https://brm.io/matter-js/ )
2014-02-19 09:15:05 -05:00
2020-12-28 11:11:39 -05:00
[Demos ](#demos ) ・ [Gallery ](#gallery ) ・ [Features ](#features ) ・ [Plugins ](#plugins ) ・ [Install ](#install ) ・ [Usage ](#usage ) ・ [Examples ](#examples ) ・ [Docs ](#documentation ) ・ [Wiki ](https://github.com/liabru/matter-js/wiki ) ・ [References ](#references ) ・ [License ](#license )
2014-02-28 20:08:15 -05:00
2014-12-03 19:05:49 -05:00
[![Build Status ](https://travis-ci.org/liabru/matter-js.png?branch=master )](https://travis-ci.org/liabru/matter-js)
2014-02-19 09:15:05 -05:00
### Demos
2015-01-22 18:13:21 -05:00
< table >
< tr >
< td >
< ul >
2020-12-28 11:11:39 -05:00
< li > < a href = "https://brm.io/matter-js/demo/#mixed" > Mixed Shapes< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#mixedSolid" > Solid Shapes< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#svg" > Concave SVG Paths< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#terrain" > Concave Terrain< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#concave" > Concave Bodies< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#compound" > Compound Bodies< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#newtonsCradle" > Newton's Cradle< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#wreckingBall" > Wrecking Ball< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#slingshot" > Slingshot Game< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#rounded" > Rounded Corners< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#views" > Views< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#timescale" > Time Scaling< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#manipulation" > Body Manipulation< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#compositeManipulation" > Composite Manipulation< / a > < / li >
2015-01-22 18:13:21 -05:00
< / ul >
< / td >
< td >
< ul >
2020-12-28 11:11:39 -05:00
< li > < a href = "https://brm.io/matter-js/demo/#raycasting" > Raycasting< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#sprites" > Sprites< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#pyramid" > Pyramid< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#car" > Car< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#catapult" > Catapult< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#gravity" > Reverse Gravity< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#bridge" > Bridge< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#avalanche" > Avalanche< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#softBody" > Basic Soft Bodies< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#cloth" > Cloth< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#events" > Events< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#collisionFiltering" > Collision Filtering< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#chains" > Chains< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#ballPool" > Ball Pool< / a > < / li >
< / ul >
< / td >
< td >
< ul >
< li > < a href = "https://brm.io/matter-js/demo/#stack" > Stack< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#circleStack" > Circle Stack< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#compoundStack" > Compound Stack< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#restitution" > Restitution< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#friction" > Friction< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#airFriction" > Air Friction< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#staticFriction" > Static Friction< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#sleeping" > Sleeping< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#beachBalls" > Beach Balls< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#stress" > Stress 1< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#stress2" > Stress 2< / a > < / li >
< li > < a href = "https://brm.io/matter-js/demo/#sensors" > Sensors< / a > < / li >
2015-01-22 18:13:21 -05:00
< / ul >
< br >
< / td >
< / tr >
< / table >
2014-02-19 09:15:05 -05:00
2015-12-23 15:38:16 -05:00
### Gallery
2015-12-23 18:19:39 -05:00
See how others are using matter.js physics
2015-12-23 15:38:16 -05:00
2020-12-28 11:11:39 -05:00
- [Patrick Heng ](https://patrickheng.com/ ) by Patrick Heng
- [USELESS ](https://useless.london/ ) by Nice and Serious
- [Secret 7 ](https://secret-7.com/ ) by Goodness
- [New Company ](https://www.new.company/ ) by New Company
- [Game of The Year ](https://gameoftheyear.withgoogle.com/ ) by Google
- [Pablo The Flamingo ](https://pablotheflamingo.com/ ) by Nathan Gordon
- [Les métamorphoses de Mr. Kalia ](https://lab212.org/oeuvres/2:art/18/Les-metamorphoses-de-Mr-Kalia ) by Lab212
- [Phaser ](https://phaser.io/ ) by Photon Storm
- [Sorry I Have No Filter ](https://sorryihavenofilter.com/pages/about/ ) by Jessica Walsh
- [Fuse ](https://fuse.blog/ ) by Fuse
- [Glyphfinder ](https://www.glyphfinder.com/ ) by überdosis
- [Isolation ](https://isolation.is/postcards/my-week ) by sabato studio
2016-10-15 12:48:08 -04:00
- [more... ](https://github.com/liabru/matter-js/wiki/Gallery )
2015-12-23 15:38:16 -05:00
2014-02-19 09:15:05 -05:00
### Features
2015-12-23 10:42:20 -05:00
- Rigid bodies
- Compound bodies
- Composite bodies
- Concave and convex hulls
2014-04-01 08:48:42 -04:00
- Physical properties (mass, area, density etc.)
- Restitution (elastic and inelastic collisions)
2015-12-23 10:42:20 -05:00
- Collisions (broad-phase, mid-phase and narrow-phase)
- Stable stacking and resting
2014-04-01 08:48:42 -04:00
- Conservation of momentum
- Friction and resistance
2015-12-23 10:42:20 -05:00
- Events
2014-04-01 08:48:42 -04:00
- Constraints
- Gravity
- Sleeping and static bodies
2017-02-12 14:54:41 -05:00
- Plugins
2014-05-05 14:32:51 -04:00
- Rounded corners (chamfering)
- Views (translate, zoom)
- Collision queries (raycasting, region tests)
2014-04-01 08:48:42 -04:00
- Time scaling (slow-mo, speed-up)
- Canvas renderer (supports vectors and textures)
2014-05-05 14:32:51 -04:00
- [MatterTools ](https://github.com/liabru/matter-tools ) for creating, testing and debugging worlds
2014-04-01 08:48:42 -04:00
- World state serialisation (requires [resurrect.js ](https://github.com/skeeto/resurrect-js ))
2017-03-07 17:20:07 -05:00
- Cross-browser and Node.js support (Chrome, Firefox, Safari, IE8+)
2014-04-01 08:48:42 -04:00
- Mobile-compatible (touch, responsive)
2014-05-05 14:32:51 -04:00
- An original JavaScript physics implementation (not a port)
2014-02-19 09:15:05 -05:00
### Install
2019-09-15 15:23:15 -04:00
You can install using package managers [npm ](https://www.npmjs.org/package/matter-js ) and [Yarn ](https://yarnpkg.com/ ) using:
2014-02-19 09:15:05 -05:00
2019-09-15 15:23:15 -04:00
npm install matter-js
2014-02-19 09:15:05 -05:00
2019-09-15 15:23:15 -04:00
Alternatively you can download a [stable release ](https://github.com/liabru/matter-js/tags ) or try the latest experimental [alpha build ](https://github.com/liabru/matter-js/tree/master/build ) (master) and include the script in your web page:
2014-04-01 08:48:42 -04:00
2019-09-15 15:23:15 -04:00
< script src = "matter.js" type = "text/javascript" > < / script >
2014-06-13 05:09:44 -04:00
2014-02-19 09:15:05 -05:00
### Usage
2017-03-07 17:20:07 -05:00
Visit the [Getting started ](https://github.com/liabru/matter-js/wiki/Getting-started ) wiki page for a minimal usage example which should work in both browsers and Node.js.
Also see the [Running ](https://github.com/liabru/matter-js/wiki/Running ) and [Rendering ](https://github.com/liabru/matter-js/wiki/Rendering ) wiki pages, which show how to use your own game and rendering loops.
2014-02-19 09:15:05 -05:00
2017-03-07 15:31:39 -05:00
### Tutorials
See the list of [tutorials ](https://github.com/liabru/matter-js/wiki/Tutorials ).
2015-12-23 15:38:16 -05:00
### Examples
2015-01-22 18:13:21 -05:00
2015-12-23 15:38:16 -05:00
See the [examples ](https://github.com/liabru/matter-js/tree/master/examples ) directory which contains the source for all [demos ](#demos ).
2020-12-28 11:11:39 -05:00
There are even more examples on [codepen ](https://codepen.io/collection/Fuagy/ ).
2014-04-01 20:01:08 -04:00
2017-02-12 14:54:41 -05:00
### Plugins
The engine can be extended through plugins, see these resources:
- [Using plugins ](https://github.com/liabru/matter-js/wiki/Using-plugins )
- [Creating plugins ](https://github.com/liabru/matter-js/wiki/Creating-plugins )
- [List of plugins ](https://github.com/liabru/matter-js/wiki/List-of-plugins )
- [matter-plugin-boilerplate ](https://github.com/liabru/matter-plugin-boilerplate )
2014-02-28 20:08:15 -05:00
### Documentation
2020-12-28 11:11:39 -05:00
See the [API Documentation ](https://brm.io/matter-js/docs/ ) and the [wiki ](https://github.com/liabru/matter-js/wiki )
2014-02-28 20:08:15 -05:00
2014-05-10 10:52:59 -04:00
### Building and Contributing
2020-12-28 11:11:39 -05:00
To build you must first install [node.js ](https://nodejs.org/ ), then run
2014-05-10 10:52:59 -04:00
npm install
This will install the required build dependencies, then run
2019-09-15 14:56:22 -04:00
npm run dev
2014-05-10 10:52:59 -04:00
2016-07-04 14:30:51 -04:00
to spawn a development server. For information on contributing see [CONTRIBUTING.md ](https://github.com/liabru/matter-js/blob/master/CONTRIBUTING.md ).
2014-05-10 10:52:59 -04:00
2014-04-01 08:48:42 -04:00
### Changelog
2014-12-03 19:05:49 -05:00
To see what's new or changed in the latest version, see the [changelog ](https://github.com/liabru/matter-js/blob/master/CHANGELOG.md ).
2014-04-01 08:48:42 -04:00
2015-12-23 15:38:16 -05:00
### References
2014-02-19 09:15:05 -05:00
2016-07-04 14:30:51 -04:00
See the wiki page on [References ](https://github.com/liabru/matter-js/wiki/References ).
2014-02-19 09:15:05 -05:00
### License
2020-12-28 11:11:39 -05:00
Matter.js is licensed under [The MIT License (MIT) ](https://opensource.org/licenses/MIT )
2015-12-23 10:42:20 -05:00
Copyright (c) 2014 Liam Brummitt
2014-02-19 09:15:05 -05:00
2015-12-23 10:42:20 -05:00
This license is also supplied with the release and source code.
As stated in the license, absolutely no warranty is provided.