MatterJS

Eva.js 基于 Matterjs 的物理引擎，目前只接入了小部分内容，如需更多人容可持续接入。

Install

使用 NPM

  1. npm install @eva/plugin-matterjs

在浏览器中

  1. <script src="https://unpkg.com/@eva/plugin-matterjs@1.1.x/dist/EVA.plugin.renderer.matterjs.min.js"></script>

使用

  1. import {Physics} from '@eva/plugin-matterjs';
  2. // 1.安装物理引擎后引入
  3. import {PhysicsSystem, Physics, PhysicsType} from '@eva/plugin-matterjs';
  5. // 2.在Eva.js中注册插件
  6. const game = new Game({
  7.   autoStart: true,
  8.   frameRate: 60,
  9.   systems: [
  10.     new RendererSystem({
  11.       transparent: true,
  12.       canvas: canvasNode,
  13.       backgroundColor: 0xfee79d,
  14.       width: 750,
  15.       height: 1624,
  16.       resolution: 2,
  17.     }),
  18.     new GraphicsSystem(),
  19.     new PhysicsSystem({
  20.       resolution: 2, // 保持RendererSystem的resolution一致
  21.       // isTest: true, // 是否开启调试模式
  22.       // element: document.getElementById('game-container'), // 调试模式下canvas节点的挂载点
  23.       world: {
  24.         gravity: {
  25.           y: 2, // 重力
  26.         },
  27.       },
  28.       mouse: {
  29.         open: true,
  30.       },
  31.     }),
  32.     new TextSystem(),
  33.     new ImgSystem(),
  34.     new EventSystem(),
  35.   ],
  36. });
  38. // 3.新建游戏实体对象
  39. const box = new GameObject('box', {
  40.   size: {
  41.     width: 75,
  42.     height: 75,
  43.   },
  44.   position: {
  45.     x: 75 + Math.random() * 300,
  46.     y: 75,
  47.   },
  48.   // origin 会映射为物理系统的质心，二维环境下即物理的几何中心，此处必须固定为 {x:0.5,y:0.5}
  49.   origin: {
  50.     x: 0.5,
  51.     y: 0.5,
  52.   },
  53. });
  54. // 4.给游戏对象添加Componet
  55. const physics = box.addComponent(
  56.   new Physics({
  57.     type: PhysicsType.RECTANGLE,
  58.     bodyOptions: {
  59.         isStatic: false, // 物体是否静止，静止状态下任何作用力作用于物体都不会产生效果
  60.         restitution: 0.8,
  61.         frictionAir: 0.1,
  62.         friction: 0,
  63.         frictionStatic: 0,
  64.         force: {
  65.           x: 0,
  66.           y: 0,
  67.         },
  68.     },
  69.     stopRotation: true, // 默认false，通常不用设置
  70.   }),
  71. );
  72. //目前支持的碰撞事件 collisionStart  collisionActive  collisionEnd
  73. //刚体事件 tick,beforeUpdate,afterUpdate,beforeRender,afterRender,afterTick 通常使用beforeUpdate和afterUpdate即可
  74. physics.on('collisionStart', (body, gameObject1, gameObject2) => {});
  76. console.log("physics",physics);

参数

type PhysicsType

碰撞包围盒的形状

  • RECTANGLE 矩形
  • CIRCLE 圆形
  • POLYGON 等边多边形

sides

当type为 POLYGON 的时候，设置包围盒的边数

radius

当 type 为 POLYGON 和 CIRCLE 时的半径

bodyOptions

相关属性，可参考 Matterjs官网