Matter-JS 入门教程

客官°小女子只卖身不卖艺 2022-04-01 15:25 716阅读 0赞

**目录**

Matter-JS 简 介

Matter-JS 下 载

Matter-JS CDN 地址

Hello World

Matter-JS 概念剖析

--------------------

# Matter-JS 简 介 #

1、Matter.js is a 2D physics engine for the web (matter.js 是一个用于 web 的二维物理引擎)

> Matter.js 官网地址：[http://brm.io/matter-js/index.html][http_brm.io_matter-js_index.html]
> 
> GitHub 开源地址：[https://github.com/liabru/matter-js][https_github.com_liabru_matter-js]
> 
> 官方demo演示地址：[http://brm.io/matter-js/demo/\#mixed][http_brm.io_matter-js_demo_mixed]       ——点击页面顶部中间下拉框可以切换演示示例——
> 
> 官方deom源码地址：[https://github.com/liabru/matter-js/tree/master/examples][https_github.com_liabru_matter-js_tree_master_examples]
> 
> codepen 在线编辑演示地址：[https://codepen.io/collection/Fuagy/\#][https_codepen.io_collection_Fuagy]
> 
> 官方 API 文档地址：[http://brm.io/matter-js/docs/][http_brm.io_matter-js_docs]

2、目前最新版 Matter.js 是 2018-06-11 更新的  [0.14.2 ][0.14.2]版本。查看[历史版本][Link 1]更新日志。

3、Matter.js 支持特性如下：

<table> 
 <tbody> 
  <tr> 
   <td>刚体(Rigid bodies)</td> 
   <td>复合体(Compound bodies)</td> 
   <td>复合材料（Composite bodies）</td> 
  </tr> 
  <tr> 
   <td>凹面和凸面(Concave and convex hulls)</td> 
   <td>物理特性（质量、面积、密度等）</td> 
   <td>恢复原状（弹性和非弹性碰撞）</td> 
  </tr> 
  <tr> 
   <td>碰撞（粗略阶段、中间阶段、精细阶段）</td> 
   <td>稳定的堆叠和静止</td> 
   <td>动量守恒(&nbsp; Conservation of momentum)</td> 
  </tr> 
  <tr> 
   <td>摩擦力和阻力（Friction and resistance）</td> 
   <td>事件监听(Events)</td> 
   <td>约束(Constraints)</td> 
  </tr> 
  <tr> 
   <td>重力(Gravity)</td> 
   <td>睡眠和静态物体</td> 
   <td>圆角（倒角）Rounded corners (chamfering)</td> 
  </tr> 
  <tr> 
   <td>视图（平移、缩放）&nbsp;Views (translate, zoom)</td> 
   <td>碰撞查询（射线追踪、区域测试）</td> 
   <td>时间缩放（减速、加速）</td> 
  </tr> 
  <tr> 
   <td>Canvas 渲染器（支持向量和纹理）</td> 
   <td>MatterTools 工具（创建、测试和调试）</td> 
   <td>世界状态序列化，需要 resurrect.js</td> 
  </tr> 
  <tr> 
   <td>跨浏览器（Chrome、Firefox、Safari、IE8+）和 Node.js 支持</td> 
   <td>兼容移动端（触摸、响应）</td> 
   <td>原生 JS 实现</td> 
  </tr> 
 </tbody> 
</table>

# Matter-JS 下 载 #

1、Download the [edge build (master)][edge build _master] or get a [stable release][] and include the script in your web page(需要下载最新版的，点击"[edge build (master)][edge build _master]"；需要下载稳定版的，点击"[stable release][]"。下载完成后，在页面中像如下引用即可)：

2、You can also install using the package managers [Bower][] and [NPM][](或者使用包管理器Bower和NPM进行安装)：

bower install matter-js
    npm install matter-js

3、下载的方式多种多样，但归根到底就是获取 [matter-js/build/matter.js ][edge build _master]与 [matter-js/build/matter.min.js][matter-js_build_matter.min.js] 文件，前者是未压缩版，后者是压缩版，建议学校阶段使用前者，部署阶段使用后者。可以将整个项目下载下来，然后在 build 目录下可以找到它们，也可以像如下所示，直接将此文件保存下来。

![20181231163002143.gif][]

4、打开 [matter-js/build/matter.js ][edge build _master]与 [matter-js/build/matter.min.js][matter-js_build_matter.min.js] 文件 后，点击右上角"Raw"按钮，然后 Ctrl + S 保存下来即可。如下所示为下载保存好的 matterJS 库(其中的\_0.14.2是修改后的名字)，压缩版和未压缩版都下载下来了，这和将整个项目下载下来然后找到里面的这两个文件，其内容完全是一样的。

![2018123116394042.png][]

# Matter-JS CDN 地址 #

1、除了下载 Matter-JS 到本地来使用，也可以直接使用网络上的 cdn 地址。

2、常用的 JS CDN 站点有 [cdnjs ][cdnjs]、[bootcdn][] 等，如下所示，随便引入哪一个到 html 文件中都可以正常使用。

# Hello World #

学习一门新的东西的时候，本人经验是，细节之处日后慢慢研究深入，项目得先跑起来再说。把之前下载好的 js 文件现在引入 Html 文件中，编码如下：

![2018123117173681.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>Matter-JS</title>
        <script src="../js/matter_0.14.2.js"></script>
    </head>
    <body>
    <script type="text/javascript">
        var Engine = Matter.Engine;//引擎.引擎模块包含创建和操作引擎的方法
        var Render = Matter.Render;//基于HTML5画布的渲染器
        var World = Matter.World;//演出舞台. Matter.js 中任何的物体都需要一个舞台/容器，而存放这些物体的地方，则称之为World(世界)
        var Bodies = Matter.Bodies;//用于创建各种形状的物体，物体必须添加到Wolrd中，然后由引擎运行世界
    
        var engine = Engine.create();
        //render(渲染器)将要渲染的物理引擎是上面的engine，而渲染的对象是html网页的body
        var render = Render.create({element: document.body, engine: engine});
    
        /**
         * Bodies.rectangle = function(x, y, width, height, options)
         * x,y 分别表示矩形中心点的坐标，坐标的原点(0,0)在 Canvas(画布)的左上角
         * width,height 分别表示矩形的宽和高
         * options：描述矩形的参数，是一个 json 对象
         * @type {body}
         */
        var boxA = Bodies.rectangle(200, 0, 80, 80);
        var boxB = Bodies.rectangle(450, 100, 80, 80);
        //将isStatic设为true，表示物体静止
        var ground = Bodies.rectangle(400, 510, 810, 60, {isStatic: true});
        World.add(engine.world, [boxA, boxB, ground]);// 将所有物体添加到世界中
        Engine.run(engine);//运行引擎
        Render.run(render);//运行渲染器
    </script>
    </body>
    </html>

对于 Matter.js 的使用细节，以及官网的各种案例将在后续文章中进行深入了解。

# Matter-JS 概念剖析 #

1）物理引擎

（1）物理引擎是一个计算机程序，使用质量、速度、加速度、摩擦力和空气阻力等物理变量，模拟了一个近似真实的物理系统，为物体赋予真实的物理效果，比如重力、旋转和碰撞等效果，让物体的行为表现的更加趋向真实。

（2）Matter.js is a 2D physics engine for the web (matter.js 是一个用于 web 的二维物理引擎)，从  2014-02-28 的 0.5.0-alpha 开始到 2018-06-11 的 0.14.2 版本。

2）Engine（引擎）与 World（世界）

（1）The Matter module is the top level namespace. It also includes a function for installing plugins on top of the library.

(Matter 模块是顶级命名空间，它还包括在库的顶部安装插件的功能。)

（2）The Matter.Engine module contains methods for creating and manipulating engines. An engine is a controller that manages updating the simulation of the world.

(引擎模块包含创建和操作引擎的方法，引擎是管理世界模拟更新的控制器，可以控制时间的缩放，可以检测所有的碰撞事件，并且拿到所有碰撞的物体对pairs）

（3）Matter.js 中任何的物体都需要一个容身处，而存放这些物体的地方，则称之为世界 World。物体必须添加到世界里，然后由引擎运行这个世界。Matter.World 模块包含了创建和操作世界的方法。一个 Matter.World 相当于一个复合物体，物体、约束的聚合体，其次世界还有额外的一些属性，比如重力、边界等。

3）Render(渲染器)

（1）Matter.Render 是将实例渲染到 Canvas 中的渲染器，控制视图层的样式，它的主要作用是用于开发和调试。默认情况下 Matter.Render 将只显示物体的线框（轮廓），这对于开发和调试很有帮助，但如果需要使用到全局实体渲染则需要将线框模式关闭 render.options.wireframes = false，另外它同样也适合制作一些简单的游戏，因为它包括了一些绘图选项、线框、向量、Sprite 精灵和视窗功能。

[http_brm.io_matter-js_index.html]: http://brm.io/matter-js/index.html
[https_github.com_liabru_matter-js]: https://github.com/liabru/matter-js
[http_brm.io_matter-js_demo_mixed]: http://brm.io/matter-js/demo/#mixed
[https_github.com_liabru_matter-js_tree_master_examples]: https://github.com/liabru/matter-js/tree/master/examples
[https_codepen.io_collection_Fuagy]: https://codepen.io/collection/Fuagy/#
[http_brm.io_matter-js_docs]: http://brm.io/matter-js/docs/
[0.14.2]: https://github.com/liabru/matter-js/tree/master/build
[Link 1]: https://github.com/liabru/matter-js/blob/master/CHANGELOG.md
[edge build _master]: https://github.com/liabru/matter-js/blob/master/build/matter.js
[stable release]: https://github.com/liabru/matter-js/releases
[Bower]: http://bower.io/search/?q=matter-js
[NPM]: https://www.npmjs.org/package/matter-js
[matter-js_build_matter.min.js]: https://github.com/liabru/matter-js/blob/master/build/matter.min.js
[20181231163002143.gif]: /images/20220401/68c425f44d824b2dbf1650653c103f20.png
[2018123116394042.png]: /images/20220401/3b5d4ebbb25849a3b85aebd72bb7168c.png
[cdnjs]: https://cdnjs.com/
[bootcdn]: https://www.bootcdn.cn/
[2018123117173681.gif]: /images/20220401/07d0907ec10b4198b442e91c4e50ced4.png