Matter-JS Bodies 内置刚体模块

Dear 丶 2022-04-10 08:47 320阅读 0赞

本文承接《[ Matter-JS 入门教程][Matter-JS]》

**目录**

Matter.Bodies 内置刚体

Matter.Body 自定义刚体

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

# Matter.Bodies 内置刚体 #

1、物体或者叫刚体，在物理引擎里特指坚硬的物体，具有固定的形状，不能形变。刚体可以用于表示一个箱子、一个球或是一块木头，每个物体都有自己的物理属性，如质量、速度、摩擦力、角度等，还可以设置刚体的标记。

2、Matter.Bodies 模块中内置了几种常见的刚体，如矩形 Matter.rectangle、多边形 Matter.polygon、圆形 Matter.circle 、梯形 Matter.trapezoid 等。

3、Matter.Bodies 官网API：[http://brm.io/matter-js/docs/classes/Bodies.html\#method\_fromVertices][http_brm.io_matter-js_docs_classes_Bodies.html_method_fromVertices]

<!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>
        <script type="text/javascript">
            window.onload = function () {
                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({
                    engine: engine,
                    element: document.body,
                    options: {//指定舞台大小
                        width: 800,
                        height: 600,
                        showVelocity: true//showVelocity表示显示速度
                    }
                });
    
                /**添加鼠标控制
                 * Matter.MouseConstraint.create(engine, options)
                 * 第一个参数是引擎 engine，第二个参数是一个json对象，用于设置属性，
                 */
                var mouseConstraint = Matter.MouseConstraint.create(engine, {});
                /**创建刚体
                 * Bodies.rectangle = function(x, y, width, height, options)
                 * x,y 分别表示矩形中心点的坐标，坐标的原点(0,0)在 Canvas(画布)的左上角
                 * width,height 分别表示矩形的宽和高
                 * options：描述矩形的参数，是一个 json 对象
                 * @type {body}
                 */
                var boxA = Bodies.rectangle(250, 0, 80, 80);//绘制矩形。
                var circle = Bodies.circle(300, 50, 25);//绘制圆。（300,50）表示圆心坐标点，25 表示半径
                var polygon = Bodies.polygon(350, 100, 5, 25);//绘制多边形。(350,100)表示多边形中心点，5表示多边形边数，25表示半径
                var trapezoid = Bodies.trapezoid(500, 100, 50, 80, 1);//绘制梯形。(500,100)表示梯形中心坐标，50表示宽，80表示高，1表示斜坡率(slope)
    
                //创建矩形作为陆地,isStatic=true 表示物体静止
                var ground = Bodies.rectangle(400, 570, 800, 60, {isStatic: true});
    
                //将所有物体添加到世界中
                World.add(engine.world, [boxA, circle, polygon, trapezoid, mouseConstraint, ground]);
                Engine.run(engine);//运行引擎
                Render.run(render);//运行渲染器
            }
        </script>
    </head>
    <body>
    </body>
    </html>

![20190101164442320.gif][]

# Matter.Body 自定义刚体 #

The Matter.Body module contains methods for creating and manipulating body models. A Matter.Body is a rigid body that can be simulated by a Matter.Engine. Factories for commonly used body configurations (such as rectangles, circles and other polygons) can be found in the module Matter.Bodies.

（body 模块包含用于创建和操作实体模型的方法。物体是一个可以被物质引擎模拟的刚性物体 。）

Matter.Body 官网 API 地址：[http://brm.io/matter-js/docs/classes/Body.html][http_brm.io_matter-js_docs_classes_Body.html]

**Matter.Body.create(options) → Body** ：方法用于创建新的刚体模型。

选项参数是一个对象，用于指定要覆盖默认值的任何属性。所有属性都有默认值，许多属性都是根据其他属性自动预先计算的。顶点必须按顺时针顺序指定。

<!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>
        <script type="text/javascript">
            window.onload = function () {
                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({
                    engine: engine,
                    element: document.body,
                    options: {
                        width: 800,//指定舞台尺寸大小
                        height: 400,
                        showVelocity: true,//showVelocity:true 表示显示速度，默认不显示
                        wireframes: false//启用全局实体渲染，默认是线框模式
                    }
                });
                /**创建刚体*/
                var boxA = Bodies.rectangle(400, 0, 300, 60);//创建矩形
                var boxB = Bodies.rectangle(400, 0, 60, 300);//矩形
    
                /**Matter.Body.create() 用于生成物体时，如果不传入参数，会在左上角（0,0）出生成一个物体。
                 * 参数 parts 将数组中的多个物体结合生成新的物体。
                 * Body.create()方法参数是一个json对象，其中有许多的属性，同理只需要覆盖需要的即可*/
                var cross = Matter.Body.create({parts: [boxA, boxB]});
    
                //创建矩形作为陆地。isStatic=true 表示物体静止。
                var ground = Bodies.rectangle(400, 370, 800, 60, {isStatic: true});
    
                //将所有物体添加到世界中
                World.add(engine.world, [cross, ground]);
                Engine.run(engine);//运行引擎
                Render.run(render);//运行渲染器
            }
        </script>
    </head>
    <body>
    </body>
    </html>

![20190101160847473.gif][]

[Matter-JS]: https://blog.csdn.net/wangmx1993328/article/details/85468537
[http_brm.io_matter-js_docs_classes_Bodies.html_method_fromVertices]: http://brm.io/matter-js/docs/classes/Bodies.html#method_fromVertices
[20190101164442320.gif]: /images/20220401/07c195b8340f405c9aee08f35d9e7b54.png
[http_brm.io_matter-js_docs_classes_Body.html]: http://brm.io/matter-js/docs/classes/Body.html
[20190101160847473.gif]: /images/20220401/e656c71e67494781a0a9488887f022cf.png