Matter.js入门案例

本文最后更新于：1 年前

在百度找半天找不到个合适的图形库，好不容易找个看起来差不多的，但是又没中文文档，或者写的很草率，所以打算自己写个文档
本章节是Matter.js的入门案例，和官网的文档内容是一致的。

前言

Matter.js 当前版本：0.18.0
一个基于JavaScript构建的，专为网页端设计的一个2D物理引擎。
主要的模块API如下：

  • 引擎[engine]
  • 渲染[render]
  • Runner
  • Body
  • Bodies
  • Composite
  • Composites
  • Constraint
  • MouseConstraint
  • Events
  • Common
  • 插件[plugin]

使用指南以及案例

  • 入门案例
  • 使用例程
  • 使用指南
  • demo
  • readme
  • 项目主页
  • Github
  • CodePen

    一个简单的入门案例

    运行效果

    微信图片_20220319162535

    安装

    从GitHub下载源码，然后解压出来，打开build目录，复制里面的matter.js出来，放到你的项目目录下，然后在要使用的页面中引用，主要有两种引用方式：

    使用script标签引入

    1
    <script src="matter.js"></script>

    使用npm包管理工具引入

    1
    npm install matter-js

    Webpack

    某些webpack的配置，包括默认配置可能会在开发期间影响你项目的性能，寻找解决方案去看issue

    核心js代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    // 给模块起别名，这样好调用
    var Engine = Matter.Engine,
        Render = Matter.Render,
        Runner = Matter.Runner,
        Bodies = Matter.Bodies,
        Composite = Matter.Composite;

    // 创建一个引擎
    var engine = Engine.create();

    // 创建一个渲染器
    var render = Render.create({
        element: document.body,
        engine: engine
    });

    // 创建两个盒子和一个支撑盒子的地面
    var boxA = Bodies.rectangle(400, 200, 80, 80);
    var boxB = Bodies.rectangle(450, 50, 80, 80);
    var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

    // 添加所有的物体到世界中
    Composite.add(engine.world, [boxA, boxB, ground]);

    // 运行渲染器
    Render.run(render);

    // 创建运行器
    var runner = Runner.create();

    // 运行引擎
    Runner.run(runner, engine);
    在你引入Matter.js的项目中，创建一个页面，引入Matter.js，然后将将这段代码放到body标签中的一个script标签中(或者在window的load事件中调用，也可以在dom的ready状态下调用)，然后在你的浏览器中打开这个页面，就可以了。
    如果不出意外的话你将看到两个正方形物体撞在一起，然后掉到地面上。如果你没有出现这个效果的话，建议你按F12，在console中查看你的错误信息。
    最好的学习方法就是看官方的例子，研究这些官方demo，然后引用Demo.js来看他们是如何实现的。其中一些例子也支持CodePen，你也可以在CodePen中运行，你可以在上面运行你的代码做实验（但是不一定完全是最新的）。

运行和渲染

这个例子用的是renderer和runner构建的，但是这俩全是可选的，你也可以不用，它很简单的可以用你自己的游戏主循环用你的方式来渲染。
你可以去Rendering和Running，看看官方文档来了解怎么操作。

官方文档