Cax + Matter-js 物理引擎结合使用
最初试过 box2dweb 与 cax框架 结合使用,发现 box2dweb 的代码会导致 webpack 编译出的 cax 包模块执行顺序乱套。 box2dweb 貌似也没有官方文档和维护地址,所以弃坑转战 Matter-js。
Matter-js 是 Github 上最流行的 Web 2D 物理引擎,主要有如下特性:
- 支持刚体、混合体、复合体
- 支持凹凸多边形刚体
- 支持刚体间约束条件
- 内置睡眠与静止身体
- 物理模拟时间加快变慢
- 移动兼容(触摸事件和PC鼠标事件响应)
- 物理性质(质量、面积、密度、动量守恒、摩擦阻力、重力、弹性或非碰撞检测以及恢复等)
开始结合 Cax 和 Matter-js
引入 js
先在 HTML 引入 matter-js 和 cax, 你可以通过 npm 或 cdn 获取 js:
- unpkg.com/matter-js
- unpkg.com/cax
准备工作
页面添加 Canvas
<canvas id="myCanvas" width="800" height="600"></canvas>
复制代码
提前声明好变量:
var Engine = Matter.Engine,Render = Matter.Render,World = Matter.World,Bodies = Matter.Bodies,Composites = Matter.Composites,Body = Matter.Body,Constraint = Matter.Constraint,MouseConstraint = Matter.MouseConstraint,Common = Matter.Common,Events = Matter.Events,Composite = Matter.Composite
复制代码
创建刚体
Bodies.rectangle(100, 49, 800, 44, { isStatic: true })
复制代码
- 前四个参数分别代表 x y width height。需要注意的是 x 和 y 是矩形中心的坐标
isStatic
为 true 的话代表是静止刚体,不传或者传 false 为可运动刚体。
创建四面墙并添加到世界
// 创建引擎
var engine = Engine.create();// 创建四面墙壁墙壁并添加到世界
var offset = 10;
World.add(engine.world, [Bodies.rectangle(400, 600 - offset, 800, offset * 2, { isStatic: true }),Bodies.rectangle(400, offset, 800, offset * 2, { isStatic: true }),Bodies.rectangle(offset, 300, offset * 2, 600, { isStatic: true }),Bodies.rectangle(800 - offset, 300, offset * 2, 600, { isStatic: true }),
]);
复制代码
创建物体并添加到世界
var stack = Composites.stack(20, 20, 6, 4, 0, 0, function (x, y) {if (Common.random() > 0.5) {return Bodies.rectangle(x, y, 64, 64, {bitmap: new cax.Bitmap("img/box.jpg")});} else {return Bodies.circle(x, y, 46, {desity: 0.0005,frictionAir: 0.06,friction: 0.01,bitmap: new cax.Bitmap("img/basketball.png"),});}
});World.add(engine.world, stack);
复制代码
通过Composites.stack(xx, yy, columns, rows, columnGap, rowGap, callback)
可以用来创建物体堆。 参数xx,yy分别为物体堆中第一个物体的x和y坐标,columns和 rows分别为所要创建的物体堆的列数和行数,columnGap和rowGap分别为物体与物体之间的列间隙和行间隙,最后,由var body = callback(x, y, column, row, lastBody, i); 可以看出callback为生成的具体物体的方法。
看以看到,创建的时候挂在 bitmap 上去用户后续的渲染。
发动引擎
Engine.run(engine)
复制代码
初始化渲染墙壁和物体
var bodies = Composite.allBodies(engine.world);for (var i = 0; i < bodies.length; i += 1) {var obj = bodies[i]if (obj.bitmap) {obj.bitmap.x = obj.position.xobj.bitmap.y = obj.position.yif (obj.label === 'Circle Body') {obj.bitmap.scaleX = obj.bitmap.scaleY = 92 / 128obj.bitmap.originX = 64obj.bitmap.originY = 64obj.bitmap.rotation = obj.angle * 180 / Math.PI} else {obj.bitmap.scaleX = obj.bitmap.scaleY = 64 / 200obj.bitmap.originX = 100obj.bitmap.originY = 100obj.bitmap.rotation = obj.angle * 180 / Math.PI}stage.add(obj.bitmap)}
}//墙壁
var topRect = new cax.Rect(800, 20, { fillStyle: '#2CB044' })
stage.add(topRect)
var bottomRect = new cax.Rect(800, 20, { fillStyle: '#2CB044' })
bottomRect.y = 600 - 20
stage.add(bottomRect)
var leftTop = new cax.Rect(20, 600, { fillStyle: '#2CB044' })
stage.add(leftTop)
var rightRect = new cax.Rect(20, 600, { fillStyle: '#2CB044' })
rightRect.x = 800 - 20
stage.add(rightRect)
复制代码
- 通过
Composite.allBodies
可以拿到所以刚体 - 通过设置 bitmap 的 scaleX 和 scaleY 可以使 刚体大小和纹理大小对应起来
更新渲染舞台
cax.setInterval(function () {var bodies = Composite.allBodies(engine.world);for (var i = 0; i < bodies.length; i += 1) {var obj = bodies[i]if (obj.bitmap) {obj.bitmap.x = obj.position.xobj.bitmap.y = obj.position.yobj.bitmap.rotation = obj.angle * 180 / Math.PI}}stage.update()
}, 16)
复制代码
添加 Matter-js 内置 Debug Canvas
var render = Render.create({element: document.body,engine: engine,options: {wireframes: false}
});
var renderOptions = render.options;renderOptions.wireframes = true;
Render.run(render);
复制代码
最终效果:
【→ 在线演示】
Cax + Matter-js 物理引擎结合使用相关推荐
- JS物理引擎p2.js中文文档
本文复制于Github p2.js项目的中文维基页面,鉴于国内访问Github网速不稳定,特粘贴到CSDN,促进知识更快传播,也希望有能力者继续完善此文档. 以下是原文,更新内容请查阅Github p ...
- cocos2d - JS 物理引擎 - chipmunk
物理引擎 - chipmunk : 生成物理世界 : 第一步 : 新建项目打开 project.json 将chipmunk模块导入 . "modules" : ["co ...
- 【Canvas】HTML5游戏开发的基本流程+P2.js物理引擎实战开发
<HTML5游戏开发的基本流程> * 1. HTML5的简述 * 2. HTML5游戏开发所需的环境与工具 * 2.1. 开发环境 * 2.1.1. 浏览器 * 2.1.2. 开发语言 * ...
- Three.js物理引擎与物体的相互作用——关联材质对摩擦力弹性影响、物体运动方式、作用力相关
vetor new CANNON.ContactMaterial构造方法用于设置Three.物理世界两种材质碰撞的参数 const defaultContactMaterial = new CANNO ...
- 使用 Phaser3+Matter.js 实现“合成大西瓜”游戏
前言 最近有一款"合成大西瓜"的小游戏有点火,试玩了一下,玩法比较简单,实现难度也不大,所以参照游戏原型自己实现了一下,游戏开发主要使用了 Phaser 游戏框架,本文主要分享游戏 ...
- 一篇上手LayaAir的3D物理引擎
昨天,我们分享了一篇2D物理文档<LayaAirIDE的可视化2D物理使用文档>. 今天,我们针对LayaAir引擎的初学者,以及对物理引擎使用不熟悉的开发者,再来分享一篇3D物理文档,本 ...
- 物理世界的互动之旅:Matter.js入门指南
点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 本文简介 戴尬猴,我是德育处主任 欢迎来到<物理世界的互动之旅:Matter.js入门指南>. 本文将带您探索 Matter. ...
- Cannon.js -- 3d物理引擎
文章目录 前言 一.关于Cannon.js 二.Cannon.js的使用 最后 注意点: 优化 事件 其他 本文完整代码下载: 相关链接: 前言 本篇将介绍Cannon.js -- 3d物理引擎的基础 ...
- 初见物理引擎库Cannon.js:使用dat.gui修改物体属性
0 前言 本文是"初见物理引擎库Cannon.js"系列的第二篇文章,在本文中主要讲解dat.gui的使用. 1 dat.gui简介 熟悉Three.js的读者肯定对dat.gui ...
最新文章
- GetLastError编号解释
- python怎么学最快-浅谈:从为什么学习python到如何学好python
- UVa11855 Buzzwords(hash)
- phpstudy免费安全检测服务_Phpstudy联合各大安全厂商为用户提供免费安全检测服务...
- 如何在README中使用图片
- Android Framework中的Application Framework层介绍
- csdn中一篇sock 经验贴..
- java jvm和android DVM区别
- ModuleNotFoundError: No module named ‘librosa‘
- POJ_1753解答过程的理解
- zookeeper和PHP zookeeper和kafka 扩展安装
- 5道经典面试题【转载】
- iar stm32_基于最新5.4电机库的STM32电机控制应用实战分享
- SiebelAdapter--具体干事的类,
- 初识C++——类与对象的详细说明(二)
- Parameter 1 of constructor in com.xxx.controller.Xxx required a bean of type
- vue3知识点:Suspense组件
- 快递收件寄件JAVA小程序技术描述_解析“微快递”小程序的交互流程
- 《爬虫》爬取谷歌网页“人脸”图片
- 基于ONVIF协议的(IPC)客户端程序开发-10 设备校时