matter-js

<img alt="Matter.js" src="https://yellow-cdn.veclightyear.com/835a84d5/b1652fbb-e7e2-43e8-9dd3-03f777ef8d4d.svg" width="300">

Matter.js 是一个用于网页的JavaScript 2D刚体物理引擎

brm.io/matter-js

演示 ・ 作品展示 ・ 特性 ・ 插件 ・ 安装 ・ 使用 ・ 示例 ・ 文档 ・ Wiki ・ 参考资料 ・ 许可证

演示

<table> <tr> <td> <ul> <li><a href="https://brm.io/matter-js/demo/#mixed">混合形状</a></li> <li><a href="https://brm.io/matter-js/demo/#mixedSolid">实心形状</a></li> <li><a href="https://brm.io/matter-js/demo/#svg">凹形SVG路径</a></li> <li><a href="https://brm.io/matter-js/demo/#terrain">凹形地形</a></li> <li><a href="https://brm.io/matter-js/demo/#concave">凹形物体</a></li> <li><a href="https://brm.io/matter-js/demo/#compound">复合物体</a></li> <li><a href="https://brm.io/matter-js/demo/#newtonsCradle">牛顿摆</a></li> <li><a href="https://brm.io/matter-js/demo/#wreckingBall">拆除球</a></li> <li><a href="https://brm.io/matter-js/demo/#slingshot">弹弓游戏</a></li> <li><a href="https://brm.io/matter-js/demo/#rounded">圆角</a></li> <li><a href="https://brm.io/matter-js/demo/#views">视图</a></li> <li><a href="https://brm.io/matter-js/demo/#timescale">时间缩放</a></li> <li><a href="https://brm.io/matter-js/demo/#manipulation">物体操作</a></li> <li><a href="https://brm.io/matter-js/demo/#compositeManipulation">复合体操作</a></li> </ul> </td> <td> <ul> <li><a href="https://brm.io/matter-js/demo/#raycasting">光线投射</a></li> <li><a href="https://brm.io/matter-js/demo/#sprites">精灵图</a></li> <li><a href="https://brm.io/matter-js/demo/#pyramid">金字塔</a></li> <li><a href="https://brm.io/matter-js/demo/#car">汽车</a></li> <li><a href="https://brm.io/matter-js/demo/#catapult">投石机</a></li> <li><a href="https://brm.io/matter-js/demo/#gravity">反重力</a></li> <li><a href="https://brm.io/matter-js/demo/#bridge">桥梁</a></li> <li><a href="https://brm.io/matter-js/demo/#avalanche">雪崩</a></li> <li><a href="https://brm.io/matter-js/demo/#softBody">基础软体</a></li> <li><a href="https://brm.io/matter-js/demo/#cloth">布料</a></li> <li><a href="https://brm.io/matter-js/demo/#events">事件</a></li> <li><a href="https://brm.io/matter-js/demo/#collisionFiltering">碰撞过滤</a></li> <li><a href="https://brm.io/matter-js/demo/#chains">链条</a></li> <li><a href="https://brm.io/matter-js/demo/#ballPool">球池</a></li> </ul> </td> <td> <ul> <li><a href="https://brm.io/matter-js/demo/#stack">堆叠</a></li> <li><a href="https://brm.io/matter-js/demo/#circleStack">圆形堆叠</a></li> <li><a href="https://brm.io/matter-js/demo/#compoundStack">复合体堆叠</a></li> <li><a href="https://brm.io/matter-js/demo/#restitution">恢复系数</a></li> <li><a href="https://brm.io/matter-js/demo/#friction">摩擦力</a></li> <li><a href="https://brm.io/matter-js/demo/#airFriction">空气摩擦</a></li> <li><a href="https://brm.io/matter-js/demo/#staticFriction">静摩擦</a></li> <li><a href="https://brm.io/matter-js/demo/#sleeping">休眠</a></li> <li><a href="https://brm.io/matter-js/demo/#beachBalls">沙滩球</a></li> <li><a href="https://brm.io/matter-js/demo/#stress">压力测试1</a></li> <li><a href="https://brm.io/matter-js/demo/#stress2">压力测试2</a></li> <li><a href="https://brm.io/matter-js/demo/#sensors">传感器</a></li> </ul> <br> </td> </tr> </table>

作品展示

看看其他人如何使用matter.js物理引擎

• Patrick Heng 由 Patrick Heng 制作
• USELESS 由 Nice and Serious 制作
• Secret 7 由 Goodness 制作
• New Company 由 New Company 制作
• 年度游戏 由 Google 制作
• Pablo 火烈鸟 由 Nathan Gordon 制作
• Kalia先生的变形记 由 Lab212 制作
• Phaser 由 Photon Storm 制作
• 对不起我没有过滤器 由 Jessica Walsh 制作
• Fuse 由 Fuse 制作
• Glyphfinder 由 überdosis 制作
• 隔离 由 sabato studio 制作
• 更多...

特性

• 刚体
• 复合体
• 组合体
• 凹凸外壳
• 物理属性（质量、面积、密度等）
• 恢复系数（弹性和非弹性碰撞）
• 碰撞检测（广义阶段、中间阶段和狭义阶段）
• 稳定堆叠和静止
• 动量守恒
• 摩擦力和阻力
• 事件
• 约束
• 重力
• 休眠和静态物体
• 插件
• 圆角（倒角）
• 视图（平移、缩放）
• 碰撞查询（光线投射、区域测试）
• 时间缩放（慢动作、加速）
• Canvas 渲染器（支持矢量和纹理）
• MatterTools 用于创建、测试和调试世界
• 世界状态序列化（需要 resurrect.js）
• 跨浏览器和 Node.js 支持（Chrome、Firefox、Safari、IE8+）
• 移动设备兼容（触摸、响应式）
• 原创 JavaScript 物理实现（非移植版本）

安装

你可以使用包管理器 npm 和 Yarn 进行安装：

npm install matter-js

或者你可以下载稳定版本或尝试最新的实验性alpha 版本（master 分支），并在网页中引入脚本：

<script src="matter.js" type="text/javascript"></script>

与其他工具（如 Webpack、Vue 等）一起使用时的性能

打包工具和框架在使用默认配置时可能会降低实时性能，尤其是在开发模式下。

使用 Webpack 时，默认的 sourcemap 配置可能会产生较大影响，解决方案请参见问题。

使用 Vue.js 时，观察者可能会产生较大影响，解决方案请参见问题。

使用方法

访问 入门指南 wiki 页面，查看适用于浏览器和 Node.js 的最小使用示例。 另外，请查看 运行 和 渲染 wiki 页面，了解如何使用你自己的游戏和渲染循环。

教程

查看 教程 列表。

示例

查看 examples 目录，其中包含所有 演示 的源代码。 在 codepen 上还有更多示例。

插件

引擎可以通过插件进行扩展，请参考以下资源：

• 使用插件
• 创建插件
• 插件列表
• matter-plugin-boilerplate

文档

查看 API 文档 和 wiki

构建和贡献

要构建项目，首先需要安装 node.js，然后运行

npm install

这将安装所需的构建依赖项，然后运行

npm run dev

以启动开发服务器。有关贡献的信息，请参阅 CONTRIBUTING.md。

更新日志

要查看最新版本的新增或更改内容，请查看 更新日志。

参考资料

请查看 wiki 页面上的 参考资料。

许可证

Matter.js 使用 MIT 许可证 授权 版权所有 (c) 2014 Liam Brummitt

此许可证随发行版和源代码一同提供。 如许可证所述，绝对不提供任何担保。