目录
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
GitHub 开源地址:https://github.com/liabru/matter-js
官方demo演示地址:http://brm.io/matter-js/demo/#mixed ——点击页面顶部中间下拉框可以切换演示示例——
官方deom源码地址:https://github.com/liabru/matter-js/tree/master/examples
codepen 在线编辑演示地址:https://codepen.io/collection/Fuagy/#
官方 API 文档地址:http://brm.io/matter-js/docs/
2、目前最新版 Matter.js 是 2018-06-11 更新的 0.14.2 版本。查看历史版本更新日志。
3、Matter.js 支持特性如下:
刚体(Rigid bodies) | 复合体(Compound bodies) | 复合材料(Composite bodies) |
凹面和凸面(Concave and convex hulls) | 物理特性(质量、面积、密度等) | 恢复原状(弹性和非弹性碰撞) |
碰撞(粗略阶段、中间阶段、精细阶段) | 稳定的堆叠和静止 | 动量守恒( Conservation of momentum) |
摩擦力和阻力(Friction and resistance) | 事件监听(Events) | 约束(Constraints) |
重力(Gravity) | 睡眠和静态物体 | 圆角(倒角)Rounded corners (chamfering) |
视图(平移、缩放) Views (translate, zoom) | 碰撞查询(射线追踪、区域测试) | 时间缩放(减速、加速) |
Canvas 渲染器(支持向量和纹理) | MatterTools 工具(创建、测试和调试) | 世界状态序列化,需要 resurrect.js |
跨浏览器(Chrome、Firefox、Safari、IE8+)和 Node.js 支持 | 兼容移动端(触摸、响应) | 原生 JS 实现 |
Matter-JS 下 载
1、Download the edge build (master) or get a stable release and include the script in your web page(需要下载最新版的,点击"edge build (master)";需要下载稳定版的,点击"stable release"。下载完成后,在页面中像如下引用即可):
<script src="matter.js" type="text/javascript"></script>
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 与 matter-js/build/matter.min.js 文件,前者是未压缩版,后者是压缩版,建议学校阶段使用前者,部署阶段使用后者。可以将整个项目下载下来,然后在 build 目录下可以找到它们,也可以像如下所示,直接将此文件保存下来。
4、打开 matter-js/build/matter.js 与 matter-js/build/matter.min.js 文件 后,点击右上角"Raw"按钮,然后 Ctrl + S 保存下来即可。如下所示为下载保存好的 matterJS 库(其中的_0.14.2是修改后的名字),压缩版和未压缩版都下载下来了,这和将整个项目下载下来然后找到里面的这两个文件,其内容完全是一样的。
Hello World
学习一门新的东西的时候,本人经验是,细节之处日后慢慢研究深入,项目得先跑起来再说。把之前下载好的 js 文件现在引入 Html 文件中,编码如下:
<!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 的使用细节,以及官网的各种案例将在后续文章中进行深入了解。