MatterJS

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

      Install

      使用 NPM

      1. npm install @eva/plugin-matterjs

      在浏览器中

      1. <script src=“https://unpkg.com/@eva/plugin-matterjs@1.2.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’, (gameObject1, gameObject2) => {});
      76. console.log(“physics”,physics);

      参数

      type PhysicsType

      碰撞包围盒的形状

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

      sides

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

      radius

      当 type 为 POLYGON 和 CIRCLE 时的半径

      bodyOptions

      相关属性，可参考 Matterjs官网

      ,