The Matter js demo code is collected here and changed from vanilla JS to JSX format for personal reference. This creates a front-end site with demos accessible by nav tabs. It was built with React, Matter.js, Node, Javascript, and CSS.
I also created some examples including ball pit, bubbles, mousetrap, jigsaw, and bike.
git clone https://github.com/sifzerda/matter-test.git
cd matter-test
npm install
npm run dev- Air Friction
- Avalanche
- Ball Pool
- Bridge
- Car
- Catapult
- Chains
- Circle Stack
- Cloth
- Collision Filtering
- Composite Manipulation
- Compound
- Compound Stack
- Concave
- Constraints
- Double Pendulum
- Events
- Friction
- Gravity
- Gyro
- Manipulation
- Mixed
- Newton's Cradle
- Pyramid
- Ragdoll
- Raycasting
- Restitution
- Rounded
- Sensors
- Sleeping
- Slingshot
- Soft Body
- Sprites
- Stack
- Static Friction
- Stats
- Stress
- Stress 2
- Stress 3
- Stress 4
- Substep
- SVG
- Terrain
- Timescale
- Views
- Wrecking Ball
- Ball Pit
- Bubbles [x]
- Bike [x]
- Mousetrap [x]
- Jigsaw:
- Render images on jigsaw pieces
- Enable pieces to lock once connected
- Piece positioning on board
- Air Hockey
- Need pathseg polyfill:
The SVG and Terrain examples get this error:
TypeError: Cannot read properties of undefined (reading 'body')
at Body.setVertices (matter.js:1941:25)
at Body.set (matter.js:1804:22)
at _initProperties (matter.js:1730:14)
at Body.create (matter.js:1688:9)
at Bodies.fromVertices (matter.js:5506:29)
at Body.setVertices = function(body, vertices) {
// change vertices
if (vertices[0].body === body) {
body.vertices = vertices;
} else {
body.vertices = Vertices.create(vertices, body);
}You have to use the SVGPathSeg polyfill. Download pathseg.js and put into server folder (backend client/server) or client folder same level as index.html (front-end). Paste this into your index.html:
<script src="pathseg.js"></script>- Need poly-decomp:
Need to install poly-decomp or you get this error:
matter-js: Bodies.fromVertices: Install the 'poly-decomp' library and use Common.setDecomp or provide 'decomp' as a global to decompose concave vertices.Add this to the SVG component:
import decomp from 'poly-decomp';
window.decomp = decomp;- Some CSS formatting needed:
- Resizing game screen window sizes
- Assets not loading in:
- SVG
- Jigsaw
- Sprites
- Components not loading:
- Air Hockey
- Avalanche
- Ball Pool
- Terrain
- Components with no content:
- Convex (need to add)
- Motor
Optimization:
- use react-virtualized to only render visible stuff
- once game basically running, convert it into Redux or Zustand
- use a bundler like Webpack or Parcel to optimize build output: Enable code splitting, tree-shaking, and minification to reduce bundle size and improve load times.
- Consider memoizing components like Projectile and Particle using React.memo to prevent unnecessary re-renders, especially if their props rarely change.
- [ ]
- [ ]
- [ ]
- [ ]
For support, users can contact tydamon@hotmail.com.
Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
- Fork the Project
- Create your Feature Branch (git checkout -b feature/NewFeature)
- Commit your Changes (git commit -m 'Add some NewFeature')
- Push to the Branch (git push origin feature/NewFeature)
- Open a Pull Request
The author acknowledges and credits those who have contributed to this project including:
- Matter.js
- ChatGPT
Distributed under the MIT License. See LICENSE.txt for more information.
This project is incomplete.